淘宝商城首页的心得(1)

head头部的一些写法
首先说说块级元素和行内元素区别，简单的来说，块级元素独占一行，可以设置宽高以及边距，行内元素不会独占一行，设置宽高行距等不会起效。
常见的块级元素有：h1~h6、p、div、ul、li, table，
常见的行内元素有：src, span、a、input、select等。
float后自动变成块级元素
重点float的运用
左右分成两部分ul
float left float right
内部 li
#headMessage li{
float: left;
line-height: 35px;
padding: 0 6px;上下 左右
font-size: 0;//先挑父级元素因为有空格,靠字体控制大小,子集元素再重新设置字体大小
}
，clearfix类会在wrapper创建一个伪类，并且这个类会清除左右浮动，所以按照布局会在content-left，content-right下，而创建的这个伪类是没有脱离文档流的，自然能够撑开父元素wrapper的高度。
父级元素 class=“clearfix”
.clearfix:after{
content: ‘’;
display: block;
clear: both;
}

<!-- 头部信息 -->
	<div id="headMessage" class="layer clearfix">
		<ul class="fl">
			<li class="title">
				<span>中国大陆</span>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li class="mr7">
				<a href="#" class="login mr7">亲，请登录</a>
				<a href="#">免费注册</a>
			</li>
			<li>
				<a href="#">手机逛淘宝</a>
			</li>
		</ul>

		<ul class="fr">
			<li>
				<a href="#">我的淘宝</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<span class="iconfont mr5 c4">&#xe63a;</span>
				<a href="#">购物车</a>
				<strong>0</strong>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<a href="#"><span class="iconfont mr5 stroe">&#x3432;</span>收藏夹</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<a href="#">商品分类</a>
			</li>
			<li class="line">|</li>
			<li>
				<a href="#">千牛卖家中心</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<a href="#">联系客服</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<span class="iconfont c4 mr5">&#xe66d;</span>
				<a href="#">网站导航</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
		</ul>
	</div>

index.css

/* 
    @规则
		@charset    设置样式表的编码 
		@import		导入其它样式文件
		@meida		媒体查询
		@font-face	自定义字体
 */

@import 'reset.css';

@font-face {
	font-family: 'iconfont';
	src: url('../font/iconfont.eot');
	src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../font/iconfont.woff2') format('woff2'),
		url('../font/iconfont.woff') format('woff'),
		url('../font/iconfont.ttf') 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;
}

/* 头部信息 */
#headMessage li{
	float: left;
	line-height: 35px;
	padding: 0 6px;
	font-size: 0;
}
#headMessage a{
	color: #6c6c6c;
	font-size: 12px;
}
#headMessage a:hover{
	color: #f40;
}
#headMessage a.login{
	color: #f22e00;
}
#headMessage span{
	font-size: 12px;
}
#headMessage span.arrow{
	margin-left: 7px;;
}
#headMessage li strong{
	font-size: 12px;
	color: #f22e00;
}
#headMessage li span.stroe{
	color: #9c9c9c;
}
#headMessage li.line{
	font-size: 12px;
	color: #ddd;
	padding: 0 5px;
}

reset.css

body,p,h1,h2,h3,h4,ul{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: middle;
}
a{
    text-decoration: none;
    color: #3c3c3c;
}
i{
    font-style: normal; 
}
input,button{
    margin: 0;
    padding: 0;
}
button{
    outline: none;
}
table{
    border-collapse: collapse;  /* 边框模式，合并的模式 */
}
th,td{
    padding: 0;
}

body{
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    /* font-family: '宋体';
    font-family: '\5b8b\4f53';
    font-family: SimSun;

    font-family: "微软雅黑";
    font-family: Miscrosoft YaHei; */

    color: #3c3c3c;
    background-color: #f4f4f4;
}

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

.layer{
    width: 1190px;
    margin: 0 auto;
}

.c4{
    color: #f40;
}
.c5{
    color: #f50;
}
.c6{
    color: #8d7afb;
}
.c7{
    color: #a8c001;
}
.mr7{
    margin-right: 7px;
}
.mr5{
    margin-right: 5px;
}
.mt10{
    margin-top: 10px;
}
.mr10{
    margin-right: 10px;
}