一、首页第一屏，研究一下如何使用javascript让图片动起来

<!DOCTYPE html>
<html>
	<!-- head给浏览器看的 -->
	<head>
		<meta charset="utf-8">
		<title>某某家具网站</title>
		<style>
			*{margin: 0;padding: 0;}
			/* 第一屏布局的开始 */
			.banner{
				width: 100%;
				height: 900px;
				background: url(images/slider1.jpg) no-repeat;
				background-size: 100% 93%;
			}
			.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;
			}
			/* 第一屏布局的结束 */
		</style>
	</head>
	<!-- body是给用户看的 -->
	<!--
	布局的三步
	一、包裹所有内容
	二、包裹文字/图片内容
	三、文字/图片摆放位置的调整 
	-->
	<body>
		<!-- 第一屏的开始 -->
		<div class="banner">
			<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>
		<!-- 第一屏的结束 -->
	</body>
	

</html>

 

最后修改于 2021-09-07 17:23:54
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