1. 轮播图(基本定位)
遇到的坑有图片的大小问题,当定义了父元素的大小时,图片的大小不能随之而变化,所以当原图片的大小与父元素定义的大小不一致,就要定义img的大小,否则就会造成错乱
HTML代码块
<div class="slider">
<img class="img" src="images/01.jpg" alt="图像无法显示">
<a href="#" class="left"><img src="images/left-circle.png" alt=""></a>
<a href="#" class="right"><img src="images/right-circle.png" alt=""></a>
<ul class="indicator">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
css代码块
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.slider{
width: 1200px;
height: 360px;
margin: 50px auto;
position: relative;
}
.slider .img{
width: 1200px;
height: 360px;
}
.left, .right{
position: absolute;
width: 30px;
height: 30px;
top: 50%;
margin-top: -15px;
}
.left{
left: 10px;
}
.right{
right: 10px;
}
.indicator{
width: 80px;
height: 14px;
background-color: rgba(255, 255, 255, .3);
position: absolute;
bottom: 15px;
left: 50%;
border-right: 6px;
}
.indicator li{
width: 10px;
height: 10px;
background-color: #cccccc;
float: left;
border-radius: 50%;
margin: 2px 0 2px 5px;
}
.indicator li.current{
background-color: red;
}
2. 携程首页(伸缩布局)
flex布局的详细使用练习,项目中的每个盒子必须设置宽度为100%,使其可自适应变化
HTML代码块
<div>
<!--头部-->
<header>
<a href="javascript:;">
<img src="./images/banner.png" alt="">
</a>
</header>
<!--主要内容-->
<main>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特价机票</a>
<a href="">民宿客栈</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特价机票</a>
<a href="">民宿客栈</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特价机票</a>
<a href="">民宿客栈</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特价机票</a>
<a href="">民宿客栈</a>
</div>
</section>
<section class="extra">
<a href="javascript:;">
<img src="./images/extra_1.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/extra_2.jpg" alt="">
</a>
</section>
</main>
<!--尾部-->
<footer>
<div class="nav">
<a href="">电话预定</a>
<a href="">下载客户端</a>
<a href="">我的</a>
</div>
<p class="link">
<a href="">网站地图</a>
<a href="">English</a>
<a href="">电脑版</a>
</p>
<p class="copyright">©携程旅行</p>
</footer>
</div>
css代码块
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
/*头部*/
header{
width: 100%;
display: flex;
}
header > a{
flex: 1;
}
header a img{
width: 100%;
}
/*主要内容*/
main{
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
main >.item{
width: 100%;
height: 100px;
margin-top: 10px;
border-radius: 10px;
display: flex;
}
main .item:nth-child(1){
background-color: rgb(78, 50, 182);
}
main .item:nth-child(2){
background-color: rgb(31, 153, 209);
}
main > .item:nth-child(3) {
background-color: rgb(240, 147, 7);
}
main > .item:nth-child(4) {
background-color: rgb(187, 19, 131);
}
.item > .left {
flex: 1;
}
.item > .right {
flex: 2;
/*伸缩布局*/
display: flex;
/*换行*/
flex-wrap: wrap;
}
.item > .right > a {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
color: #fff;
box-sizing: border-box;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
item > .right > a:nth-last-child(-n+2) {
border-bottom: none;
}
.extra{
width: 100%;
display: flex;
}
.extra > a {
flex: 1;
}
.extra > a > img {
width: 100%;
}
/*尾部*/
footer {
width: 100%;
}
footer > .nav {
width: 100%;
height: 30px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
display: flex;
}
footer > .nav > a{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
footer > .link{
text-align: center;
margin: 5px 0;
}
footer > .copyright{
text-align: center;
margin-bottom: 5px;
}
网友评论