高仿国美在线 顶部实现
【摘要】
视频课堂https://edu.csdn.net/course/play/7621
具体HTML页面代码 如下：
<body style="text-align:center;"> <div id="header"> <div id="top"><img src="i...
视频课堂https://edu.csdn.net/course/play/7621
具体HTML页面代码 如下：
-
<body style="text-align:center;">
-
<div id="header">
-
<div id="top"><img src="img/top.jpg"/></div><!-- 图片 -->
-
<div id="nav">
-
<ul id="left">
-
<li><a href="https://club.gome.com.cn/?intcmp=sy-public01053">国美会员</a></li>
-
<li>登录</li>
-
<li><a href="#" style="color:#f5004b;float:left;">注册有礼</a><i></i></li>
-
</ul>
-
<ul id="right">
-
<li>我的订单</li>
-
<li>我的国美</li>
-
<li>企业采购</li>
-
<li id="service"><em></em><a href="#" style="color:#f5004b;float:left;margin-left:5px;">服务中心</a></li>
-
<li>网站导航</li>
-
<li id="phone"><em></em><a href="#" style="float:left;margin-left:5px;">手机国美</a></li>
-
</ul>
-
</div><!-- 定义会员登录行,结束 -->
-
<div id="cate">
-
<ul id="cateu">
-
<li id="logo"><a href="#"></a></li>
-
<li id="two"><a href="#"></a></li>
-
<li><a href="#">影视</a></li>
-
<li><a href="#">食品</a></li>
-
<li><a href="#">家具</a></li>
-
<li><a href="#">健康</a></li>
-
<li><a href="#">母婴</a></li>
-
<li><a href="#">海购</a></li>
-
<li><a href="#">汽车</a></li>
-
<li><a href="#">金融</a></li>
-
</ul>
-
</div><!-- 横向导航菜单 -->
-
</div>
-
</body>
-
<style>
-
/*只出来一个横线，这叫做浮动塌陷;父元素包含子元素，父元素不设置高度；子元素全部浮动，则会出来浮动塌陷，像一条线；
-
ul li div:都叫块状元素；特征：独占一行； 可以设置宽 高;
-
*/
-
*{font-size:14px;margin:0px;padding:0px;}
-
ul#left{/*border:1px solid #f00; 含义 1像素 固定边框 红色;*/
-
overflow:auto;/*让父元素自动适应子元素*/
-
float:left;/*左浮动*/
-
margin-top:0px;
-
}
-
ul#right{float:right;margin-right:20px;}
-
-
#top{background-color:#EAEAEA;margin:0px auto;}
-
#nav,#cate{width:1200px;margin:0px auto;overflow:auto;margin-top:10px;}
-
a{text-decoration:none;color:#CACACA;/*字体颜色*/}
-
/*选择器 选择器：空格表示下一级;逗号可以像java一样定义多个选择器，这样他们的属性值就一致了；*/
-
ul li{float:left;/*把li变成浮动元素*/
-
color:#CACACA;/*字体颜色*/
-
margin-left:15px;/*居左*/
-
list-style:none;/*把列表符号去掉*/
-
}
-
#cateu{overflow:auto;}
-
#cateu li{width:9.66%;margin:0px;padding:0px;height:50px;}
-
#cateu li a{float:left;color:#000;line-height:42px;padding:4px 0px 4px 0px;}
-
#cateu #logo,#cateu #two{margin-right:20px;}
-
#logo a{float:left;width:111px;height:42px;background:url(img/logo.png);background-size:111px 50px;}
-
#two a{float:left;width:100px;height:42px;background:url(img/touzi.gif);background-size:100px 50px;}
-
#left li i{background:url(img/ui.png);display: inline-block;
-
width:12px; height:13px;
-
background-position:-145px -1496px;
-
margin-left:5px; margin-top:-4px;
-
background-repeat: no-repeat;}
-
#right li em{background:url(img/ui.png);display:inline-block;
-
color: #dd00a7;background-position:-0px -513px;width:16px; height:16px;
-
padding-left:2px;float:left;
-
}
-
#right li#service{margin-top:0px;}
-
ul#right li#phone em{background:url(img/ui.png);display:inline-block;font-size: 17px;
-
background-position:-198px -134px;width:8px; height:16px;
-
color: #dd00a7;
-
margin-right: 6px;}
-
</style>
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/79131533
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）