当前位置： 代码迷 >> Web前端 >> Book05-No.5 网上书店格局
  详细解决方案

Book05-No.5 网上书店格局

热度：408   发布时间：2012-06-30 17:20:12.0
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 class="bulletBoard">
		<div class="bb-read">
			<h3>下载与讨论</h3>
		</div>
		<div class="bb-body">
			<ul>
				<li><a href="#">Javaript图书分图分类</a></li>
				<li><a href="#">JavaScript图书分类</a></li>
				<li><a href="#">图书分类图书分类</a></li>
				<li><a href="#">JavaScript图图书分类</a></li>
				<li><a href="#">JavaScript图书分类图书分类</a></li>
			</ul>
		</div>
	</div>
  
 </BODY>
</HTML>

?

2、书店首页代码

<!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 class="frist"><a href="#"><strong>网站首页</strong></a></li>
				<li><a href="#"><strong>图书介绍</strong></a></li>
				<li><a href="#"><strong>信息</strong></a></li>
				<li><a href="#"><strong>畅销排行榜</strong></a></li>
			</ul>
		</div>
	</div>

	<div id="container">
		<div id="content">
			<div class="module img_left">
				<h2>本周推荐</h2>
				<img src="images/book1.png" />
				<h3>CSS设计彻底研究――核心原理、技巧与设计实战</h3>
				<p>本书是一本深入研究和揭示CSS设计技术的书籍。本书在透彻地讲解CSS核心技术的基础上，深入到各个实际应用领域中，充分向读者演示了如何使用CSS的各项技术，实现令人眩目的网页布局和效果。</p>
				<p>本书详细介绍了CSS核心基础、盒子模型等知识，力求把道理和方法讲清楚，采用“探索式”的讲解方法，对于问题，均通过一系列动手实验，使读者就能够非常自然地得出结论，使读者不但知其然，而且还知其所以然。</p>
			</div>

			<div class="module img_right">
				<h2>新书上架</h2>
				<img src="images/book2.png" />
				<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 class="module img_left">
				<h2>最受欢迎</h2>
				<img src="images/book3.png" />
				<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 class="module img_more">
				<h2>相关推荐</h2>
				<ul>
					<li>
						<a href="#"><div><img src="images/ex1.jpg"></div></a>
						<p><strong>iPod shuffle</strong><br />From $49</p>	
					</li>

					<li>
						<a href="#"><div><img src="images/ex2.jpg"></div></a>
						<p><strong>iPod nano</strong><br />From $249</p>	
					</li>

					<li>
						<a href="#"><div><img src="images/ex3.jpg"></div></a>
						<p><strong>iPod classica</strong><br />From $149</p>	
					</li>

					<li>
						<a href="#"><div><img src="images/ex4.jpg"></div></a>
						<p><strong>iPod touch</strong><br />From $349</p>	
					</li>
				</ul>
			</div>

			<div class="module img_more">
				<h2>热门推荐</h2>
				<ul>
					<li>
						<a href="#"><div><img src="images/ex5.jpg"></div></a>
						<p><strong>MacBook Pro</strong><br />From $1459</p>	
					</li>

					<li>
						<a href="#"><div><img src="images/ex6.jpg"></div></a>
						<p><strong>MacBook</strong><br />From $2880</p>	
					</li>

					<li>
						<a href="#"><div><img src="images/ex7.jpg"></div></a>
						<p><strong>iMac</strong><br />From $1349</p>	
					</li>

					<li>
						<a href="#"><div><img src="images/ex8.jpg"></div></a>
						<p><strong>Mac Pro</strong><br />From $2799</p>	
					</li>
				</ul>
			</div>
		</div>

		<div id="sideBar">
			<div id="searchBox">
				<span>
					<form>
						<input type="text" name="" class="text"/>
						<br/>
						<input type="submit" 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 class="line"><a href="#">Expression Web</a></li>
					</ul>
				</span>
			</div>

			<div id="extraBox">
				<span>
					<h2>特别提示</h2>
					<p>特别提示特别提示特别提示特别提示特别提示特别</p>
				</span>
			</div>

			<div id="listBox">
				<span>
					<h2>十大畅销书</h2>
					<ul>
						<li><a href="#">CSS设计彻底研究</a></li>
						<li><a href="#">精通CSS+DIV布局</a></li>
						<li><a href="#">精通Dreamweaver</a></li>
						<li><a href="#">精通Flash</a></li>
						<li><a href="#">精通Photoshop</a></li>
						<li><a href="#">精通Fireworks</a></li>
						<li><a href="#">CSS设计彻底研究</a></li>
						<li><a href="#">精通CSS+DIV布局</a></li>
						<li class="line"><a href="#">精通Dreamweaver</a></li>

					</ul>
				</span>
			</div>
		</div>

	</div>

	

	<div id="footer">
		<ul class="no1">
			<li class="frist"><a href="#">网站首页</a></li>
			<li><a href="#">产品介绍</a></li>
			<li><a href="#">信息</a></li>
			<li><a href="#">畅销排行榜</a></li>
		</ul>

		<p class="no2">版权属于前沿科技 artech.cn, Copyright&copy;2008&nbsp;|Privacy Notice|Terms of Use</p>
	</div>
 </BODY>
</HTML>

3、首页效果：

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.