我的第二个div布局

来源：互联网发布：灭绝师太武功知乎编辑：程序博客网时间：2024/06/05 04:05

主要学到：

list-style-type:none去掉li的文字前边的点

float:left使多个div在同一行，使ul水平排列

line-height通过设置行高来垂直居中

<!DOCTYPE html>

<html>
<head>
<title>无标题文档</title>
<style>
.ful{
margin:0px;
padding:0px;
width:1000px;
height:65px;
background:#6FF;
margin-left:auto;
margin-right:auto;
}
.fli{
float:left;
width:120px;
height:20px;
list-style-type:none;
text-align:center;
font-size:16px;
line-height:65px;
font-family:MicroSoft YaHei;
color:#FFFFFF;
}
.login{
float:left;
width:120px;
height:20px;
list-style-type:none;
text-align:center;
font-size:16px;
line-height:65px;
font-family:MicroSoft YaHei;
color:#FFFFFF;
width:50px;
text-align:right;
}
.register{
float:left;
width:120px;
height:20px;
list-style-type:none;
text-align:center;
font-size:16px;
line-height:65px;
font-family:MicroSoft YaHei;
color:#FFFFFF;
width:50px;
text-align:left;
}
.l{
float:left;
width:120px;
height:20px;
list-style-type:none;
text-align:center;
font-size:16px;
line-height:65px;
font-family:MicroSoft YaHei;
color:#FFFFFF;
width:15px;
}

.top{
margin:0px;
margin-top:27px;
width:1000px;
height:300px;
margin-left:auto;
margin-right:auto;
}
.image{
float:left;
margin-left:20px;
}
.new{
width:272px;
height:300px;
float:left;
margin-left:27px;
}

.sli{
line-height:30px;
width:272px;
height:30px;
list-style-type:none;
text-align:left;
font-size:16px;
font-family:MicroSoft YaHei;
color:#CCCCCC;
font-size:10px;
}

.sul{
margin:0px;
padding:0px;
width:272px;
height:300px;
background:#FFFFFF;
}

.hli{
color:#000000;
line-height:40px;
height:40px;

}

.bottom{
margin-top:27px;
margin-left:auto;
margin-right:auto;
width:1000px;
height:400px;
}

.newimg{
float:left;
margin-left:25px;
margin-top:25px;
}

</style>
</head>

<body>
<ul class="ful">
<li class="fli">
<img src="images6/lqlogog5327_03.jpg" />
</li>
<li class="fli">
首页
</li>
<li class="fli">
大赛介绍
</li>
<li class="fli">
本届大赛
</li>
<li class="fli">
竞赛规则
</li>
<li class="fli">
历届回眸
</li>
<li class="fli">
辅导资料
</li>
<li class="login">
<font size="2">登录</font>
</li>
<li class="l">
|
</li>
<li class="register">
<font size="2">注册</font>
</li>
</ul>

<div class="top">
<div class="image">
<img width="376" height="300" src="images6/m.jpg"/>
</div>
<div class="new">
<ul class="sul">
<li class="hli">
<b>大赛新闻</b>
</li>
<li class="sli">
新闻1
</li>
<li class="sli">
新闻2
</li>
<li class="sli">
新闻3
</li>
<li class="sli">
新闻4
</li>
<li class="sli">
新闻5
</li>
<li class="sli">
新闻6
</li>
<li class="sli">
新闻7
</li>
<li class="sli">
新8
</li>
<li class="sli">
新闻9
</li>
</div>
<div class="new">
<ul class="sul">
<li class="hli">
<b>通知公告</b>
</li>
<li class="sli">
新闻1
</li>
<li class="sli">
新闻2
</li>
<li class="sli">
新闻3
</li>
<li class="sli">
新闻4
</li>
<li class="sli">
新闻5
</li>
<li class="sli">
新闻6
</li>
<li class="sli">
新闻7
</li>
<li class="sli">
新8
</li>
<li class="sli">
新闻9
</li>
</div>
</div>

<div class="bottom">
<div class="newimg">
<img width="220" height="150" src="images6/9.jpg"/>
</div>
<div class="newimg">
<img width="220" height="150" src="images6/2.jpg"/>
</div>
<div class="newimg">
<img width="220" height="150" src="images6/3.jpg"/>
</div>
<div class="newimg">
<img width="220" height="150" src="images6/4.jpg"/>
</div>
<div class="newimg">
<img width="220" height="150" src="images6/5.jpg"/>
</div>
<div class="newimg">
<img width="220" height="150" src="images6/6.jpg"/>
</div>
<div class="newimg">
<img width="220" height="150" src="images6/7.jpg"/>
</div>
<div class="newimg">
<img width="220" height="150" src="images6/8.jpg"/>
</div>
</div>


</body>
</html>

阅读全文

0 0