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類似於淘寶購物頁面