样式配置
1、给CSS文件夹中添加reset.css样式表来初始化样式
2、一般写CSS代码用less来写会方便很多，可以在扩展文件中下载easy less扩展使用
（使用方法：在写好的less文件上ctrl+s即可生成对应的css文件）
3、在html文件中导入reset样式和自己写的css
头部部分
左侧布局（登录注册）
先确定基本的头部框架
HTML
<body>
<!--最外层的包裹元素-->
<div id="wrapper">
<!--头部-->
<header id="header">
<!--上面部分-->
<div class="headTop">
<!--版心元素-->
<div class="headTopMain">
<!--左侧-->
<div class="left">
<h5>欢迎来到尚优选！ 请</h5>
<p>
<a href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
</p>
</div>
<!--右侧-->
</div>
</div>
</header>
</div>
</body>less
//引入清除浮动样式文件
@import "mixins/clear.less";
//最外层的包裹元素
#wrapper {
//头部
#header {
//上面部分
.headTop {
height: 30px;
background: #eaeaea;
//版心元素
.headTopMain {
.clearfix();
width: 1200px;
margin: 0 auto; //水平居中
line-height: 30px; //垂直居中
//左侧
.left {
// 添加浮动使h5和p标签在同一水平线上
h5 {
float: left;
margin-right: 5px;
}
p {
float: left;
a {
// 第一个a标签
&:first-child {
padding-right: 5px;
margin-right: 0;
// 右边的竖线
border-right: 1px solid #b3aeae;
}
}
}
}
}
}
}
}为了解决子元素添加浮动后的父元素塌陷问题，需要清除浮动，新建一个clear.less文件
在所需调用的地方.clearfix()即可
右侧布局（列表布局）
html
<div class="right">
<nav>
<a href="##">我的订单</a>
<a href="##">我的购物车</a>
最低0.47元/天 解锁文章
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
