12月21日到22日作业
今天就要开始布局的知识练习了,好了,废话不多说,先看效果图
图1 float布局
整体结构大概分为三个部分:header(头部)、nav(导航部分)、section(轮播部分)
这三个部分最外层套了一个div,用于将整体内容部分居中和限制宽度;
横排排列采用float;
中间导航部分采用表格布局;ps:会出现高度塌陷情况,外层的nav没有高度,设置了overflow:auto无效;后面采用清除效果
ps:代码还需优化,没有做到自适应,图片应设置为百分比让其随窗口大小改变而改变
具体实现代码:
css文件:index.css
.space{
margin:auto;
width:1210px;
}
/*头部*/
.header{
height:80px;
padding:20px 0;
box-sizing:content-box;
}
.logo-box{
float:left;
}
.icon-jinduchaxun{
position:relative;
left:-30px;
}
.header-right{
float:right;
height:80px;
line-height:80px
}
/*搜索框*/
.search-box{
float:left;
}
.search{
border:1px solid #c0c0c0;
width:335px;
height:32px;
border-radius:8px;
padding:0 30px 0 10px;
box-sizing:border-box;
}
.icon-box{float:right}
.icon-box .iconfont{
font-size:34px;
margin:0 9px;
}
/*导航*/
.nav{display:block;width:100%;overlow:auto}
.nav-box{
width:290px;
height:50px;
float:left;
}
.right-space{
margin-right:8px;
}
.nav-box .iconfont{
font-size:40px;
color:red;
}
.nav-box td{
padding:0 7px;
}
.nav-box .right-line{
border-right:1px solid #c0c0c0;
}
/*轮播*/
.lunbo{
display:block;
margin:40px 0;
}
.lunbo img{
height:320px;
}
html文件:index.html
<!DOCTYPE html>
<html lang="en">
<!--<head> 标签用于定义文档的头部,描述了文档的各种属性和信息-->
<head>
<meta charset="UTF-8">
<title>float+position布局</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div class="space">
<!--头部-->
<header>
<div class="header">
<div class="logo-box">
<img class="logo" src="images/logo.png">
</div>
<div class="header-right">
<div class="search-box">
<input class="search" type="search" name="">
<span class="iconfont icon-jinduchaxun"></span>
</div>
<div class="icon-box">
<span class="iconfont icon-huiyuan1"></span>
<span class="iconfont icon-danmu1"></span>
<span class="iconfont icon-fabu"></span>
<span class="iconfont icon-fangda"></span>
<span class="iconfont icon-huiyuan2"></span>
<span class="iconfont icon-dianzan"></span>
</div>
</div>
</div>
</header>
<!--导航-->
<nav class="nav">
<!--资讯-->
<table class="nav-box right-space" border-collapse="collapse" align="center" cellpadding="10" cellspacing="0" border="0">
<tbody>
<tr>
<td rowspan="2">
<span class="iconfont icon-gongdan"></span>
</td>
<td class="right-line">资讯</td>
<td>器材</td>
<td>大师</td>
<td>学院</td>
<td>实战</td>
</tr>
<tr>
<td class="right-line">学习</td>
<td>大赛</td>
<td>裤子</td>
<td>影视</td>
<td>其它</td>
</tr>
</tbody>
</table>
<!--爱好-->
<table class="nav-box right-space" border-collapse="collapse" align="center" cellpadding="10" cellspacing="0" border="0">
<tbody>
<tr>
<td rowspan="2">
<span class="iconfont icon-icon_renwujincheng"></span>
</td>
<td class="right-line">爱好</td>
<td>有品</td>
<td>图片</td>
<td>喝水</td>
<td>飞机</td>
</tr>
<tr>
<td class="right-line">姐妹</td>
<td>坦克</td>
<td>气球</td>
<td>毛线</td>
<td>其它</td>
</tr>
</tbody>
</table>
<!--软件-->
<table class="nav-box right-space" border-collapse="collapse" align="center" cellpadding="10" cellspacing="0" border="0">
<tbody>
<tr>
<td rowspan="2">
<span class="iconfont icon-gongdan"></span>
</td>
<td class="right-line">软件</td>
<td>学习</td>
<td>爱国</td>
<td>敬业</td>
<td>友善</td>
</tr>
<tr>
<td class="right-line">技能</td>
<td>富强</td>
<td>互助</td>
<td>仁义</td>
<td>其它</td>
</tr>
</tbody>
</table>
<!--编程-->
<table class="nav-box" border-collapse="collapse" align="center" cellpadding="10" cellspacing="0" border="0">
<tbody>
<tr>
<td rowspan="2">
<span class="iconfont icon-DOC"></span>
</td>
<td class="right-line">编程</td>
<td>吃饭</td>
<td>周易</td>
<td>黄山</td>
<td>合肥</td>
</tr>
<tr>
<td class="right-line">美女</td>
<td>上海</td>
<td>杭州</td>
<td>北京</td>
<td>其它</td>
</tr>
</tbody>
</table>
</nav>
<div style="width:100%;clear:both;"></div>
<!--轮播-->
<section class="lunbo">
<img class="pic-1" src="./images/2.jpg" alt="图1">
<img class="pic-2" src="./images/banner-right.jpg" alt="图2">
</section>
</div>
</body>
</html>