我要评论学习浮动和盒模型之后练习制作天猫界面简易框架
原网页：
要求：实现布局，实现简易框架
代码实现：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
height:40px;
width:100%;
}
.box-top{
height:40px;
width:1300px;
background:#ccccff;
margin:0 auto;
}
.box2{
width:1300px;
height:80px;
margin:0 auto;
padding-top:50px;
background:#ccffcc;
}
.box-input{
width:300px;
height:30px;
margin:0 0 0 500px;
font-size:18px;
}
.box3{
width:1300px;
height:500px;
margin:0 auto 100px;
background:#cc66ff;
}
.box-ul{
width:205px;
height:500px;
float:left;
background:rgba(226,52,222,0.6);
}
.box4{
height:330px;
width:1300px;
background:#99ccff;
margin:0 auto;
}
.dis-a{
width:645px;
height:330px;
float:left;
}
.dis-1{
width:290px;
height:330px;
float:left;
margin-right:10px;
background:#ff6666;
}
.dis-2{
width:345px;
height:160px;
float:left;
background:#ff6666;
margin-bottom:10px;
}
.dis-3{
margin:0;
}
.dis-b{
float:right;
}
</style>
</head>
<body>
<!-- 天猫官网首页布局 -->
<!-- 顶部导航栏区域 -->
<div class="box1">
<div class="box-top">顶部导航栏区域</div>
</div>
<!-- 顶部导航栏区域end -->
<!-- 搜索框区域 -->
<div class="box2">
<form action="">
<input type="text" class="box-input" placeholder="搜索框区域" />
</form>
</div>
<!-- 搜索框区域end -->
<!-- 轮播图区域 -->
<div class="box3">
<span>轮播图区域</span>
<div class="box-ul">轮播图遮盖扩展列表</div>
</div>
<!-- 轮播图区域end -->
<!-- 热卖广告 -->
<div class="box4">
<div class="dis-a">
<div class="dis-1">热卖广告</div>
<div class="dis-2">热卖广告</div>
<div class="dis-2 dis-3">热卖广告</div>
</div>
<div class="dis-a dis-b">
<div class="dis-1">热卖广告</div>
<div class="dis-2">热卖广告</div>
<div class="dis-2 dis-3">热卖广告</div>
</div>
</div>
<!-- 热卖广告end -->
</body>
</html>
实现效果：
总结：这里需要用到外间距（margin:）内间距（padding:）和左右浮动对齐（float:left/right）。也需要对css（层叠样式表的理解）。
本文地址：https://blog.csdn.net/shiyu18/article/details/109569781
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论