admin管理员组文章数量:1530069
一、练习前的准备工作
1、项目的搭建
新建一个小米商城的文件夹，在其目录下分别再新建两个文件夹：img、css， 文件夹用来存放重置样式表、公共样式表、页面样式表等文档，文件夹img用来存放素材图片。
结构的划分：将整个页面进行一块块的拆分，一块一块的来写。
计划效果：
二、顶部导航条的搭建
结构：最外围的容器
设置三个div块， 左、右两侧各一块，购物车独占一块。
css下的文档（当前页面样式表）
/* 主页index.html的样式表 */
/* 顶部导航条的样式 */
.topbar-wrapper{
/* 设置宽度全屏 */
width: 100%;
/* 设置高度和行高 */
height: 40px;
line-height: 40px;
/* 设置背景颜色 */
background-color: #333;
}
/* 设置超链接的颜色 */
.topbar a{
font-size: 12px;
color:#b0b0b0;
display: block;
}
/* 设置超链接移入的效果 */
.topbar a:hover{
color: #fff;
}
/* 设置中间分割线 */
.topbar .line{
font-size: 12px;
color: #424242;
margin: 0px 8px;
margin-top: -1px;
}
/* 设置左侧导航栏 */
.service, .topbar li{
float: left;
}
/* 设置右侧导航 */
.shop-cart, .use-info{
float: right;
}
/* 设置购物车的内边距 */
.shop-cart{
margin-left: 26px;
}
/* 设置购物车（０）这个超链接 */
.shop-cart a{
width: 120px;
background: #424242;
/* 设置购物车居中 */
text-align: center;
}
/* 设置图标购物车与购物车之间的距离 */
.shop-cart i{
margin-right: 2px;
font-size: 12px;
}
/* 设置超链接购物车移入效果 */
.shop-cart:hover a{
background-color: #fff;
color:#FF6700;
}
公共样式（base.css）
/* 清除浮动*/
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
/* 去除a的下划线 */
a{
text-decoration: none;
color: #333;
}
body{
font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333;
/* 设置容器最低宽度，以防溢出 */
min-width: 1226px;
}
/* 设置一个类，用来表示中间容器的宽度 */
.w{
/* 固定容器的宽度 */
width: 1226px;
/* 设置容器居中 */
margin: 0 auto;
}
HTML代码（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
<link rel="icon" href="//s01.mifile/favicon.ico" type="image/x-icon" />
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 引入公共样式表 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="./font_3373002_ourrffhs0zc/iconfont.css">
<!-- 引入当前页面样式表 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 创建顶部导航条 -->
<!-- 创建顶部导航条外部容器 -->
<div class="topbar-wrapper">
<!-- 创建内部容器 -->
<div class="topbar w clearfix">
<!-- 左侧的导航条 -->
<ul class="service">
<li><a href="#">小米商城</a></li>
<li class="line">|</li>
<li><a href="#">MIUI</a></li>
<li class="line">|</li>
<li><a href="#">loT</a></li>
<li class="line">|</li>
<li><a href="#">云服务</a></li>
<li class="line">|</li>
<li><a href="#">天星数科</a></li>
<li class="line">|</li>
<li><a href="#">有品</a></li>
<li class="line">|</li>
<li><a href="#">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="#">企业团购</a></li>
<li class="line">|</li>
<li><a href="#">资质证照</a></li>
<li class="line">|</li>
<li><a href="#">协议规则</a></li>
<li class="line">|</li>
<li><a href="#">下载app</a></li>
<li class="line">|</li>
<li><a href="#">Select Location</a></li>
</ul>
<!-- 购物车 -->
<ul class="shop-cart">
<li><a href="#">
<i class="iconfont">
</i>
购物车（０）
</a>
</li>
</ul>
<!-- 用户登录注册 -->
<ul class="use-info">
<li><a href="#">登录</a></li>
<li class="line">|</li>
<li><a href="#">注册</a></li>
<li class="line">|</li>
<li><a href="#">消息通知</a></li>
<li class="line">|</li>
</ul>
</div>
</div>
</body>
</html>效果图：
注意：图标字体需要正确引用，才能显示购物车的图标。
版权声明：本文标题：小米商城静态页面练习（一） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726414438a1069637.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论