前端页面布局（新手必看天天鲜页面布局）

最新推荐文章于 2024-08-06 17:05:56 发布

lrp9090

最新推荐文章于 2024-08-06 17:05:56 发布

阅读量1k

点赞数 1

文章标签：前端页面练习页面布局 css html js

本文链接：https://blog.csdn.net/lrp9090/article/details/82863739

版权

详细代码及其所需素材从网盘中提取

链接:https://pan.baidu.com/s/1W2BXzkvoWG2yAWj0-nbGIA 密码:jk3f

成果展示

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="css/ttx.css">
</head>
<body>
<div id="ttx_wrap">
	<div class="ttx-header">
		<div class="header-top">
			<div class="hywz"><span>欢迎您来天天鲜!</span></div>
			<ul class="user">
				<li class="user-name">欢迎您:&nbsp;&nbsp;<a title="欢迎您张三">张三</a></li>
				<li class="user-car"><a>我的购物车</a> </li>
				<li class="user-order"><a>我的订单</a> </li>
			</ul>
		</div>
		<div class="header-down">
			<div class="ttx-logo fd-style"> <img src="img/logo.png" alt="天天鲜" title="欢迎您来天天鲜"></div>
			<form>
				<div class="ttx-ssk fd-style">
						<span class="ssk-span">
							<i class="icon-search"></i>
							<input type="text" class="ssk" placeholder="搜索" />
						</span>
						<span class="btn-search"><a>搜索</a></span>
				</div>
			</form>
			<div class="ttx-gwc">
				<i class="icon-gwc"></i>
				<span class="buycar"> 我的购物车</span>
				<span class="total-num">0</span>
			</div>
		</div>
	</div>
	<div class="ttx-main">
		<div class="nav">
			<div class="sort  products"><span>全部商品分类</span></div> 
			<ul class="sort"> 
				<li><a>首页</a></li>
				<li><a>手机生鲜</a></li>
				<li><a>抽奖</a></li>
			</ul>
		</div>
		<div class="mian-one">
			<ul class="details-sort">
					<li><i class="icon1 icon-bg"></i><a>新鲜水果</a><i class="icon-next"></i></li>
					<li><i class="icon2 icon-bg"></i><a>有机蔬菜</a><i class="icon-next"></i></li>
					<li><i class="icon3 icon-bg"></i><a>新鲜海鲜</a><i class="icon-next"></i></li>
					<li><i class="icon4 icon-bg"></i><a>甜点面包</a><i class="icon-next"></i></li>
					<li><i class="icon5 icon-bg"></i><a>海外进口</a><i class="icon-next"></i></li>
					<li><i class="icon6 icon-bg"></i><a>限时抢购</a><i class="icon-next"></i></li>
			</ul>
			<div class="part-left">
				<div class="img-img">
					<div> <img src="img/right01.jpg"></div>
					<div> <img src="img/right02.jpg"></div>
				</div>
				<div class="tj">
					<div class="slides"> <img src="img/slider.jpg"></div>
					<div class="slides"> <img src="img/slide2.png"></div>
					<div class="slides"> <img src="img/slider3.jpg"></div>
					<div class="slides"> <img src="img/slider4.png"></div>
					<div class="dot">
						<div class="dots"></div>
						<div class="dots"></div>
						<div class="dots"></div>
						<div class="dots"></div>
					</div>
				</div>
				
			</div>
			
		</div>
		<div class="main-two">
			<div class="nav">
				<div class="sort  hxsc"><span>海鲜水产</span></div> 
				<ul class="sort"> 
					<li><a>深海鲫鱼</a></li>
					<li><a>阳澄湖大闸蟹</a></li>
				</ul>
			</div>
			<div class="product-details">
				<div class="hxsy-img"><img src="img/fish.jpg" alt="海鲜盛宴"></div>
				<div class="product-show">
					<div class="goods"><h1 class="goods-name">基围虾</h1> <img src="img/daxia.jpg" alt="大虾"><h3 class="price">￥39.9</h3></div>
					<div class="goods"> <h1 class="goods-name">基围虾</h1> <img src="img/daxia.jpg" alt="大虾"><h3 class="price">￥39.9</h3></div>
					<div class="goods"><h1 class="goods-name">基围虾</h1>  <img src="img/daxia.jpg" alt="大虾"><h3 class="price">￥39.9</h3></div>
					<div class="goods"> <h1 class="goods-name">基围虾</h1> <img src="img/daxia.jpg" alt="大虾"><h3 class="price">￥39.9</h3></div>
				</div>
			</div>
		</div>
	</div>
</div>

## CSS代码

* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	#ttx_wrap {
		background-colo: #fff;
		font-size: 14px;
		color: #333;
	}
	.header-top {
		height: 15px;
		line-height: 15px;
		background-color: #F7F7F7;
		border:1px solid #e3e3e3;
		padding: 5px 100px 5px 50px;
		overflow: hidden;
		color: #757472;
	}
	.hywz {
		float: left;
	}
	.user {
		float: right;
		overflow: hidden;
	}
	.user li {
		float: left;
		padding: 0 10px;
		border-right:1px solid #333;
	}
	.user li a:hover {
		cursor:pointer;
		color: red;
	}
	.header-down {
		padding: 20px 80px;
		overflow: hidden;
	}
	.ttx-ssk {
		width: 600px;
		position: relative;
	}
	.fd-style {
		float: left;
		padding-right: 100px;
	}
	.ssk {
		margin-left: 44px;
		width: 92%;
		height: 40px;
		box-sizing: border-box;
		outline: none;
		border:0;
	}
	.ssk-span {
		width: 100%;
		display: inline-block;
		border:1px solid #37AB40;
		margin-top: 10px;
		position: relative;
	}
	.icon-search {
		height: 19px;
		width: 21px;
		background: url(../img/search.png) no-repeat;
		position:absolute;
		top: 11px;
	    left: 10px
	}
	.btn-search {
		background: #37AB40;
		display: inline-block;
		width: 109px;
		height: 40px;
		position: absolute;
		top: 11px;
	    right: 99px
	}
	.btn-search  a {
		height: 40px;
		line-height: 40px;
		display: block;
		color: #fff;
		text-align: center;
		font-size: 16px;
		cursor: pointer;
	}
	.ttx-gwc {
		margin-top:10px;
		width: 152px;
		border:1px solid #e3e3e3;
		float: left;
		position: relative;
	}
	.icon-gwc {
		width: 27px;
		height: 22px;
		background: url(../img/buycar.png) no-repeat;
		margin:10px;
		float: left;
	}
	.ttx-gwc  .buycar {
		display: block;
		height: 40px;
		line-height: 40px;
		color: #37AB40;
	}
	.total-num {
		display: inline-block;
		height: 44px;
		line-height: 44px;
		width: 50px;
		background-color: #FB8A00;
		color: #fff;
		position: absolute;
		text-align: center;
		top: -1px;
		right:-49px;
		font-size: 16px;
		cursor: pointer;
	}
	.ttx-main {
		padding: 0 79px;
		margin:0 auto;
	}
	.nav {
		border-bottom: 3px solid #37AB40;
		overflow: hidden;
	}
	.sort {
		float: left;
		overflow: hidden;
		height: 40px;
		line-height: 40px;
		font-size: 15px;
		margin-right: 5px;
	}
	.sort  li {
		float: left;
		padding: 0 30px;
	}
	.products {
		padding: 0 50px;
	}
	.products span {
		display: block;
		height: 40px;
		line-height: 40px;
	}
	.sort  li:hover,.products,.details-sort li:hover {
		background-color: #37AB40;
		color: #fff;
		cursor: pointer;
	}
	.details-sort {
		box-sizing: border-box;
		width: 190px;
		float: left;
	}
	.details-sort li {
		border-left:1px solid #e8e8e8;
		border-right:1px solid #e8e8e8;
		border-bottom:1px solid #e8e8e8;
		height: 34px;
		line-height: 34px;
		padding: 5px 10px;
	
	}
	.details-sort li:hover {
		border-left:1px solid #37AB40;
		border-right:1px solid #37AB40;
	}
	.mian-one {
		overflow: hidden;
	}
	.icon-bg {
		width: 27px;
		height: 23px;
		float: left;
		margin:7px 20px 7px 7px ; 
	}
	.icon1 {
		background: url(../img/icon01.png) no-repeat;
	}
	.icon2 {
		background: url(../img/icon02.png) no-repeat;
	}
	.icon3 {
		background: url(../img/icon03.png) no-repeat;
	}
	.icon4 {
		background: url(../img/icon04.png) no-repeat;
	}
	.icon5{
		background: url(../img/icon05.png) no-repeat;
	}
	.icon6 {
		background: url(../img/icon06.png) no-repeat;
	}
	.icon-next {
		margin:7px; 
		height: 21px;
		width: 24px;
		float: right;
		background:url(../img/arrow.png) no-repeat;
	}
	.slides {
		width: 
	}
	
	.tj {
		position: relative;
		margin-right: 240px;
	}
	.dot {
		overflow: hidden;
		position: absolute;
		bottom: 25px;
		left: 300px;
	}
	.dots {
		float: left;
		background-color: #e3e3e3;
		width: 20px;
		height:20px;
		border-radius: 30px;
		margin-right:8px; 
	
	}
	.img-img {
		
		float: right;
	}
	.part-left  {
		margin-left: 190px;
	}
	.product-details {
		overflow: hidden;
	}
	.hxsc {
		font-weight: 800;
		text-align: left;
		font-size: 16px;
		color:#37AB40; 
	}	
	.hxsy-img {
		width: 200px;
		float: left;
	}
	.product-show {
		margin-left: 200px;
		overflow: hidden;
		cursor: pointer;
	}
	.goods {
		box-sizing: border-box;
		width: 25%;
		float: left;
		border-right: 1px solid #e3e3e3;
		border-bottom: 1px solid #e3e3e3;
	}
	.goods img {
		display: block;
		width: 180px;
		margin:0 auto;
		height: 183px;
	}
	.price {
		color: #FF0000;
		text-align: center;
		padding: 19px 0 ;
	}
	.goods-name {
		font-weight: normal;
		text-align: center;
		font-size: 16px;
		padding: 19px 0 ;
	}

部分js代码（轮播代码）

<script>
		var slides = document.getElementsByClassName("slides");
		var dots = document.getElementsByClassName("dots");
		var slidesIndex = 0;
		changeImg();
		function changeImg() {
			for (var i = 0; i < slides.length; i++) {
				slides[i].style.display = "none";
			}
			for (var i = 0; i < dots.length; i++) {
				dots[i].style.backgroundColor = "#e3e3e3";
			}
			if (slidesIndex == slides.length) {
				slidesIndex = 0;
			}
			slides[slidesIndex].style.display = "block";
			dots[slidesIndex].style.backgroundColor = "blue";
			slidesIndex ++;
			setTimeout(changeImg, 2000);
		}
	</script>