实例1.HTML代码部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">--> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>仿站PHP中文网</title> <link href="css/main.css" rel="stylesheet" type="text/css"> <link href="css/layui.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="layui.js"></script> </head> <body> <header id="header" class="flex"> <div class="top box1200 flex"><!--顶部--> <h1 class="logo">PHP中文网</h1> <!--logo--> <nav class="flex"> <a href="#" class="over">首页</a> <a href="#">视频教程</a> <a href="#">社区问答</a> <a href="#">编程词典</a> <a href="#">手册下载</a> <a href="#">工具下载</a> <a href="#">类库下载</a> <a href="#">特色课程<span class="layui-badge-dot layui-bg-red" style="margin-left: 5px "></span></a> <a href="#">菜鸟学堂</a> </nav> <!--导航--> </div> <div class="user flex"> <a href="#"><i class="layui-icon layui-icon-speaker"></i></a> <!-- 广播喇叭 --> <img src="https://img.php.cn/upload/avatar/000/000/001/fe41f9c4a6d32c05a5e77b3ef671b9f7.jpg" alt=""> </div> <div class="userbox"> <i class="arr"></i> <div class="flex"> <div class="userimg"> <img src="https://img.php.cn/upload/avatar/000/000/001/fe41f9c4a6d32c05a5e77b3ef671b9f7.jpg" alt=""> <div> <p>马涛</p> <p>P豆23 积分0</p> </div> </div> <div class="btnbox"> <ul class="row"> <li><i class="layui-icon layui-icon-home"></i> <a href="">个人中心</a> </li> <li><i class="layui-icon layui-icon-camera-fill"></i> <a href="">我的课程</a> </li> <li><i class="layui-icon layui-icon-form"></i> <a href="">我的博客</a> </li> <li><i class="layui-icon layui-icon-set-fill"></i> <a href="">个人设置</a> </li> </ul> <div class="row"> <a href="">安全退出</a> <a href="">账号绑定</a> </div> </div> </div> </div> </header> <!--header区--> <main id="main" class="flex"> <div class="box1200"> <div class="server flex mt30 bg-white radius shadow "> <div class="left"> <ul> <li> <a href="#"><i class="layui-icon layui-icon-right"></i>php开发</a> <div class="hide"> <div class="flex"> <div class="top"> <div class="line"> <h3>php教程</h3> </div> <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> </div> <div class="bottom flex"> <div class="phpke"> <img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""> <span> <p>2018前端入门_ HTML5</p> <p>实战 初级 共29章节</p> <p><span>53906</span>人参与</p> </span> </div> <div class="phpke"> <img src="https://img.php.cn/upload/course/000/000/014/5c302a64574ec330.jpg" alt=""> <span> <p>PHP语法基础与数据库详解教程</p> <p>实战 中级 共44章节</p> <p><span>2887</span>人参与</p> </span> </div> <div class="phpke"> <img src="https://img.php.cn/upload/course/000/000/003/5a40a5ac656b3153.jpg" alt=""> <span> <p>PHP每日小知识（第二季）</p> <p>实战 初级 共33章节</p> <p><span>5584</span>人参与</p> </span> </div> <div class="phpke"> <img src="https://img.php.cn/upload/course/000/000/003/5a5091db685e6482.jpg" alt=""> <span> <p>汽车租赁平台网站项目完整版开发实战案例</p> <p>实战 高级 共85章节</p> <p><span>7071</span>人参与</p> </span> </div> </div> </div> </div> </li> <li> <a href="#"><i class="layui-icon layui-icon-right"></i>前端开发</a> <i></i> <div class="hide"> <div class="flex">PHP开发的子菜单</div> </div> </li> <li> <a href="#"><i class="layui-icon layui-icon-right"></i>服务端开发</a> <i></i> <div class="hide"> <div class="flex">服务端开发的子菜单</div> </div> </li> <li> <a href="#"><i class="layui-icon layui-icon-right"></i>移动开发</a> <i></i> <div class="hide"> <div class="flex">移动开发的子菜单</div> </div> </li> <li> <a href="#"><i class="layui-icon layui-icon-right"></i>数据库</a> <i></i> <div class="hide"> <div class="flex">数据库的子菜单</div> </div> </li> <li> <a href="#"><i class="layui-icon layui-icon-right"></i>服务器运维&下载</a> <i></i> <div class="hide"> <div class="flex"> 服务器运维&下载的子菜单</div> </div> </li> <li> <a href="#"><i class="layui-icon layui-icon-right"></i>在线工具箱</a> <i></i> <div class="hide"> <div class="flex">在线工具箱的子菜单</div> </div> </li> <li> <a href="#"><i class="layui-icon layui-icon-right"></i>常用类库</a> <i></i> <div class="hide"> <div class="flex">常用类库的子菜单</div> </div> </li> </ul> </div> <div class="right"> <div class="top"> <a href="">PHP头条<span>新</span></a> <a href="">孤独九贱</a> <a href="">学习路线<span>新</span></a> <a href="">在线工具</a> <a href="">趣味课堂<span>新</span></a> <a href="">社区问答</a> <a href="">课程直播</a> <form action="" class="flex"> <input type="text"> <button></button> </form> </div> <div class="center"> <img src="https://img.php.cn/upload/article/000/000/003/5b49b0e610f26951.jpg" alt=""> </div> <div class="bottom"> <a href=""> <img src="http://www.php.cn/static/images/index_dugu2.jpg" alt=""> </a> <a href=""> <img src="https://img.php.cn/upload/article/000/000/003/5baf2172be8c0490.png" alt=""> </a> <a href=""> <img src="http://www.php.cn/static/images/index_php_item3.jpg" alt=""> </a> <a href=""> <img src="http://www.php.cn/static/images/index_php_new4.jpg" alt=""> </a> </div> </div> </div> <!--服务--> <div class="banner mb30 mt30"> <img src="https://img.php.cn/upload/article/000/000/003/5c4580edb940a985.gif" alt="广告" class="radius"> </div> <!--广告--> <div class="container flex"> <div class="toutiao bg-white radius"> <h2 class="t1">头条</h2> <ul class="nl1"> <li> <a href="#">php中文网vip特权会员学习指南</a> <a href="#">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a> <a href="#">php中文网《玉女心经》公益***系列课程汇总</a> <a href="#">零基础的小明要如何成为前端工程师？</a> <a href="#">NPM 相关精选文章及视频教程资源推荐（7篇）</a> <a href="#">拼多多技术事故复盘，程序员应该学到什么？</a> <a href="#">2018 – 2019 年前端 JavaScript 面试题（收藏）</a> <a href="#">程序员导致拼多多出现重大Bug，被薅上千万</a> <a href="#">爷爷：啥是佩奇？佩奇：Python 10 秒可以画出来</a> <a href="#">Python抢票程序优化，可以选择车次和座次</a> <a href="#">2018年小米高级 PHP 工程师面试题（模拟考试卷）</a> <a href="#">2019年最全最值得收藏的 PHPCMS 资源汇总！</a> </li> </ul> </div> <!--头条--> <div class="xinkecheng bg-white radius"> <h2 class="t1">最新课程</h2> <ul class="kebox flex"> <a href="#"> <li> <img src="https://img.php.cn/upload/course/000/000/001/5c3bec6e2640e714.jpeg" alt="最新课程"> <p><span>初级</span>第四期线上***试听课</p> </li> </a> <a href="#"> <li> <img src="https://img.php.cn/upload/course/000/000/014/5c3450fbe6d1b229.jpg" alt="最新课程"> <p><span>高级</span>MySQ高级进阶视频教程</p> </li> </a> <a href="#"> <li> <img src="https://img.php.cn/upload/course/000/000/014/5c34121d016f5208.jpg" alt="最新课程"> <p><span>初级</span>PHP数据库编程零基础入门到精通</p> </li> </a> <a href="#"> <li> <img src="https://img.php.cn/upload/course/000/000/015/5c3073edb18cc822.jpg" alt="最新课程"> <p><span>初级</span>HTML 代码实例</p> </li> </a> <a href="#"> <li> <img src="https://img.php.cn/upload/course/000/000/015/5c306535dc5ee207.jpg" alt="最新课程"> <p><span>初级</span>CSS 代码实例</p> </li> </a> <a href="#"> <li> <img src="https://img.php.cn/upload/course/000/000/014/5c304ba1aa085936.jpg" alt="最新课程"> <p><span>初级</span>HTML+CSS网页基础</p> </li> </a> </ul> </div> <!--最新课程--> <div class="changyoushouce bg-white radius"> <h2 class="t1"><span> <a href="#">更多</a> </span>常用手册</h2> <ul> <li> <img src="http://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt=""> <span> <a ref="#">php手册</a> <a href="#">ThinkPHP5.0</a> <a href="#">Linux教程</a> <a href="#">Memcached</a> </span> </li> <li> <img src="http://www.php.cn/upload/system/000/000/001/57d55f537896d439.jpg" alt=""> <span> <a href="#">JavaScript中文参考手册</a> <a href="#">jQuery中文参考手册</a> </span> </li> <li> <img src="http://www.php.cn/upload/system/000/000/001/57d560a2c0e5f831.jpg" alt=""> <span> <a href="#">MySQL最新手册教程</a> <a href="#">Redis命令参考手册</a> </span> </li> <li> <img src="http://www.php.cn/upload/system/000/000/001/57d56222bfab2642.jpg" alt=""> <span> <a href="#">Node.js中文学习手册</a> <a href="#">AngularJS中文参考手册</a> </span> </li> <li> <img src="http://www.php.cn/upload/system/000/000/001/57d55f07ccfb6991.jpg" alt=""> <span> <a ref="#">html手册 </a> <a href="#">CSS手册</a> <a href="#">html5手册 </a> <a href="#">CSS3手册</a> </span> </li> <li> <img src="http://www.php.cn/upload/system/000/000/000/5a911102396d0195.jpg" alt=""> <span> <a href="#">Bootstrap中文文档</a> <a href="#">快速入门Git教程</a> </span> </li> </ul> </div> <!--常用手册--> <div class="left flex"> <div class="tabbaner bg-white radius">tab广告</div> <!--tab广告--> <div class="gongju bg-white radius"> <h2 class="t2"><span> <a href="#">更多</a> </span>php开发辅助工具下载</h2> <ul class="nl3"> <li> <a href="#"><span>01-16</span>文件对比工具BCompare</a> <a href="#"><span>01-16</span>PhpCMS V9代码生成器</a> <a href="#"><span>01-16</span>EditPlus 中文破解版</a> <a href="#"><span>01-16</span>MAMP Pro 最新版5.0.1</a> <a href="#"><span>01-16</span>Parallels Desktop 13 for Mac 13.1.0.43108</a> <a href="#"><span>01-16</span>php中文网拾色器</a> <a href="#"><span>01-16</span>仿站小工具2.1</a> <a href="#"><span>01-16</span>VC14 32位</a> <a href="#"><span>01-16</span>VC13 32+64位</a> </li> </ul> </div> <!--php工具下载--> </div> <!--左区--> <div class="tab-news bg-white radius">tab新闻区</div> <!--tab新闻区--> <div class="wenda bg-white radius"> <h2 class="t3">社区问答</h2> <ul class="nl3"> <li> <a href="#">求模板源码</a> <a href="#">login.html页面 js和css 无法运行 地址错误</a> <a href="#">php7在centos7安装./configure通过，make test报错</a> <a href="#">请问你们学习PHP到开发系统用来多长时间</a> <a href="#">TP框架写后台，前端用bootstrap还是layui？</a> <a href="#">致跟我一样的拖延症患者：动力是需要刻意创造的</a> <a href="#">PHP GET报错</a> <a href="#">三位数组想要输出某个数组名怎么办？</a> <a href="#">phpstudy快捷方式右下角的小盾牌能不能去掉？windows10系统</a> <a href="#">提交管理员密码后报错500 internal server error</a> <a href="#">phpstudy2018下mysql.ini找不到secure_file_priv= 这个，导出不了</a> <a href="#">乱码怎么解决</a> <a href="#">为什么不能加载include里面的内容</a> <a href="#">我想让我的网站联网 我的域名和IP都能通过PING为什么就是访问不了</a> <a href="#">用php程序员工具箱创建一个虚拟主机</a> <a href="#">老师你好</a> <a href="#">后面语句不显示</a> </li> </ul> </div> <!--社区问答--> </div> <!--文章区--> <div class="banner mb30 mt30"> <img src="http://www.php.cn/static/images/index_ad222.jpg" alt="广告" class="radius"> </div> <!--广告--> <div class="bianchengcidian bg-white radius mb30">编程词典</div> <!--编程词典--> <div class="rumenjingpingke bg-white radius">php入门精品课</div> <!--php入门精品课 --> <div class="banner mb30 mt30"> <img src="https://img.php.cn/upload/article/000/000/003/5b35fe49bfd77495.png" alt="广告" class="radius"> </div> <!--广告--> <div class="jinjielujing bg-white radius">PHP进阶学习路径</div> <!--PHP进阶--> <div class="ciyunxizai bg-white radius mb30 mt30">资源下载</div> <!--资源下载--> <div class="ebook bg-white radius">手册大全</div> <!--手册大全--> <div class="flink bg-white radius mb30 mt30">友情链接</div> <!--友情链接--> </div> <!--宽度约束--> </main> <footer id="footer"></footer> <!----> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2.CSS
* {
box-sizing: border-box;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
body {
padding: 0;
margin: 0;
background: #f5f5f5;
color: #333;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
p {
}
ul, li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
color: #999;
}
.flex {
display: flex;
}
.box1200 {
width: 1200px;
}
.bg-white {
background: #fff;
}
.radius {
border-radius: 10px;
}
.mt30 {
margin-top: 30px;
}
.mb30 {
margin-bottom: 30px;
}
.shadow {
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
}
.t1, .t2, .t3 {
padding-bottom: 5px;
margin-bottom: 10px;
text-indent: 1em;
line-height: 30px;
}
.t1 span, .t2 span, .t3 span {
font-weight: normal;
float: right;
margin-right: 1em;
}
.t1 {
border-bottom: 1px dotted #e9e9e9;
}
.t2 {
border-bottom: 2px solid red;
margin: 0 -10px 10px -10px;
}
.t3 {
margin: 0 -10px 10px -10px;
border-bottom: 1px solid #e9e9e9;
}
.nl1 {
}
.nl1 li {
}
.nl1 a {
display: inline-block;
margin-bottom: 10px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
}
.nl2 {
}
.nl2 li {
list-style-type: disc;
}
.nl2 a {
display: inline-block;
margin-bottom: 10px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
}
.nl3 {
}
.nl3 li {
}
.nl3 a {
display: inline-block;
margin-bottom: 10px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
}
.nl3 a span {
float: right;
color: #999;
}
#header {
height: 60px;
background: #000;
justify-content: center;
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
position: relative;
}
#header .top {
justify-content: space-between;
}
.logo {
width: 160px;
height: 76px;
color: #fff;
background-image: url(http://www.php.cn/static/images/logo.png);
background-position: 0 -8px;
text-indent: -1000px;
}
#header .top nav {
}
#header .top nav>a {
margin-right: 1em;
padding: 0 1em;
color: rgba(255,255,255,0.7);
text-decoration: none;
display: flex;
align-items: center;
}
#header .top .over {
background: #363c41;
padding: 0 1em;
}
#header .user {
height: 60px;
position: absolute;
right: 20px;
align-items: center;
}
#header .user>a {
height: 60px;
line-height: 60px;
margin-right: 20px;
padding: 0 20px;
color: #ccc;
}
#header .user>a:hover {
background-color: #363c41;
}
#header .user>a i {
font-size: 20px;
}
#header .user img {
width: 28px;
border-radius: 50%;
}
#header .userbox {
/* visibility: hidden;*/
position: absolute;
right: 10px;
top: 70px;
background-color: #fff;
width: 300px;
height: 250px;
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
}
#header .userbox .arr{
position: absolute;
right: 15px;
top: -8px;
border-width: 0 7px 8px 7px;
border-color: transparent transparent #f01400 transparent;
border-style: solid;
}
#header .userbox .flex {
display: flex;
flex-flow: column;
}
#header .userbox .userimg {
background-image: url(http://www.php.cn/static/images/user_card_top.png);
flex: 0 0 100px;
display: flex;
align-items: center;
padding-left: 20px;
}
#header .userbox .userimg img {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #fff;
margin-right: 20px;
}
#header .userbox .userimg div {
}
#header .userbox .userimg p {
color: #fff;
line-height: 30px;
}
#header .userbox .userimg p:nth-child(2) {
color: #eee;
}
#header .userbox .btnbox {
flex: 1;
display: flex;
flex-flow: column ;
}
#header .userbox .btnbox .row:nth-child(1) {
padding: 15px 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
#header .userbox .btnbox .row:nth-child(1) li {
width: 110px;
background-color: #f8f8f8;
margin-right: 2px;
margin-top: 2px;
padding: 8px 0 ;
text-align: center;
}
#header .userbox .btnbox .row:nth-child(2) {
display: flex;
height: 40px;
flex:1;
justify-content: space-between;
padding: 0 10px 5px 10px;
align-items: flex-end;
}
#header .userbox .btnbox .row a {
font-size: 12px
}
#header .userbox .btnbox .row:nth-child(2) a {
}
#main {
justify-content: center;
}
#main .server {
height: 510px;
}
#main .server .left {
z-index: 100;
padding: 10px 0;
flex: 0 0 220px;
background: #2b333b;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
position: relative;
}
#main .server .left ul {
}
#main .server .left ul>li {
height: 60px;
display: flex;
}
#main .server .left ul>li:hover {
background-color: #777;
}
#main .server .left ul>li> a {
flex: 1;
}
#main .server .left ul>li> a i {
float: right;
margin-right: 10px;
}
#main .server .left .hide {
position: absolute;
top: 0px;
display: none;
left: 220px;
background-color: #fff;
border-bottom-right-radius: 10px;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
}
#main .server .left .hide .line {
position: relative;
height: 1px;
margin-bottom: 30px;
background-color: #f5f5f5;
margin-top: 10px;
}
#main .server .left .hide h3 {
font-size: 12px;
position: absolute;
padding: 0 10px 0 0;
top: -8px;
background-color: #fff;
}
#main .server .left .hide .flex {
width: 768px;
height: 444px;
display: flex;
flex-direction: column;
}
#main .server .left .hide .flex .top {
padding: 30px 45px;
min-height: 200px;
}
#main .server .left .hide .flex .top a {
font-size: 13px;
padding-right: 2em;
display: inline-block;
padding-bottom: 1em;
}
#main .server .left .hide .flex .bottom {
font-size: 13px;
background: #f8f8f8;
border-bottom-right-radius: 10px;
padding: 30px 45px;
flex: 1;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#main .server .left .hide .flex .bottom .phpke {
display: flex;
}
#main .server .left .hide .flex .bottom .phpke:nth-child(2) {
position: relative;
left: -65px
}
#main .server .left .hide .flex .bottom .phpke:nth-child(2) {
alignment-baseline: baseline
}
#main .server .left .hide .flex .bottom .phpke img {
height: 50px;
border-radius: 5px;
margin-right: 20px;
}
#main .server .left .hide .flex .bottom .phpke span {
}
#main .server .left .hide .flex .bottom .phpke p {
margin: 0 0 5px 0;
}
#main .server .left .hide .flex .bottom .phpke p:nth-child(1) {
font-weight: bold;
}
#main .server .left .hide .flex .bottom .phpke p:nth-child(2) {
color: #999;
}
#main .server .left .hide .flex .bottom .phpke p:nth-last-child(1) span {
color: orange;
}
#main .server .left ul>li:hover .hide {
display: block;
}
#main .server .left ul>li>a {
padding-left: 20px;
line-height: 60px;
color: rgba(255,255,255,0.6);
font-size: 16px;
}
#main .server .right {
z-index: 2;
flex: 1;
display: flex;
flex-flow: column;
justify-content: space-between;
}
#main .server .right .top {
flex: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
#main .server .right .top>a {
display: flex;
align-items: center;
}
#main .server .right .top span {
font-size: 12px;
color: #fff;
margin-left: 5px;
padding: 0 5px;
border-radius: 5px;
}
#main .server .right .top a:nth-child(1) span {
background-color: orangered;
}
#main .server .right .top a:nth-child(3) span {
background-color: darkblue;
}
#main .server .right .top a:nth-child(5) span {
background-color: orange;
}
#main .server .right .center {
position: relative;
left: -20px;
}
#main .server .right .bottom {
padding: 15px 10px;
margin-right: 15px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#main .server .right .bottom img {
width: 95%;
border-radius: 10px;
}
#main .container {
flex-wrap: wrap;
justify-content: space-between;
}
#main .container div {
margin-bottom: 10px;
padding: 5px 10px;
}
#main .container h2 {
/* [disabled]font-weight: normal;
*/
font-size: 14px;
}
#main .container .toutiao {
width: 300px;
}
#main .container .xinkecheng {
width: 620px;
}
#main .container .kebox {
flex-flow: row wrap;
justify-content: space-around;
margin-top: -20px;
}
#main .container .kebox a {
margin-top: 50px;
}
#main .container .kebox li {
width: 170px;
height: 140px;
position: relative;
display: flex;
}
#main .container .kebox img {
width: 170px;
height: 100px;
border-radius: 10px;
border: 1px solid #fff;
}
#main .container .kebox p {
width: 100%;
height: 70px;
background-color: #fff;
margin: 0;
padding: 5px 10px;
bottom: 0px;
position: absolute;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
}
#main .container .kebox span {
background: #999;
color: #fff;
font-size: 12px;
padding: 1px 4px;
margin-right: 5px;
}
#main .container .changyoushouce {
width: 260px;
}
#main .container .changyoushouce ul {
flex: 1;
display: flex;
flex-flow: column;
justify-content: space-between;
}
#main .container .changyoushouce li {
margin-bottom: 20px;
display: flex;
}
#main .container .changyoushouce li img {
height: 43px;
margin-right: 15px;
}
#main .container .changyoushouce li span {
display: flex;
flex-flow: wrap;
align-content: space-between;
}
#main .container .changyoushouce li a {
margin-right: 10px;
}
#main .container .left {
width: 360px;
padding: 0;
flex-direction: column;
}
#main .container .left .tabbaner {
flex: 0 0 183px;
}
#main .container .left .gongju {
flex: 1;
margin: 0;
}
#main .container .tab-news {
width: 508px;
}
#mian .bianchengcidian {
}
#main .container .wenda {
width: 308px;
}
#mian .rumenjingpingke {
}
#mian .jinjielujing {
}
#mian .ciyunxizai {
}
#mian .ebook {
}
#mian .flink {
}
#footer {
height: 200px;
background: #393D49!important;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
