本文介绍了企业网站首页的设计与布局，包括导航菜单、热点新闻展示、产品列表等模块，并提供了完整的HTML代码示例。
效果图
html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"> <img src="images/logo.gif" width="181" height="45" /> </div>
<div id="search">
<form id="form1" name="form1" method="post" action="">
搜索产品
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="查询" />
</form>
</div>
</div>
<div class="clearfloat"></div>
<div id="nav">
<div id="nav_l"></div>
<div id="nav_r"></div>
<div class="nav_main">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#" id="nav_current"><span>企业新闻</span></a></li>
<li><a href="#"><span>企业简介</span></a></li>
<li><a href="#"><span>产品展厅</span></a></li>
<li><a href="#"><span>企业历史</span></a></li>
<li><a href="#"><span>招商加盟</span></a></li>
<li><a href="#"><span>网上下单</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
<div class="nav_son">
<ul>
<li><a href="#">企业动态</a></li>
<li><a href="#">领导活动</a></li>
<li><a href="#">产品资讯</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</div>
</div>
<div class="clearfloat"></div>
<div id="maincontent">
<div id="main">
<div id="index_top">
<div id="pic">
<script language='javascript' type="text/javascript">
linkarr = new Array();
picarr = new Array();
textarr = new Array();
var swf_width=269;
var swf_height=210;
var files = "images/pic.jpg|images/pic1.jpg|images/pic2.jpg|images/pic3.jpg";
var links = "#|#|#|#";
var texts = "";
for(i=1;i<picarr.length;i++){
if(files=="") files = picarr[i];
else files += "|"+picarr[i];
}
for(i=1;i<linkarr.length;i++){
if(links=="") links = linkarr[i];
else links += "|"+linkarr[i];
}
for(i=1;i<textarr.length;i++){
if(texts=="") texts = textarr[i];
else texts += "|"+textarr[i];
}
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="images/indexpic.swf"><param name="quality" value="high">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');
document.write('<embed src="images/indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
</script>
<div id="login"><span><a href="#"><img src="images/btn_login1.gif" alt="个人用户登录" width="131" height="39" /></a></span><a href="#"><img src="images/btn_login.gif" alt="经销商登录" width="131" height="39" /></a></div>
</div>
<div id="hot_news">
<div id="news_top">
<h1>苹果iphone 4手机将于9月25日在中国上市</h1>
<p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。</p>
</div>
<div id="news_list">
<ul>
<li><span>9-22</span><a href="#">纯CSS实现三列DIV等高布局</a></li>
<li><span>9-22</span><a href="#">HTML元素的ID和Name属性的区别</a></li>
<li><span>9-22</span><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
<li><span>9-22</span><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
<li><span>9-22</span><a href="#">javascript为FF设置首页</a></li>
<li><span>9-22</span><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
</ul>
</div>
</div>
</div>
<div id="index_pic">
<h2><span></span></h2>
<ul>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
</ul>
</div>
<div id="index_box">
<div class="box">
<h2><a class="more" href="#">更多..</a><span>企业历史</span></h2>
<div class="box_con">
<dl>
<dt><a href="#"><img src="images/pic5.gif" alt="多角度对比 苹果iPod系列真机" width="91" height="70" /></a></dt>
<dd><a href="#"><strong>多角度对比 苹果iPod系列真机</strong></a> 导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播…</dd>
</dl>
<ul>
<li><a href="#">纯CSS实现三列DIV等高布局</a></li>
<li><a href="#">HTML元素的ID和Name属性的区别</a></li>
<li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
<li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
<li><a href="#">javascript为FF设置首页</a></li>
<li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
<li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
</ul>
</div>
</div>
<div class="box box1">
<h2><a class="more" href="#">更多..</a><span>企业历史</span></h2>
<div class="box_con">
<dl>
<dt><a href="#"><img src="images/pic5.gif" alt="多角度对比 苹果iPod系列真机" width="91" height="70" /></a></dt>
<dd><a href="#"><strong>多角度对比 苹果iPod系列真机</strong></a> 导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播…</dd>
</dl>
<ul>
<li><a href="#">纯CSS实现三列DIV等高布局</a></li>
<li><a href="#">HTML元素的ID和Name属性的区别</a></li>
<li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
<li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
<li><a href="#">javascript为FF设置首页</a></li>
<li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
<li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="side">
<div class="side_box">
<h2><strong>产品</strong>导购</h2>
<div class="side_con product">
<ul>
<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
<li class="product3"><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
</ul>
</div>
</div>
<div class="side_con ask">
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
</dl>
</div>
<div class="side_box">
<h2><strong>联系</strong>我们</h2>
<div class="side_con contact"><a href="#"><img src="images/tel.gif" width="222" height="112" /></a></div>
</div>
</div>
</div>
<div class="clearfloat"></div>
<div id="footer"><dl>
<dt><a href="#">关于我们</a> || <a href="#">产品目录</a> || <a href="#">联系我们</a> || <a href="#">友情链接</a> || <a href="#">反馈问题</a> || <a href="#">广告合作</a></dt>
<dd>Copyright © 2007 - 2010 aa25.cn All Rights Reserved<br />
标准之路 版权所有 京ICP备10007159号</dd>
</dl></div>
</div>
</body>
</html>
css文件
@charset "gb2312";
/* CSS Document */
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#444; text-decoration:none;}
a:hover { color:#f00;}
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
/*body*/
#container { width:900px; margin:0 auto;}
/*header*/
#header { height:71px;}
#logo { float:left; margin-top:18px;}
#search { float:right; height:24px; margin-top:30px; color:#444;}
.inp_srh { width:140px; height:17px; padding-left:20px; background:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}
.btn_srh { width:58px; height:23px; background:url(../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}
#search * { vertical-align:middle;}
#nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;}
#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
#nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;}
.nav_main { height:36px; overflow:hidden;}
.nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
.nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}
.nav_main ul li a span { float:left; display:block; padding-right:20px;}
.nav_main ul li a:hover { background:url(../images/nav_bg.gif) 0 -163px no-repeat; color:#fff;}
.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat; cursor:pointer;}
.nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}
.nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -132px no-repeat;}
.nav_son { height:30px;}
.nav_son ul li { float:left; margin-top:4px;}
.nav_son ul li a { display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}
.nav_son ul li a:hover { background:url(../images/nav_bg.gif) 0 -198px no-repeat;}
/*main*/
#maincontent { overflow:auto; zoom:1;}
#main { float:left; width:664px;}
#index_top { height:255px; overflow:hidden; margin-bottom:8px;}
#pic { float:left; width:269px;}
#login { margin-top:6px;}
#login span { float:right;}
#hot_news { float:right; width:358px; height:225px; padding:15px; background:url(../images/hot_bg.gif) 0 0 no-repeat;}
#news_top { border-bottom:1px dotted #ccc; padding-bottom:8px;}
#news_top h1 { font-size:18px; line-height:2.2; font-family:"microsoft yahei"; color:#444;}
#news_top p { color:#999;}
#news_list { padding-top:6px;}
#news_list ul li { background:url(../images/icon.gif) 0 -300px no-repeat; padding-left:20px; line-height:1.9;}
#news_list ul li span { float:right; color:#579f11;}
#index_pic { border:1px solid #dbdbdb; margin-bottom:8px;}
#index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb; overflow:hidden;}
#index_pic h2 span { display:block; height:25px; background:url(../images/rmcp.gif) 12px 6px no-repeat;}
#index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;}
#index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;}
#index_pic ul li a { display:block;}
#index_pic ul li img { margin-bottom:3px;}
#index_box { margin-bottom:8px;}
.box { width:326px; float:left; border:1px solid #dbdbdb;}
.box1 { float:right;}
.box h2 { height:23px; padding:5px 10px 0 10px; font-size:14px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb; color:#444; overflow:hidden;}
.box h2 span { display:block; height:25px; background:url(../images/icon.gif) 0 -3px no-repeat; padding-left:20px;}
.more { float:right; padding-left:13px; font-size:12px; font-weight:normal; color:#db8d3b; background:url(../images/icon.gif) 0 -46px no-repeat;}
.more:hover { color:#cb6d0a; background:url(../images/icon.gif) 0 -96px no-repeat;}
.box_con { height:243px; padding:15px 15px 0 15px; overflow:hidden;}
.box_con dl { height:74px; overflow:hidden;}
.box_con dl dt { float:left; padding:1px; border:1px solid #d8d8d8;}
.box_con dl dd { float:right; width:188px; color:#888; line-height:1.5;}
.box_con dl dd a { display:block; margin-bottom:3px; color:#05a;}
.box_con ul { margin-top:10px;}
.box_con ul li { background:url(../images/icon.gif) 0 -300px no-repeat; padding-left:20px; line-height:1.8;}
#side { float:right; width:228px;}
.side_box { margin-bottom:8px;}
.side_box h2 { height:25px; padding:6px 10px 0 10px; background:url(../images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;}
.side_box h2 strong { color:#f30;}
.side_con { padding:0 10px; background:url(../images/side_bg.gif) 0 bottom no-repeat;}
.product { padding:3px 10px;}
.product ul { background:url(../images/icon2.gif) 5px 12px no-repeat;}
.product ul li { height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#777;}
.product ul li strong { display:block; height:24px; color:#333;}
.product ul li a { color:#777;}
.product ul li a:hover { text-decoration:underline;}
.product ul li.product3 { border-bottom:none;}
.ask dl { padding:9px 0; border-bottom:1px dashed #dcdcdc;}
.ask dl dt { height:22px; overflow:hidden; font-weight:bold; background:url(../images/icon.gif) 0 -149px no-repeat; padding-left:20px;}
.ask dl dt a { color:#666;}
.ask dl dd { color:#666; background:url(../images/icon.gif) 0 -198px no-repeat; padding-left:20px;}
.contact { padding:2px;}
/*footer*/
#footer { text-align:center;}
#footer dl dt { height:28px; line-height:28px; background:#afafaf; color:#fff;}
#footer dl dt a { font-weight:bold; color:#fff;}
#footer dl dd { padding:8px 0; color:#666; line-height:2;}
相应图片素材略
扫一扫
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
