前端那些事之css-demo
前端那些事之css-demo
上官清偌 发表于11个月前
前端那些事之css-demo
  • 发表于 11个月前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 学生专属云服务套餐 10元起购>>>   

摘要: 前端那些事之css-demo
  1. 实现天猫分类导航菜单特效
  2. ```
    <!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>天猫分类导航菜单特效</title>
    		<style>
    			ul,li,p{
    				padding: 0;
    				margin: 0;
    			}
    			a{
    				text-decoration: none;
    			}
    			.brand-list-wrapper{
    				display: inline-block;
    			}
    			.brand-list-wrapper .brand-list{
    				list-style:none;
    				overflow: hidden;
    			}
    			.brand-list-wrapper .brand-list li{
    				width: 120px;
    				height: 90px;
    				border-top: 1px solid #fff;
    				border-left: 1px solid #fff;
    				border-right: 1px solid #eee;
    				border-bottom: 1px solid #eee;
    				float: left;
    				position: relative;
    			}
    			.brand-list-wrapper .brand-list .clear{
    				clear: left;
    			}
    			.brand-list-wrapper .brand-list li .brand-item-logo{
    				width: 100%;
    				height: 100%;
    				text-align: center;
    			}
    			.brand-list-wrapper .brand-list li .brand-item-logo img{
    				width: 82%;    
    				margin-top: 20px;
    			}
    			.brand-list-wrapper .brand-list li .brand-item-detail{
    				width: 100%;
    				height: 100%;
    				position: absolute;
    				top: 0;
    				left: 0;
    				background-color: rgba(0,0,0,.8);
    				color: #fff;
    				font-size: 12px;
    				text-align: center;
    				transition: all .3s ease-out;
    				opacity: 0;
    			}
    			.brand-list-wrapper .brand-list li:hover .brand-item-detail{
    				opacity: 1;
    			}
    			.brand-list-wrapper .brand-list li .brand-item-detail p{
    				line-height: 30px;
    				margin-top: 25px;
    				text-align: center;
    			}
    			.brand-list-wrapper .brand-list li .brand-item-detail a{
    				color: #fff;
    				padding: 3px 10px;
    				background-color: red;
    				border-radius: 10px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="brand-list-wrapper">
    			<ul class="brand-list">
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li class="clear">
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    				<li>
    					<div class="brand-item-logo">
    						<img src="images/brand-1.webp">
    					</div>
    					<div class="brand-item-detail">
    						<p>优惠券 ¥100</p>
    						<a href="#">点击进入</a>
    					</div>
    				</li>
    			</ul>
    		</div>
    	</body>
    </html>
    ```
  3. 效果图:实现天猫购物车系列
  4.  商品列表案例(tab栏案例)
<!doctype html>
<html lang="en">
	<head>
		<meta charset='utf-8'>
		<title>商品列表案例tab</title>
		<style>
			html,body{
				font-family:Arial,'microsoft yahei';
			}
			.tab-panel{
				float:left;
				border:1px solid #e4e4e4;
				border-left:none;
				position:relative;
				height: 128px;
			}
			.tab-panel .tab-bar{
				list-style:none;
				margin:0;
				padding:0;
			}
			.tab-panel .tab-bar .tab{
				float:left;
			}
			.tab-panel .tab-bar .tab a{
				width:62px;
				height:25px;
				text-align:center;
				line-height:25px;
				border-top:2px solid #fff;
				border-bottom:1px solid #e4e4e4;
				border-left:1px solid #e4e4e4;
				display:block;
				font-size:14px;
				color:#666666;
				text-decoration:none;
			}
			.tab-panel .tab-bar .tab:hover a{
				color:#c81623;
				border-top:2px solid #c81623;
				border-bottom:1px solid #fff;
			}
			.tab-panel .tab-bar .tab:hover .content{
				display:block;
			}
			.tab-panel .tab-bar .tab .content{
				width:251px;
				height:100px;
				border:1px solid #e4e4e4;
				border-top:none;
				background-color:#fff;
				color:#c81623;
				font-size:64px;
				text-align:center;
				line-height:100px;
				position:absolute;
				left:0;
				top:28px;
				display:none;
			}
		</style>
	</head>
	<body>
		<div class="tab-panel">
			<ul class="tab-bar">
				<li class="tab">
					<a href="#">话费</a>
					<div class="content">1</div>
				</li>
				<li class="tab">
					<a href="#">机票</a>
					<div class="content">2</div>
				</li>
				<li class="tab">
					<a href="#">电影票</a>
					<div class="content">3</div>
				</li>
				<li class="tab">
					<a href="#">游戏</a>
					<div class="content">4</div>
				</li>
			</ul>
		</div>
	</body>
</html>

4.效果展示:

 5.购物车案例

