web类似于淘宝购物页面
Posted xler
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web类似于淘宝购物页面相关的知识，希望对你有一定的参考价值。
花了一下午的时间写出来的简易页面，内容很粗糙，但里边包含了我独特的想法。由于是初学者，写的可能不好，希望大家多多提出意见。
这个是主程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>淘宝首页</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style>
@import url(‘css/首页.css‘)
</style>
</head>
<body>
<div id="top">
<span>Jane Shopping</span>
<div id="smallbox"><img src="img/theme.gif"/></div>
</div>
<div id="srcBox">
<ul id="srcList">
<li><div class="aBox"><a href="#" class="src_a">首页</a></div></li>
<li><div class="aBox"><a href="#" class="src_a">衬衫</a></div></li>
<li><div class="aBox"><a href="#" class="src_a">卫衣</a></div></li>
<li><div class="aBox"><a href="#" class="src_a">裤子</a></div></li>
<li><div class="aBox"><a href="#" class="src_a">联系我们</a></div></li>
</ul>
</div>
<div id="lt">
最新动态<img src="img/QQ图片20180825110447.png"/>
</div>
<div id="imgs1"><img src="img/1.gif"/></div><br />
<div id="imgs2"><img src="img/2.gif"/></div><br />
<div id="imgs3"><img src="img/3.gif"/></div><br />
<div id="imgs4"><img src="img/4.gif"/></div><br />
<div id="imgs5"><img src="img/5.gif"/></div><br />
<div id="words">
<p>
</p>
</div><br />
<div id="class">
产品分类<img src="img/QQ图片20180825110447.png"/>
</div><br />
<div id="goodsClass">
<ul id="h1">
<li class="cloth">衬衫
<ul class="h2">
<li>短袖衬衫</li>
<li>长袖衬衫</li>
</ul>
</li>
<li class="cloth">卫衣
<ul class="h2">
<li>开襟卫衣</li>
<li>套头卫衣</li>
</ul>
</li>
<li class="cloth">裤子
<ul class="h2">
<li>休闲裤</li>
<li>免烫卡其裤</li>
<li>牛仔裤</li>
<li>短裤</li>
</ul>
</li>
</ul>
</div>
<div id="newGoods">
新款上市<img src="img/left.gif" id="imgLeft"/><img src="img/right.gif" id="imgRight"/>
</div><br />
<div id="newsCloth">
<div class="newImg">
<img src="img/img_1.jpg" /><br />
免烫高支棉衬衣<br />$120.00
</div>
<div class="newImg">
<img src="img/img_2.jpg" /><br />
免烫斜纹衬衣<br />$129.00
</div>
<div class="newImg">
<img src="img/img_3.jpg" /><br />
棉小方格正装衬衣<br />$129.00
</div>
<div class="newImg">
<img src="img/img_4.jpg" /><br />
小米兰格衬衣蓝色<br />$129.00
</div>
</div>
<script>
//向新闻添加鼠标点击事件
$(‘#lt‘).click(function(){
$(‘#words‘).slideToggle()
})
var news=[‘智能机器人问卷调研‘,‘【答问卷】赢精美奖品‘,‘品质家具2件8折，3件7折‘,‘奥妙-向伟大的母亲致净‘,
‘意大利奢侈品牌菲拉格慕入驻京东‘,‘京东PLUS会员权益更新及会费调整‘,‘京东启用全新客服电话“950618”‘,‘乘用车轮胎的公告‘]
var a=0
for(var i=0;i<news.length;i++){
// console.log(str)
$(‘#words>p‘).append("<span>"+news[i]+"</span><br />")
}
// console.log($(‘#lt>p‘).text())
//设置新闻自动滚动事件
function screenScroll(){
$(‘#words‘).scrollTop($(‘#words‘).scrollTop()+110)
for(var i=0;i<news.length;i++){
// console.log(str)
$(‘#words>p‘).append("<span>"+news[i]+"</span><br />")
}
}
var flagSCr=setInterval(‘screenScroll()‘,2000)
//轮播图
// console.log($(‘#imgs1‘).height())
var index=1
function scrollImg(){
if(index>=6){
index=1
for(var i=1;i<6;i++){
$(‘#imgs‘+i).slideUp($(‘#imgs‘+i).slideUp()+154)
}
}
$(‘#imgs‘+index).slideDown($(‘#imgs‘+index).slideDown()+154)
index++
console.log(index)
}
var flagImg=setInterval(‘scrollImg()‘,1000)
$(‘#class‘).click(function(){
$(‘#goodsClass‘).slideToggle()
})
//衣服分类点击事件
$(‘.cloth‘).click(function(){
$(this).children().eq(0).slideToggle()
})
</script>
</body>
</html>
由于刚开始写，对格式什么的不太适应，所以把js程序也写在了主程序里。。。
下边这个是css程序
body{
margin: 0px;
padding: 0px;
}
#top{
width: 100%;
height: 100px;
background-color: #ABD342;
position: relative;
}
#smallbox{
position: absolute;
top: 10px;
right: 20px;
/*width: 100px;
height: 30px;*/
}
#top>span{
color: white;
font-size: 35px;
font-weight: bold;
position: absolute;
top: 20px;
}
#srcList{
list-style: none;
}
.src_a{
text-decoration: none;
}
#srcBox{
/*margin: 0px;
padding: 0px;*/
width: 100%;
height: 50px;
background-color: #ABD342;
padding: 0px;
}
#srcList>li{
float: left;
margin-top: 5px;
padding: 0px;
/*position: absolute;
left: 10px;*/
}
.aBox{
margin-right: 20px;
margin-top: 10px;
background-color: white;
height: 20px;
}
#lt{
width: 260px;
height: 25px;
background-color: #ABD342;
color: white;
text-height: 25px;
margin-top: 10px;
margin-bottom: 0px;
float: left;
}
#lt>img{
padding-left: 160px;
}
#words{
width: 260px;
height: 100px;
border: 1px #CFCFCF solid;
background-color: white;
margin-top: 0px;
overflow-y: hidden;
position: absolute;
left: 0px;
top: 203px;
}
.content{
text-decoration: none;
}
/*#imgs>img{
width: 1090px;
height: 160px;
}*/
/*#imgBox{
height: 154px;
overflow: auto;
display: none;
}*/
#imgs1,#imgs2,#imgs3,#imgs4,#imgs5{
display: none;
position: absolute;
top: 170px;
left: 270px;
}
#class{
width: 260px;
height: 25px;
background-color: #ABD342;
color: white;
text-height: 25px;
margin-top: 10px;
margin-bottom: 0px;
float: left;
}
#class>img{
padding-left: 160px;
float: left;
}
#goodsClass{
width: 260px;
height: 300px;
border: 1px #CFCFCF solid;
}
#h1{
list-style-image: url(../img/treeview-expanded.gif);
}
#h2{
list-style: none;
/*list-style-image: url(../img/treeview-item.gif)*/
}
#newGoods{
height: 25px;
width: 1050px;
border: 1px #CFCFCF solid;
float: left;
position: absolute;
top: 320px;
right: 30px;
background-color: #ABD342;
}
#imgLeft{
padding-left: 940px;
padding-top: 7px;
}
#newsCloth{
height: 300px;
width: 1050px;
border: 1px #CFCFCF solid;
position: absolute;
top: 350px;
right: 30px;
}
.newImg{
float: left;
margin-top: 50px;
margin-left: 40px;
text-align: center;
}
以上是关于web类似于淘宝购物页面的主要内容，如果未能解决你的问题，请参考以下文章