前端web实训——小米商城（第一天）

最新推荐文章于 2022-12-04 13:19:11 发布

老咪头子

最新推荐文章于 2022-12-04 13:19:11 发布

阅读量4.1k

点赞数 7

本文链接：https://blog.csdn.net/masdhsi/article/details/116194731

版权

小米商城主界面一共可以分为四部分

顶部栏
导航栏
主页内容
内容详情
脚部

第一部分

在这里插入图片描述
可划分为：

实现步骤：

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标签进行设置：

老咪头子

关注

7
点赞
踩
58

收藏

觉得还不错? 一键收藏
2
评论
前端web实训——小米商城（第一天）

小米商城主界面一共可以分为四部分顶部栏导航栏主页内容内容详情脚部第一部分可划分为：实现步骤：1.先用div创建出各个模块，观察网页发现所有部分都是剧中显示，在div中加入居中的div。 <body>  <div class="topBar"> <div class="container"></div> </div>  &lt
复制链接

扫一扫