实训案例淘宝案例

在这里插入图片描述

实训案例:淘宝首页


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


                
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值