DW制作书店网页的html代码和CSS代码？

html-css024

DW制作书店网页的html代码和CSS代码？,第1张

<Html >

<HEAD id="ctl00_HEAD1"><meta http-equiv="Content-Type" content="text/html" /><title>

图书列表页

</title>

<style type="text/css">

*{padding:0margin:0}

image{border:0}

div{color:#000000

font-size:12px}

td{color:#000000

font-size:12px}

.topdiv{position:absolute

left:700px

top:100px

width:190px}

.top-input{border:0

background:#FFFFFF

width:175px

height:20px

padding-top:2px}

.middle-bg{background:url(Images/index-bg.jpg) 0px 0px no-repeat

width:1024px}

.middle-left{width:180px}

.middle-left1{width:150pxborder-left:1 #7AB271 solidborder-right:1 #7AB271 solidpadding:10px 5px 10px 5px}

.bottom {width:80pxcolor:#000000line-height:30pxfont-size:12pxtext-align:centertext-decoration:none}

.bottom :hover{width:80pxcolor:#000000line-height:30pxfont-size:12pxtext-align:centertext-decoration:none}

.bcopyright{color:#666666font-size:12pxtext-align:center}

</style>

<style type="text/css">

.ctl00_tvStoreClass_0 { text-decoration:none}

</style></HEAD>

<script language="javascript">

function Search()

{

keyword=document.getElementById("ctl00_Search").value

document.location="Search.aspx?KeyWord="+escape(keyword)

}

window.onload=function(){

var url=document.location.toString()

var array=url.split("KeyWord=")

if(array.length>1)

document.getElementById("ctl00_Search").value=unescape(array[1])

else

document.getElementById("ctl00_Search").value=""

}

</script>

<BODY>

<!--网站头部开始-->

<form name="aspnetForm" method="post" action="BookList.aspx?typeid=20" id="aspnetForm">

<div>

</div>

<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['aspnetForm']

if (!theForm) {

theForm = document.aspnetForm

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget

theForm.__EVENTARGUMENT.value = eventArgument

theForm.submit()

}

}

//]]>

</script>

<script type="text/javascript">

//<![CDATA[

function TreeView_PopulateNodeDoCallBack(context,param) {

WebForm_DoCallback(context.data.treeViewID,param,TreeView_ProcessNodeData,context,TreeView_ProcessNodeData,false)

}

var ctl00_tvStoreClass_Data = null//]]>

</script>

<div>

</div>

<div style="width:1024pxheight:150px">

<div><IMG src="Images/index-top.jpg" border="0" usemap="#Map"></div>

<div class="topdiv"><input name="ctl00$Search" type="text" id="ctl00_Search" style="height:20pxwidth:186px" />

<!--

<INPUT name="search" id="search" type="text" class="top-input">-->

</div>

</div>

<div class="middle-bg">

<!--网站中间部分开始-->

<div style="padding-left:30pxfont-size:13pxline-height:30pxfont-weight:bold">您现在的位置：<span id="ctl00_SiteMapPath1"><a href="#ctl00_SiteMapPath1_SkipLink"><img alt="跳过导航链接" height="0" width="0" src="/Demos/MyBookShop%20-%20Final/Web/WebResource.axd?d=Z6p7xF9tjY6napuwT3WBkA2&t=633710706727968750" style="border-width:0px" /></a><span><a href="/Demos/MyBookShop%20-%20Final/Web/Default.aspx">第三波</a></span><span>></span><span>图书列表页</span><a id="ctl00_SiteMapPath1_SkipLink"></a></span>

</div>

<div style="padding:15px 0px 15px 0px">

<TABLE width="900" border="0" cellspacing="0" cellpadding="0" align="center">

<TR>

<!--左边菜单栏开始-->

<TD class="middle-left" valign="top"><div><IMG src="Images/menu-top.gif"></div>

<div class="middle-left1">

<a href="#ctl00_tvStoreClass_SkipLink"><img alt="跳过导航链接。" src="/Demos/MyBookShop%20-%20Final/Web/WebResource.axd?d=Z6p7xF9tjY6napuwT3WBkA2&t=633710706727968750" width="0" height="0" style="border-width:0px" /></a><div id="ctl00_tvStoreClass">

<table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><a id="ctl00_tvStoreClassn0" href="javascript:TreeView_ToggleNode(ctl00_tvStoreClass_Data,0,ctl00_tvStoreClassn0,' ',ctl00_tvStoreClassn0Nodes)"><img src="#" alt="折叠 新书推荐" style="border-width:0" /></a></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="default.aspx" id="ctl00_tvStoreClasst0">新书推荐</a></td>

</tr>

</table><div id="ctl00_tvStoreClassn0Nodes" style="display:block">

<table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=1" id="ctl00_tvStoreClasst1">C#</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=25" id="ctl00_tvStoreClasst2">.NET</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=29" id="ctl00_tvStoreClasst3">ASP.NET</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=16" id="ctl00_tvStoreClasst4">Basic VB VB Script</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=15" id="ctl00_tvStoreClasst5">C C++ VC VC++</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=4" id="ctl00_tvStoreClasst6">CSS Div</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=22" id="ctl00_tvStoreClasst7">HTML XML</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=2" id="ctl00_tvStoreClasst8">J2EE</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=21" id="ctl00_tvStoreClasst9">Java Script Java</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=31" id="ctl00_tvStoreClasst10">JSP</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=26" id="ctl00_tvStoreClasst11">Perl</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=35" id="ctl00_tvStoreClasst12">WINDOWS</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=38" id="ctl00_tvStoreClasst13">电子商务</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=17" id="ctl00_tvStoreClasst14">计算机等级考试</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=20" id="ctl00_tvStoreClasst15">计算机理论</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=28" id="ctl00_tvStoreClasst16">其他</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=27" id="ctl00_tvStoreClasst17">网站开发</a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=0" id="ctl00_tvStoreClasst18"></a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=0" id="ctl00_tvStoreClasst19"></a></td>

</tr>

</table><table cellpadding="0" cellspacing="0" style="border-width:0">

<tr>

<td><div style="width:20pxheight:1px"></div></td><td><img src="down" alt="" /></td><td style="white-space:nowrap"><a class="ctl00_tvStoreClass_0" href="BookList.aspx?typeid=0" id="ctl00_tvStoreClasst20"></a></td>

</tr>

</table>

</div>

</div><a id="ctl00_tvStoreClass_SkipLink"></a>

</div>

<div><IMG src="Images/menu-bottom.gif"></div>

</TD>

<!--右边主要内容开始-->

<TD valign="top"><TABLE width="100%" border="0" cellspacing="0" cellpadding="0">

<TR>

<TD>

<div class="contentstyle">

<div id="divOrder">

<div style="text-align:leftmargin:20px 0 20px 0">排序方式：

<input type="submit" name="ctl00$cphContent$btnDate" value="出版日期" id="ctl00_cphContent_btnDate" class="anniu" style="width:57pxheight:16pxfont-weight:normalfont-size:12pxcolor:Blackborder-width:1pxborder-style:Solidborder-color:SeaGreenbackground-color:#C0FFC0" />

| <input type="submit" name="ctl00$cphContent$btnPrice" value="价格" id="ctl00_cphContent_btnPrice" class="anniu" style="width:57pxheight:16pxfont-weight:normalfont-size:12pxcolor:Blackborder-width:1pxborder-style:Solidborder-color:SeaGreenbackground-color:#C0FFC0" /></div>

</div>

</div>

<div class="contentstyle" >

<table id="ctl00_cphContent_dlBooks" cellspacing="0" border="0" style="border-collapse:collapse">

<tr>

<td>

<table>

<tr>

<td rowspan="2">

<a href="BookDetail.aspx?bid=4939">

<img style="CURSOR: hand" height="121" alt="" src="Images/BookCovers/9787115145543.jpg" width="95" hspace="4"/>

</a>

</td>

<td style="FONT-SIZE: smallCOLOR: red" width="650">

<a href="BookDetail.aspx?bid=4939" name="link_prd_name" target="_blank" class="booktitle" id="link_prd_name"></a>

</td>

</tr>

<tr>

<td align="left">

<span style="font-size:12pxline-height:20px">（美）Stanley B. Lippman Barbara E. Moo Josée LaJoie 著，李师贤 等译</span><br />

<br />

<span style="font-size:12pxline-height:20px">本书是久负盛名的C++经典教程，其内容是C++大师Stanley B. Lippman丰富的实践经验和C++标准委员会原负责人Josée Lajoie对C++标准深入理解的完美结合，已经帮助全球无数程序员学会了C++。本版对前一版进行了彻底的修订，内容经过了重新组织，更加入了C++先驱Barba...</span>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<span style="font-size:13pxline-height:20pxfont-weight:bold">¥ 99.0000</span>

</td>

</tr>

</table>

</td>

</tr><tr>

<td>

<hr />

</td>

</tr><tr>

<td>

<table>

<tr>

<td rowspan="2">

<a href="BookDetail.aspx?bid=5856">

<img style="CURSOR: hand" height="121" alt="" src="Images/BookCovers/9787302135449.jpg" width="95" hspace="4"/>

</a>

</td>

<td style="FONT-SIZE: smallCOLOR: red" width="650">

<a href="BookDetail.aspx?bid=5856" name="link_prd_name" target="_blank" class="booktitle" id="link_prd_name">数据结构（Java版）——国外经典教材·计算机科学与技术</a>

</td>

</tr>

<tr>

<td align="left">

<span style="font-size:12pxline-height:20px">（美）福特（Ford,W.H.），（美）托普（Topp,W.R.） 著，梁志敏 译</span><br />

<br />

<span style="font-size:12pxline-height:20px">数据结构在计算机科学的各个领域中都扮演着非常重要的角色。本书主要从面向对象的角度进述了数据结构的基本理论。为帮助读者更加深入全面地理解数据结构，全书贯穿了对算法的综合研究。<br> 本书重要特色：<br> 使用大量的示例与图表阐明各种概念。<br> 大量的书面练习与编程练习覆盖...</span>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<span style="font-size:13pxline-height:20pxfont-weight:bold">¥ 118.0000</span>

</td>

</tr>

</table>

</td>

</tr><tr>

<td>

<hr />

</td>

</tr><tr>

<td>

<table>

<tr>

<td rowspan="2">

<a href="BookDetail.aspx?bid=5956">

<img style="CURSOR: hand" height="121" alt="" src="Images/BookCovers/9787508312958.jpg" width="95" hspace="4"/>

</a>

</td>

<td style="FONT-SIZE: smallCOLOR: red" width="650">

<a href="BookDetail.aspx?bid=5956" name="link_prd_name" target="_blank" class="booktitle" id="link_prd_name">Directx与VB.NET程序开发</a>

</td>

</tr>

<tr>

<td align="left">

<span style="font-size:12pxline-height:20px">（美）斯克 编著，何健辉，陈志远 等译</span><br />

<br />

<span style="font-size:12pxline-height:20px">Directx是用来创造基于Windows的计算机游戏以及多媒体应用程序的组件，是当今应用最广泛的一种技术。它与Visual Basic的结合可谓是编程史上的一次飞跃，尤其对游戏开发人员和多媒体编程人员来说更是具有重大意义。本书共分8部分，26章，通过大量实例生动翔实地介绍了如何使用Direct...</span>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<span style="font-size:13pxline-height:20pxfont-weight:bold">¥ 39.0000</span>

</td>

</tr>

</table>

</td>

</tr>

</table> 

</div>

<div class="contentstyle" style="text-align:leftmargin:20px 0 20px 0">

<span id="ctl00_cphContent_lblCurrentPage">第 1 页 共 1 页</span>

<input type="submit" name="ctl00$cphContent$btnPrev" value="上一页" id="ctl00_cphContent_btnPrev" disabled="disabled" class="anniu" style="width:57pxheight:16pxfont-weight:normalfont-size:12pxcolor:Blackborder-width:1pxborder-style:Solidborder-color:SeaGreenbackground-color:#C0FFC0" />

<input type="submit" name="ctl00$cphContent$btnNext" value="下一页" id="ctl00_cphContent_btnNext" disabled="disabled" class="anniu" style="width:57pxheight:16pxfont-weight:normalfont-size:12pxcolor:Blackborder-width:1pxborder-style:Solidborder-color:SeaGreenbackground-color:#C0FFC0" />

</div>

</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</div>

<!--网站底部开始-->

<div align="center"><IMG src="Images/line-1.gif" width="960" height="6"><br>

<a href="#" class="bottom">公司简介</a>    <a href="#" class="bottom">诚征英才</a>

   <a href="#" class="bottom">网站联盟</a>   <a href="#" class="bottom">店中店招商</a>

   <a href="#" class="bottom">交易条款</a>

</div>

<DIV class="bcopyright">Copyright (C) GreatSoft 2002-2009, All Rights Reserved<IMG src="Images/validate.gif" hspace="4" align="absmiddle">

<span style="font-size:13pxcolor:#000000">苏ICP证666666号</span>

</DIV>

</div>

<MAP name="Map">

<AREA shape="rect" coords="224, 95, 307, 125" href="default.aspx">

<AREA shape="rect" coords="327, 97, 408, 124" href="Cart.aspx">

<AREA shape="rect" coords="426, 96, 503, 125" href="MemberShip/UserLogin.aspx">

<AREA shape="rect" coords="522, 97, 606, 126" href="Admin/default.aspx">

<AREA shape="rect" coords="896, 102, 939, 124" href="javascript:Search()">

<AREA shape="rect" coords="943, 102, 986, 125" href="rss.aspx"></MAP>

<script type="text/javascript">

//<![CDATA[

var ctl00_tvStoreClass_ImageArray = new Array('', '', '', '/Demos/MyBookShop - Final/Web/WebResource.axd?d=f6X9oVBtbi-xyOUTDfZc-QCcdoepg5DfwI_hAb5r-Sc1&t=633710706727968750', '/Demos/MyBookShop - Final/Web/WebResource.axd?d=f6X9oVBtbi-xyOUTDfZc-ZSDqJ6aFayZFiLwydgnu7Y1&t=633710706727968750', '/Demos/MyBookShop - Final/Web/WebResource.axd?d=f6X9oVBtbi-xyOUTDfZc-e_w_YmV12-TChNPjwkAJdI1&t=633710706727968750')

//]]>

</script>

<script type="text/javascript">

//<![CDATA[

WebForm_InitCallback()var ctl00_tvStoreClass_Data = new Object()

ctl00_tvStoreClass_Data.images = ctl00_tvStoreClass_ImageArray

ctl00_tvStoreClass_Data.collapseToolTip = "折叠 {0}"

ctl00_tvStoreClass_Data.expandToolTip = "展开 {0}"

ctl00_tvStoreClass_Data.expandState = theForm.elements['ctl00_tvStoreClass_ExpandState']

ctl00_tvStoreClass_Data.selectedNodeID = theForm.elements['ctl00_tvStoreClass_SelectedNode']

for (var i=0i<6i++) {

var preLoad = new Image()

if (ctl00_tvStoreClass_ImageArray[i].length >0)

preLoad.src = ctl00_tvStoreClass_ImageArray[i]

}

ctl00_tvStoreClass_Data.lastIndex = 21

ctl00_tvStoreClass_Data.populateLog = theForm.elements['ctl00_tvStoreClass_PopulateLog']

ctl00_tvStoreClass_Data.treeViewID = 'ctl00$tvStoreClass'

ctl00_tvStoreClass_Data.name = 'ctl00_tvStoreClass_Data'

//]]>

</script>

</form>

</BODY>

</Html>

1、此段css代码，其他页面不需要。可以直接放在需要的HTML文件中。

在head标签下，写上style标签，把css代码放在style标签中。

2、可以新建一个css文件，比如index.css，把这段css代码放进这个index.css文件中。

然后在HTML文件中引入index.css文件。

<link rel="stylesheet" href="index.css">

href：写index.css文件的路径。

扩展资料：

插入样式表的方法：

1、外部样式表

每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

<head><linkrel="stylesheet"type="text/css"href="mystyle.css"></head>

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。

2、内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表：

<style>

hr{color:sienna}

p{margin-left:20px}

body{background-image:url("images/back40.gif")}

</style>

3、内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：

<pstyle="color:siennamargin-left:20px">这是一个段落。</p>

样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。

一般情况下，优先级如下：

内联样式）Inlinestyle>（内部样式）Internalstylesheet>（外部样式）Externalstylesheet>浏览器默认样式