<!doctype html>
<html lang="en">
	<head>
		<meta charset='utf-8'>
		<title>购物车案例</title>
		<style>
			html,body{
				font-family:Arial,'microsoft yahei';
			}
			.shopping-cart{
				float:right;
				height:34px;
				line-height:34px;
				border:1px solid #dfdfdf;
				background-color:#f9f9f9;
				padding:0 11px 0 19px;
				color:#666666;
				font-size:14px;
				cursor:pointer;
				position:relative;
				margin-right:500px;
			}
			.shopping-cart a{
				color:#666666;
				text-decoration:none;
			}
			.shopping-cart:hover{
				box-shadow: 0 0 5px rgba(0,0,0,.2);
				background-color:#fff;
			}
			.shopping-cart a:hover{
				color:#c81623;
			}
			.shopping-cart:hover .down{
				box-shadow: 0 0 5px rgba(0,0,0,.2);
				display:block;
			}
			.shopping-cart .cart-ico{
				width:16px;
				height:13px;
				background-image:url("images/icos.png");
				display:inline-block;
				background-position:-1px -59px;
				margin-right:5px;
			}
			.shopping-cart .gt{
				font-family:'sonti';
				font-style:normal;
				margin-left:10px;
			}
			.shopping-cart .count{
				width:16px;
				height:14px;
				line-height:14px;
				text-align:center;
				color:#fff;
				background-color:#c81623;
				position:absolute;
				top:-3px;
				right:17px;
				font-style:normal;
				border-radius:7px 7px 7px 0;
				font-size:12px;
			}
			.shopping-cart .down{
				position:absolute;
				background-color:#fff;
				top:35px;
				right:-1px;
				border:1px solid #dfdfdf;
				white-space:nowrap;
				padding:0 16px 0 93px;
				vertical-align:middle;
				line-height:69px;
				background-image:url("images/settleup-nogoods.png");
				background-repeat:no-repeat;
				background-position:30px center;
				display:none;
			}
			.shopping-cart:hover .spacer{
				display:block;
			}
			.shopping-cart .spacer{
				height:12px;
				position:absolute;
				background-color:#fff;
				width:100%;
				bottom:-5px;
				right:0;
				display:none;
				z-index:2;
			}
		</style>
	</head>
	<body>
		<div class="shopping-cart">
			<i class="cart-ico"></i>
			<a href="#">我的购物车</a>
			<em class="count">0</em>
			<i class="gt">&gt;</i>
			<div class="spacer"></div>
			<div class="down">
				<span>购物车中没有商品,赶紧选购吧!</span>
			</div>
		</div>
	</body>
</html>

6.实现的效果:

7.京东左边list商品展示,tab

<!doctype html>
<html lang="en">
	<head>
		<meta charset='utf-8'>
		<title>商品列表案例</title>
		<style>
			html,body{
				font-family:Arial,'microsoft yahei';
			}
			h1,h2,h3,h4,h5,h6,ul,p{
				margin:0;
				padding:0;
			}
			.navigate a{
				text-decoration:none;
				color:#fff;
			}
			.navigate{
				width:210px;
				background-color:#c81623;
				color:#fff;
				text-indent:10px;
				border:1px solid #b1191a;
				border-right:none;
			}
			.navigate .title{
				color:#fff;
			}
			.navigate .title h3{
				height:44px;
				line-height:44px;
				font-size:16px;
				font-weight:normal;
				background-color:#b1191a;
				border-bottom:#b1191a;
			}
			.navigate .list{
				font-size:14px;
				list-style:none;
				position:relative;
			}
			.navigate .list li{
				height:31px;
				line-height:31px;
			}
			.navigate .list li:hover{
				background-color:#f7f7f7;
			}
			.navigate .list li:hover a{
				color:#c81623;
			}
			.navigate .list li i{
				float:right;
				font: 400 9px/14px consolas;
				margin-right:10px;
				line-height: 31px;
			}
			.navigate .list li:hover i{
				color:#f7f7f7;
				background-color:#f7f7f7;
				margin-right:-10px;
				position:relative;
				z-index:2;
			}
			.navigate .list li:hover .detail{
				display:block;
			}
			.navigate .list li .detail{
				border:1px solid #b1191a;
				border-top:2px solid #b1191a;
				position:absolute;
				width:1000px;
				height:465px;
				background-color:#f7f7f7;
				top:-2px;
				left:210px;
				display:none;
				text-align:center;
				line-height:465px;
				font-size:64px;
				font-weight:800;
				color:#b1191a;
			}
		</style>
	</head>
	<body>
		<div class="navigate">
			<a class="title" href="#"><h3>全部商品分类</h3></a>
			<ul class="list">
				<li><a href="#">家用电器</a><i>&gt;</i><div class="detail">1</div></li>
				<li><a href="#">电脑</a>、<a href="#">办公</a><i>&gt;</i><div class="detail">2</div></li>
				<li><a href="#">电脑</a>、<a href="#">办公</a><i>&gt;</i><div class="detail">3</div></li>
				<li><a href="#">电脑</a>、<a href="#">办公</a><i>&gt;</i><div class="detail">4</div></li>
				<li><a href="#">电脑</a>、<a href="#">办公</a><i>&gt;</i><div class="detail">5</div></li>
				<li><a href="#">电脑</a>、<a href="#">办公</a><i>&gt;</i><div class="detail">6</div></li>
				<li><a href="#">电脑</a>、<a href="#">办公</a><i>&gt;</i><div class="detail">7</div></li>
			</ul>
		</div>
	</body>
