效果图

主页面index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="js/autoplay.js"></script></head>
<body class="main"><!-- 1.网上书城顶部 start -->
<div id="divhead"><table cellspacing="0" class="headtable"><tr><td><a href="#"><img src="data:images/logo.png" width="200" height="60" border="0" /> </a></td><td style="text-align:right"><img src="data:images/cart.gif" width="26" height="23" style="margin-bottom:-4px" />&nbsp;<a href="#">购物车</a> | <a href="#">帮助中心</a> | <a href="#">我的帐户</a>| <a href="register.html">新用户注册</a>                          </td>     </tr></table>
</div><!-- 网上书城顶部  end --><!--2. 网上书城菜单列表  start -->
<div id="divmenu"><a href="#">文学</a> <a href="#">生活</a> <a href="#">计算机</a> <a href="#">外语</a> <a href="#">经管</a><a href="#">励志</a> <a href="#">社科</a> <a href="#">学术</a> <a href="#">少儿</a><a href="#">艺术</a> <a href="#">原版</a> <a href="#">科技</a> <a href="#">考试</a> <a href="#">生活百科</a> <a href="#" style="color:#FFFF00">全部商品目录</a>
</div>
<div id="divsearch">
<form action="#" id="searchform"><table width="100%" border="0" cellspacing="0"><tr><td style="text-align:right; padding-right:220px">Search <input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"onmouseover="this.focus();"onclick="my_click(this, 'textfield');"onBlur="my_blur(this, 'textfield');"/> <a href="#"><img src="data:images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> </a></td></tr></table>
</form>
</div>
<!-- 网上书城菜单列表  end --><!-- 3.网上书城首页轮播图  start --><div id="box_autoplay"><div class="list"><ul><li><img src="ad/index_ad1.jpg" width="900" height="335" /></li><li><img src="ad/index_ad2.jpg" width="900" height="335" /></li><li><img src="ad/index_ad3.jpg" width="900" height="335" /></li><li><img src="ad/index_ad4.jpg" width="900" height="335" /></li><li><img src="ad/index_ad5.jpg" width="900" height="335" /></li></ul></div></div><!-- 网上书城首页轮播图  end --><!--4. 公告板和本周热卖  start --><div id="divcontent"><table width="900px" border="0" cellspacing="0"><tr><td width="497"><img src="data:images/billboard.gif" width="497" height="38" /><table cellspacing="0" class="ctl"><tr><td width="485" height="29">尊敬的网上书城用户， 　　<br />为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！<br />具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快！<br />3月23日<br />传智播客 网上书城系统管理部<br /></td></tr></table></td><td style="padding:5px 15px 10px 40px"><table width="100%" border="0" cellspacing="0"><tr><td><img src="data:images/hottitle.gif" width="126" height="29" /></td></tr></table><table width="100%" border="0" cellspacing="0"><tr>                     <td style="width:80; text-align:center"><a href="#"><img src="bookcover/105.jpg" width="102" height="130" border="0" /></a><br /> </td>       <td style="width:80; text-align:center"><a href="#"><img src="bookcover/106.jpg" width="102" height="130" border="0" /></a><br /> </td></tr></table></td></tr></table></div>
<!-- 公告板和本周热卖  end -->    <!--5. 网上书城底部 start -->
<div id="divfoot"><table width="100%" border="0" cellspacing="0" ><tr><td rowspan="2" style="width:10%"><img src="data:images/logo.png" width="195" height="50"style="margin-left:175px" /></td><td style="padding-top:5px; padding-left:50px"><a href="#"><font color="#747556"><b>CONTACT US</b></font> </a></td></tr><tr><td style="padding-left:50px"><font color="#CCCCCC"><b>COPYRIGHT 2015 &copy; BookStore All Rights RESERVED.</b> </font></td></tr></table></div><!-- 网上书城底部  end -->
</body>
</html>

CSS

main.css

