网页设计（六）——基于HTML+CSS框架的网页设计实例

前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~

网页设计系列之前写了五期，分别为：

网页设计（一）——HTML基础概念：https://blog.csdn/csyzcyj/article/details/107283767

网页设计（二）——DIV+CSS布局1：https://blog.csdn/csyzcyj/article/details/107284087

网页设计（三）——DIV+CSS布局2：https://blog.csdn/csyzcyj/article/details/107284655

网页设计（四）——DIV+CSS布局3：https://blog.csdn/csyzcyj/article/details/107285198

网页设计（五）——marquee标签：https://blog.csdn/csyzcyj/article/details/107285901

这里给出一个综合性实例供大家参考，实例的效果如下，其中的图片素材都是网上找的：

HTML代码如下：

<html>
<head><link rel="stylesheet" type="text/css" href="css/homepage.css"/></head>
<body>
<div id="Container">
	<!-------------------------------------------------------------------------------------------------->
	<div id="top">
		<div id="logo">LOGO</div>
		<div id="small_nav">
			<ul>
				<li><a href="readme.html">设为首页</a></li>
				<li><a href="readme.html">加入收藏</a></li>
				<li><a href="readme.html">English</a></li>
			</ul>
		</div>
		<br>
		<div id="phone_intro"> 全国免费咨询热线:<special>400&nbsp;**********</special></div>
	</div>
	<!-------------------------------------------------------------------------------------------------->
	<div id="link">
		<div id="nav">
			<ul>
				<li><a href="readme.html">网站首页</a></li>
				<li><a href="readme.html">关于我们</a></li>
				<li><a href="readme.html">产品展示</a></li>
				<li><a href="readme.html">新闻中心</a></li>
				<li><a href="readme.html">资质证书</a></li>
				<li><a href="readme.html">人才招聘</a></li>
				<li><a href="readme.html">在线留言</a></li>
				<li><a href="readme.html">联系我们</a></li>
			</ul>
		</div>
	</div>
	<!-------------------------------------------------------------------------------------------------->
	<div id="picture">
		<div align="center"><img src="spring.jpg"></div>
		<div id="dynamic_text_pre"><p style="color:black;font-size:13px;font-family:黑体;font-weight:bold;">最新动态</p></div>
		<div id="dynamic_text">
		      <marquee align="left" behavior="scroll" bgcolor="white" direction="left" hspace="0" vspace="0" 
					   weith="800" height="27" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" 
					   onMouseOver="this.stop()">
				       <p style="color:#1F202B;font-size:12px;font-family:宋体;">·中国大学生创业网&ensp;&emsp;·过去七年，这家公司的营业额翻了24番，从2004年的......&ensp;&emsp;·增加至2011年的284.96亿元&ensp;&emsp;·增长之下的稳定高利润率4000亿港元，增加61倍</p>
			  </marquee>
		</div>	
	</div>
	<!-------------------------------------------------------------------------------------------------->
	<div id="official1">
		<div id="content_title">公司简介</div>
		<div id="content_picture"><img src="company.jpg"></div>
		<div id="content_text">
			&emsp;&emsp;深圳星狮创想信息咨询有限公司（SinceIdea），简称星狮创想，创于2009年，是国内首家UI培训、UED培训远程教育机构，经过近三年的发展，我们先后开设以UI设计师、网页设计师、互动设计师、<br><br>&emsp;&emsp;前端开发工、页面重构工程师等的培训课程。我们致力于培养符合创意产业和教育标准的中国移动......
		</div>	
	</div>	
	<!----------------------------------------------->
	<div id="official2">
		<div id="content2_title">业界动态</div>
		<p style="font-size:14px;color:#0269A5;text-align:left;font-weight:bold;position:relative;top:5px;">
			符合创意产业和教育标准的中国移动
		</p>
		<p style="font-size:12px;color:#AFADAE;text-align:left;position:relative;top:5px;">
			我们致力于培养符合创意产业和教育标准的中国移动互联网领域人才。为适应中国......
		</p>
		<div id="content2">
			<ul>
				<li><a href="readme.html">·深圳星狮创想信息咨询有限公司，简称</a></li>
				<li><a href="readme.html">·星狮创想，创办于2009年，是国内首家</a></li>
				<li><a href="readme.html">·培训远程教育机构，经过近三年的……</a></li>
				<li><a href="readme.html">·6月8日消息，新浪平入分成UI</a></li>
				<li><a href="readme.html">·6月8日，新浪微博官方游戏平台微游戏</a></li>
			</ul>
		</div>
	</div>		
	<!----------------------------------------------->
	<div id="official3">
		<div id="content_title">联系方式</div>
		<div id="content_picture"><img src="company.jpg"></div>
		<div id="content_text">
			&emsp;&emsp;深圳星狮创想信息咨询有限公司（SinceIdea），简称星狮创想，创于2009年，是国内首家UI培训、UED培训远程教育机构，经过近三年的发展，我们先后开设<br><br>&emsp;&emsp;以UI设计师、网页设计师、互动设计师、前端开发工、页面重构工程师、交互设计师等......
		</div>
	</div>
	<!-------------------------------------------------------------------------------------------------->
	<div id="dynamic_picture">
		<marquee width="800" height="110">
			<table width="850" height="110" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td width="12.5%" align="center" valign="middle"><img src="cakemodel.jpg"></td>
					<td width="12.5%" align="center" valign="middle"><img src="ice_cube_container.jpg"></td>
					<td width="12.5%" align="center" valign="middle"><img src="gloves.jpg"></td>
					<td width="12.5%" align="center" valign="middle"><img src="brush.jpg"></td> 
					<td width="12.5%" align="center" valign="middle"><img src="bowl.jpg"></td> 
					<td width="12.5%" align="center" valign="middle"><img src="ice_cube_container.jpg"></td>
					<td width="12.5%" align="center" valign="middle"><img src="gloves.jpg"></td>
					<td width="12.5%" align="center" valign="middle"><img src="brush.jpg"></td> 
				</tr>
				<tr>
					<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relative;bottom:3px;">硅胶蛋糕模</p></td>
					<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relative;bottom:3px;">硅胶冰格</p></td>
					<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relative;bottom:3px;">硅胶手套</p></td>
					<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relative;bottom:3px;">硅胶刷子</p></td>
					<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relative;bottom:3px;">硅胶碗</p></td>
					<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relative;bottom:3px;">硅胶冰格</p></td>
					<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relative;bottom:3px;">硅胶手套</p></td>
					<td width="12.5%" align="center" valign="middle"><p style="color:black;font-size:12px;position:relative;bottom:3px;">硅胶刷子</p></td>				
				</tr>
			</table>
		</marquee>
	</div>
	<!-------------------------------------------------------------------------------------------------->
	<div id="footer">
		<div style="color:black" align="center">*本网站中所涉及的图片、文字等资料均属于***********有限公司所有，未经许可不得转载*</div>
		<div style="color:black" align="center">湘ICP备**********号 ******提供技术支持</div>
	</div>
