自学web前端练手——仿电商首页

最新推荐文章于 2021-11-07 15:10:11 发布

lvshaoshishang

最新推荐文章于 2021-11-07 15:10:11 发布

阅读量450

点赞数

分类专栏：自学web前端文章标签： html css

原文链接：https://www.bilibili.com/video/av8710320?p=5

版权

自学web前端专栏收录该内容

31 篇文章 2 订阅

订阅专栏

跟着b站的视频弄的，直接上效果：

鼠标悬停上方导航栏，超链接颜色会变。
在这里插入图片描述
也实现了图片切换。

鼠标悬停图片链接时图片会放大

代码如下：
.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>香菇街 - 你的剁手街</title>
	<link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style11.css">
</head>
<body>
	<div class="top-nav">
		<div class="container clearf">
			<div class="fl">
				<a class="item" href="#">首页</a>
			</div>
			<div class="fr">
				<a class="item" href="#">我的订单</a>
				<a class="item" href="#">我的收藏夹</a>
				<a class="item" href="#">登录</a>
				<a class="item" href="#">注册</a>
			</div>
		</div>
	</div>
	<div class="header clearf">
		<div class="container">
			<div class="logo col-2">
				<img src="image/logo.png" style="width:70%;height:70%;">
			</div>
			<div class="col-5 search-bar">
				<input type="text">
				<button>搜索</button>
			</div>
			<div class="cart col-3">
				<a href="#">我的购物车</a>
			</div>
		</div>
	</div>
	<div class="main-promote clearf">
		<div class="container">
			<div class="col-2 cat">
				<div class="item">item / item</div>
				<div class="item">item / item</div>
				<div class="item">item / item</div>
				<div class="item">item / item</div>
				<div class="item">item / item</div>
				<div class="item">item / item</div>
				<div class="item">item / item</div>
				<div class="item">item / item</div>
			</div>
			<div class="col-6">
				<div class="slider">
					<img src="image/1.jpg" id="h-img">
					<button id="b-l"></button>
					<button id="b-r"></button>
				</div>
				<div class="sub-promote">
					<div class="col-5">
						<img src="image/5.jpg" alt="">
					</div>
					<div class="col-5">
						<img src="image/6.jpg" alt="">
					</div>
				</div>
			</div>
			<div class="col-2 info">
				<div class="auth clearf">
					<div class="avatar"></div>
					你好，欢迎剁手~
				</div>
				<div class="anno">
					<div class="title">公告</div>
					<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit deleniti voluptatibus praesentium doloremque quis repellendus necessitatibus, esse alias voluptas facere ullam ab. Dolores quam, corporis in sunt iste veniam cumque.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos dolorem, similique nam itaque recusandae tempora?</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="cat-promote clearf cat">
			<div class="title">女装频道</div>
			<div class="content">
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			</div>
		</div>
		<div class="cat-promote clearf cat">
			<div class="title">美妆频道</div>
			<div class="content">
			<div class="col-2 item"><div class="card"><a href="#"><img src="image/11.jpg"></a></div></div>
			<div class="col-3 item"><div class="card"><a href="#"><img src="image/10.jpg"></a></div></div>
			<div class="col-2 item"><div class="card"><a href="#"><img src="image/12.jpg"></a></div></div>
			<div class="col-3 item"><div class="card"><a href="#"><img src="image/9.jpg"></a></div></div>
			</div>
		</div>
		<div class="cat-promote clearf cat">
			<div class="title">男装频道</div>
			<div class="content">
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			</div>
		</div>
		<div class="cat-promote clearf cat">
			<div class="title">美食频道</div>
			<div class="content">
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			</div>
		</div>
		<div class="cat-promote clearf cat">
			<div class="title">数码频道</div>
			<div class="content">
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			</div>
		</div>
		<div class="cat-promote clearf cat">
			<div class="title">家电频道</div>
			<div class="content">
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			</div>
		</div>
		<div class="cat-promote clearf cat">
			<div class="title">日用频道</div>
			<div class="content">
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			<div class="col-2 item"><div class="card"></div></div>
			<div class="col-3 item"><div class="card"></div></div>
			</div>
		</div>
	</div>
	<div class="footer clearf">
		<div class="container">
			<a href="#">公司官网</a>
			<a href="#">技术支持</a>
			<a href="#">人才招聘</a>
			<a href="#">联系我们</a>
			<p>https://blog.csdn.net/lvshaoshishang于2020/3/12出品</p>
		</div>
	</div>
	<script>
       		var image=document.getElementById('h-img');
       		var prev=document.getElementById('b-l');
       		var next=document.getElementById('b-r');
       		var nowIndex=1;
       		var count=4;//4张图片
       		next.onclick=function(){
            nowIndex=nowIndex+1>count?1:nowIndex+1;
            image.src="image/"+nowIndex+".jpg";
       		}
       		prev.onclick=function(){
            if (nowIndex-1<=0) {
                nowIndex=count;
            }
            else{
                nowIndex=nowIndex-1;
            }
            //nowIndex=nowIndex-1<0?count:nowIndex-1;
            image.src="image/"+nowIndex+".jpg";
       		}
    </script>