/* CSS Document */
.main {margin: 0px 0px 30px 0px;padding: 0px 0px 0px 0px;background: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 150%;color: #000000; /*#666666*/text-align: center;vertical-align: top;
}a {font-size: 12px;color: #0066FF; /*#1E33F7*/
}a:link {text-decoration: none;
}a:visited {text-decoration: none;color: #0066FF;
}a:hover {text-decoration: none;color: #990099; /*颜色变换*/
}a:active {text-decoration: none;color: #0066FF;
}td {vertical-align: top;text-align: left;font-size: 12px;
}hr {color: #CCCCCC;height: 1px;margin-top: 5px;margin-bottom: 5px;padding: 0px;overflow: hidden;
}h1 {font-size: 14px;color: #000000;text-align: left;margin-bottom: 5px;font-weight: bold;display: inline;
}.bookname {font-size: 16px;color: #194105;text-align: left;margin-bottom: 5px;display: inline;
}#divhead {width: 100%;
}.headtable {width: 100%;
}.headtable td {padding: 10px 50px 25px 135px;
}#divmenu {width: 100%;border-top-width: 4px;border-top-style: solid;border-top-color: #b4d76d;background-color: #000000;text-align: center;padding: 10px 0px 10px 0px;font-size: 14px;
}#divmenu a {font-size: 14px;color: #FFFFFF; /*#1E33F7*/font-weight: bold;padding: 10px 10px 10px 10px;
}#divmenu a:link {text-decoration: none;font-weight: bold;
}#divmenu a:visited {text-decoration: none;color: #FFFFFF;font-weight: bold;
}#divmenu a:hover {text-decoration: none;color: #999999; /*颜色变换*/font-weight: bold;
}#divmenu a:active {text-decoration: none;color: #FFFFFF;font-weight: bold;
}#divsearch {width: 100%;background-color: #f59f1d;text-align: center;padding: 5px 0px 5px 0px;color: #FFFFFF;font-weight: bold;
}#divad {width: 900px;MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
}#divcontent {width: 900px;background-color: #FCFDEF;border: 1px solid #EEEDDB;MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
}#divpagecontent {width: 900px;margin-top: 10px;MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
}.listtitle {padding: 5px 0px 5px 5px;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #CCCCCC;font-size: 14px;font-weight: bold;color: #1C3F09;
}.listtd {padding: 5px 0px 5px 30px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #CCCCCC;
}.listcontent {background-color: #FCFDEF;border: 1px solid #CCCCCC;margin-left: 5px;width: 99%;
}.listcontent td {padding: 20px;
}.infocontent {background-color: #FCFDEF;border: 1px solid #CCCCCC;margin-left: 5px;width: 99%;
}.infocontent td {padding: 5px;
}.booklist {width: 100%;margin: 0px;padding: 0px;
}.booklist td {/* text-align: center; */width: 25%;margin: 0px;padding:10px 0 10px 40px;
}.divbookpic {width: 131px;height: 145px;border: 1px solid #CCCCCC;background-color: #FFFFFF;margin-bottom: 8px;overflow: hidden;display: table-cell;position: relative;text-align: center;vertical-align: middle;
}.divbookpic img {position: static;position: relative;top: 5%;
}.divbookcover {width: 300px;height: 300px;border: 3px solid #F3F2DE;background-color: #FFFFFF;margin: 8px;overflow: hidden;position: relative;display: table-cell;text-align: center;vertical-align: middle;
}.divbookcover img {position: static;position: relative;top: 5%;padding-left: 20px;padding-right: 20px;
}.divlisttitle {line-height: 120%;text-align:left;
}#divfoot {width: 100%;clear: both;background-color: #efefef;margin-top: 15px;
}.ctl {width: 490px;margin-top: 2px;margin-left: 2px;table-layout: fixed;
}.ctl td {text-align: left;
/*  text-overflow: ellipsis;overflow: hidden; white-space: nowrap; */padding: 3px;
}.inputtable {width: 130px;height: 18px;border: 1px solid #999999;
}.inputbutton {color: #000000;background-color: #FFFFFF;padding: 1px;border: 1px solid #999999;
}/*分页*/
.pagination {padding: 5px;width: 790px;margin: 5px auto;text-align: center;
}.pagination ul {width:270px;margin: 5px auto;padding: 5px;font-size: 12px;
}.pagination li {list-style-type: none;float:left;padding: 1px;margin: 1px;
}.pagination a,.pagination a:visited {padding:5px;border: 1px solid #9aafe5;text-decoration: none;color: #2e6ab1;
}.pagination li.currentpage {font-weight: bold;padding: 5px;border: 1px solid navy;background-color: #2e6ab1;color: #FFF;
}
.disablepage_a{display:block; width:75px; height:15px;}
.disablepage_a:link,.disablepage_a:visited{!important; padding:0; border:0;}
.disablepage_a:hover{!important; padding:0; border:0; background:none; }
.pagination li.disablepage_p {width: 75px;height: 15px;padding: 5px;color: #929292;background:url(../images/previous_page.png) no-repeat center center;
}.pagination li.disablepage_p2 {width: 75px;height: 15px;padding: 5px;color: #929292;background:url(../images/previous_page2.png) no-repeat center center;
}.pagination li.disablepage_n{  width: 75px;height: 15px;padding: 5px;color: #929292;background:url(../images/next_page.png) no-repeat center center;
}.pagination li.disablepage_n2{ width: 75px;height: 15px;padding: 5px;color: #929292;background:url(../images/next_page2.png) no-repeat center center;
}.pagination li.nextpage {font-weight: bold;padding: 5px;
}/*分页*/
.upline {border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #B0BEC7;padding-top: 5px;padding-bottom: 5px;margin: 20px;
}.textinput {margin-left: 10px;font-size: 12px;width: 150px;height: 18px;border: 1px solid #A4B5BD;
}.textarea {margin-left: 10px;font-size: 12px;width: 350px;height: 75px;border: 1px solid #A4B5BD;
}#logindiv {background-image: url(../images/loginbg.gif);width: 305px;height: 361px;background-repeat: no-repeat;margin: 20px;
}.carttable {border: 1px solid #CCCCCC;width: 100%;background-color: #E1FFE1;
}.tableopen {text-align: center;
}.tableopentd01 {text-align: center;border: 1px solid #FFFFFF;+padding: 3px;color: #FFFFFF;
}.tableopentd02 {text-align: center;padding: 3px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: none;border-top-color: #C5E0E2;border-right-color: #C5E0E2;border-bottom-color: #C5E0E2;border-left-color: #C5E0E2;
}.tableopentd03 {text-align: center;padding: 3px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: none;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-top-color: #C5E0E2;border-right-color: #C5E0E2;border-bottom-color: #C5E0E2;border-left-color: #C5E0E2;
}.searchtable {width: 100%;margin-top: 10px;margin-bottom: 20px;border: 1px solid #CCCCCC;
}