</div>
</body>
</html>

CSS代码段如下：

body
{
	margin:0;
	padding:0;
	border:0;
	color:white;
}
a:link,a:hover
{
	text-decoration:none;
	color:white;
}
#Container
{
	width:1024px;
	margin:auto auto;/*设置整个容器在浏览器中水平居中*/
	height:auto;
}
/*********************************************************************************************/
#top
{
	width:1000px;
	height:100px;
	font-size:30px;
	line-height:50px;
	margin:0px 12px 0px 12px;
	background-color:#E5F0FA;
}
#logo
{
	color:black;
	font-size:40px;
	font-family:黑体;
	font-weight:bolder;
	margin:20px 0px 0px 100px;
	float:left;
}
#small_nav ul
{
	list-style:none;/*去掉ul前面的项目符号*/
	margin:40px 100px 0px 0px;
	width:auto;
	height:10px;
	float:right;
	/*border:1px solid white;*//*设置边框显示竖线效果*/
	/*margin-left:60px;*//*控制外边距（margin）达到定位的效果*/
	/*padding-left:50px;*//*控制内边距达到定边框竖线的效果*/
	padding:0px;
}
#small_nav ul li
{
	float:left;/*变为横向排列*/
}
#small_nav ul li a,#small_nav ul li a:visited
{
	color:#1F202B;
	display:block;
	line-height:1.0em;
	padding:4px 5px;
	text-decoration:none;/*不显示超链接下划线*/
	font-size:12px;
}
#small_nav ul li a:hover/*hover-鼠标指针位于链接的上方*/
{
	background-color:#bfcbd6;
	color:#465c71;
	text-decoration:none;
}
#small_nav ul li a:active/*active-链接被点击的时刻*/
{
	background-color:#465c71;
	color:#cfdbe6;
	text-decoration:none;
}
#phone_intro
{
	color:#1F202B;
	font-size:12px;
	float:right;
	margin:0px 104px 0px 0px;
	position:relative;
	bottom:3px;
}
#phone_intro special
{
	color:#0269A5;
	font-size:15px;
	font-family:Calibri;
}
/*********************************************************************************************/
#link
{
	height:30px;
	width:1000px;
	margin:0px 12px 0px 12px;
	background-color:#0269A5;
	border-top-width:1px;
	border-top-style:dashed;
	border-right-style:none;
	border-bottom-style:none;
	border-left-style:none;
	border-top-color:blue;
}
#nav ul
{
	list-style:none;
	margin:0px;
	padding:0px;
	height:auto;
	width:auto;
}
#nav ul li
{
	float:left;
}
#nav ul li a,#nav ul li a:visited
{
	background-color:#0269A5;
	border:1px #4e667d solid;
	color:#dde4ec;
	font-size:12px;
	display:block;/*显示为块级元素,此元素前后会带有换行符*/
	line-height:1.35em;
	padding:8px 37.5px;
	text-decoration:none;
	white-space:nowrap;/*文本内的空白处,不会换行,文本会在同一行上继续,直到遇到<br>*/
}
#nav ul li a:hover
{
	background-color:#bfcbd6;
	color:#465c71;
	text-decoration:none;
}
#nav ul li a:active
{
	background-color:#465c71;
	color:#cfdbe6;
	text-decoration:none;
}
/*********************************************************************************************/
#picture
{
	width:956px;
	height:300px;	
	padding:22px;
	margin:0px 12px 0px 12px;
	background-image:url('grass(css).jpg');
	background-attachment:fixed;/*背景图像固定,不会随着页面的其余部分滚动*/
}
#dynamic_text_pre
{
	width:69px;
	height:32px;	
	margin:20px auto 10px 72px;
	background-color:white;
	float:left;
	text-align:center;
	border:1px solid #C4C4C4;	
	border-right-style:none;
	border-top-color:white;
}
#dynamic_text_pre p
{
	position:relative;
	bottom:3px;
	left:0px;
}
#dynamic_text
{
	width:740px;
	height:32px;	
	margin:20px auto 10px auto;
	background-color:white;
	border:1px solid #C4C4C4;
	float:left;
	border-left-style:none;
}
/*********************************************************************************************/
#official1
{
	text-align:center;
	float:left;
	font-size:40px;
	margin:26px;0px;15px;0px;
	width:242px;
	background-color:white;
	height:280px;
	position:relative;
	left:81px;
}
#content_title
{
	background-color:#0269A5;
	border:1px #4e667d solid;
	color:#dde4ec;
	font-size:14px;
	line-height:1.35em;
	padding:8px 12px;
	float:left;
	font-family:黑体;
}
#content_picture
{
	float:right;
}
#content_text
{
	color: #1F202B;
	font-size:12px;
	margin:10px;0px;0px;0px;
	float:left;
	line-height:1.8em;
	text-align:left;
}

