今天将手机端的主界面做出来了，大概样图如下。最上面是标题加搜索框，再右边是一个联系客服的按钮，然后下面是四个二手商品的大分类，可以点击。然后主要部分是一个商品推荐的轮播图，可以循环播放三个商品的图片。再下来是一些商品的顺序排列，由于内容有限就只展示了四个商品的信息。最底下是四个按钮，分别是主页，我要卖，消息和我的四个功能块，由于尚未学习到如何跳转，这些功能块的作用也没有加上。图片都附在对应的文件夹中。到时候一并提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 "/>
<title>小暨手机端</title>
<script>
var index = 0;
function changeImg(){
var img = document.getElementById("img1");
var curIndex = index%3+1;
img.src = "img/"+curIndex+".jpeg"
index = index + 1
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<style>
*{
margin: 0;padding: 0;background-color: #00AFff;
}
input[type="text"]{
width: 180px;height: 20px;font-size: 20px;text-align: center;
}
#div1{
float:left;margin: 10px;font-size: 20px;font-weight: 800;
}
#div2{
float:left; margin-top:10px;
}
#div3{
float:left;margin-top: 10px;margin-left: 30px; margin-bottom: 20px;
}
#div4{
margin-top: 20px;
}
.div1{
margin-top:40px;padding: 15px;
}
.div2{
background-color: white;
}
#div5{
background-color: white;
}
a{
text-decoration: none;
}
</style>
<body οnlοad="init()">
<div id="div1">
小暨交易
</div>
<div id="div2">
<input type="text" value="搜索商品名称" />
</div>
<div id="div3">
<a href="#">
<img src="img/客服.jpg" width="25px" height="25px"/>
</a>
</div>
<br /><br />
<span class="div1">
<a href="#">
<img src="img/fenlei1 (3).jpg" width="60px" height="60px"/>
</a>
</span>
<span class="div1">
<a href="#">
<img src="img/fenlei1 (1).jpg" width="60px" height="60px"/>
</a>
</span>
<span class="div1">
<a href="#">
<img src="img/fenlei1 (4).jpg" width="60px" height="60px"/>
</a>
<span class="div1">
<a href="#">
<img src="img/fenlei1 (2).jpg" width="60px" height="60px"/>
</a>
</span>
<div>
<img src="img/1.jpeg" id="img1" width="100%">
</div>
<div class="div2">
<img src="img/goods1.jpg" width="49%"/>
<img src="img/goods2.jpg" width="49%"/>
<img src="img/goods4.jpg" width="49%"/>
<img src="img/goods3.jpg" width="49%"/>
</div>
<div id="div5">
<img src="img/button1 (4).jpg" width="24%"/>
<!--</div>-->
<!--<div class="div3">-->
<img src="img/button1 (1).jpg" width="24%"/>
<!--</div>-->
<!--<div class="div3">-->
<img src="img/button1 (2).jpg" width="24%"/>
<!--</div>-->
<!--<div class="div3">/-->
<img src="img/button1 (3).jpg" width="24%"/>
</div>
</body>
</html>
扫一扫
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
