学成在线
1.版心
/* 首页样式 */
/* 版心 */
.wrapper {
margin: 0 auto;
width: 1200px;
}
定义该公共样式，让所有版式居中
2.网页制作思路
设置主体背景色
body {
background-color: #f3f5f7;
}
header区域整体布局
vs点这个分屏
logo + 导航 + 搜索 + 用户,用四个div.
整体布局
logo制作技巧
加display:block是因为a是快内元素，加了block就是为了让其可以设置宽高。
.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png);
/* 隐藏文字 */
font-size: 0;
}
导航
padding 属性是其余四个属性的简写形式，在实际开发中我们使用最多的也是这个简写属性。与 margin 属性相似，paddiing 属性同样可以接受 1~4 个参数（参数之间使用空格分隔）：
- 如果提供四个参数，那么将按照上、右、下、左的顺序依次设置元素四个方向上的内边距；
- 如果提供三个参数，那么第一个参数将用来设置元素上方的内边距，第二个参数将用来设置元素左、右两个方向上的内边距，第三个参数将用来设置元素下方的内边距；
- 如果提供两个参数，那么第一个参数将用来设置元素上、下两个方向上的内边距，第二个参数用来设置元素左、右两个方向上的内边距；
- 如果只提供一个参数，那么这个参数将同时作用于元素四个方向上的外边距。
搜索区域
注意：
1.outline: none; /*去除input边框*/
2.父级是flex 那么子级加宽高会生效的
3.align-self:center,独自居中
用户区域
注意：
/* vertical-align 行内块和行内垂直方向对齐方式 */
vertical-align: middle;
banner区域
左侧侧导航
效果如下
效果如下
/* 课程表 */
.banner .right {
margin-top: 60px;
width: 218px;
height: 305px;
background: #209dd5;
border-radius: 10px;
}
.banner .right h3{
margin-left: 13px;
height: 48px;
line-height: 48px;
color: #ffffff;
font-size: 15px;
font-weight: 400;
}
.banner .right .content{
padding: 14px;
height: 257px;
background-color: #fff;
}
.banner .right .content dl {
margin-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}
.banner .right dt{
margin-bottom: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
}
.banner .right dd{
margin-bottom: 8px;
font-size: 12px;
line-height: 16px;
}
.banner .right dd span{
color: #00a4ff;
}
.banner .right dd strong{
color: #7d7d7d;
font-weight: 400;
}
.banner .right .content a{
display: block;
height: 32px;
background-color: #00a4ff;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #fff;
border-radius: 15px;
}
---