web类似于淘宝购物页面

花了一下午的时间写出来的简易页面，内容很粗糙，但里边包含了我独特的想法。由于是初学者，写的可能不好，希望大家多多提出意见。

这个是主程序

Jane Shopping

• 首页


• 衬衫


• 卫衣


• 裤子


• 联系我们

最新动态

产品分类

• 衬衫
  
  
  
  • 短袖衬衫
  
  
  • 长袖衬衫
  
  
  
  


• 卫衣
  
  
  
  • 开襟卫衣
  
  
  • 套头卫衣
  
  
  
  


• 裤子
  
  
  
  • 休闲裤
  
  
  • 免烫卡其裤
  
  
  • 牛仔裤
  
  
  • 短裤
  
  
  
  

新款上市

免烫高支棉衬衣
$120.00

免烫斜纹衬衣
$129.00

棉小方格正装衬衣
$129.00

小米兰格衬衣蓝色
$129.00

由于刚开始写，对格式什么的不太适应，所以把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;
}

转载于:https://www.cnblogs.com/ushio/p/9535211.html