网站简介
网站介绍: 为了锻炼学生的前端水平,模仿当当网官网首页、产品详情页以及当当注册页面,包括当当网js动态效果
网站布局:网站使用div+css布局页面,网站使用div,ul,li,a,p,h1,h2,h3,h4,form,input,button,table,tr,td等标签,css使用margin,border,padding,font-weight,font-family,color,width,line-height,overflow,float,text-align,background,display等样式
网站JS效果:网站首页banner,tab选项卡切换,图片滚动,js动态生成验证码以及验证用户注册输入信息
网站编辑器:网站是最简单的页面布局,任何编辑器都可以打开网站代码进行编辑,包括Dreamweaver,vs code,HBuilds,sublime,记事本等软件都可以进行编辑
网站截图
网站div布局代码
<div class="navtips">
<div class="wrappers">
<div class="adddres"><span>送至:北京</span>
<ol>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">北京</a></li>
</ol>
</div>
<ul>
<li>欢迎光临当当,请<a href="login.html">登录</a>成为会员</li>
<li><a href="#"><i class="icon_card"></i> 购物车</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">我的云书房</a></li>
<li><a href="#">我的当当</a></li>
<li><a href="#">当当拼团</a></li>
<li><a href="#">小说投稿</a></li>
<li><a href="#">企业采购</a></li>
<li><a href="#">客户服务</a></li>
</ul>
</div>
</div>
<div class="logobox wrapper">
<div class="addcart">
<a><i>0</i> <span></span>我的购物车</a>
</div>
<a class="logo" href="index.html"><img src="./images/logo.gif"></a>
<div class="searchmian">
<div class="searchBox">
<form name="head_search" id="searchom" method="GET">
<input type="text" placeholder="搜索商品" class="searchInput">
<input type="button" value="搜索" class="searchBtn">
</form>
</div>
<p>热搜:
<a href="#">戴森 </a>
<a href="#"> 你也不差 </a>
<a href="#"> 中华寻宝 </a>
<a href="#"> 笛莎童装 </a>
<a href="#"> 徐文兵新书 </a>
<a href="#"> 今日抢购 </a>
</p>
</div>
</div>
<div class="nav">
<div class="wrapper">
<span>商品分类
</span>
<ul>
<li><a href="index.html"> 图书</a></li>
<li><a href="#">电子书</a></li>
<li><a href="#">网络文学</a></li>
<li><a href="#"> 运动户外</a></li>
<li><a href="#"> 乐高玩具</a></li>
<li><a href="#"> 美妆</a></li>
<li><a href="#"> 家用电器</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="menuBox">
<div class="menu">
<ul>
<li>
<a href="#">图书、童书</a>
</li>
<li><a href="#"> 电子书、网络文学</a></li>
<li><a href="#"> 创意文具</a></li>
<li><a href="#"> 服饰、内衣</a></li>
<li><a href="#"> 鞋靴、箱包</a></li>
<li><a href="#"> 运动户外</a></li>
<li><a href="#"> 孕、婴、童</a></li>
<li><a href="#"> 家居、家纺、汽车</a></li>
<li><a href="#"> 家具、家装、康体</a></li>
<li><a href="#"> 美妆、个人护理、清洁</a></li>
<li><a href="#"> 食品、茶酒</a></li>
<li><a href="#"> 珠宝饰品</a></li>
<li><a href="#"> 手机、数码、电脑办公</a></li>
<li><a href="#"> 家用电器</a></li>
<li><a href="#"> 当当礼品卡、生活服</a></li>
</ul>
</div>
<div class="menuright">
<div class="menuimgtips">
<div class="menutu1">
<img src="./images/qc.jpg" alt="">
</div>
<div class="menutab">
<ul>
<li class="cur">信息公告</li>
<li>服务公告</li>
</ul>
<ol>
<li>
<p><a href="#">三彩女装 2件3折 3件2.5折</a></p>
</li>
<li>
<p><a href="#">夏日超能力 图书5折封顶</a></p>
</li>
<li>
<p><a href="#">笛莎超品限时3件1.5折</a></p>
</li>
<li>
<p><a href="#">babycare超级品牌日抢!5折</a></p>
</li>
</ol>
<ol style="display: none;">
<li>
<p><a href="#">关于谨防诈骗的重要提示 </a></p>
</li>
<li>
<p><a href="#">当当阅读器 海量电子书随时读 </a></p>
</li>
<li>
<p><a href="#">话费卡兑换当当礼品卡 </a></p>
</li>
<li>
<p><a href="#">多种商品,礼品卡支付更优惠! </a></p>
</li>
</ol>
</div>
<div class="menurightimg">
<img src="./images/banner-samll10.jpg" alt="">
</div>
</div>
<div class="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="bannerimg">
<img src="./images/banner1.png" alt="">
</div>
<div class="bannerlist">
<ul>
<li><a href="#"><img src="./images/banner-samll.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll2.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll3.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll4.jpg" alt=""></a></li>
</ul>
</div>
</div>
<div class="swiper-slide">
<div class="bannerimg">
<img src="./images/banner2.png" alt="">
</div>
<div class="bannerlist">
<ul>
<li><a href="#"><img src="./images/banner-samll5.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll6.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll7.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll8.jpg" alt=""></a></li>
</ul>
</div>
</div>
<div class="swiper-slide">
<div class="bannerimg">
<img src="./images/banner3.png" alt="">
</div>
<div class="bannerlist">
<ul>
<li><a href="#"><img src="./images/banner-samll9.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll10.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll11.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll12.jpg" alt=""></a></li>
</ul>
</div>
</div>
<div class="swiper-slide">
<div class="bannerimg">
<img src="./images/banner4.png" alt="">
</div>
<div class="bannerlist">
<ul>
<li><a href="#"><img src="./images/banner-samll.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll2.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll3.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner-samll4.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
网站css样式代码
.wrappers {
width: 1200px;
margin: 0 auto;
}
.navtips {
width: 100%;
min-width: 1200px;
height: 30px;
line-height: 30px;
background: #f8f8f8;
border-bottom: 1px solid #dbdbdb;
}
.navtips div.adddres {
float: left;
position: relative;
width: 80px;
text-align: center;
}
.navtips div.cur {
border: 1px solid #ddd;
border-bottom: none;
background-color: #fff;
}
.navtips ol {
position: absolute;
background-color: #fff;
border: 1px solid #ddd;
display: none;
top: 28px;
width: 270px;
padding: 5px 10px;
box-sizing: border-box;
border-top: none;
}
.navtips ol li {
width: 40px;
float: left;
}
.navtips ul {
float: right;
}
.navtips ul li {
float: left;
padding: 0 5px;
color: #666;
}
.navtips ul li a {
color: #666;
}
.navtips ul li .icon_card {
float: left;
width: 15px;
height: 14px;
background: url(../images/home_sprite2.png) no-repeat -40px -86px;
overflow: hidden;
margin: 6px 9px 0 0;
}
.searchmian {
padding: 10px 0 0 0px;
width: 548px;
float: left;
}
.searchBox {
width: 548px;
float: left;
height: 38px;
border: 2px solid #b9213a;
position: relative;
border-radius: 2px;
background: #fff;
}
.searchmian P {
line-height: 34px;
}
.searchmian P a {
color: #666;
margin-right: 15px;
}
.searchBox .searchInput {
border: none;
line-height: 24px;
height: 24px;
width: 375px;
margin: 7px 0;
float: left;
font-size: 14px;
outline: none;
}
.logobox {
overflow: hidden;
padding: 15px 0 10px 0;
}
.logo {
float: left;
overflow: hidden;
width: 362px;
height: 100px;
}
.searchBox .searchBtn {
width: 68px;
height: 42px;
margin: -2px -2px 0 0;
background: #dadada;
background-color: #FE0000;
border: none;
float: right;
font-size: 16px;
color: #fff;
cursor: pointer;
}
.searchBox form {
width: 100%;
}
.searchBox {
width: 548px;
float: left;
height: 38px;
border: 2px solid #FE0000;
position: relative;
border-radius: 2px;
background: #fff;
}
.searchBox .searchInput {
border: none;
line-height: 24px;
height: 24px;
width: 375px;
margin: 7px 0;
float: left;
font-size: 14px;
outline: none;
}
.addcart {
width: 200px;
float: right;
border: 1px solid #dbdbdb;
font-size: 16px;
color: #f00;
line-height: 36px;
color: #f00;
margin-top: 12px;
}
.addcart a {
color: #f00;
}
.addcart span {
margin: 0 15px;
height: 36px;
width: 36px;
display: block;
float: left;
background: url(../images/icons.png) 0 -300px no-repeat;
float: left;
}
.addcart i {
height: 36px;
width: 36px;
display: block;
float: right;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 20px;
background-color: #f00;
}
.nav {
background-color: #F9F9F9;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #dbdbdb;
}
.nav span {
width: 200px;
height: 40px;
line-height: 40px;
font-size: 16px;
display: block;
text-align: center;
color: #fff;
font-weight: bold;
float: left;
background-color: #ff2832;
}
.nav ul {
float: left;
padding-left: 30px;
}
.nav ul li {
float: left;
padding: 0 15px;
color: #dbdbdb;
}
.nav ul li a {
color: #222;
font-size: 14px;
font-weight: bold;
}
/*****/
.menu ul li {
height: 32px;
line-height: 32px;
padding: 0 18px;
overflow: hidden;
}
.menu ul li:hover {
background-color: #ddd;
}
.menu ul li a {
float: left;
font-size: 14px;
color: #666;
}
.menu ul li span {
color: #222;
float: left;
padding: 0 2px;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.menuright {
width: 1000px;
height: 488px;
float: right;
}
.banner {
width: 796px;
height: 488px;
overflow: hidden;
}
.menuBox {
overflow: hidden;
margin-bottom: 25px;
}
.menuBox .menu {
width: 200px;
height: 488px;
background: #fff;
float: left;
overflow: hidden;
background-color: #f1f1f1;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
.bannerimg {
width: 796px;
flex: 1;
height: 326px;
overflow: hidden;
}
.bannerlist {
width: 796px;
flex: 1;
border-bottom: 1px solid #e6e6e6;
}
.bannerlist ul {
display: flex;
justify-content: space-between;
}
.bannerlist ul li {
width: 198px;
height: 160px;
position: relative;
border-right: 1px solid #e6e6e6;
}
.bannerlist ul li img {
width: 198px;
height: 160px;
}
.bannerlist ul li a::after {
content: '';
display: none;
background-color: #000;
opacity: 0.04;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.bannerlist ul li a:hover::after {
display: block;
}
.swiper-button-next,
.swiper-button-prev {
color: #F699B4;
}
.gooddetial {
padding-top: 30px;
}
.bannertips {
background: #f1f1f1;
width: 80px;
height: 80px;
position: fixed;
right: 10px;
bottom: 80px;
}
.bannertips h3 a {
display: block;
width: 100%;
height: 100%;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
}
.menuimgtips {
float: right;
width: 202px;
overflow: hidden;
}
.menutab ul {
height: 30px;
overflow: hidden;
}
.menutab ul li {
margin-left: -1px;
float: left;
width: 100px;
border: 1px solid #e6e6e6;
border-top: 0;
height: 28px;
background-color: #f0f0f0;
cursor: default;
font: 14px/29px "Microsoft Yahei";
text-align: center;
color: #646464;
overflow: hidden;
cursor: pointer;
}
.menutab ul li.cur {
background-color: #fff;
border-bottom: none;
padding-bottom: 1px;
}
.titlemenu {
height: 40px;
border-bottom: 2px solid #000;
margin-bottom: 10px;
}
.titlemenu strong {
float: left;
line-height: 40px;
font-size: 20px;
margin-right: 180px;
}
.titlemenu ul {
float: left;
}
.titlemenu ul li {
width: 102px;
text-align: center;
float: left;
height: 38px;
line-height: 40px;
font-size: 16px;
cursor: pointer;
}
.titlemenu ul li.cur,
.titlemenu ul li:hover {
border: 2px solid #000;
color: #000;
line-height: 36px;
border-bottom: 2px solid #fff;
background-color: #fff;
}
.menutab ol {
padding: 10px 0;
}
.menutab ol li {
line-height: 24px;
height: 24px;
overflow: hidden;
padding: 0 20px;
}
.menutab ol li a {
color: #f00;
}
.directleft {
width: 240px;
height: 400px;
position: relative;
}
.book_tab_img {
position: absolute;
bottom: 0;
background-color: #fff;
height: 112px;
border: 1px solid #dbdbdb;
padding: 10px 10px 0;
}
.book_tab_img {
overflow: hidden;
}
.book_tab_img p {
width: 72px;
float: left;
height: 24px;
line-height: 24px;
}
.book_tab_img p a {
color: #999;
}
.probook {
width: 910px;
float: left;
}
.porlist {
overflow: hidden;
margin-bottom: 20px;
}
.pro01 {
overflow: hidden;
}
.pro01 ul li {
width: 238px;
height: 357px;
float: left;
border: 1px solid #f8f8f8;
border-top: none;
border-left: none;
}
.pro02 ul li {
width: 166px;
height: 220px;
float: left;
border: 1px solid #ddd;
border-top: none;
border-left: none;
}
.pro03 ul li {
float: left;
width: 190px;
height: 258px;
padding: 4px 3px 7px;
border: 1px solid #fff;
}
.pro01 ul li .nr {
padding: 0;
margin: 0 auto;
}
.pro01 ul li .nr .picture {
width: 100%;
height: 158px;
display: flex;
justify-content: center;
align-items: center;
}
.pro01 ul li .nr .picture img {
max-width: 100%;
max-height: 100%;
}
.pro01 ul li .nr h5 {
height: 20px;
line-height: 20px;
color: #333;
font-size: 12px;
overflow: hidden;
padding: 0 10px;
position: relative;
font-weight: normal;
}
.pro01 ul li .nr h5 a {
color: #666;
}
.pro01 ul li .nr h4 {
height: 20px;
line-height: 20px;
color: #333;
font-size: 12px;
overflow: hidden;
padding: 0 10px;
position: relative;
font-weight: normal;
}
.pro01 ul li .nr h4 span {
font-size: 14px;
color: #f00;
margin-right: 15px;
}
.pro01 ul li .nr p {
height: 40px;
line-height: 20px;
font-size: 14px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.pro01 ul li .nr .info {
display: flex;
justify-content: space-between;
height: 24px;
line-height: 24px;
margin-top: 12px;
}
.pro01 ul li .nr .info .tag {
width: 72px;
border-radius: 12px;
text-align: center;
background: #ffe3e2;
color: #de3435;
font-size: 12px;
}
.pro01 ul li .nr .info .order {
font-size: 14px;
color: #333;
}
.directleft {
width: 240px;
height: 442px;
float: left;
position: relative;
}
.timbox {
position: absolute;
top: 20px;
left: 10px;
color: #fff;
}
.directleft img {
width: 100%;
height: 100%;
}
.directright {
float: right;
}
网站JS代码
$('.adddres').mouseenter(function (e) {
console.log(1);
// e.preventDefault();
$(this).addClass('cur');
$('.adddres ol').show();
}).mouseleave(function (e) {
$('.adddres ol').hide();
$(this).removeClass('cur');
});
// /选择地址的下拉菜单
$('.menutab ul li').each(function (index, element) { //选项卡遍历选择
$(this).mouseenter(function () {
$('.menutab ul li').removeClass('cur')
$(this).addClass('cur');
$('.menutab ol ').css('display',"none");
$('.menutab ol ').eq(index).css('display',"block");
});
});
$('.tab_aa li').each(function (index, element) {
$(this).mouseenter(function () {
$('.tab_aa li').removeClass('on')
$(this).addClass('on');
$('.sidelist ul ').css('display',"none");
$('.sidelist ul ').eq(index).css('display',"block");
});
});
$('.titlemenu ul li').each(function (index, element) {
$(this).mouseenter(function () {
$('.titlemenu ul li').removeClass('cur')
$(this).addClass('cur');
$('.pro02 ul ').css('display',"none");
$('.pro02 ul ').eq(index).css('display',"block");
});
});
$('.titlemenu ul li').each(function (index, element) {
$(this).mouseenter(function () {
$('.titlemenu ul li').removeClass('cur')
$(this).addClass('cur');
$('.pro02 ul ').css('display',"none");
$('.pro02 ul ').eq(index).css('display',"block");
});
});
$('.pro03 ul li').each(function (index, element) {
$(this).mouseenter(function () {
$('.picture').removeClass('cur')
$(this).find('.picture').addClass('cur');
});
});