HTML[CSS+DIV] 网站布局练习 Zun'Showing

最新推荐文章于 2024-08-14 11:57:27 发布

dengzonghuan

最新推荐文章于 2024-08-14 11:57:27 发布

阅读量1.2k

点赞数

分类专栏： DIV+CSS 文章标签： div html css class float image

本文链接：https://blog.csdn.net/dengzonghuan/article/details/3982739

版权

DIV+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

index.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=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> <div id="showAD"></div> <ul id="leftNav"> <li id="tag"><a href="#" mce_href="#" οnmοusemοve="" accesskey="s">S<span class="key">e</span>rvice II</a></li> <li id="tag"><a href="#" mce_href="#" οnmοusemοve="" accesskey="v">Ser<span class="key">v</span>ice III</a></li> <li id="tag"><a href="#" mce_href="#" οnmοusemοve="" 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> <div class="showGift"> <p><a href="#" mce_href="#" title="Register Now!">Register now</a> to recieve special promotion packages and bonus features!</p> </div> </div> <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> <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> <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> </div> <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> </div>  </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; }

dengzonghuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML[CSS+DIV] 网站布局练习 Zun'Showing

index.html ZunShowing Zuns Showing Home Product Support About Us OnlineShop Contact us
复制链接

扫一扫

专栏目录