<!DOCTYPE html>
<html>
<!-- head给浏览器看的 -->
<head>
<meta charset="utf-8">
<title>某某家具网站</title>
<style>
*{margin: 0;padding: 0;}
/* 去掉横向滚动条 */
body{overflow-x: hidden;}
/* 第一屏布局的开始 */
.banner{
width: 100%;
height: 900px;
}
.banner-bg1{
width: 100%;
height: 900px;
background: url(images/slider1.jpg) no-repeat;
background-size: 100% 93%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.banner-bg2{
width: 100%;
height: 900px;
background: url(images/slider2.jpeg) no-repeat;
background-size: 100% 93%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.banner-con{
width: 60%;
height: 800px;
/* 上下外边距为0 左右外边距自适应; */
margin: 0 auto;
}
.banner-con-nav{
width: 100%;
height: 80px;
}
/* banner-con-nav 下面的子标签 */
.banner-con-nav > img{
margin-top: 35px;
}
.banner-con-nav > ul{
list-style: none;
float: right;
}
.banner-con-nav > ul > li{
float: left;
margin-left: 50px;
margin-top: 44px;
color: #FFFFFF;
}
.banner-con-intr{
width: 90%;
height: 160px;
margin-top: 70px;
padding: 80px 5%;
}
.banner-con-intr > span{
color: #C6C6C6;
}
.banner-con-intr > h1{
font-size: 60px;
margin-top: 5px;
color: #FFFFFF;
}
.banner-con-intr > p{
line-height: 25px;
width: 60%;
font-size: 4px;
color: #beb5a5;
margin-top: 20px;
}
.banner-con-buy{
width: 100%;
height: 60px;
margin-top: 40px;
}
.banner-con-buy > div{
width: 220px;
height: 50px;
padding: 5px;
text-align: center;
border-radius: 30px;
margin-left: 5%;
line-height: 50px;
font-size: 25px;
background-color: #ffa800;
}
.banner-con-buy img{
display: block;
margin-left: 170px;
margin-top: -48px;
}
.banner-con-img{
width: 100%;
height: 110px;
margin-top: 220px;
}
.banner-con-img > img{
height: 110px;
display: block;
float: left;
/* 鼠标变手 */
cursor: pointer;
}
.banner-con-img img:nth-child(1){
height: 100px;
border: #ffa800 5px solid;
}
/* 第一屏布局的结束 */
/* 第二屏样式的开始 */
.exhibition{
width: 100%;
height: 900px;
}
.exhibition-con{
width: 60%;
height: 900px;
margin: 0 auto;
}
.exhibition-con-tit{
width: 41%;
height: 550px;
float: left;
margin-left: 9%;
}
.exhibition-con-tit p:nth-child(1){
color: #bdb5b2;
margin-top: 185px;
font-size: 14px;
}
.exhibition-con-tit h1{
margin-top: 25px;
font-size: 45px;
}
.exhibition-con-tit h3{
margin-top: 20px;
font-size: 20px;
}
.exhibition-con-tit span{
color: #bdb5b2;
margin-top: 14px;
font-size: 11px;
line-height: 30px;
display: block;
width: 85%;
}
.exhibition-con-tit > div{
width: 220px;
height: 45px;
padding: 5px;
text-align: center;
border-radius: 30px;
line-height: 45px;
font-size: 20px;
background-color: #ffa800;
margin-top: 34px;
}
.exhibition-con-tit img{
display: block;
margin-left: 170px;
margin-top: -44px;
}
.exhibition-con-img{
width: 41%;
height: 550px;
float: left;
}
.exhibition-con-img > img{
width: 100%;
margin-top: 143px;
}
.exhibition-con-imglist{
width: 100%;
height: 350px;
float: left;
background-color: hotpink;
}
</style>
</head>
<!-- body是给用户看的 -->
<!--
布局的三步
一、包裹所有内容
二、包裹文字/图片内容
三、文字/图片摆放位置的调整
-->
<body>
<!-- 第一屏的开始 -->
<div class="banner">
<div class="banner-bg1" id="bannerBg1"></div>
<div class="banner-bg2" id="bannerBg2"></div>
<div class="banner-con">
<div class="banner-con-nav">
<img src="images/logo.png">
<ul>
<li>首页</li>
<li>全部产品</li>
<li>软装配饰</li>
<li>配饰参考</li>
<li>会员账户</li>
<li>关于我们</li>
<li><img src="images/icon-cart.png" ></li>
</ul>
</div>
<div class="banner-con-intr">
<span>某某家具给你最舒适的体验</span>
<h1>秋季温暖好物</h1>
<p>
A young and vigorous hrand, to improve the office environment,give the work of higher value as its own reponsibility We are determined to create an efficient and comfortable office
A young and vigorous hrand, to improve the office environment,give the work
</p>
</div>
<div class="banner-con-buy">
<div>
立即购买
<img src="images/icon-btn-arrow.png" >
</div>
</div>
<div class="banner-con-img">
<img src="images/slider1-small.png" >
<img src="images/slider2-small.png" >
<img src="images/slider3-small.png" >
</div>
</div>
</div>
<!-- 第一屏的结束 -->
<!-- 第二屏幕开始 -->
<div class="exhibition">
<div class="exhibition-con">
<div class="exhibition-con-tit">
<p>Stereo sofa</p>
<h1>立体单人沙发</h1>
<h3>￥2800.00</h3>
<span>
A young and vigorous hrand, to improve the office environment,give the work of higher value as its own reponsibility We are determined to create an efficient
</span>
<div>
查看详情
<img src="images/icon-btn-arrow.png" >
</div>
</div>
<div class="exhibition-con-img">
<img src="images/pro1.png" >
</div>
<div class="exhibition-con-imglist"></div>
</div>
</div>
<script type="text/javascript">
/*
banner图片动画效果
*/
/* 背景图片的left属性值 */
var banner1Left = 0;
var banner2Left = 0;
/* 图片路径 */
var bannerImgs = ["images/slider1.jpg","images/slider2.jpeg","images/slider3.jpg"];
//记录图片的变量
var imgNumber = 0;
var img2Bumber;
/* 1、找到标签 */
var bannerDiv1 = document.getElementById("bannerBg1");
var bannerDiv2 = document.getElementById("bannerBg2");
//获取浏览器的宽
var bodyW = document.body.clientWidth;
bannerDiv2.style.left = bodyW + "px";
banner2Left = bodyW;
function move(){
//left坐标减1
banner1Left -= 1;
banner2Left -= 1;
//判断是否该停下来
if(banner1Left == -bodyW){
clearInterval(bannerMove);
//停一段时间继续走
setTimeout(function(){
bannerMove = setInterval("move()",1);
},2000);
//换位置
banner1Left = 0;
banner2Left = bodyW;
imgNumber+=1;
if(imgNumber == bannerImgs.length){
imgNumber = 0;
}
/* 换背景图 */
bannerDiv1.style.backgroundImage = "url("+bannerImgs[imgNumber]+")";
if(imgNumber+1 == bannerImgs.length){
img2Bumber = 0;
}else{
img2Bumber = imgNumber + 1;
}
bannerDiv2.style.backgroundImage = "url("+bannerImgs[img2Bumber]+")";
}
/* 2、修改left属性 */
bannerDiv1.style.left = banner1Left + "px";
bannerDiv2.style.left = banner2Left + "px";
}
var bannerMove =setInterval("move()",1);
</script>
</body>
</html>
最后修改于 2021-09-08 17:37:16
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
