fix:day5

html/day5/demo.css

@@ -0,0 +1,296 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+    list-style: none;
+    text-decoration: none;
+    box-sizing: border-box;
+}
+#box {
+    width: 947px;
+    height: 850px;
+    border: 1px solid #000;
+    margin: 25px auto;
+}
+#container {
+    width: 910px;
+    height: 100%;
+    margin:0 auto;
+}
+/* 头部样式代码 */
+#header {
+    width: 100%;
+    height: 66px;
+    overflow: hidden;
+    border-bottom: 2px solid rgb(189, 59, 59);
+}
+#header .logo {
+    width: 349px;
+    height: 100%;
+    float: left;
+}
+#header .logo img {
+    width: 118px;
+    height: 49px;
+    margin-top: 10px;
+}
+#header .pictureMsg {
+    width: 561px;
+    height: 100%;
+    float: left;
+}
+#header .pictureMsg .img1 {
+    width: 425px;
+    height: 37px;
+    margin-top: 22px;
+}
+#header .pictureMsg .img2 {
+    width: 122px;
+    height: 36px;
+    margin-left: 8px;
+}
+/* 主体代码 */
+#main {
+    width: 100%;
+}
+/* 第一部分 */
+#main .nav {
+    width: 100%;
+    height: 70px;
+    padding-top: 9px;
+    overflow: hidden;
+}
+#main .nav .list {
+    width: 148px;
+    height: 50px;
+    float: left;
+    margin-left: 4px;
+    border-right: 1px solid #eee;
+}
+#main .nav .list:first-child {
+    margin-left: 0;
+}
+#main .nav .list ul:first-child {
+    overflow: hidden;
+}
+#main .nav .list ul:first-child li {
+    float: left;
+    margin-left: 5px;
+}
+#main .nav .list ul:first-child li a {
+    color: #000;
+    font-size: 13px;
+}
+#main .nav .list ul:first-child li:first-child {
+    font-weight: bold;
+    margin-left: 0;
+} 
+#main .nav .list ul:last-child {
+    overflow: hidden;
+}
+#main .nav .list ul:last-child li {
+    float: left;
+    margin-left: 5px;
+}
+#main .nav .list ul:last-child li a {
+    color: #000;
+    font-size: 13px;
+}
+#main .nav .list ul:last-child li:first-child {
+    font-weight: bold;
+    margin-left: 0;
+} 
+#main .nav .list ul li:hover a {
+    color: aqua;
+}
+/* 第二部分 */
+#main .banner {
+    width: 100%;
+    height: 93px;
+}
+#main .banner img {
+    width: 100%;
+    height: 100%;
+}
+/* 第三部分 */
+#main .msg {
+    width: 100%;
+    height: 486px;
+    margin-top: 20px;
+    overflow: hidden;
+}
+#main .msg .msg_left {
+    width: 600px;
+    height: 100%;
+    float: left;
+    overflow: hidden;
+    border-top: 1px solid #eee;
+}
+#main .msg .msg_left .news {
+    width: 202px;
+    height: 100%;
+    float: left;
+}
+#main .msg .msg_left .news .newsTop {
+    width: 100%;
+    height: 37px;
+    overflow: hidden;
+}
+#main .msg .msg_left .news .newsTop .tip {
+    overflow: hidden;
+    float: left;
+    margin-top: 5px;
+}
+#main .msg .msg_left .news .newsTop .tip img{
+    width: 22px;
+    height: 22px;
+    float: left;
+    margin-top: 3px;
+}
+#main .msg .msg_left .news .newsTop .tip p{
+    float: left;
+    font-size: 21px;
+}
+#main .msg .msg_left .news .newsTop .tip p:hover {
+    font-size: 24px;
+    font-weight: bold;
+}
+#main .msg .msg_left .news .newsTop .music {
+    float: right;
+    margin-top: 5px;
+}
+#main .msg .msg_left .news .newsTop .music p{
+    font-size: 21px;
+}
+#main .msg .msg_left .news .newsTop .music p:hover {
+    font-size: 24px;
+    font-weight: bold;
+}
+#main .msg .msg_left .news .newsBottom dl:first-child {
+    margin-top: 20px;
+}
+#main .msg .msg_left .news .newsBottom dl:last-child {
+    margin-top: 40px;
+}
+#main .msg .msg_left .news .newsBottom dl {
+    width: 190px;
+    height: 163px;
+    margin: 0 auto;
+}
+#main .msg .msg_left .news .newsBottom dl dt {
+    width: 190px;
+    height: 120px;
+}
+#main .msg .msg_left .news .newsBottom dl dt img {
+    width: 100%;
+    height: 100%;
+}
+#main .msg .msg_left .news .newsBottom dl dd {
+    font-size: 14px;
+    margin-top: 5px;
+} 
+#main .msg .msg_left .news .newsBottom dl dd span {
+    font-size: 14px;
+    margin-left: 4px;
+}
+#main .msg .msg_left .list {
+    width: 380px;
+    height: 100%;
+    float: right;
+}
+#main .msg .msg_left .list .listTop {
+    width: 100%;
+    height: 30px;
+    padding-top: 10px;
+}
+#main .msg .msg_left .list .listTop p {
+    color: #ccc;
+    margin-left: 241px;
+}
+#main .msg .msg_left .list .listBottom ul:first-child {
+    margin-top: 27px;
+    margin-left: 47px;
+}
+#main .msg .msg_left .list .listBottom ul:last-child {
+    margin-top: 40px;
+    margin-left: 47px;
+}
+#main .msg .msg_left .list .listBottom ul li:first-child a {
+    font-weight: bold;
+}
+#main .msg .msg_left .list .listBottom ul li {
+    line-height: 1.6;
+}
+#main .msg .msg_left .list .listBottom ul li a {
+    overflow: hidden;
+    display: block;
+}
+#main .msg .msg_left .list .listBottom ul li a span:first-child {
+    display: block;
+    float: left;
+    width: 5px;
+    height: 5px;
+    background-color: #ccc;
+    border-radius: 50%;
+    margin-top: 10px;
+}
+#main .msg .msg_left .list .listBottom ul li a span:last-child {
+    display: block;
+    float: left;
+    margin-left: 5px;
+}
+#main .msg .msg_left .list .listBottom ul li a span {
+    color: #000;
+}
+#main .msg .msg_right {
+    width: 285px;
+    height: 450px;
+    float: right;
+    border: 1px solid #ccc;
+    border-top: 1px solid #f00;
+}
+#main .msg .msg_right .title {
+    font-size: 22px;
+    color: #f00;
+    margin-top: 10px;
+    font-weight: bold;
+    margin-left: 14px;
+}
+#main .msg .msg_right dl {
+    width: 253px;
+    height: 53px;
+    overflow: hidden;
+    margin: 23px auto 0;
+    border-bottom: 1px solid #ccc;
+}
+#main .msg .msg_right dl dt {
+    width: 38px;
+    height: 38px;
+    float: left;
+    margin-top: 6px;
+}
+#main .msg .msg_right dl dt img{
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+}
+#main .msg .msg_right dl dd {
+    float: left;
+    margin-top: 4px;
+    margin-left: 10px;
+}
+#main .msg .msg_right dl dd .options {
+    color: #ccc;
+}
+/* 第四部分 */
+#main .attract {
+    width: 100%;
+    height: 81px;
+    background: #eee;
+}
+/* 页尾代码 */
+#footer {
+    width: 100%;
+    height: 34px;
+    background: #000;
+}