</body>
</html>

.css

*{/*假如需要并排放置两个带边框的框，可通过将 box-sizing 
*设置为 “border-box”。这可令浏览器呈现出带有指定宽度和
*高度的框，并把边框和内边距放入框中。*/
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition: background 200;
	-o-transition: background 200;
	transition: background 200;
}
body{
	font-size: 14px;
	color: #444;
	line-height: 1.7;
	background: #f9f9f9;
}
a{
	text-decoration: none;
}
img{
	display: block;
	max-width: 100%;
}
.container{
	max-width: 1080px;/*如果窗口大于1080还是规定为1080，
	如果窗口小于1080则窗口多大他多大*/
	margin: 0 auto;
	display: block;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clearf:after,
.clearf:before{/*这个类里的第一个元素和最后一个元素都
	清除浮动*/
	content:" ";
	display:block;
	clear: both;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9{
	display: block;
	position: relative;
	min-height: 1px;/*最小高度，保证他一定有高度*/
	float: left;
}
.col-1{/*占页面的10%下面以此类推*/
	width: 10%;
}
.col-2{
	width: 20%;
}
.col-3{
	width: 30%;
}
.col-4{
	width: 40%;
}
.col-5{
	width: 50%;
}
.col-6{
	width: 60%;
}
.col-7{
	width: 70%;
}
.col-8{
	width: 80%;
}
.col-9{
	width: 90%;
}
.top-nav{
	background: #eee;
}
.top-nav .item{
	display: inline-block;
	padding: 6px 10px;
	color: #666;
}
.top-nav .item:hover{
	color: #333;
}
.header{
	padding: 20px 0;
}
.header .logo{
	font-size: 33px;
	color: red;
	-webkit-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	transform: translateY(-10px);
}
.header .search-bar{
	border: 2px solid #dd182b;
	background: #dd182b;
}
.header .search-bar input,
.header .search-bar button{
	display: block;
	float: left;
	border: 0;
	padding: 10px;
	outline: 0;
}
.header .search-bar input{
	width: 80%;
}
.header .search-bar input:focus{
	box-shadow: inset 0 0 2px 2px rgba(0,0,0,.3);
}
.header .search-bar button{
	width: 20%;
	background: #dd182b;
	color: #fff;
}
.header .search-bar button:hover{
	background: #ce1829;
}
.header .cart{
	text-align: center;
}
.header .cart a {
	float: right;
	padding: 10px;
	background: #fff;
	border: 2px solid #eee;
	width: 80%;
	color:#dd182b;
}
.main-promote{
	/*background: #dedede;*/
}
.main-promote .cat{
	background: #6e6568;
	color: #fff;

}
.main-promote .cat .item{
	padding: 16px 20px;
}
.main-promote .cat .item:hover{
	background: rgba(0,0,0,.1);
}
.main-promote .info{
	padding: 10px;
	background-color: #fff;
	color: #888;
	/*box-shadow: 0 7px 2px rgba(0,0,0,.1);*/
}
.main-promote .info > *{
	margin-bottom: 10px;
}
.main-promote .info .avatar{
	width: 50px;
	height: 50px;
	background: #aaa;
	border-radius: 50%;
	float: left;
	margin-right: 10px;
}
.cat-promote .title:before{
	content: "";
	display: inline-block;
	vertical-align: middle;/*垂直方向的居中*/
	width: 5px;
	height: 25px;
	background: #dd182b;
	margin-right: 10px;
}
.cat-promote .title{
	font-size: 22px;
}
.cat-promote .item{/*仅仅是个布局工具*/
	padding: 5px;
}
.cat-promote .card{
	height: 300px;
	background: #ccc;
	box-shadow: 0 2px 2px rgba(0,0,0,.1);
	border-radius: 4px;
}
.cat-promote a:hover img{
	width: 110%;
	height: 110%;
}
.footer{
	padding: 30px 0;
	margin-top: 30px;
	background: #eee;
	text-align: center;
	color: #999;
	font-size: 14px;
}
.footer a{
	color: #999;
	margin-right: 14px;
}
.footer a:hover{
	color: #777;
}
#b-l{
	position: absolute;
	width: 20px;
	height: 20px;
	background: red;
	border-radius: 50%;
	left: 5px;
	top: 150px;
}
#b-r{
	position: absolute;
	width: 20px;
	height: 20px;
	background: red;
	border-radius: 50%;
	right:5px;
	top: 150px;
}
#h-img{
	width: 648px;
	height: 303px;
}

lvshaoshishang

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
自学web前端练手——仿电商首页

跟着b站的视频弄的，直接上效果：鼠标悬停上方导航栏，超链接颜色会变。也实现了图片切换。鼠标悬停图片链接时图片会放大代码如下：.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>香菇街 - 你的剁手街</titl...
复制链接

扫一扫