SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业网站</title>
    <link rel="stylesheet" href="./css/main.css">
    <!-- 引入myFocus库 -->
    <script src="./js/myfocus-2.0.4.min.js"></script>
    <script src="./js/mf-pattern/mF_YSlider.js"></script>
    <link rel="stylesheet" href="./js/mf-pattern/mF_YSlider.css">
    <!-- 引入myFocus库结束 -->
    <script>
        myFocus.set({ id: 'picBox' })
    </script>

</head>

<body>
    <div class="top">
        <ul class="top-content">
            <li><a href="#">设为首页</a></li>
            <li><a href="#">加入收藏</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <!-- 页面顶端top结束 -->
    <div class="wrap">
        <div class="logo">
            <div class="logo-left"></div>
            <div class="logo-right"><img src="./images/tel.jpg" class="tel" />
                       <div class="logo-right-content">
                24小时服务热线：
                <span class="tel">123-456-7890</span>
                </div>
            </div>
        </div>
        <!-- logo结束 -->
        <div class="nav">
            <div class="nav-left"></div>
            <div class="nav-mid">
                <div class="nav-mid-left">
                    <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>
                <!-- nav-mid-left结束 -->
                <div class="nav-mid-right">
                    <form action="" method="post">
                        <input type="text" class="search-text">
                    </form>
                </div>
                <!-- nav-mid-right结束 -->
            </div>
            <div class="nav-right"></div>

        </div>
        <!-- nav结束 -->
        <div class="ad" id="picBox">
            <!-- 载入中…… -->
            <div class="loading"><img src="./images/loading.gif" alt="请稍后……"></div>
            <!-- 内容 -->
            <div class="pic">
                <!-- 此为固定格式，引入动画 -->
                <ul>
                    <li><a href="#"><img src="./images/ad2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/ad3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/ad4.jpg" alt=""></a></li>

                </ul>
            </div>
        </div>
        <!-- ad结束 -->
        <div class="main">
            <div class="news">
                <div class="title">
                    <h2 class="title-left">新闻中心</h2>
                    <span class="title-right">More&gt;&gt;</span>
                </div>
                <!-- title结束 -->
                <div class="pic-news">
                    <img src="./images/news.jpg" alt="520 慕女神喊你来表白" />
                    <div class="pic-news-p">
                        <h2><a href="#">520 慕女神喊你来表白!</a></h2>
                        <p>
                            活动时间：5月20日—5月25日<br />
                            获奖公布时间：5月26日<br />
                            <a href="#">Learn More>></a>
                        </p>
                    </div>
                </div>
                <!-- pic-news结束 -->
                <div class="news-list">
                    <ul>
                        <li>
                            
                            <a href="#">【慕客访谈 用户篇】“有为屌丝”在路上</a>
                            <span>2014-06-01</span>
                        </li>
                        <li>
                            <a href="#">【有奖活动】给父亲的三行书信</a>
                            <span>2014-06-01</span>

                        </li>
                        <li>
                            <a href="#">《程序猿，请晒出你的童年》活动获奖公告</a>
                            <span>2014-05-30</span>

                        </li>
                        <li>
                            <a href="#">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a>
                            <span>2014-05-28</span>

                        </li>
                    </ul>
                </div>
                <!-- news-list结束 -->
            </div>
            <!-- news结束 -->
            <div class="products">
                <div class="title">
                    <h2 class="title-left">课程中心</h2>
                    <span class="title-right">More&gt;&gt;</span>
                </div>
                <!-- title结束 -->
                <div class="pic-product">
                    <img src="./images/css.jpg" alt="CSS圆角进化论" />
                    <h2>
                        <a href="#">CSS圆角进化论</a>
                    </h2>
                    <p>
                        CSS圆角的实现，经历了三大发展阶段：背景图片方式、CSS2.0+HTML标签模拟、CSS3.0圆角属性）。本案例详细讲解每一种的实现方式，并对实现的优缺点进行对比分析。
                    </p>
                </div>
                <!-- pic-product结束 -->
                <div class="product-list">
                    <ul>
                        <li>PHP开发</li>
                        <li>前端开发</li>
                        <li>JAVA开发</li>
                        <li>Android开发</li>
                    </ul>
                </div>
                <!-- product-list结束 -->

            </div>
            <!-- products结束 -->
            <div class="sidebar">
                <div class="video">
                    <div class="title">
                        <h2 class="title-left">媒体聚焦</h2>
                        <span class="title-right">More&gt;&gt;</span>
                    </div>
                    <!-- title结束 -->
                    <div class="video-content">
                        <embed src="http://player.youku.com/player.php/sid/XNjkzMDE5MTUy/v.swf"
                            type="application/ x-shockwave-flash">
                    </div>
                </div>
                <!-- video结束 -->
                <div class="honor">
                    <img src="./images/app.jpg" />
                </div>
            </div>
            <!-- sidebar结束 -->
        </div>
        <!-- main结束 -->
    </div>
    <!-- wrap结束 -->
    <div class="copyright">
        <ul class="copyright-content">
            <li>关于
            <ul class="copyright-content-details">
                <li>品牌故事</li>
                <li>联系我们</li>
                <li>加入我们</li>
                <li>版权声明</li>
              </ul>
            </li>
            <li>课程
              <ul class="copyright-content-details">
                <li>PHP开发</li>
                <li>前端开发</li>
                <li>JAVA开发</li>
                <li>Android开发</li>
              </ul>
            </li>
            <li>关注
              <ul class="copyright-content-details">
                <li>新浪微博</li>
                <li>腾讯微博</li>
                <li>企业微信</li>
                <li>QQ空间</li>
              </ul>
            </li>
            <li>留言
              <ul class="copyright-content-details">
                <li>意见反馈</li>
                <li>问题留言</li>
                <li>媒体联络</li>
                <li>在线客服</li>
              </ul>
            </li>
            <li><img src="images/weixin.png" alt="微信关注" class="wechat">微信关注
              <ul>
                <li><img src="images/qrcode.jpg" alt="扫描关注慕课网官方微信" class="QR-code"></li>
              </ul>
            </li>
          </ul>
    </div>
    <!-- copyright结束 -->