</html>

7.实现的效果:

 8.天猫商品分类菜单

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天猫分类导航菜单特效</title>
		<style>
			/*reset.css*/
			html{
				font-family: "Microsoft YaHei";
			}
			html,body,h4,ul,li{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.class-nav-wrapper{
				width: 200px;
			}
			.class-nav-wrapper .class-nav-title{
				width: 100%;
				height: 36px;
				line-height: 36px;
				background-color: #C60A0A;
				color: #fff;
				text-indent: 20px;
			}
			.class-nav-wrapper .class-nav-list{
				position: relative;
				background-color: rgba(238,238,238,.95);
			}
			.class-nav-wrapper .class-nav-list a{
				color: #000;
				font-size: 14px;
			}
			.class-nav-wrapper .class-nav-list li{
				text-indent: 20px;
				height: 32px;
				line-height: 32px;
			}
			.class-nav-wrapper .class-nav-list li:hover{
				background-color: #fff;
			}
			.class-nav-wrapper .class-nav-list li:hover a{
				font-weight: bold;
			}
			.class-nav-wrapper .class-nav-list li .class-nav-item-content{
				position: absolute;
				top: 0px;
				left: 200px;
				width: 782px;
				height: 500px;
				background-color: #fff;
				border-top: 1px solid #eee;
				border-bottom: 1px solid #eee;
				display: none;
			}
			.class-nav-wrapper .class-nav-list li:hover .class-nav-item-content{
				display: block;
			}
			.class-nav-wrapper .class-nav-list .class-nav-list-item0:hover,.class-nav-wrapper .class-nav-list .class-nav-list-item0:hover a{
				color: #e54077;
			}
			.class-nav-wrapper .class-nav-list .class-nav-list-item1:hover,.class-nav-wrapper .class-nav-list .class-nav-list-item1:hover a{
				color: #427def;
			}
			.class-nav-wrapper .class-nav-list .class-nav-list-item2:hover,.class-nav-wrapper .class-nav-list .class-nav-list-item2:hover a{
				color: #6347ed;
			}
		</style>
	</head>
	<body>
		<div class="class-nav-wrapper">
			<h4 class="class-nav-title">商品分类</h4>
			<ul class="class-nav-list">
				<li class="class-nav-list-item0">
					<a href="#">女装</a>
					/
					<a href="#">内衣</a>
					<div class="class-nav-item-content">商品分类-女装-内容</div>
				</li>

				<li class="class-nav-list-item1">
					<a href="#">男装</a>
					/
					<a href="#">运动户外</a>
					<div class="class-nav-item-content">商品分类-男装-内容</div>
				</li>

				<li class="class-nav-list-item2">
					<a href="#">女鞋</a>
					/
					<a href="#">男鞋</a>
					/
					<a href="#">箱包</a>
					<div class="class-nav-item-content">商品分类-女鞋-内容</div>
				</li>
			</ul>
		</div>
	</body>
</html>

9.实现的效果:

10.网站右边导航效果

<!doctype html>
<html lang="en">
	<head>
		<meta charset='utf-8'>
		<title>商品列表案例</title>
		<style>
			html,body{
				width:100%;
				height:100%;
				margin:0;
				padding:0px;
				font-family:Arial,'microsoft yahei';
			}
			.right-bar{
				position:fixed;
				top:0;
				bottom:0;
				right:0;
				width:35px;
				background-color:#000;
			}
			.right-bar .menu-bar{
				margin:0;
				padding:0;
				list-style:none;
				position:fixed;
				top:30%;
			}
			.right-bar .menu-bar li{

			}
			.right-bar .menu-bar li a{
				width:35px;
				height:35px;
				background-image:url("images/ico.png");
				display:block;
			}
			.right-bar .menu-bar li:hover{
				background-color:#c81623;
			}
			.right-bar .menu-bar li a.shopping-cart{
				height:auto;
				width:20px;
				text-align:center;
				background-image:none;
				padding:15px 0;
				text-decoration:none;
				font-size:14px;
				margin:auto;
				color:#fff;
				margin:auto;

			}
		</style>
	</head>
	<body>
		<div class="right-bar">
			<ul class="menu-bar">
				<li>
					<a href="#"></a>
				</li>
				<li>
					<a href="#" class="shopping-cart">购物车</a>
				</li>
				<li>
					<a href="#"></a>
				</li>
				<li>
					<a href="#"></a>
				</li>
				<li>
					<a href="#"></a>
				</li>
				<li>
					<a href="#"></a>
				</li>
			</ul>
		</div>
	</body>
</html>

实现的效果:

共有 人打赏支持
粉丝 9
博文 78
码字总数 83411
×
上官清偌
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: