导航布局案例

Original 2019-06-04 15:40:49 147
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>导航布局实战</title> <style type="text/css"> *{margin: 0px;padding: 0px;} a{text-dec

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>导航布局实战</title>

<style type="text/css">

*{margin: 0px;padding: 0px;}

a{text-decoration: none;color: #000;font-size: 13px;}

.clear{clear: both;}

#box{width: 100%;background-color: #F5F5F5;}

#box1{width: 1200px;margin: 0 auto;line-height: 40px;}

#box1 a:hover{color: #FF5000;}

.left{height: 40px;float: left;}

.left a{margin-right: 5px;}

.right{height: 40px;float: right;}

.right a{margin-right: 5px;}

.a{display: inline-block;height: 40px;width: 90px;text-align: center;}

.a:hover{background-color: #FFF;}

</style>

</head>

<body>

<div id="box">

<div id="box1">

<div class="left">

<a href="" class="a">中国大陆</a>

<a href="" style="color: #FF5000">亲,请登录</a>

<a href="">免费注册</a>

<a href="">手机逛淘宝</a>

</div>

<div class="right">

<a href="" class="a">我的淘宝</a>

<a href="">购物车</a>

<a href="" class="a">收藏夹</a>

<a href="">商品分类</a>

<a href="" class="a">卖家中心</a>

<a href="" class="a">联系客服</a>

<a href="" class="a">网站导航</a>

</div>

</div>

<div class="clear"></div>

</div>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-06-05 09:20:36
Teacher's summary:完成的不错。css样式学好,做出来的页面很绚丽。继续加油。

Release Notes

Popular Entries