公司地址
TEL：183-6122-6252
PHONE：1183-6122-6252
E-MAIL：2417102043@qq.com
ADD：江苏省徐州市泉山区淮海西路270号
微信
• 相关新闻
今天开始正式学习网页设计，本套教程是以小米商城为案例“https://www.mi.com/shop”，边实战边学习。十天之后，你将能够自己写一个小米商城首页！现在开始从一列布局学起，一共三个知识点(文末有视频教程)。
首先，在开始之前需要做些准备工作，在桌面上创建一个文件夹——里面创建index.html文件、css文件夹——css文件夹里创建index.css文件。
一、一列自适应宽度布局
用编辑器打开index.html文件，在body标签中添加一个盒子<div class="yi"></div>，其中calss是属性，理解成一种标记，方便别人找到它，单词是固定写法；“yi”是类名，引号里面内容自定义，随便写。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="yi"></div> </body> </html>
接着打开index.css文件，用“点+类名”的形式找到刚才的盒子，给它一个高度和背景颜色，看下效果。
.yi{
height: 300px;
background-color: red;
}
如图，默认宽度是浏览器的100%，下面设置成80%看下效果。
.yi{
height: 300px;
background-color: red;
width: 80%;
}
继续加外边距属性margin，看下效果。
.yi{
height: 300px;
background-color: red;
width: 80%;
margin:auto;
}
现在盒子的位置看起来就跟目标网页的一样了，都是居中。
二、一列固定宽度布局
但是小米商城页面宽度是固定的1226px，所以我们需要调整下width:1226px 。这就是一列固定宽度布局，是不是很简单。
.yi{
height: 300px;
background-color: red;
width: 1226px;
margin:auto;
}三、一列多行布局
看完以上知识点，你就可以完成小米商城基本布局了，无非多写几个div的事。
HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="top">顶部信息</div> <div class="nav">导航</div> <div class="carousel">轮播图</div> <div class="hot">热卖区</div> <div class="product">产品区</div> <div class="footer">底部</div> </body> </html>
CSS部分：
.top{
height: 40px;
background-color: black;
}
.nav{
width: 1226px;
height: 100px;
background-color: red;
margin:auto;
}
.carousel{
width: 1226px;
height: 460px;
background-color: orange;
margin:auto;
}
.hot{
width: 1226px;
height: 170px;
background-color: yellow;
margin:auto;
}
.product{
width: 1226px;
height: 1000px;
background-color: blue;
margin:auto;
}
.product{
height: 400px;
background-color: green;
}
183-6122-6252