html+css仿淘宝静态页⾯（1）
头部信息编写
淘宝图：
⼀、涉及知识
  1、⾃定义图标（字体）
  2、左右浮动
  3、列表制作导航栏
  4、⿏标指向超链接改变颜⾊
  5、CSS的@规则
⼆、代码
  1、index.html：
<body>
<!-- 头部信息 -->
<div id="headMessage" class="clearfix">
<ul class="fl">
<li>
<span>中国⼤陆</span>
<span class="iconfont"></span>
</li>
<li>
<a class="login mr7" href="#">亲，请登录</a>
<a href="#">免费注册</a>
</li>
<li>
<a href="#">⼿机逛淘宝</a>
</li>
</ul>
<ul class="fr">
<li>
<a href="#">我的淘宝</a>
<span class="iconfont"></span>
</li>
<li>
<span class="iconfont c_f40"></span>
<a href="#">购物车</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">
<span class="iconfont"></span>
收藏夹
</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li>|</li>
<li>
<a href="#">千⽜卖家中⼼</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#"></a>
<span class="iconfont"></span>
</li>
<li>
<span class="iconfont c_f40"></span>
<a href="#">⽹站导航</a>
<span class="iconfont"></span>
</li>
</ul>
</div>
</body>
  2、reset.css（样式重置）：
/
* 样式重置 */
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
img{
border: none;  /* ie浏览器⾥⾯会有 */淘宝代码生成器在线
vertical-align: middle;
}
a{
text-decoration: none;
color: #3c3c3c;
}
i{
font-style: normal;
}
button{
outline: none;
}
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;    color: #3c3c3c;
background-color: #f4f4f4;
/* background-color: red; */
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
.leayer{
width: 1190px;
margin: 0 auto;
}
.mr7{
margin-right: 7px;
}
.c_f40{
color: #ff4400;
}
  3、font.css
/* ⾃定义字体 */
@font-face {
font-family: 'iconfont';
src: url('../');
src: url('../?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
url('../f') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
  4、index.css
@import 'reset.css';
@import 'font.css';
/* 头部信息 */
#headMessage li{
float: left;
line-height: 35px;
padding: 0 6px;
}
#headMessage a{
color: #6c6c6c;
}
#headMessage a:hover{
color: #ff4400;
}
#headMessage a.login{
color: #f22e00;
}
#headMessage .iconfont{
font-size: 12px;
}
三、⽣成页⾯

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。