小米商城主界面一共可以分为四部分
- 顶部栏
- 导航栏
- 主页内容
- 内容详情
- 脚部
第一部分
可划分为:
实现步骤:
1.先用div创建出各个模块,观察网页发现所有部分都是剧中显示,在div中加入居中的div。
<body>
<!-- 顶部栏 -->
<div class="topBar">
<div class="container"></div>
</div>
<!-- 导航栏 -->
<div class="header">
<div class="container"></div>
</div>
<!-- 主页内容 -->
<div class="sit-content">
<div class="container"></div>
</div>
<!-- 内容详情 -->
<div class="content-desc">
<div class="container"></div>
</div>
<!-- 脚部 -->
<div class="footer">
<div class="container"></div>
</div>
</body>
2.分析并编写第一部分中的第一小步。
(1)首先在topbar的div中添加三个div模块,分别代表左边的导航栏,以及右边的登陆和购物车。然后在导航栏中添加文字和符号。
<div class="topBar">
<div class="container">
<div class="topBar_list">
<a href="#">小米商城</a>
<span>|</span>
<a href="#">MIUI</a>
<span>|</span>
<a href="#">loT</a>
<span>|</span>
<a href="#">云服务</a>
<span>|</span>
<a href="#">天星数科</a>
<span>|</span>
<a href="#">有品</a>
<span>|</span>
<a href="#">小爱开发平台</a>
<span>|</span>
<a href="#">企业团购</a>
<span>|</span>
<a href="#">资质证照</a>
<span>|</span>
<a href="#">协议规则</a>
<span>|</span>
<a href="#">下载app</a>
<span>|</span>
<a href="#">智能生活</a>
<span>|</span>
<a href="#">Select Location</a>
</div>
<div class="shop"></div>
<div class="login"></div>
</div>
</div>
(2)在购物车的div中添加文字和购物车的图标
<div class="shop">
<span>图标</span>
<a href="#">购物车(0)</a>
</div>
(3)编写css样式,引入css样式。
<link rel="stylesheet" type="text/css" href="css/reset.css" />
(4)右击小米商城主页,单机检查,选择body的div查看body的style。
(5)新建一个body的css文件,将需要用到的样式复制进去。
body{
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333;
}
css的写法:
.标签名{
属性:XXX;
}
(6)编写topBar的css样式
.topBar{
width: 100%;
height: 40px;
background-color: #333;
}
(7)编写container的css样式:
.container{
width: 1226px;
height: 100%;
margin: 0 auto;
}
margin:0 auto;是居中显示,margin是外边距的意思。
(8)设置topbar中三部分的css:
.topBar.topBar_list{
float: left;
}
.topBar.shop{
float: right;
}
.topBar.login{
float: right;
}
补一张图
1代表topBar,1中的容器是container,2是topBar_list,3是login,4是shop
解决div不在同一行的问题:
<div style="display:inline">
<div id="div1" style="float:left">div1 content</div>
<div id="div2" style="float:left">div2 content</div>
//style="display:inline" 需要在同一行的div标签中加入这个属性
</div>
(9)设置a标签中的字体大小和颜色。
.topBar a{
color: #e0e0e0;
font-size: 12px;
display: inline-block;
line-height: 40px;
}
其中display: inline-block;是将字体转化为行内块,line-height: 40px;行内块的高度为4px,这样可以让鼠标悬浮在行内块这一个范围内都能对此处进行操作(单击超链接)
(10)对topbar中的span进行设置:
.topBar span{
color: #424242;
margin: 0 .5em;
}
margin: 0 .5em; 解释:0是上下的间距,后面的.5em是左右的间距,是14*0.5,也就是7px,14px是字体之间的间隔长度。
(11)对shop标签进行设置: