<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>考拉</title>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<style>
*{margin: 0px;padding: 0px;}
body{background:#0c5bb6; font-size: 14px;}
ul li{list-style: none;}
.clear{clear:both;}
a{text-decoration: nine;color: #ccc;}
/* 上导航 */
.header_t{width: 100%;
height: 40px;
background: #000;
}
.header_t .topnav {
width: 1200px;
height: 40px;
background-color: #000;
line-height: 40px;
margin: 0 auto;
}
.header_t .topnav .topnav_l a{
float: left;
min-width: 85px;
min-height: 40px;
line-height: 40px;
font-size: 1.1rem;
padding: 0 10px;
}
.header_t .topnav .topnav_l a:hover {
border-bottom: 1px solid red;
height: 40px;
}
.topnav_r a {
float: right;
min-width: 80px;
min-height: 40px;
line-height: 40px;
font-size: 1.1rem;
padding: 0 10px;
}
/* 中导航 */
.header_m{width: 100%;
height: 140px;
background: #fff;
margin-top: 2px;
}
.mnav {
width: 1200px;
height: 140px;
background: #fff;
margin: 0 auto;
}
.mnav_l {
float: left;
margin-left: 10px;
}
.mnav form {
width:515px;
margin-left: 30px;
position: relative;
}
.mnav form input {
width:500px;
height:48px;
margin-top: 40px;
padding-left: 15px;
border-radius: 24px;
}
.mnav_l .layui-icon-search {
position: absolute;
right: 10px;
top: 55px;
font-size: 30px;
font-weight: bold;
color: red;
}
.mnav_r {
float: right;
}
.mnav_rt {
/* display: inline-block; */
/* width: 100px; */
/* height: 40px; */
/* text-align: center; */
border-radius: 10px;
border:2px solid red;
font-size: 20px;
color: #000;
line-height: 140px;
margin-right: 15px;
}
.header_m .mnav .mnav_r a:hover{color:red;}
/* 下导航 */
.header_b{width: 100%;
height: 40px;
background:#fff;
}
.bnav{
width: 1200px;
height: 40px;
background: #fff;
line-height: 40px;
margin: 0 auto;
}
.header_bl{
float: left;
width: 216px;
height: 40px;
background-color: lightgreen;
text-align: center;
line-height: 40px;
font-size: 1.4rem;
border-top-left-radius: 10px;
/* font-weight: bold; */
}
.header_br {
width: 984px;
height: 40px;
/* background-color: lightgreen; */
text-align: center;
line-height: 40px;
font-size: 1.2rem;
}
.header_br ul li a{
color: #000;
font-weight: bold;
margin-left: 5px;
}
.header_br li {
float: left;
}
.header_br ul li:hover{border-bottom: 3px solid red;height: 37px;}
.header_br ul li a:hover{color: red;}
.header_b .bnav .header_br a{display: inline-block;width:80px;height:40px;text-align: center;}
/* 主体 */
.content{ width: 1200px;
margin: 0px auto;}
.buttom{width: 100%;
height: 80px;
background: #363636;
margin-top: 20px; }
.content_pic{width: 100%;
height: 510px;
margin: 2px 0px 10px;}
.content_pic_l{
width: 216px;
height: 510px;
background: lightgreen;
border-bottom-left-radius: 10px;
float: left;
position: relative;}
.content_pic_l a {
color: #000;
font-weight: bold;
}
.content_pic_l ul{margin: 10px 0px 20px;}
.content_pic_l ul li{height: 60px;
line-height: 60px;
font-size: 16px;
padding-left: 30px;}
.content_pic_l ul li span{color: #ccc;
float: right;
margin-right: 10px;}
.content_pic_l ul li:hover{background:rgba(109,122,138,05);}
.menu{width:700px;
height:450px;
background:#fff;
position: absolute;
left: 216px;top: 0px;
border-bottom-right-radius: 10px;
display: none;
font-size: 12px; }
.content_pic_l ul li:hover .menu{display: block;}
.menu_content{width: 600px;
height: 350px;
border-top:1px solid #ccc;
margin:50px auto;
position: relative;}
.menu_content span{position: absolute;
top: -30px;
background: #fff;
padding-right: 15px;}
.content_pic_r{
width: 984px;
height: 510px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
background: white; }
.pic_r_menu{
height: 40px;
margin: 10px 0px;
background: #ccc;
border-top-right-radius: 10px; }
.pic_r_img{
height: 330px;
background: blue;}
.pic_r_ad{
height: 90px;
background: pink;
margin: 20px 0px 10px;
border-bottom-right-radius: 10px;}
.content_Img{width: 1200px;
height: 80px;
background: url(../images/5c4580edb940a985.gif);
margin: 0px auto;
border-radius: 10px;}
.content_title{
height: 418px;
border-radius: 10px;
margin-bottom: 20px;
margin-top: 20px;}
.content_title div{ float: left;background: #fff;border-radius: 10px;}
.content_title_l{
width: 300px;
height: 418px;}
.content_title_m{
width: 600px;
height: 418px;
margin: 0px 20px;}
.content_title_r{
width: 260px;
height: 418px;}
.content_text{
height: 500px;
border-radius: 10px;
margin-bottom: 20px;}
.content_text div{ float: left;background: #fff;border-radius: 10px;}
.content_text_l{
width: 320px;
height: 500px;}
.content_text_m{
width: 520px;
height: 500px;
margin: 0px 20px;}
.content_text_r{
width: 320px;
height: 500px;}
</style>
</head>
<body>
<!-- 上导航 -->
<div class="header_t">
<div class="topnav">
<ul class="topnav_l">
<li style="width: 150px;"> <a href="">考拉欢迎您!</a></li>
<li style="background:rgba(109,122,138,05);"> <a href="">登录</a></li>
<li> <a href="">免费注册</a></li>
<li> <a href="">手机考拉</a></li>
</ul>
<div class="topnav_r">
<a href="">每日签到</a>
<a href="">个人中心</a>
<a href="">客服中心</a>
<a href="">收藏本站</a>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 中导航 -->
<div class="header_m">
<div class="mnav">
</div>
</div>
<!-- 下导航 -->
<div class="header_b">
<div class="bnav">
<div class="header_bl">
<span>所有分类</span>
</div>
<div class="header_br">
<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>
<li> <a href="">运动户外</a></li>
<li> <a href="">家居生活</a></li>
<li> <a href="">环球轻奢</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 主体内容 -->
<div class="content">
<div class="content_pic">
<div class="content_pic_l">
<ul>
<li>
<a href="">美容彩妆</a>
<span class="layui-icon"></span>
<div class="menu">
<div class="menu_content">
<span style="color:#000;">php教程</span>
<p>
<a href="">php图文教程</a>
<a href=""> php视频教程</a>
<a href=""> php手册教程</a>
<a href=""> php手册教程</a>
<a href="">其他机构教程</a>
<a href="">php原生手册</a>
<a href="">phpstudy工具使用视频教程</a>
</p>
</div>
</div>
</li>
<li><a href="">母婴儿童</a><span class="layui-icon"></span></li>
<li><a href="">营养保健</a><span class="layui-icon"></span></li>
<li><a href="">家电数码</a><span class="layui-icon"></span></li>
<li><a href="">个人洗护</a><span class="layui-icon"></span></li>
<li><a href="">运动户外</a><span class="layui-icon"></span></li>
<li><a href="">家居生活</a><span class="layui-icon"></span></li>
<li><a href="">环球轻奢</a><span class="layui-icon"></span></li>
</ul>
</div>
</body>
</html>
