新闻中心网页设计与实现

概述

本文将详细介绍一个新闻中心网页的设计与实现过程。该网页主要用于展示公司的新闻动态，包括集团要闻、产品服务等内容。通过HTML和CSS的结合，我们创建了一个结构清晰、美观大气的网页。

html部分代码

这是图片的展示效果

css部分

 

@charset "utf-8";
/* CSS Document */
			body {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
				background-image: url(images/body.gif)
			}

			#box {
				width: 960px;
				margin: 0 auto;
				background-color: #FFF;
			}

			#fooster {
				text-align: center;
				background-color: #b2a695;
				line-height: 25px;
				padding-top: 20px;
			}

			.left {
				float: left;
			}

			.i {
				display: block;
				/* 使图片成为块级元素 */
				margin-left: auto;
				/* 自动左右边距 */
				margin-right: auto;
			}

			#menu {
				height: 36px;
				border-top: 8px solid #000;
			}

			#menu a {
				font-family: "宋体";
				font-size: 14px;
				color: #000;
				line-height: 36px;
				padding: 0px 8px;
				text-decoration: none;
				display: inline-block;
			}

			#menu a:hover,#menu a.selected {
				color: #FFF;
				background-color: #c00;
			}

			#lujing {
				font-size: 12px;
				text-align: left;
				line-height: 35px;
				background: url(images/navbg.gif) repeat-x;
				height: 37px;
			}

			#lujing a {
				color: #333;
				text-decoration: none;
				margin: 0 5px;
			}

			#content {
				padding: 20px 40px;
			}

			h3,h4,p {
				margin: 0px;
				padding: 0px;
			}

			h3 {
				font-size: 16px;
				text-align: center;
				border-bottom: 1px dashed #999;
				line-height: 35px;
			}

			h4 {
				text-align: right;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
				color: #666;
			}

			#content p {
				font-size: 12px;
				text-indent: 2em;
				line-height: 25px;
				margin-top: 10px;
			}

			input,form,ul,li,h1,h2,h3,h4{
				margin: 0;
				padding: 0;
				list-style: none;
			}

			#search{
				float: right;
				font-size: 14px;
				color: #C31103;
				font-weight: bold;
				line-height: 30px;
				padding-right: 20px;
				display: inline;
			}

			#listTitle{
				background-image: url("images/listhead.gif");
				line-height: 40px;
				padding-left: 20px;
				color: #FFFFFF;
				font-size: 14px;
				font-weight: normal;
				height: 40px;
				
			}

			#content #leftlist ul{
				background-image: url("images/listmiddle.gif") repeat-y;
				padding: 10px 0px;
			}

			#leftlist ul li{
				list-style-type: circle;
				list-style-position: inside;
				line-height: 30px;
				border-bottom: 1px dashed #999999;
				margin: 0 15px;
				padding-left: 10px;
			}

			#leftlist ul li a{
				text-decoration: none;
				color: #000000;
			}

			#content #leftlist{
				width: 208px;
				float: left;
				padding-bottom: 22px;
				background: url("images/listfoot.gif") no-repeat;
				background-position: bottom;
			}

			#content #rightlist{
				margin-left: 20px;
				float: left;
				width: 652px;
			}

			h2{
				border-bottom: 1px solid#666666; 
				line-height: 30px;
				font-size: 14px;
				width: 150px;
			}
			.fnt1{
				font-family: Arial, Helvetica, sans-serif;
				font-size: 11px;
				color: #999999;
			}

			#content #rightlist ul{
				border-top: 1px solid #999999;
			}

			#content #rightlist ul li{
				line-height: 25px;
				list-style-type: square;
			border-bottom: 1px dashed #999999; 
			list-style-position: inside;
			}

			#content #rightlist ul li a{
				text-decoration: none;
				color: #333333;
				}

			#content #rightlist ul li a:hover{
				color: #0099CC;
			}

			.newsTime{
				float: right;
			}

			.clear{
			clear: both;
			}

			.fnt2{
				color: #CC0033;
			}

			#contrainer{
				position: relative; /*设置相对定位*/
				height: 500px;
			}

			#contrainer #tpnews{
				width: 300px;
				height: 230px;
				position: absolute;
				left: 5px;
				top: 0px;
			}

			#contrainer #jtnews{
				width: 350px;
				height: 245px;
				position: absolute;
				left: 310px;
				top: 0px;
			}

			#contrainer #gsjj{
				width: 284px;
				height: 250px;
				line-height: 20px;
				position: absolute;
				top: 0px;
				right: 5px;
			}

			#contrainer #xmshow{
				position: absolute;
				left: 4px;
				top: 252px;
				width: 670px;
				height: 230px;
			}

			#contrainer #searcher{
				background: url("images/searchbg.gif");
				width: 217px;
				height: 158px;
				position: absolute;
				top: 280px;
				right: 25px;
				text-align: center;
			}

			.fnt3{
				font-size: 14px;
				font-weight: bold;
				line-height: 30px;
				padding-left: 10px;
			}

			#tpnews #imgnews{ 
				background: url("images/imgbg.gif") no-repeat; 
				height: 200px;
				text-align: center;
				width: 300px;
			}

			#imgnews img{
				height: 188px;
				width: 288px;
				position: relative;
				top: 6px;
			}

			#tpnews #imgnews{
				background-image: url("images/imgbg.gif") no-repeat;
				height: 200px;
				text-align: center;
				width: 300px;
				position: relative;
			}
			#imgnews #tpbtn{
				height: 20px;
				width: 90px;
				position: absolute;
				right: 5px;
				bottom: 5px;
			}

			.fang{
				float: left;
				height: 15px;
				width: 15px;
				margin-left: 5px;
				background-color: #CC0000;
				color: #FFFFFF;
			}

			h1{
				line-height: 30px;
				border-bottom: 1px solid #FF0000;
				font-family: "宋体";
				font-size: 14px;
				padding-left: 20px;
				background: url("images/ico5.gif") no-repeat 3px 7px;
			}

			#jtnews li{
				background: url("images/ico1.gif") no-repeat 0px 5px;
				line-height: 25px;
				border-bottom: 1px dotted #999999;
				width: 340px;
				height: 25px;
				overflow: hidden;
				position: relative;
			}

			#jtnews li a{
				padding-left: 10px;
				text-decoration: none;
				color: #333333;
			}

			#jtnews li a:hover{
				color: #FF0000;
			}

			.ntime{
				top: 0px;
				right: 0px;
				font-family: "Times New Roman",Times,serif;
				font-size: 10px;
				position: absolute;
				background-color: #FFFFFF;
				padding-left: 1px;
			}

			#xmshow img{
				height: 190px;
				width: 160px;
				margin: 5px 0 5px 5px;
			}

			.right{
				float: right;
			}

这是html的主要结构

这是html的头部

这是html的内容