第4期学习班-1.25作业-【仿PHP中文网主页】

实例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;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例1.HTML代码部分

实例2.CSS

相关文章