实训案例淘宝案例

实训案例:淘宝首页

1. Div的独立选择

如果是独立的层最好添加id
通用的层使用上class

<!-- 头部信息 -->
<div id="headMessage">
</div>
<!-- 头部广告 -->
<div id="headAd">
</div>
<!-- 头部搜索框 -->
<div id="search">
</div>
<!-- 首屏内容 -->
<div id="firstScreen">
</div>
<!-- 有好货于爱逛街 -->
<div id="layer">
</div>
<!-- 右侧固定定位导航 -->
<div id="tool">
</div>

2. 样式重置和样式模块化

几乎是每一个网站都会使用样式重置
去除一些标签默认的样式

body,p,h1,h2,h2,h3,h4{
   
	/*去除以上标签的margin值*/
	margin: 0;
}

Tip:这里注意如果标签原本没有带样式,就不重置,重新设置新的标签重置
例如这里的ul标签才有padding/list-style,所以这里用分别重置

ul{
   
	/*重置ul标签*/
	margin: 0;
	padding: 0;
	/*去除style黑点*/
	list-style: none;
}
img{
   
	/*去除图片边框,ie可显示*/
	border: none;
	/*去除图片留白*/
	vertical-align: middle;
}
a{
   
	/*去除下划线*/
	text-decoration: none;
	/*设置淘宝颜色灰*/
	color: #3c3c3c;
}
i{
   
	/*去除i标签斜体*/
	font-style: normal;
}
input{
   
	/*去除input标签原带有的margin和padding*/
	margin: 0;
	padding: 0;
}
button{
   
	/*去除button标签原带有的margin和padding*/
	margin: 0;
	padding: 0;
	/*去除获取焦点过程中蓝色的框*/
	outline: none;/*比较特殊获取焦点html默认的会提示蓝色框,这里去除效果*/
}

3. 添加样式

1. 很多网站在默认的时候都会通用设置字体,通常是一条

字体大小+行高+字体样式1+字体样式2+字体1+字体2