autolay.css


body, div, ul, li {margin:0;padding:0;
}
ul {list-style-type:none;
}
body {background:#000;text-align:center;font:12px/20px Arial;
}
#box_autoplay {position:relative;width:900px;height:335px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;
}
#box_autoplay .list {position:relative;width:900px;height:335px;overflow:hidden;
}
#box_autoplay .list ul {position:absolute;top:0;left:0;
}
#box_autoplay .list li {width:900px;height:335px;overflow:hidden;
}
#box_autoplay .count {position:absolute;right:0;bottom:5px;
}
#box_autoplay .count li {color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;
}
#box_autoplay .count li.current {color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;
}
#tmp {width:100px;height:100px;background:red;position:absolute;
}

JS

autoplay.js


//获取ID
var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id;};
//获取tagName
var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName);};
//自动播放对象
var AutoPlay = function (id) {this.initialize(id);};
AutoPlay.prototype = {initialize: function (id){var oThis = this;this.oBox = $(id);this.oUl = $$("ul", this.oBox)[0];this.aImg = $$("img", this.oBox);this.timer = null;this.autoTimer = null;this.iNow = 0;this.creatBtn();this.aBtn = $$("li", this.oCount);this.toggle();this.autoTimer = setInterval(function (){oThis.next();}, 3000);this.oBox.onmouseover = function (){clearInterval(oThis.autoTimer);};this.oBox.onmouseout = function (){oThis.autoTimer = setInterval(function (){oThis.next();}, 3000);};for (var i = 0; i < this.aBtn.length; i++){this.aBtn[i].index = i;this.aBtn[i].onmouseover = function (){oThis.iNow = this.index;oThis.toggle();};}},creatBtn: function (){this.oCount = document.createElement("ul");this.oFrag = document.createDocumentFragment();this.oCount.className = "count";for (var i = 0; i < this.aImg.length; i++){var oLi = document.createElement("li");oLi.innerHTML = i + 1;this.oFrag.appendChild(oLi);}this.oCount.appendChild(this.oFrag);this.oBox.appendChild(this.oCount);},toggle: function (){for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";this.aBtn[this.iNow].className = "current";this.doMove(-(this.iNow * this.aImg[0].offsetHeight));},next: function (){this.iNow++;this.iNow == this.aBtn.length && (this.iNow = 0);this.toggle();},doMove: function (iTarget){var oThis = this;clearInterval(oThis.timer);oThis.timer = setInterval(function (){var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px");}, 30);}
};
window.onload = function ()
{new AutoPlay("box_autoplay");
};