#official2
{
	text-align:center;
	float:left;
	font-size:40px;
	margin:26px;0px;15px;0px;
	background-color:white;
	width:242px;
	height:280px;
	position:relative;
	left:73px;
}
#content2_title
{
	font-size:15px;
	color:black;
	text-align:left;
	font-family:黑体;
	font-weight:bold;
	position:relative;
	top:3px;
}
#content2 ul
{
	list-style:none;
	margin:0px;
	padding:0px;
	height:auto;
	width:auto;
	float:left;
	text-align:left;
	position:relative;
	top:0px;
	line-height:0em;/*与chrome兼容使用*/
}
#content2 ul li a,#content2 ul li a:visited
{
	list-style:none;
	color:#1F202B;
	line-height:2.0em;
	text-decoration:none;
	font-size:12px;
	padding:0px;
}
#official3
{
	text-align:center;
	float:left;
	font-size:40px;
	margin:26px;0px;15px;0px;
	background-color:white;
	width:242px;
	height:280px;
	position:relative;
	left:62px;	
}
/*********************************************************************************************/
#dynamic_picture
{
	width:1000px;
	height:120px;	
	margin:350px 0px 10px 0px;
	background-color:#F4F4F4;
	border:1px solid #C4C4C4;
	text-align:center;
	border-left-style:none;
	border-right-style:none;
	position:relative;
	left:12px;
}
#dynamic_picture marquee
{
	position:relative;
	bottom:1px;
	left:0px;
	margin:0px;
	padding:0px;
}
/*********************************************************************************************/
#footer
{
	width:1000px;
	height:100px;	
	background-color:white;
	float:right;
	margin-right:12px;
	margin-top:15px;
	color:#1F202B;
	font-size:12px;
	line-height:1.5em;
}

转载注明出处：https://blog.csdn/csyzcyj/

更多推荐

网页设计（六）——基于HTML+CSS框架的网页设计实例