仿京东选项卡效果

最新推荐文章于 2021-06-04 03:09:32 发布

VIP文章 scarsun

最新推荐文章于 2021-06-04 03:09:32 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/scarsun/article/details/81315427

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 14px;
			}
			ul li{
				list-style:none;	
			}
			#menu{
				width: 552px;
				line-height: 30px;
				overflow: hidden;
				background:#eee;
			}
			#menu li{
				float: left;
				width: 90px;
				border-left: 1px solid #eee;
				border-right: 1px solid #eee;
				border-top: 2px solid #eee;
				text-align: center;
				cursor: pointer;
			}
			#menu .active{
				border-left-color: #ccc;
				border-right-color: #ccc;
				border-top-color: blue;
				cursor: pointer;
				background:#fff;
			}
			#content{
				width: 552px;
			}
			#content>div {
				display: none;
				padding: 10px;
				overflow: hidden;
			}
			#content>div img{
				float: left;
				width:255px ;
				height: 96px;
				margin-right: 10px;
			}
			#content>div .title{
				padding: 2px 0;

最低0.47元/天解锁文章

scarsun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿京东选项卡效果

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;选项卡&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0; } body{ font-
复制链接

扫一扫