HTML制作静态网页—新疆行知书
基本布局思路:
1.div块级标签布局
2.整个大容器container内, 从上到下分为六个小容器top, nav, left, middle, right, bottom
3.小容器里的内容采用无序列表填充
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新疆行知书</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 780px;
height: 880px;
background-color: #123456;
margin: 0 auto;
}
#top {
width: 780px;
height: 150px;
}
#nav {
width: 780px;
height: 33px;
}
#nav li {
width: 78px;
line-height: 33px;
list-style: none;
float: left;
}
#nav a {
display: block;
text-align: center;
background-image: url("images/button1.jpg");
}
#nav a:hover {
background-image: url("images/button1_bg.jpg");
}
#left {
width: 200px;
height: 655px;
background-color: #5ea6eb;
margin: 3px 1.5px 1.5px 3px;
float: left;
}
#weather {
width: 100%;
}
#weather h3 {
width: 100%;
height: 47px;
text-align: center;
background-image: url("images/weather.jpg");
background-attachment: initial;
font-size: 16px;
color: white;
border-bottom: 1px solid white;
}
#weather span {
position: relative;
top: 25px;
left: 5px;
}
#weather li {
font-size: 12px;
line-height: 24px;
text-align: center;
color: white;
}
#weather ul {
width: 190px;
list-style: inside;
list-style-image: url(images/icon1.gif);
border-left: 5px solid white;
border-right: 5px solid white;
}
#today {
width: 190px;
height: 487px;
border-left: 5px solid white;
border-right: 5px solid white;
border-bottom: 5px solid white;
}
#today h3 {
font-size: 16px;
color: white;
line-height: 30px;
margin: 0 auto;
background-color: #bbddff;
background-image: url("images/icon2.gif");
background-repeat: no-repeat;
background-position: 5px 12px;
}
#today span {
position: relative;
left: 20px;
}
#today ul {
list-style: none;
}
#today a {
display: block;
text-align: center;
text-decoration: none;
}
#today img {
margin-top: 10px;
}
.l1 a {
font-size: 14px;
line-height: 20px;
color: white;
}
#middle {
float: left;
width: 358px;
height: 650px;
background-color: white;
border: 5px solid white;
margin: 3px 1.5px 1.5px 1.5px;
}
#middle>div:nth-child(1) {
width: 100%;
height: 260px;
background-image: url("images/ghost.jpg")