</body>

</html>

            
@charset "utf-8";

ul,
li,
div,
h2,
p,
body {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style-type: none;
}

body {
  background: #eee;
}

/* top */
.top {
  background: url(../images/top_bg.jpg) repeat-x;
  height: 27px;
}

.top .top-content {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

.top-content li {
  width: 70px;
  font-size: 12px;
  line-height: 27px;
  list-style-image: url(../images/arrow.jpg);
}

.top-content li a {
  text-decoration: none;
  font-family: "微软雅黑";
  color: #888;
}

.top-content li a:hover {
  color: #c00;
}

/* wrap */
.wrap {
  width: 1000px;
  margin: 0 auto;
}

/* .wrap .logo */
.wrap .logo {
  background: #fff;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

.wrap .logo-left {
  height: 80px;
  background: url(../images/logo.jpg) no-repeat;
  width: 300px;
}

.wrap .logo-right {
  width: 300px;
  height: 28px;
  line-height: 28px;
  display: flex;

  /* 此处加不加都一样 */
align-items: flex-start;
  font-size: 12px;
  color: #888;
  margin-top: 30px;
  margin-right: 10px;
}

.wrap .logo-right img.tel {
  display: inline-block;
  margin: 0 10px 0 0;
  /* vertical-align: middle; */
}

.wrap .logo-right-content{
  display: flex;
align-items: flex-start;
}



.wrap .logo-right span.tel {
  color: #c00;
  font-size: 22px;
}

/* .wrap .nav */
.wrap .nav {
  height: 40px;
  display: flex;
}

.wrap .nav-left {
  background: url(../images/nav_left.jpg) no-repeat left;
  width: 10px;
  height: 40px;
}

.nav .nav-mid {
  background: url(../images/nav_bg.jpg);
  height: 40px;
  width: 980px;
  display: flex;
  justify-content: space-between;
}

.nav .nav-mid-left ul {
  display: flex;
  justify-content: left;
  line-height: 40px;
}

.nav .nav-mid-left li {
  width: 100px;
  text-align: center;
}

.nav .nav-mid-left li > a {
  font-size: 16px;
  text-decoration: none;
  color: #fff;
}

.nav .nav-mid-left li > a:hover {
  color: #ff0;
}

.nav .nav-mid-right {
  width: 300px;
}

.nav .nav-mid-right .search-text {
  width: 198px;
  height: 25px;
  margin: 5px 0;
  background: url(../images/search.jpg) #fff no-repeat right center;
  border: 1px solid #fff;
  padding: 0 25px 0 0;
}

.wrap .nav-right {
  background: url(../images/nav_right.jpg) no-repeat right;
  width: 10px;
  height: 40px;
}

/* .wrap .ad */
.wrap .ad {
  margin-top: 5px;
  height: 320px;
  overflow: hidden;
}

/* .wrap .main */
.wrap .main {
  margin-top: 5px;
  background: #fff;
  height: 250px;
  display: flex;
}

.wrap .main .news {
  width: 340px;
  height: 250px;
  border: 1px solid #eee;
}

.wrap .main .pic-news {
  margin: 10px 0 0 5px;
  height: 80px;
  display: flex;
  justify-content: flex-start;
}

.wrap .main .pic-news img {
  width: 113px;
  height: 77px;
  display: block;
}

.wrap .pic-news-p,
.wrap .pic-product p {
  margin-left: 5px;
  font-size: 12px;
  line-height: 22px;
}

.wrap .pic-news-p h2,
.wrap .pic-product h2 {
  font-size: 12px;
  height: 22px;
}

.wrap .pic-news-p a,
.wrap .pic-product a {
  color: #c00;
  text-decoration: none;
}

.wrap .news-list {
  margin:0 25px;/* 此处修改之后，日期用flex模式下就会被挤换行？？？ */
  /* margin: 0 5px; */
  font-size: 12px;
}

.wrap .news-list li {
  display: flex;
    justify-content: space-between;
  background: url(../images/list.jpg) no-repeat left;
  padding-left: 5px;
  border-bottom: 1px dotted #888;
  margin: 8px 0;
}

.wrap .news-list a {
  color: #000;
  text-decoration: none;
  /* display: inline-block;
    max-width: 235px; */
}

.wrap .news-list span {
white-space: nowrap;
  color: #888;
}

.wrap .main .title {
  height: 35px;
  border-bottom: 2px solid #eee;
  line-height: 35px;
  font-size: 12px;
  color: #888;
  display: flex;
  justify-content: space-between;
}

.wrap .main .title-left {
  font-size: 12px;
  color: #888;
  padding-left: 20px;
}

.wrap .main .title-right {
  padding-right: 10px;
}

.wrap .main .products {
  width: 410px;
  height: 250px;
  border: 1px solid #eee;
  margin: 0 8px;
}

.wrap .main .pic-product {
  margin: 10px 0 0 5px;
}

.wrap .main .pic-product img {
  display: block;
  float: left;
  margin-right: 5px;
  width: 158px;
  height: 106px;
}

/* .product-list {
  margin: 20px auto;
  不能使块居中？？？
} */

.product-list ul {
  font-size: 12px;
  display: flex;
  justify-content: left;
  margin: 20px auto;
  /* 放这里就可以？？？ */
  width: 372px;
  height: 37px;
  line-height: 37px;
  background: url(../images/product_type_bg.jpg) no-repeat;
}

.product-list ul li {
  margin: 0 15px;
}

/* sidebar */
.wrap .sidebar {
  width: 230px;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrap .sidebar .title {
  width: 228px;
  border: 1px solid #eee;
  border-bottom: 2px solid #eee;
}

.wrap .sidebar .video-content {
  border: 1px solid #eee;
  display: flex;
  justify-content: center;
}

.wrap .sidebar .video-content embed {
  width: 220px;
  height: 140px;
}

.wrap .sidebar .honor {
  border: 1px solid #eee;
}

.wrap .sidebar .honor img {
  display: block;
  margin: auto auto;
}

/* copyright */
.copyright {
  background: #ddd;
  height: 200px;
  padding-top: 20px;
  margin-top: 10px;
  color: #888;
  text-align: center;
  line-height: 30px;
}

.copyright .copyright-content {
  display: flex;
  justify-content: center;
}

.copyright .copyright-content > li {
  width: 200px;
  height: 150px;
  font-size: 18px;
  background: url(../images/line.png) no-repeat right center;
}

.copyright .copyright-content-details {
  font-size: 14px;
}