java web传智书城页面设计——html相关推荐

传智书城首页设计代码_(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载...
模板名称:(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载本套织梦模板采用织梦最新内核开发的模板,这款模板使用范围广,不仅仅局限于一类型的企业,创意设 ...
【JAVA EE#6】【传智书城·源码阅读】后台管理模块：权限控制+页面分析+商品管理+销售榜单+订单管理+公告管理+项目结构思维导图
权限控制普通用户只能访问client文件夹下面的jsp文件,对于没有权限操作的admin文件夹就会提示错误,而超级用户同时可以访问两者,一直很好奇这个权限限制怎么实现的. 原来在存在一个AdminP ...
十三、传智书城项目设计
项目源代码及sql脚本一.项目概述近年来,随着Internet的迅速崛起,互联网已成为收集信息的最佳渠道并逐步进入传统的流通领域.于是电子商务开始流行起来,越来越多的商家在网上建起在线商店,向消费 ...
java web网上书城_基于Java web的网上书城
源码编号:B-E00009点击查看分类规则项目类型:Java EE项目(java web项目) 项目名称:基于Java web的网上书城(shinebookshop) 当前版本:V1.0.0版本难 ...
JSP技术（3）传智书城
[任务目标]: 通过学习JSP知识,使用JSP技术,完成传智书城首页的展示. [实现步骤] 1.首页设置在chapter7项目的WebContent目录创建一个名称为index.jsp的页面文件,该 ...
javaweb传智书城
register.jsp <%@ page language="java" import="java.util.*" pageEncoding=" ...
第13章传智书城项目设计
一.项目概述近年来,随着Internet的迅速崛起,互联网已成为收集信息的最佳渠道并逐步进入传统的流通领域.于是电子商务开始流行起来,越来越多的商家在网上建起在线商店,向消费者展示出一种新颖的购物理 ...
传智播客设计学院主页学习案例——HTML,CSS,JS代码学习案例
页面制作效果图 HTML代码: <!DOCTYPE html> <html><head><meta charset="utf-8" /&g ...
一个Java Web后台任务执行工具的设计与实现
一个Java Web后台任务执行工具的设计与实现提到后台任务,最容易想到的恐怕就是Java 中的Timer或者大名鼎鼎的开源定时器Quartz,但是,从本质讲,他们都是定时器,以时间间隔严格的进行间 ...

java web传智书城页面设计——html

文章目录

效果图

主页面index.html

CSS

main.css

autolay.css

JS

autoplay.js

java web传智书城页面设计——html相关推荐

最新文章

热门文章