HTML[CSS+DIV] 网站布局练习 Zun'Showing
2009-03-12 08:40
701 查看
index.html
style.css
<!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=utf-8" /> <meta http-equiv="Content-Language" content="Chinese" /> <meta name="Author" content="zun(dengzonghuan@yahoo.com.cn)" /> <meta name="Robots" content="index" /> <meta name="Description" content="Zun's Showing" /> <meta name="Keywords" content="zun,product,it,service" /> <link rel="stylesheet" type="text/css" href="style.css" mce_href="style.css" /> <title>Zun'Showing</title> </head> <body> <div id="main"> <div id="logo"> <h1>Zun's <span class="blue">Showing</span></h1> </div> <ul id="menuNav"> <li class="active"><span class="key">H</span>ome</li> <li><a href="#" mce_href="#" accesskey="p"><span class="key">P</span>roduct</a></li> <li><a href="#" mce_href="#" accesskey="s"><span class="key">S</span>upport</a></li> <li><a href="#" mce_href="#" accesskey="u">About <span class="key">U</span>s</a></li> <li><a href="#" mce_href="#" accesskey="o">Online<span class="key">S</span>hop</a></li> <li><a href="#" mce_href="#" accesskey="c"><span class="key">C</span>ontact us</a></li> </ul> <div id="introNavShow"> <p>This is the <a hreft="#">FIRST SERVICE or PRODUCTION</a> introduction.</p> </div><!-- ends of introNav--> <div id="showAD"></div><!-- end of showAD--> <ul id="leftNav"> <li id="tag"><a href="#" mce_href="#" onmousemove="" accesskey="s">S<span class="key">e</span>rvice II</a></li> <li id="tag"><a href="#" mce_href="#" onmousemove="" accesskey="v">Ser<span class="key">v</span>ice III</a></li> <li id="tag"><a href="#" mce_href="#" onmousemove="" accesskey="e">Serv<span class="key">i</span>ce IV</a></li> </ul> <div id="left"> <div class="newsFocus"> <h2>Our New Status These Days</h2> <p><b><a href="#" mce_href="#">28th July</a> · 最近</b>闲的很，什么也没做，看休闲小说，听交响乐，打游戏，呵呵~生活的真奢侈。时间就这样一分一秒的流逝</p> <p><b><a href="#" mce_href="#">29th July</a> · Night time thoughts</b><br />This one takes a couple of hours after the end of Crossing lines, which as I established above, occours sometime in the summer of 2008 </p> </div><!-- end of newsFocus--> <div class="showGift"> <p><a href="#" mce_href="#" title="Register Now!">Register now</a> to recieve special promotion packages and bonus features!</p> </div><!-- end of showGift--> </div><!-- left ends --> <div id="right"> <div class="showProduct"> <h3>the New Products Showing</h3> <p><img src="images/150.jpg" mce_src="images/150.jpg" alt="Image" class="image" />Limits: Consumers, small business, government and education customers purchase limit is five per customer. Medium business and large enterprise customers purchase limit is 50 per customer.Availability: Offers, prices, specifications and availability may change without notice. Lenovo is not responsible for photographic or typographic errors.</p> </div><!-- end of showProduct--> <div class="showCatalog"> <h3>产品介绍一</h3> <p><img src="images/hot.jpg" mce_src="images/hot.jpg" alt="Image" class="image" />价格，规格配备及产品供应状况随时更改，恕不另行通知。有关更改可能在戴尔确认接受订单时发生。除非另行说明，以上价格均已包含适用的税收。</p> <h3>服务介绍一</h3> <p><img src="images/hot.jpg" mce_src="images/hot.jpg" alt="Image" class="image" />此文中提及的其它商标及名称指这些机构的商标及名称或其产品。戴尔并不拥有其它商标及商品名称的权利。页面上所出现的产品图片仅供参考.</p> </div><!-- end of showCatalog--> <div class="special"> <dl class="serviceDetail"> <dt>Sevice One</dt> <dd class="pic"><img src="images/pic01.gif" mce_src="images/pic01.gif"></dd> <dd class="intro">始终把全心全意为用户服务放在第一位</dd> </dl> <dl class="serviceDetail"> <dt>Sevice One</dt> <dd class="pic"><img src="images/pic02.gif" mce_src="images/pic02.gif"></dd> <dd class="intro">始终把全心全意为用户服务放在第一位</dd> </dl> <dl> <dt class="serviceLi">Sevice One</dt> <dd class="pic"><img src="images/pic03.gif" mce_src="images/pic03.gif"></dd> <dd class="intro">始终把全心全意为用户服务放在第一位</dd> </dl> </div><!-- end of special--> </div><!-- right ends --> <div id="footer"> <p>© Copyright <a href="#" mce_href="#">zun's showing</a> 2008 · Design: <a href="dengzonghuan@yahoo.com.cn" mce_href="http://mce_host/dengzonghuan@yahoo.com.cn" title="zun's Design">zun(Dengzonghuan)</a> · <a href="http://validator.w3.org/check?uri=referer" mce_href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" mce_href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a> valid</p> </div><!-- end of footer--> </div> <!-- end of the main--> </body> </html>
style.css
/*
template: Zun'sShowing
author: zun (dengzonguan@yahoo.com.cn)
*/
body {
margin: 0;
padding: 0;
background: #fff url(images/bg.gif) repeat-x;
font: normal .7em Arial, Helvetica, sans-serif;
line-height: 1.6em;
color: #333;
}
/*Links and headings styling (链接和标题样式)*/
a {
color: #546f92;
background: inherit;
}
a:hover {
color: #808080;
background: inherit;
}
h1 {
font: bold 2em Verdana, Arial, Helvetica, sans-serif;
margin: 0;
color: #fff;
background-color: transparent;
}
h2 {
font: bold 1.4em Geneva, Arial, Helvetica, sans-serif;
}
h3 {
clear: both;
font-size: 1.1em;
color: #000;
background: #fff url(images/h3bg.gif) no-repeat center left;
padding: 0 14px;
margin: 0;
}
.blue {
color: #546f92;
background: inhrerif;
}
.image {
float: left;
border: 2px solid #e2e2e2;
padding: 3px;
margin: 0 15px 10px 0;
}
/*Center wrapper(中央容器[包装样式])*/
#main {
width: 900px;
margin: 25px auto 0px auto;
}
/*Top left log (顶部左侧logo图标)*/
#logo {
float: left;
padding: 10px 0 10px 10px;
}
#logo h1 {
color: #000;
background: #fff;
}
/*Top right horizontal menu (顶部右侧水平导航菜单)*/
#menuNav {
float: right;
background: #fff url(images/barul.gif) no-repeat bottom right;
color: #808080;
padding: 18px 1px 11px 0;
margin: 0;
}
#menuNav li {
padding: 14px 18px 14px 18px;
color: #444;
background: #fff url(images/bar.gif) no-repeat bottom left;
display: inline;
}
#menuNav li.active {
background: #fff url(images/baractive.giv) no-repeat buttom left;
color: #8d9caf;
font-weight: bold;
padding: 14px 18px 14px 18px;
margin: 0 1px 0 0;
}
#menuNav li a {
background: #f8f8f8;
color: #808080;
text-decoration: none;
}
#menuNav li a:hover {
color: #000;
background: #f8f8f8;
}
.key {
text-decoration: underline;
} /*Accesskey underline letter*/
/*left introNav(左侧导航介绍)*/
#introNavShow {
clear: left;
float: left;
width: 250px;
background: #FFC0CB url(images/leftintrobg.gif) repeat-x;
color: #e5eaf2;
margin: 0 0 1px 0;
display: block;
}
#introNavShow a {
color: #fff;
background: inhrerit;
}
#introNavShow p {
padding: 14px 15px;
margin: 0;
}
/*left navigation style(左侧导航样式)*/
#leftNav {
float: left;
margin: 0 0 6px 0;
padding: 0 0 1px 0;
border-bottom: 2px solid #e2e2e2;
}
#leftNav li {
list-style: none;
}
#leftNav li a {
display: block;
color: #3f5b7f;
background: #FFE4E1 url(image/arrow.gif) no-repeat center left;
width: 204px;
padding: 7px 23px 7px 23px;
margin: 0 0 1px 0;
font-weight: bold;
text-decoration: none;
}
#leftNav li a:hover {
background: 9eb1c9 url(images/arrow.gif) no-repeat center left;
color: #fff;
}
/*showing the AD show(右侧广告)*/
#showAD {
float: right;
width: 340px;
padding: 25px 280px 0px 20px;
background: #bcceda url(images/intro2.gif) no-repeat;
color: #547592;
margin: 0 0 6px 0;
height: 174px;
border: 2px solid #e2e2e2;
}
#showAD h1 {
margin: 0 0 20px 0;
}
#showAD .white {
color: #fff;
background: transparent;
}
/*left side(左边样式)*/
#left {
float: left;
width: 250px;
}
.newsFocus {
padding: 4px 15px;
border: 1px solid #ccc;
margin: 0 0 10px 0;
}
.showGift {
padding: 15px 15px 20px 100px;
border: 1px solid #cfcb66;
margin: 0 0 5px 0;
background: #ffffad url(images/package.gif) no-repeat;
color: #585616;
}
/*right side(右边样式)*/
#right {
float: right;
width: 643px;
}
.showProduct {
float: left;
padding: 12px 15px;
width: 285px;
border: #ccc 1px solid;
text-align: justify;
margin: 0 0 10px 0;
}
.showCatalog {
float: right;
padding: 10px 15px;
width: 285px;
border:#ccc 1px solid;
margin: 0 0 10px 0;
}
.special {
clear: both;
height: 170px;
margin: 0px 0px 10px 0px;
padding: 5px 20px;
border:#ccc 1px solid;
background: #eee;
color: #444;
}
.special dl {
float: left;
width:186px;
height: 150px;
border: 2px solid #e2e2e2;
margin: 10px 10px 10px 0;
text-align:center;
}
.special dl dt {
width: 186px;
height: 20px;
color:#FFF;
text-align: left;
}
.special dl dd {
margin-left: -1px;
}
.special dl dd img {
width:150px;
height:86px;
margin:8px;
border:0;
}
.special dl dd.intro {
width:173px;
margin-top:-5px;
border:0;
text-align: left;
}
.special dl dt {
background-image: url(images/pic_bar.gif);
font:bold .12em Arial, Helvetica, sans-serif;
}
/* footer(底部样式) */
#footer {
clear: both;
padding: 5px;
border-top: 1px solid #ccc;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- <div+css页面布局课堂笔记>10---页面布局网站首页设计实例__2
- <div+css页面布局课堂笔记>11---页面布局网站首页设计实例__终极版（仿csdn首页）
- HTML&CSS布局练习---360导航页面
- HTML&CSS——使用DIV和CSS完成网站首页重构
- <div+css页面布局课堂笔记>9---页面布局网站首页设计实例__1
- html常用布局方式div+css与Table布局优劣性
- DIV+CSS常用的Html网页布局代码
- CSS+DIV 布局 (流体布局&刚性布局)
- Html+Css_相对于父div进行相对布局
- Html-DW（1）链接CSS & div基础
- 在html中div+css布局的简单应用（适合初学者了解）
- DIV+CSS布局的网页对网站优化的影响
- 收藏网站制作常用经典css.div.布局.设计实例打包下载2
- HTML&CSS基础学习笔记1.22-文章布局
- HTML && CSS 学习笔记（5）div、class（关键词：html/div/class）
- html&&css练习
- 技术前沿 DIV+CSS布局网页对网站SEO的影响
- HTML结构化：实践DIV＋CSS网页布局入门指南
- HTML结构化：实践DIV＋CSS网页布局入门指南
- 《HTML&CSS设计与构建网站》第九章 Flash视频和音频