html/day5/demo.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./demo.css" />
+  </head>
+  <body>
+    <div id="box">
+      <div id="container">
+        <!-- 头部内容 -->
+        <div id="header">
+            <div class="logo">
+                <img src="./images/1.png" alt="">
+            </div>
+            <div class="pictureMsg">
+                <img class="img1" src="./images/2.png" alt="">
+                <img class="img2" src="./images/3.png" alt="">
+            </div>
+        </div>
+        <!-- 主体内容 -->
+        <div id="main">
+          <!-- 第一部分 -->
+          <div class="nav">
+            <div class="list">
+              <ul>
+                <li><a href="">新闻</a></li>
+                <li><a href="">军事</a></li>
+                <li><a href="">图片</a></li>
+                <li><a href="">航空</a></li>
+              </ul>
+              <ul>
+                <li><a href="">娱乐</a></li>
+                <li><a href="">电影</a></li>
+                <li><a href="">音乐</a></li>
+                <li><a href="">经典</a></li>
+              </ul>
+            </div>
+            <div class="list">
+              <ul>
+                <li><a href="">新闻</a></li>
+                <li><a href="">军事</a></li>
+                <li><a href="">图片</a></li>
+                <li><a href="">航空</a></li>
+              </ul>
+              <ul>
+                <li><a href="">娱乐</a></li>
+                <li><a href="">电影</a></li>
+                <li><a href="">音乐</a></li>
+                <li><a href="">经典</a></li>
+              </ul>
+            </div>
+            <div class="list">
+              <ul>
+                <li><a href="">新闻</a></li>
+                <li><a href="">军事</a></li>
+                <li><a href="">图片</a></li>
+                <li><a href="">航空</a></li>
+              </ul>
+              <ul>
+                <li><a href="">娱乐</a></li>
+                <li><a href="">电影</a></li>
+                <li><a href="">音乐</a></li>
+                <li><a href="">经典</a></li>
+              </ul>
+            </div>
+            <div class="list">
+              <ul>
+                <li><a href="">新闻</a></li>
+                <li><a href="">军事</a></li>
+                <li><a href="">图片</a></li>
+                <li><a href="">航空</a></li>
+              </ul>
+              <ul>
+                <li><a href="">娱乐</a></li>
+                <li><a href="">电影</a></li>
+                <li><a href="">音乐</a></li>
+                <li><a href="">经典</a></li>
+              </ul>
+            </div>
+            <div class="list">
+              <ul>
+                <li><a href="">新闻</a></li>
+                <li><a href="">军事</a></li>
+                <li><a href="">图片</a></li>
+                <li><a href="">航空</a></li>
+              </ul>
+              <ul>
+                <li><a href="">娱乐</a></li>
+                <li><a href="">电影</a></li>
+                <li><a href="">音乐</a></li>
+                <li><a href="">经典</a></li>
+              </ul>
+            </div>
+            <div class="list">
+              <ul>
+                <li><a href="">新闻</a></li>
+                <li><a href="">军事</a></li>
+                <li><a href="">图片</a></li>
+                <li><a href="">航空</a></li>
+              </ul>
+              <ul>
+                <li><a href="">娱乐</a></li>
+                <li><a href="">电影</a></li>
+                <li><a href="">音乐</a></li>
+                <li><a href="">经典</a></li>
+              </ul>
+            </div>
+          </div>
+          <!-- 第二部分 -->
+          <div class="banner">
+            <img src="./images/banner.png" alt="">
+          </div>
+          <!-- 第三部分 -->
+          <div class="msg">
+            <div class="msg_left">
+              <div class="news">
+                <div class="newsTop">
+                  <div class="tip">
+                    <img src="./images/star.png" alt="">
+                    <p>娱乐</p>
+                  </div>
+                  <div class="music">
+                    <p>影视/音乐</p>
+                  </div>
+                </div>
+                <div class="newsBottom">
+                  <dl>
+                    <dt>
+                      <img src="./images/4.png" alt="">
+                    </dt>
+                    <dd>这是一段文字段文字<span>新的内容新的内容</span></dd>
+                  </dl>
+                  <dl>
+                    <dt>
+                      <img src="./images/4.png" alt="">
+                    </dt>
+                    <dd>这是一段文字段文字<span>新的内容新的内容</span></dd>
+                  </dl>
+                </div>
+              </div>
+              <div class="list">
+                <div class="listTop">
+                  <p>明星热点/重磅八卦</p>
+                </div>
+                <div class="listBottom">
+                  <ul>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                  </ul>
+                  <ul>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                    <li><a href=""><span></span><span>这是一段新闻这是一段新闻这是一段新闻</span></a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="msg_right">
+              <div class="title">我的产品</div>
+              <dl>
+                <dt>
+                  <img src="./images/5.png" alt="">
+                </dt>
+                <dd>
+                  <div class="tit">网易新闻</div>
+                  <div class="options">新闻网页 IOS下载 安卓下载</div>
+                </dd>
+              </dl>
+              <dl>
+                <dt>
+                  <img src="./images/5.png" alt="">
+                </dt>
+                <dd>
+                  <div class="tit">网易新闻</div>
+                  <div class="options">新闻网页 IOS下载 安卓下载</div>
+                </dd>
+              </dl>
+              <dl>
+                <dt>
+                  <img src="./images/5.png" alt="">
+                </dt>
+                <dd>
+                  <div class="tit">网易新闻</div>
+                  <div class="options">新闻网页 IOS下载 安卓下载</div>
+                </dd>
+              </dl>
+              <dl>
+                <dt>
+                  <img src="./images/5.png" alt="">
+                </dt>
+                <dd>
+                  <div class="tit">网易新闻</div>
+                  <div class="options">新闻网页 IOS下载 安卓下载</div>
+                </dd>
+              </dl>
+              <dl>
+                <dt>
+                  <img src="./images/5.png" alt="">
+                </dt>
+                <dd>
+                  <div class="tit">网易新闻</div>
+                  <div class="options">新闻网页 IOS下载 安卓下载</div>
+                </dd>
+              </dl>
+            </div>
+          </div>
+          <!-- 第四部分 -->
+          <div class="attract"></div>
+        </div>
+        <!-- 页尾内容 -->
+        <div id="footer"></div>
+      </div>
+    </div>
+  </body>
+</html>