Book05-No.5 网上书店布局
1、滑动门技术
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>滑动门 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css">body {background-color: #999;}#nav {position: absolute;top: 10px;right: 10px;}#nav ul {list-style-type: none;}#nav ul li {float: left;padding: 0px 2px;}#nav ul li a {display: block;line-height: 20px;float: left;padding: 0 0 0 14px;background: transparent url("images/top-navi-white.png") no-repeat;text-decoration: none;color: yellow;}#nav ul li a span {display: block;padding: 0 14px 0 0;background: transparent url("images/top-navi-white.png") no-repeat;}#nav ul li a:hover {color: white;background: transparent url("images/top-navi-hover.png") no-repeat;}#nav ul li a:hover span {color: white;background: transparent url("images/top-navi-hover.png") no-repeat;}#sideBar {float: left;width: 185px;margin: 0 10px 0 0;display: inline;background-color: red;}#sideBar div {margin-top: 20px;background: transparent url("images/sidebox-bottom.png") no-repeat bottom;width: 100%;display: block;}#sideBar div span {display: block;background: transparent url("images/sidebox-top.png") no-repeat top;}.bulletBoard {width: 300px;background-color: yellow;} </style> </HEAD> <BODY><div id="nav"><ul><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 id="sideBar"><div id="searchBox"><span><form><input type="text" name="" /><br/><input type="submit" value="查找商品" /></form></span></div><div id="menuBox"><span><h2>图书分类</h2><ul><li><a href="#">JavaScript</a></li><li><a href="#">JavaScript</a></li><li><a href="#">JavaScript</a></li><li><a href="#">JavaScript</a></li><li><a href="#">JavaScript</a></li><li><a href="#">JavaScript</a></li><li><a href="#">JavaScript</a></li><li><a href="#">JavaScript</a></li><li><a href="#">JavaScript</a></li></ul></span></div></div><div name="code"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css">body {margin: 0px;padding: 0px;background: white url('images/background-header.png') repeat-x;font:12px/1.6 Arial;}ul {margin: 0px;padding: 0px;list-style-type: none;}a {text-decoration: none;color:#464F15;border:0;}a img {border: none;}p { text-indent: 2em;margin: 0px 0px 5px 0px;}#header {width: 760px;height: 192px;margin: 0px auto;font:14px/1.6 arial;position: relative;}#header h1 {background: transparent url("images/h1.png") no-repeat bottom left;height: 63px;margin: 0px;}#header h1 span {display: none;}#header #decoration-1 {background-image: url("images/decoration-1.png");background-repeat: no-repeat;position: absolute;width: 270px;height: 60px;top: 70px;left: 160px;}#header #decoration-2 {background-image: url("images/decoration-2.png");background-repeat: no-repeat;position: absolute;width: 311px;height: 127px;bottom: 30px;right: 0px;}#header #headNav {position: absolute;top: 10px;right: 10px;}#header #headNav ul li {float: left;padding: 0px 5px;}#header #headNav ul li a {display: block;padding: 0px 0px 0px 14px;line-height: 20px;background: transparent url("images/top-navi-white.png") no-repeat;float: left;}#header #headNav ul li a span {display: block;padding: 0px 14px 0px 0px;background: transparent url("images/top-navi-white.png") no-repeat right;}#header #headNav ul li a:hover {display: block;background: transparent url("images/top-navi-hover.png") no-repeat;}#header #headNav ul li a:hover span {display: block;background: transparent url("images/top-navi-hover.png") no-repeat right;}#header #mainNav {position: absolute;top: 142px;left; 0px;font-weight: bold;color: white;}#header #mainNav ul li {float: left;padding: 0px 5px;}#header #mainNav ul li a {display: block;line-height: 25px;color: white;padding: 0 0 0 14px;}#header #mainNav ul li a strong {display: block;padding: 0 14px 0 0px;}#header #mainNav ul li.frist a {color: white;background: transparent url(images/main-navi.png) no-repeat;}#header #mainNav ul li.frist a strong {color: white;background: transparent url(images/main-navi.png) no-repeat right;}#header #mainNav ul li.frist a:hover {color:#464F15;background: transparent url(images/main-navi-hover.png) no-repeat;}#header #mainNav ul li.frist a:hover strong {color:#464F15;background: transparent url(images/main-navi-hover.png) no-repeat right;}#header #mainNav ul li a:hover {color: white;background: transparent url(images/main-navi-hover.png) no-repeat;}#header #mainNav ul li a:hover strong {color:#464F15;background: transparent url(images/main-navi-hover.png) no-repeat right;}#container {margin: 0px auto;width: 760px;/*background-color: red;*/position: relative;}#container #content {float: right;width:550px;/*background-color: yellow;*/padding: 0px 5px;}#container #content .module {clear: both;}#container #content .module h2 {padding-top:20px;margin-top:0px;color:#069;border-bottom:1px #DEAF50 solid;font:bold 22px/24px 楷体_GB2312;}#container #content .module h3 {font:bold 14px/21px 宋体;}#container #content .img_left img {float: left;margin: 5px 10px 0px 5px;}#container #content .img_right img {float: right;margin: 5px 5px 0px 10px}#container #content .img_more div {padding:5px;border:1px #DFE9AB solid;}#container #content .img_more ul li {float: left;width: 115px;margin: 0px 10px;text-align:center;display: inline;}#container #content .img_more a:hover {color: #fff;}#container #content .img_more a:hover div{border:1px red solid;}#container #sideBar {float: left;width: 190px;padding: 0px 10px 0px 0px;}#container #sideBar div {margin-top: 20px;background:transparent url('images/sidebox-bottom.png') no-repeat bottom;width:100%;}#sideBar div span{display:block;background:transparent url('images/sidebox-top.png') no-repeat top;padding:10px;}#sideBar #searchBox {text-align: center;}#sideBar #searchBox input.text {margin-bottom: 5px;}#sideBar #listBox h2 {margin:0px;font:bold 22px/24px 楷体_GB2312;color:#069;text-align:center;}#sideBar #extraBox h2 {margin:0px;font:bold 22px/24px 楷体_GB2312;color:#069;text-align:center;}#sideBar #extraBox p {padding: 5px;}#sideBar #listBox li {font-size: 13px;line-height; 25px;height: 25px;border-top: 1px solid white;}#sideBar #listBox li a {display: block;padding-left: 35px;background: transparent url("images/menu-bullet.png") no-repeat 6px center;}#sideBar #listBox li a:hover{display:block;color:#069;background:white url('images/menu-bullet-hover.png') no-repeat 6px center;}#sideBar #listBox li.line {border-bottom: 1px solid white;}#container #content .img_more p {text-align: center;text-indent: 0em;margin-top: 2px;}#footer {clear: both;width:760px;margin: 0px auto;text-align: center;border-top: 1px solid #DEAF50;padding: 5px 0px ;}#footer .no1 {padding-left: 250px;margin: 0px auto;text-align: center;}#footer ul.no1 li {float: left;border-left: solid #666 1px;padding: 0px 10px;}#footer ul.no1 li.frist {border-left: none;}#footer ul.no1 li a {}#footer p {clear:both;line-height:30px;background-repeat:no-repeat;width:760px;margin:0 auto;background-position:60px top;color:#888;} </style> </HEAD> <BODY><div id="header"><h1><span>CSS BOOKSTORE</span></h1><div id="decoration-1"></div><div id="decoration-2"></div><div id="headNav"><ul><li><a href="#"><span>帮助中心</span></a></li><li><a href="#"><span>账号</span></a></li><li><a href="#"><span>购物车</span></a></li></ul></div><div id="mainNav"><ul><li /><h3>CSS设计彻底研究——核心原理、技巧与设计实战</h3><p>本书是一本深入研究和揭示CSS设计技术的书籍。本书在透彻地讲解CSS核心技术的基础上，深入到各个实际应用领域中，充分向读者演示了如何使用CSS的各项技术，实现令人眩目的网页布局和效果。</p><p>本书详细介绍了CSS核心基础、盒子模型等知识，力求把道理和方法讲清楚，采用“探索式”的讲解方法，对于问题，均通过一系列动手实验，使读者就能够非常自然地得出结论，使读者不但知其然，而且还知其所以然。</p></div><div /><div><h3>创建Ruby on Rails Web应用</h3><p>Ruby是一种面向对象的敏捷语言，借鉴了LISP、Smalltalk、Perl、CLU和其他语言的最佳特性。在本书第一版面世后的5年内，Ruby得以日益流行。</p><p>本书采用“如何解决问题”的方式阐述Ruby编程，书中包含400多个按主题分类的示例；每个示例都回答了“如何使用Ruby来完成”的问题。</p><p>本书采用“如何解决问题”的方式阐述Ruby编程，书中包含400多个按主题分类的示例；每个示例都回答了“如何使用Ruby来完成”的问题。</p></div></div><div /><div><h3>ASP.NET 2.0 精粹</h3><p>本书是讲解微软公司ASP.NET 2.0 Framework最全面的图书，包含了用VB.NET和C#两种语言写成的上百段程序代码，覆盖了ASP.NET 2.0 Framework的方方面面。卷1主要内容包括创建ASP.NET页面、设计ASP.NET 网站、数据访问、创建组件、站点导航等。</p><p>本书作者是ASP界的名人，是微软公司的ASP.NET MVP(最有价值专家)，曾经开发了许多示范性应用程序。</p></div></div><div name="" value="搜索商品" /></form></span></div><div id="listBox"><span><h2>图书分类</h2><ul><li><a href="#">Javascript</a></li><li><a href="#">(X)HTML and CSS</a></li><li><a href="#">C# and ASP.net</a></li><li><a href="#">PHP and mySQL</a></li><li><a href="#">CMS and Wordpress</a></li><li width="465" alt="Book05-No.5 网上书店格局" src="/img/2012/06/25/1342106149.jpg">