最近学习了一下前端,有一说一还是前端有意思,写了一个商城网页只用到了css和js,之前写网页课程设计时候咋没这技术,不然我绝对是最亮的仔
演示图
首页代码
直接粘贴就可以使用了,html,css,js代码都在里面了
<!DOCTYPE html>
<html>
<head>
<!-- *{
margin: 0;
padding: 0;
list-style: none;
}
.s1{
margin: 50px auto;
width: 1226px;
height: 460px;
position: relative;
}
.t1 img{
width: 1226px;
height: 460px;
/*让图片以主父级盒子为基准,合并在一起*/
position: absolute;
top: 0;
}
.t2 li{
width: 20px;
height: 20px;
background-color:black;
color: white;
font-size: 14px;
text-align: center;
z-index: 10;
border-radius: 50%;
display: inline-block;
}
.t2 li:hover{
background-color:chocolate;
cursor: pointer;/*鼠标变小手*/
}
.t2{
position: absolute;
bottom:10px;
left: 0;
text-align: center;
width: 100%;
} -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>小米商城官网</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
<script src="./js/jquery-3.1.1.min.js"></script>
<!--
薛梓芃
2018.11.2
-->
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.t1 img{
width: 1226px;
height: 460px;
}
.s1{
width: 1226px;
height: 460px;
margin: 50px auto;
position: relative;
bottom: 50px;
}
.s2{
position: absolute;
left: 0;
top: 0;
width: 234px;
height: 460px;
background: #000000;
z-index:10;
opacity: 0.8;
}
.s2 li{
width: 234px;
height: 46px;
text-align: center;
}
.s2 li:hover{
background-color: chocolate;
}
.s2-ul span{
display: inline-block;
position: relative;
top: 10px;
font-size: 16px;
}
.s2-ul a{
text-decoration: none;
color: white;
}
.t1 li{
position: absolute;
top: 0;
left: 0;
display: none;
}
.t2 li{
width: 20px;
height: 20px;
background: white;
font-size: 14px;
border-radius: 50%;
text-align: center;
display: inline-block;
cursor: pointer;
}
.t2 li.active{
background-color: chocolate;
}
.t2{
position: absolute;
bottom: 10px;
left:50%;
}
.s1 .anniu{
width: 30px;
height: 60px;
background: rgba(0, 0, 0, 0.3);
color: white;
font-size: 14px;
text-align: center;
line-height: 60px;
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
}
.s1 .left{
left: 234px;
}
.s1 .right{
right: 0;
}
.dingbu-right{
display: inline-block;
float: right;
position: relative;
right: 300px;
}
.dingbu-right div{
padding: 20px;
}
.dingbu{
background: black;
line-height: 40px;
}
.dingbu a{
color: white;
text-decoration: none;
font-size: 13px;
opacity: 0.5;
padding:6px;
}
.dingbu a:hover{
opacity: 1;
}
.s3{
position: relative;
bottom: 80px;
left: 140px;
}
.s3-img-1{
position: relative;
right: 155px;
}
.s3-img-2{
position: relative;
right: 155px;
}
.s3-img-3{
position: relative;
right: 135px;
}
.s3-img-4{
position: relative;
right: 115px;
}
.s4-1{
width: 234px;
height: 340px;
background: white;
border-top: 2px solid red;
}
.s4-headfont{
font-size: 22px;
}
.s4{
position: relative;
left: 60px;
}
.list-1{
position: relative;
left: 200px;
}
.denglu-font{
position: relative;
left: 160px;
}
#img1{
position: absolute;
left: 230px;
}
.denglu-font2{
position: relative;
display: inline;
left: 450px;
}
.s4-123{
position: relative;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
//初始化,设置第一个出现的图片和触碰点
$(".t1 li").first().show();
$(".t2 li").first().addClass(