网页布局实例：山东党建网

效果图

题目要求

参照网站截图完成网页，尺寸自定，符合网站视觉效果。（共50分）

具体要求和评分标准如下：

1.页面使用div+css布局，命名为index.html，整体布局正确得20分。

2.顶端logo图片以及表单部分和效果图一致，得10分。

3.导航菜单默认文字白色，鼠标hover时菜单文字变为黄色，无下划线，设置空链接。导航条设置正确得10分。

4.下端三个盒子水平排列，列表文字样式要求和效果图基本一致。每个列表项加空链接，hover状态下无下划线，颜色红色，设置空链接。正确得10分。

5.网站文件夹以自己的学号姓名命名，提交整个文件夹。

其余没有说明的样式，考生可以根据效果图制作。

操作步骤

初始布局

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/index.css" rel="stylesheet" > 
	</head>
	<body>
		<div class="header"></div>
		<div class="main"></div>
	</body>
</html>

css代码：

*{
	margin:0;
	padding:0;
}
.header{
	width:100%;
	height:200px;
	background: yellow;
}

.main{
	width:100%;
	height:400px;
	background:red;
}

盒子嵌套

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/index2.css" rel="stylesheet" > 
	</head>
	<body>
		<div class="header">
			<div class="header1"></div>
			<div class="header2"></div>
			
		</div>
		<div class="main">
			<div class="main1"></div>
			<div class="main2"></div>
			<div class="main3"></div>
		</div>
	</body>
</html>

css代码：

*{
	margin:0;
	padding:0;
}
.header{
	width:100%;
	height:200px;
	background: yellow;
	border:2px solid red;
}
.header1{
	width:100%;
	height:150px;
	background: yellowgreen;
}
.header2{
	width:100%;
	height:50px;
	background:greenyellow;
}
.main{
	width:100%;
	height:auto;
	background:red;
	border:2px solid red;
}
.main1{
	width:100%;
	height:100px;
	background:green;
}
.main2{
	width:100%;
	height:50px;
	background:orange;
}
.main3{
	width:100%;
	height:200px;
	background:blue;
}

布局完成

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/index3.css" rel="stylesheet" > 
	</head>
	<body>
		<div class="header">
			<div class="header1">
			     <div id="logo"></div>
				 <div id="top_banner"></div>
				 <div id="search"></div>
				 <div class="clear"></div>
			</div>
			<div class="header2"></div>
			
		</div>
		<div class="main">
			<div class="main1">
				<div id="left_banner"></div>
				<div id="right_banner"></div>
		
			</div>
			<div class="main2"></div>
			<div class="main3">
				 <div id="left_column"></div>
				 <div id="mid_column"></div>
				 <div id="right_column"></div>
				 <div class="clear"></div>
			</div>
		</div>
	</body>
</html>

css代码：

*{
	margin:0;
	padding:0;
}
.header{
	width:100%;
	height:auto;
	background: yellow;
	border:2px solid red;
	overflow:hidden;
}
.header1{
	width:100%;
	height:auto;
	background: yellowgreen;
}
.header1 #logo{
	width:25%;
	height:100px;
	background:seagreen;
	float:left;
}
.header1 #top_banner{
	width:35%;
	height:100px;
	background:lawngreen;
	float:left;
}
.header1 #search{
	width:40%;
	height:100px;
	background:lightgreen;
	float:left;
}
.clear{
	clear:both;
}
.header2{
	width:100%;
	height:50px;
	background:yellow;
}
.main{
	width:100%;
	height:auto;
	background:red;
	border:2px solid red;
}
.main1{
	width:100%;
	height:auto;
	background:green;
	overflow:hidden;
}
.main1 #left_banner{
	width:50%;
	height:150px;
	background-color:springgreen;
	float:left;
}

.main1 #right_banner{
	width:50%;
	height:150px;
	background:greenyellow;
	float:left;
}

