黑马程序员-学成在线案例-轮播图部分
一、背景部分
设置高度 背景色
css
.banner{
height: 420px;
background-color: #1c036c;
}
二、版心部分
在背景色上放上大图再居中
css
.banner .wrapper{
width: 1200px;
height: 420px;
margin: 0 auto;
background-image: url(../images/banner2.png);
}
三、左侧部分
1.注意调整间距
2.设置伪类
3.“>”设置在span内方便浮动至最右侧
html
<div class="left">
<ul>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
</ul>
</div>
css
.banner .left{
float: left;
padding: 0 20px;
width: 190px;
height: 420px;
background-color: rgba(0,0,0,0.3);
}
.banner .left ul a{
display: block;
line-height: 45px;
font-size: 14px;
color:#fff;
}
.banner .left span{
float: right;
}
.banner .left a:hover{
color: #00b4ff;
}
四、右侧部分
1.分成三部分书写 上中下
2.中间部分的间距反复调试至最佳
html
<div class="right">
<div class="top">我的课程表</div>
<div class="middle">
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
</div>
<a href="#">
<div class="bottom">全部课程</div>
</a>
</div>
css
.banner .right{
float: right;
margin: 50px 0 70px;
width: 228px;
height: 300px;
background-color: #fff;
}
.banner .right .top{
height: 48px;
background-color: #9bceea;
font-size: 18px;
font-weight: 700;
text-align: center;
line-height: 48px;
color: #fff;
}
.banner .right .middle{
margin-top: 5px;
margin-left: 16px;
margin-right: 16px;
}
.banner .right .middle dl{
padding: 14px;
border-bottom: 2px solid #e5e5e5;
}
.banner .right .middle dt{
font-size: 14px;
color: #4e4e4e;
}
.banner .right .middle dl dd{
font-size: 12px;
color: #a5a5a5;
}
.banner .right .bottom{
margin: 0 auto;
margin-top: 4px;
width: 200px;
height: 40px;
border: 1px solid #00a4ff;
color: #00a4ff;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 40px;
}
源码
html
<div class="banner">
<div class="wrapper">
<div class="left">
<ul>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
</ul>
</div>
<div class="right">
<div class="top">我的课程表</div>
<div class="middle">
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
</div>
<a href="#">
<div class="bottom">全部课程</div>
</a>
</div>
</div>
</div>
css
.banner{
height: 420px;
background-color: #1c036c;
}
.banner .wrapper{
width: 1200px;
height: 420px;
margin: 0 auto;
background-image: url(../images/banner2.png);
}
.banner .left{
float: left;
padding: 0 20px;
width: 190px;
height: 420px;
background-color: rgba(0,0,0,0.3);
}
.banner .left ul a{
display: block;
line-height: 45px;
font-size: 14px;
color:#fff;
}
.banner .left span{
float: right;
}
.banner .left a:hover{
color: #00b4ff;
}
.banner .right{
float: right;
margin: 50px 0 70px;
width: 228px;
height: 300px;
background-color: #fff;
}
.banner .right .top{
height: 48px;
background-color: #9bceea;
font-size: 18px;
font-weight: 700;
text-align: center;
line-height: 48px;
color: #fff;
}
.banner .right .middle{
margin-top: 5px;
margin-left: 16px;
margin-right: 16px;
}
.banner .right .middle dl{
padding: 14px;
border-bottom: 2px solid #e5e5e5;
}
.banner .right .middle dt{
font-size: 14px;
color: #4e4e4e;
}
.banner .right .middle dl dd{
font-size: 12px;
color: #a5a5a5;
}
.banner .right .bottom{
margin: 0 auto;
margin-top: 4px;
width: 200px;
height: 40px;
border: 1px solid #00a4ff;
color: #00a4ff;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 40px;
}