前端练习
案例所用的图片，放置在image01文件夹里
下拉菜单+首页
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover, .dropbtn {
background-color: #111;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</ul>
<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
</body>
</html>
1. 201810201023.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="201910201023/reset.css">
<link rel="stylesheet" type="text/css" href="201910201023/main.css">
<link rel="stylesheet" type="text/css" href="201910201023/c3.css">
<link rel="stylesheet" type="text/css" href="201910201023/c4.css">
</head>
<body>
<div class="c1">
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="//www.runoob.com">菜鸟教程 1</a>
<a href="//www.runoob.com">菜鸟教程 2</a>
<a href="//www.runoob.com">菜鸟教程 3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropbtn">我的首页</a>
<div class="dropdown-content">
<a href="//www.runoob.com">菜鸟教程 1</a>
<a href="//www.runoob.com">菜鸟教程 2</a>
<a href="//www.runoob.com">菜鸟教程 3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropbtn">全部分类</a>
<div class="dropdown-content">
<a href="//www.runoob.com">菜鸟教程 1</a>
<a href="//www.runoob.com">菜鸟教程 2</a>
<a href="//www.runoob.com">菜鸟教程 3</a>
</div>
</div>
<div class="dropdown"><a href="#">Python基础</a></div>
<div class="dropdown"><a href="#">Python进阶</a></div>
<div class="dropdown"><a href="#">前端基础</a></div>
<div class="dropdown">
<a href="#" class="dropbtn">Django基础</a>
<div class="ccz01">
<img src="../image01/01.png" alt="">
<div class="desc">学的不仅是技术，更是梦想！</div>
</div>
</div>
<div class="dropdown"><a href="#">Flask基础</a></div>
</div>
<div class="center_con">
<a href="#" class="logo left"><img src="../image01/logo.png" alt="天天生鲜网站logo"></a>
<div class="search_con left">
<form>
<input type="text" name="" class="input_txt left" placeholder="搜索">
<input type="submit" name="" class="input_sub left" value="搜索">
</form>
</div>
<div class="chart_con right">
<a href="#" class="chart_link left">我的购物车</a>
<div class="chart_num left">5</div>
</div>
</div>
<div class="c3">
<div class="c3_1">
<ul>
<li><a href="">手机卡</a></li>
<li><a href="">电视</a></li>
<li><a href="">笔记本</a></li>
<li><a href="">家电</a></li>
<li><a href="">出行</a></li>
<li><a href="">路由器</a></li>
</ul>
</div>
<div class="c3_2"></div>
</div>
<div class="c4">
<div class="c4_1">
<ul>
<li><a class="sep1" href="">手机卡<span class="sep2">></span></a>
<div class="children clearfix children-col-2">
<ul>
<li></li>
</ul>
</div>
</li>
<li><a class="sep1" href="">电视<span class="sep2">></span></a></li>
<li><a class="sep1" href="">笔记本<span class="sep2">></span></a></li>
<li><a class="sep1" href="">家电<span class="sep2">></span></a></li>
<li><a class="sep1" href="">出行<span class="sep2">></span></a></li>
<li><a class="sep1" href="">路由器<span class="sep2">></span></a></li>
</ul>
</div>
<div class="c4_2"></div>
</div>
</body>
</html>
1.1 文件夹 201910201013下的四个css文件
c3.css
.c3{
height:300px;
width:1220px;
margin:0 auto;
}
.c3_1{
width:20%;
height:300px;
background-color: #b0b0b0;
float:left;
}
.c3 li{
text-align: center;
text-decoration: none;
padding:5px;
}
.c3 a{
text-decoration: none;
font-size: 15px; /*此处调整字体大小*/
}
c4.css
.c4{
margin:10px auto 0;
width:1220px;
height:400px;
}
.c4_1{
width:20%;
background-color: #b0b0b0;
}
/*.c4_1 li{*/
/*padding:5px 5px 5px 50px; !*调整字体和边界的距离*!*/
/*}*/
.c4_1 a{
text-decoration: none;
font-size: 16px;
}
.c4_1 .sep1{
position: relative;
padding-left:50px;
color:white;
height:42px;
line-height: 42px;
display: block;
}
.c4_1 .sep2{
position:absolute;
top:12px;
right:20px;
font-size: 16px;
line-height: 16px;
color:#e0e0e0;
}
.c4_1 li:hover {
background-color:orangered ;
}
.c4_2 .children-col-2{
width:530px;
}
.c4_2 .children{
display: none;
position: absolute;
left:234px;
top:0;
z-index:24;
height:458px;
border:1px solid #e0e0e0;
background-color: #e0e0e0;
}
.clearfix:after,.clearfix:before{
content:" ";
display: table;
}
.clearfix:after{
clear:both;
}
/*.c4_1 li:hover .c4_2{*/
/*display: block;*/
/*}*/
main.css
body {
margin: 0;
}
.c1 {
width: 1220px;
height: 50px;
margin: 0 auto;
background-color: #606060;
}
.c1 a {
/*float: left;*/
text-decoration: none;
font-size: 16px;
line-height: 50px;
text-align: center;
padding: 0 10px;
color: #f0f0f0;
}
.c1 a:hover {
color: red;
background-color: blue;
}
.dropdown {
position: relative;
display: inline-block;
}
.c1 .dropbtn {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
margin-bottom: 50px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
line-height: 20px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.ccz01 {
display: none;
position: absolute;
background-color: #b0b0b0;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.dropdown:hover .ccz01 {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
.left{
float:left;
}
.center_con{
height:100px;
width:1200px;
margin:0 auto;
}
.logo{
margin:10px 0 0 0;
}
.search_con { /*搜索框*/
width: 618px;/*此处的大小可能有修改，加不加border的大小*/
height: 40px;
margin: 25px 0 0 124px;
border: 1px solid red;
background: url(../../image01/icons.png) 10px 10px no-repeat;
}
.search_con .input_txt {
margin-left: 36px;
width: 480px;
height: 38px;
border: 0;
outline: none;
}
.search_con .input_sub {
width: 100px;
height: 38px;
background-color: #37ab40;
border: 0;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.right{
float:right;
}
.chart_con { /*购物框*/
width: 200px;
height: 25px;
margin-top: 25px;
}
.chart_link {
width: 158px;
height: 40px;
border: 1px solid #ddd;
background: url(../../image01/icons.png) 12px -42px no-repeat #f7f7f7;
text-indent: 56px;
line-height: 38px;
font-size: 14px;
color: #37ab40;
}
.chart_num {
width: 40px;
height: 40px;
background-color: #f80;
text-align: center;
font: bold 18px/40px 'Microsft Yahei';
color: #fff;
}
reset.css
/* 将标签默认的间距设为0 */
body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{
margin:0;
padding:0;
}
/* 去掉默认的小圆点 */
ul{
list-style:none;
}
/* 去掉默认的下划线 */
a{
text-decoration:none;
}
/* 设置不倾斜 */
em{
font-style:normal;
}
/* 去掉在IE下图片做链接时生成的边框 */
img{
border:0;
}
/* 让h标签继承body中的字体大小的设置 */
h1,h2,h3,h4,h5,h6{
font-size:100%;
}
/* 清除浮动、解决margin-top塌陷 */
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
.c1_1,.c1_2{
float:left;
}
2. html首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body{
margin:0;
}
.c2{
width:80%;
height:50px;
margin:50px auto 0;
background-color: #606060;
}
.c2 a{
/*float: left;*/
text-decoration: none;
font-size: 16px;
line-height:50px;
text-align: center;
padding:0 10px;
color: #f0f0f0;
}
.c2 a:hover{
color:red;
background-color: blue;
}
.dropdown {
position: relative;
display: inline-block;
}
.c2 .dropbtn {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
margin-bottom: 50px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
line-height: 20px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.ccz01{
display: none;
position: absolute;
background-color: #b0b0b0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .ccz01{
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="c2">
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="//www.runoob.com">菜鸟教程 1</a>
<a href="//www.runoob.com">菜鸟教程 2</a>
<a href="//www.runoob.com">菜鸟教程 3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropbtn">我的首页</a>
<div class="dropdown-content">
<a href="//www.runoob.com">菜鸟教程 1</a>
<a href="//www.runoob.com">菜鸟教程 2</a>
<a href="//www.runoob.com">菜鸟教程 3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropbtn">全部分类</a>
<div class="dropdown-content">
<a href="//www.runoob.com">菜鸟教程 1</a>
<a href="//www.runoob.com">菜鸟教程 2</a>
<a href="//www.runoob.com">菜鸟教程 3</a>
</div>
</div>
<div class="dropdown"><a href="#">Python基础</a></div>
<div class="dropdown"><a href="#">Python进阶</a></div>
<div class="dropdown"><a href="#">前端基础</a></div>
<div class="dropdown">
<a href="#" class="dropbtn">Django基础</a>
<div class="ccz01">
<img src="../image01/01.png" alt="">
<div class="desc">学的不仅是技术，更是梦想！</div>
</div>
</div>
<div class="dropdown"><a href="#">Flask基础</a></div>
</div>
</body>
</html>
2.首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<script src="../statics/vue-router.js"></script>
<style>
body{
margin:0;
}
</style>
<link rel="stylesheet" href="../static/header.css">
<link rel="stylesheet" href="../static/header2.css">
</head>
<body>
<div>
<div class="header1">
<div class="header11">
<div class="header01">
<a href="//www.mi.com/index.html" >小米商城</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.miui.com/" >MINU</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.iot.mi.com/" >loT</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.i.mi.com/" >云服务</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.jr.mi.com?from=micom" >金融</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/" >有品</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.youpin.mi.com/index.html" >小米商城</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/index.html" >小爱开放品台</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/index.html" >企业团购</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/index.html" >资质证照</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/index.html" >协议规则</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/index.html" class="topbar-download">下载APP
<!--<span class="appcode"><img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城" width="90" height="90">小米商城app</span>-->
</a>
<span class="sep">|</span>
<a rel="nofollow" href="//www.mi.com/index.html" >Select Location</a>
<span class="sep">|</span>
</div>
<div class="header03">
<a href="" >购物车</a>
<span class="sep">(0)</span>
</div>
<div class="header02">
<a href="">登录</a>
<span class="sep">|</span>
<a href="">注册</a>
<span class="sep">|</span>
<a href="">消息通知</a>
<span class="sep">|</span>
</div>
</div>
</div>
<div class="header2">
<div class="header21">
<div class="header2_01">
<a class="logo ir" title= "xiaomi" href="" onclick="">小米官网</a>
</div>
<div class="header2_02">
<ul class="nav-list clearfix">
<li class="nav-category"><a href="" class="link-category"></a></li>
<li class="nav-item"><a href="" class="link"><span>小米手机</span></a></li>
<li class="nav-item"><a href="" class="link"><span>Redmi红米</span></a></li>
<li class="nav-item"><a href="" class="link"><span>电视</span></a></li>
<li class="nav-item"><a href="" class="link"><span>笔记本</span></a></li>
<li class="nav-item"><a href="" class="link"><span>家电</span></a></li>
<li class="nav-item"><a href="" class="link"><span>路由器</span></a></li>
<li class="nav-item"><a href="" class="link"><span>智能硬件</span></a></li>
<li class="nav-item"><a href="" class="link"><span>服务</span></a></li>
<li class="nav-item"><a href="" class="link"><span>社区</span></a></li>
</ul>
</div>
<div class="header2_03">
<form class="search-form clearfix">
<label class="hide"></label>
<input type="search" id="search" name="keyword" class="search-text">
<input type="submit" value="" class="search-btn iconfont">
<div class="search-hot-words">
<a href="">小米9 Pro 5G</a>
<a href="">Redmi Note 8</a>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
header.css
.header1 {
background-color: #333333;
height: 40px;
position: relative;
font-size: 12px;
}
.header1:before {
content: " ";
display: table;
}
.header1:after {
content: " ";
display: table;
}
.header11 {
width: 1226px;
margin-left: auto;
margin-right: auto;
}
.header01 {
float: left;
height: 40px;
}
.header01 a {
color: #b0b0b0;
line-height: 40px;
}
.header11 .sep {
margin: 0.3em;
color: #424244;
font-family: sans-serif;
}
.header03 {
float: right;
width:120px;
background-color: #424242;
text-align: center;
display: block;
}
.header03 a{
color: #b0b0b0;
line-height: 40px;
}
.header03 .sep {
margin: 0.3em;
color: #b0b0b0;
font-family: sans-serif;
}
.header02{
float:right;
}
.header02 a{
color: #b0b0b0;
line-height: 40px;
}
/*a：hover 放到最后才对所有的a标签有效*/
a,a:hover {
text-decoration: none;
color: #ffffff;
background-color: rgba(0, 0, 0, 0);
}
header2.css
.header2{
height:100px;
position: relative;
}
.header21{
width:1226px;
margin-left:auto;
margin-right:auto;
}
.header2_01{
float:left;
width:62px;
margin-top: 22px;
}
.header2_01 .logo{
display: block;
width:55px;
height:55px;
background-color: #ff6700;
text-align: center;
font-size: 12px;
line-height: 55px;
/*overflow: hidden;*/
}
.header2_02{
float:left;
width:850px;
}
.header2_02 .nav-list{
float:left;
list-style-type: none;
width:1100px;
height:88px;
margin:0;
padding:12px 0 0 30px;
font-size: 14px;
}
.header2_02 .nav-category{
float:left;
width:127px;
padding-right:15px;
}
.header2_02 .link-category{
display:block;
padding:26px 0 38px;
text-align: right;
color:#333333;
}
.header2_02 .link{
display: block;
float:left;
padding:26px 10px 38px;
color: #333333;
}
.header2_03{
float:right;
width:296px;
margin-top:25px;
}
.header2_03 .search-form{
width:296px;
height:50px;
position: relative;
}
.header2_03 .search-form form{
display: block;
margin-top: 0em;
}
.header2_03 .search-text{
right: 51px;
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
}
.header2_03 .search-btn {
right: 0;
z-index: 2;
width: 52px;
height: 50px;
font-size: 24px;
line-height: 24px;
background: #fff;
color: #616161;
}
.header2_03 .search-btn,.header2_03 .search-text{
position: absolute;
top: 0;
border: 1px solid #e0e0e0;
outline: 0;
transition: all .2s;
}
.header2_03 .search-hot-words{
position: absolute;
top:14px;
right:62px;
text-align: right;
}
.header2_03 .search-hot-words a{
display:inline-block;
margin-left:5px;
padding:0 5px;
font-size: 12px;
background: #eee;
color:#757575;
}
.header2 a:hover{
color:red;
}
.header2_03 a:hover{
color:#eeeeee;
background-color: #ff6700;
}
3. 列表
1. 使用a标签包裹span标签，类选择器分别为：sep1，sep2 2. a标签. 设置为块display:block; 并使用相对定义position:relative； 3. span标签. 使用绝对定位position：absolute;
<div class="header3">
<div class="header3_left">
<ul>
<!--用a标签将span标签包起来-->
<li><a class="sep1" href="">手机<span class="sep2" > > </span></a></li>
<li><a class="sep1" href="">电视<span class="sep2" > > </span></a></li>
<li><a class="sep1" href="">笔记<span class="sep2" > > </span></a></li>
<li><a class="sep1" href="">家电<span class="sep2" > > </span></a></li>
<li><a class="sep1" href="">出行<span class="sep2" > > </span></a></li>
<li><a class="sep1" href="">路由<span class="sep2" > > </span></a></li>
</ul>
</div>
<div class="header3_right">
<img class="header3_img" src="../images/01.jpg">
<img src="../images/02.jpg">
<img src="../images/03.jpg">
<img src="../images/04.jpg">
</div>
</div>.header3{ height:500px;
width:1220px;
margin:0 auto;
}
.header3_left{
position: relative;
float: left;
width:20%;
height:500px;
background-color: #b0b0b0;
}
ul{
margin:0;
padding:0;
}
li{
list-style-type: none;
padding:5px;
}
a{ /*1.针对的是所有的a标签的内容*/
text-decoration: none;
font-size: 15px;
}
.header3 a{ /*2.针对的是header3里面的a标签*/
text-align:left;
}
.header3 .sep1{
position: relative;
padding-left:20px;
color:white;
height:42px;
line-height: 42px;
display: block;
}
.header3 .sep2{
position:absolute;
top:12px;
right:20px;
font-size: 16px;
line-height: 16px;
color:#e0e0e0;
}
.header3 li:hover {
background-color:orangered ;
}
.header3_right{
/*display: none;*/
/*position: absolute;*/
float:right;
height:500px;
width:80%;
background-color: #b0b0b0;
}
.header3 img{
width:50px;
height:50px;
}
3.1 列表升级。 光标移动到左侧列表上，右侧自动弹出一个悬浮框。
1.c1_right设置为绝对定位，并使用top，left控制位置
2.左侧列表光标移上去变色，右边显现悬浮框。 .c1_left_1 a:hover{} && .c1_left_1:hover .c1_right{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="20191027/test.css">
<!--<link rel="stylesheet" type="text/css" href="20191027/c1_right.css">-->
</head>
<body>
<div class="c1_left">
<ul>
<li>
<div class="c1_left_1">
<a class="sep1">手机<span class="sep2"> > </span></a>
<div class="c1_right">
<div class="c11"><img src="20191027/images/02.png"><span>小米电视 70英寸</span></div>
<div class="c11"><img src="20191027/images/02.png"><span>小米电视 70英寸</span></div>
<div class="c11"><img src="20191027/images/02.png"><span>小米电视 70英寸</span></div>
<div class="c11"><img src="20191027/images/02.png"><span>小米电视 70英寸</span></div>
<div class="c11"><img src="20191027/images/02.png"><span>小米电视 70英寸</span></div>
</div>
</div>
</li>
<li>
<div class="c1_left_1">
<a class="sep1 sep">电视<span class="sep2"> > </span></a>
<div class="c1_right">
<div class="c11"><img src="20191027/images/01.png"><span>小米电视 70英寸</span></div>
<div class="c11"><img src="20191027/images/01.png"><span>小米电视 70英寸</span></div>
<div class="c11"><img src="20191027/images/01.png"><span>小米电视 70英寸</span></div>
<div class="c11"><img src="20191027/images/01.png"><span>小米电视 70英寸</span></div>
<div class="c11"><img src="20191027/images/01.png"><span>小米电视 70英寸</span></div>
</div>
</div>
</li>
<li><a class="sep1">平板<span class="sep2"> > </span></a></li>
<li><a class="sep1">家电<span class="sep2"> > </span></a></li>
<li><a class="sep1">穿戴<span class="sep2"> > </span></a></li>
<li><a class="sep1">电源<span class="sep2"> > </span></a></li>
<li><a class="sep1">儿童<span class="sep2"> > </span></a></li>
<li><a class="sep1">耳机<span class="sep2"> > </span></a></li>
</ul>
</div>
</body>
</html>
css样式
/*设置默认值*/
ul{
margin:0;
padding:0;
}
li{
text-align: center;
list-style-type: none;
}
.c1_left a{
text-decoration: none;
font-size: 15px; /*此处调整字体大小*/
text-align: left;
}
.c1_left{
display:inline-block;
float: left;
width:20%;
height:500px;
background-color: #b0b0b0;
}
.c1_left .sep1{
position:relative;
padding-left:20px;
color:white;
height:42px;
line-height: 42px;
display: block;
}
.c1_left .sep2{
position:absolute;
top:12px;
right:20px;
font-size: 16px;
line-height: 16px;
color:#e0e0e0;
}
.c1_left_1 a:hover{ /*1.背景设为绿色，字体设为橘黄色*/
color:red;
background-color:green;
}
.c1_left_1:hover .c1_right{ /*2.背景设为粉红色*/
background-color:pink ;
display:block;
}
.c1_right{
position:absolute;
/*display:block;*/
display:none;
width:570px;
top:0;
left:20%; /*使用绝对定位，还可以使用百分号进行控制*/
}
.c1_right .c11{
display:inline-block;
margin:0 20px 0 0;
}
.c1_right img{
height:50px;
width:50px;
}
.c1_right span{
font-size:15px;
}