.main2{
	width:100%;
	height:50px;
	background:orange;
}
.main3{
	width:100%;
	height:200px;
	background:blue;
}
.main3{
	width:100%;
	height:auto;
	background:blue;
}
.main3 #left_column{
	width:20%;
	height:200px;
	background:blueviolet;
	float:left;
	margin-left:1%;
}
.main3 #mid_column{
	width:55%;
	height:200px;
	background:skyblue;
	float:left;
	margin-left:1%;
}
.main3 #right_column{
	width:20%;
	height:200px;
	background:royalblue;
	float:left;
	margin-left:1%;
}

插入图片、文字、表单

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/index4.css" rel="stylesheet" > 
	</head>
	<body>
		<div class="header">
			<div class="header1">
			     <div id="logo">
					 <img src="img/logo.jpg" />
				 </div>
				 <div id="top_banner">
					 <img src="img/dj.JPG" />
				 </div>
				 <div id="search">
					 <div id="search_logo">
					     <img src="img/zgss.png" />
					 </div>
					 <div id="search_form">
						 <form>
							 <input type="text" name="search_f" id="search_f"/>
							 <input type="image" src="img/icon2.gif" alt="Submit" />
							 <!-- <input type="submit" name="submit_b" id='submit_b' /> -->
						 </form>
					 </div>
				 </div>
				 <div class="clear"></div>
			</div>
			<div class="header2">
				<a href="">论坛</a>
				<a href="">组工动态</a>
				<a href="">反腐倡廉</a>
				<a href="">基层党建</a>
				<a href="">山东党史</a>
				<a href="">党建研究</a>
				<a href="">健 康</a>
				<a href="">服务查询</a>
				<a href="">党刊链接</a>
				<a href="">友情链接</a>
				<a href="">关于我们</a>
				<a href="">联系方式</a>
			</div>
			
		</div>
		<div class="main">
			<div class="main1">
				<div id="left_banner">
					<img src="img/topad2.jpg" />
				</div>
				<div id="right_banner">
					<img src="img/topad3.jpg" />
				</div>
		
			</div>
			<div class="main2">
				 <a href="">济南</a>
				 <a href="">青岛</a>
				 <a href="">淄博</a>
				 <a href="">潍坊</a>
				 <a href="">烟台</a>
				 <a href="">青岛</a>
				 <a href="">日照</a>
				 <a href="">临沂</a>
				 <a href="">菏泽</a>
				 <a href="">泰安</a>
				 <a href="">聊城</a>
				 <a href="">德州</a>
				 <a href="">济宁</a>
				 <a href="">东营</a>
				 <a href="">滨州</a>
			</div>
			<div class="main3">
				 <div id="left_column">
					 <div id="left_column_title">
						 <img src="img/title1.jpg" />
					 </div>
					 <div id="left_column_content">
					 	 <img src="img/112107.jpg" />
					 </div>
					 <div id="left_column_header">
						 习近平抵达马尼拉，开始对菲律宾进行国事访问
					 </div>
				 </div>
				 <div id="mid_column">
					 <div id="mid_column_title">
					 	  <img src="img/title5.jpg" />				 
					 </div>
					 <div id="mid_column_content">
					 	 <ul>
							<li>中央经济工作会议，把发展和安全一起谋划部署有何深意？</li>
                            <li>习近平在中央政治局第二十六次集体学习时强调 坚持系统...</li>
							<li>中共中央政治局召开会议 分析研究二〇二一年经济工作 ...</li>
							<li>习近平在中央全面依法治国工作会议上强调 坚定不移走中...</li>
							<li>习近平出席上海合作组织成员国元首理事会第二十次会议并发...</li>
							<li>中共中央关于制定国民经济和社会发展 第十四个五年规划...</li>
							<li>中共十九届五中全会在京举行</li>
						
						</ul>
					 </div>
					  <div id="mid_column_title2">
					 	  <img src="img/title6.jpg" />				 
					 </div>
					 <div id="mid_column_content2">
					 	 
					 </div>
					 
				 </div>
				 <div id="right_column">
					 <div id="right_column_title">
					 	  <img src="img/title11.jpg" />				 
					 </div>
					 <div id="right_column_content">
					 	 	 <ul>
					 	 	<li>走向我们的小康生活】“桃...</li>
					 	    <li>专题报道】迎风破浪 奋...</li>
					 	 	<li>【专题报道】紧盯黄河滩 ...</li>
					 	 	<li>习近平在中央全面依法治国工作会议上强调 坚定不移走中...</li>
					 	 	<li>习近平出席上海合作组织成员国元首理事会第二十次会议并发...</li>
					 	 	<li>中共中央关于制定国民经济和社会发展 第十四个五年规划...</li>
					 	 	<li>中共十九届五中全会在京举行</li>
					 	 
					 	 </ul>
    
    
    
  
					 </div>
				 </div>
				 <div class="clear"></div>
			</div>
		</div>
	</body>
</html>

css代码：

*{
	margin:0;
	padding:0;
}
.header{
	width:100%;
	height:auto;
	
	border:2px solid red;
	overflow:hidden;
}
.header1{
	width:100%;
	height:auto;
	/* background: yellowgreen; */
}
.header1 #logo{
	width:25%;
	height:100px;
	/* background:seagreen; */
	float:left;
}
#logo img{
	width:100%;
	height:100px;
}
.header1 #top_banner{
	width:35%;
	height:100px;
	background:lawngreen;
	float:left;
	}
#top_banner img{
	width:100%;
	height:100px;
}
.header1 #search{
	width:40%;
	height:auto;
	/* background:lightgreen; */
	float:left;
	text-align: center;
	overflow: hidden;
}
#search_logo{
	width:40%;
	height:100px;
	float:left;
        padding-top:20px;
}
#search_logo img{
	width:100%;
}
#search_form{
	width:60%;
	height:100px;
	float:left;
	line-height: 100px;
	
}
#search_f {
	height:20px;
}
.clear{
	clear:both;
}
.header2{
	width:100%;
	height:50px;
	background:#ED4852;
	text-align: center;
	line-height: 50px;
	padding-left:5%;
}
.header2 a{
	width:7%;
	height:50px;
	color:#FFFFFF;
	text-decoration: none;
	float:left;
    /* border:1px solid red; */
}
.header2 a:hover{
     color:yellow;
	}
.main{
	width:100%;
	height:auto;

	border:2px solid red;
}
.main1{
	width:100%;
	height:auto;
	/* background:green; */
	overflow:hidden;
}
.main1 #left_banner{
	width:50%;
	height:150px;
	background-color:springgreen;
	float:left;
}

.main1 #right_banner{
	width:50%;
	height:150px;
	background:greenyellow;
	float:left;
}
.main1 img {
	width:100%;
	height:150px;
}
.main2{
	width:100%;
	height:50px;
	background:#A35555;
	text-align: center;
	line-height: 50px;
}
.main2 a{
	color:#FFFFFF;
	text-decoration: none;
}

.main3{
	width:100%;
	height:auto;

}
.main3 #left_column{
	width:20%;
	height:auto;
	/* background:blueviolet; */
	float:left;
	margin-left:1%;
}
#left_column_header{
	width:100%;
	height:auto;
	background: #313435;
}
.main3 #mid_column{
	width:50%;
	height:auto;
	
	float:left;
	margin-left:1%;
}
.main3 #mid_column ul{
	margin:0;padding:0;
	list-style-position: outside;
}

.main3 #mid_column li{
	padding-left:0;margin-left:20px;
    text-align:left;line-height:200%;
}
.main3 #right_column{
	width:20%;
	height:auto;
	/* background:royalblue; */
	float:left;
	margin-left:1%;
}
.main3 #right_column ul{
	margin:0;padding:0;
	list-style-position: outside;
}

.main3 #right_column li{
	padding-left:0;margin-left:20px;
    text-align:left;line-height:200%;
}
.main3 img{
	width:100%;
	height:30px;
}
#left_column_content img{
	width:100%;
    height:auto;
}

网页布局实例：山东党建网

目录

效果图

题目要求

操作步骤

初始布局

盒子嵌套

布局完成

插入图片、文字、表单

导航菜单

个人工具

命名空间

变种

视图

更多

搜索

导航

工具