自学了前端快一个月了，今天才算是真正做出来一点东西，打算写一遍博客记录我的前端开始，里面有的用到了切面工具，有的布局文字是自己写进去的，下面有详细讲解。
这是页面本身的效果，可以分成header，banner，我们的服务，经典案例等几部分。
1.在开始的时候我们要让内外边距初始值为零，所有的链接取消下划线。以及给出整个body的颜色，该部分代码如下
/* 消除内外边距 */
*{
padding:0;
margin: 0;
}
body{
background-color: #fafafa;
}
li{
list-style: none;
}2.1云云商标（logo） 导航栏（nav）为header部分的孩子，一个左浮动，一个右浮动。html框架，这里有四对div结构，其中header是通栏的占有整个屏幕宽度，第二级inner就是版心的宽度，inner里面有两个孩子分别是商标logo和导航栏nav。
<!-- 1.header开始啦 -->
<div class="header">
<div class="inner">
<!-- 云道商标左浮动 -->
<div class="logo">
<a href="www.yndao.com"></a>
<img src="images/logo.png" />
</div>
<!-- 云道导航栏右浮动 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">云道商城</a></li>
<li><a href="#">智慧门店</a></li>
<li><a href="#">营销平台</a></li>
<li><a href="#">媒体中心</a></li>
<li><a href="#">关于云道</a></li>
</ul>
</div>
</div>
</div>
<!-- 1.header结束啦 -->2.2上面是HTML结构，该部分如何排版布局的css代码如下
/* 1.头部开始啦 */
.header{
height: 100px;
background-color: #fff;
}
.inner{
width: 1024px;
/* background-color: pink; */
margin: 0 auto;
}
/* 商标 */
.logo{
float:left;
}
/* 导航栏 开始啦*/
.nav{
float: right;
}
.nav ul li{
float:left;
margin:0 20px;
line-height:100px;
/* text-decoration: none;
font-size: 22px;
color: #ccc; */
}
li a{
text-decoration: none;
font-size: 15px;
font-family: "微软雅黑";
color: #333;
}
.nav li :hover{
color:#2288f6;
}
/* 导航栏结束啦 */
/* 1.头部结束了 */
3.1 banner部分的html结构
<!-- 2.banner开始啦 -->
<div class="banner"></div>3.2 banner的css结构，这里面直接导入了切片
/* 2.banner开始啦 */
.banner{
height: 620px;
background:url(../images/banner.jpg) no-repeat /* 背景不平铺，url里面不要引号 */top center;
}4.1 接下来就我的服务模块了，我们的服务里面装了服务头部ser-hd和服务身体ser-bd两个大的主体，头部比较简单，一个h3标题一个p段落，身体相对较复杂，我们通过图片可以看到有三个盒子，就可以用一个无序列表再通过浮动显示在同一行上来实现，再给中间的盒子一个左右外边距。每个li盒子里面由四部分组成，分别是img，h3，p，a。
<!-- 3.service服务模块开始啦 -->
<div class="service">
<div class="ser-hd">
<h3><img src="images/ser.png" ></h3>
<p>shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系...
我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！
</p>
</div>
<div class="ser-bd">
<ul>
<li class="jianzhan">
<img src="images/我要建站.png">
<h3>我是买家</h3>
<p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们
从互联网时代品牌建设和品牌营销的全
新视角，赋予了品牌商城及独立电商更
大的生存空间和存在价值！
</p>
<a href="#">我要建站</a>
</li>
<li class="tuiguang">
<img src="images/我要建站.png">
<h3>我是买家</h3>
<p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们
从互联网时代品牌建设和品牌营销的全
新视角，赋予了品牌商城及独立电商更
大的生存空间和存在价值！
</p>
<a href="#">我要建站</a>
</li>
<li><img src="images/我要建站.png">
<h3>我是买家</h3>
<p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们
从互联网时代品牌建设和品牌营销的全
新视角，赋予了品牌商城及独立电商更
大的生存空间和存在价值！
</p>
<a href="#">我要建站</a>
</li>
</ul>
</div>
</div>
<!-- 3.service服务模块结束啦 -->
4.2 关于“我们的服务”部分的css代码分析
.service{
width: 1055px;
height: 600px;
margin:75px auto 0 ;
/* background-color: hotpink; */
}
.ser-hd {
margin:0 25px;
border-top:1px solid #ccc;
}
.ser-hd h3{
margin:-14px auto 0;
width: 167px;/* 盒子居中就一定要有宽度，因为默认是通栏的 */
}
.ser-hd p{
text-align:center;
line-height:26px;
font-size: 12px;
color: #666;
width: 830px;
margin: 15px auto;
}
.se-bd{
margin-top:450px;
}
.ser-bd li{
width: 320px;
height: 510px;
background-color: #fff;
float:left;
}
.ser-bd .tuiguang{
margin:0 47px;
}
.ser-bd img{
margin:40px 35px;
}
.ser-bd h3{
color: #333;
font-size:18px;
font-weight:normal;/* 字体不加粗 */
text-align:center;
height: 40px;/* 下面会有空白距离 */
}
.ser-bd p{
color: #666;
font-size:12px;
width: 235px;
margin:0 auto ;
line-height:26px;
}
.ser-bd a{
text-decoration: none;
width: 148px;
height: 38px;
border:1px solid #ff9412;
display: block;
margin:30px auto 0;
text-align: center;
line-height: 38px;
border-radius:6px;
color: #ff9412;
}
.ser-bd a:hover{
color: #fff;
background-color: #ff9412;
}
/* 3.service服务模块结束啦 */
一些基本的操作就不说了。有几个我觉得重要的知识点说明一下；
4.2.1 子类不会继承父类的高度，如果一个盒子想要居中就得给该盒子一个宽度，因为默认是通栏的。
4.2.2 在.ser-hd p{}选择器里面，我刚开始没有用margin，觉得text-align：center就可以，结果后来发现忽略掉外边距的问题。
4.2.3 在最后的a标签里面，由于a是行内元素没有宽高，因此要行内转块级元素，才能给予宽高。
最后的效果图如下，由于我电脑像素比较低，上传的跟谷歌里面大小不一样。
总结：这是我做的第一个小东西，快慢不要紧，刚开始重要的还是思维逻辑，自己的独立思考。