css

day3/demo/index.css

@@ -0,0 +1,233 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    box-sizing: border-box;
+}
+.box {
+    width: 1000px;
+    height: 892px;
+    margin: 0 auto;
+    border:1px solid #000;
+}
+.contain {
+    width: 958px;
+    height: 100%;
+    margin: 0 auto;
+    padding-top: 20px;
+}
+#header {
+    width: 100%;
+    height: 55px;
+    border-bottom: 2px solid #f00;
+}
+#header-left {
+    width: 125px;
+    height: 45px;
+    float: left;
+}
+#header-left img {
+    width: 100%;
+    height: 100%;
+}
+#header-right {
+    width: 561px;
+    height: 40px;
+    float: right;
+}
+#header-right #picture1 {
+    width: 430px;
+    height: 40px;
+}
+#header-right #picture2 {
+    width: 123px;
+    height: 36px;
+    margin-left: 2px;
+}
+#main {
+    width: 100%;
+    height: 700px;
+    padding-top: 15px;
+    /* background: pink; */
+}
+#part1 {
+    width: 100%;
+    height: 40px;
+    background: #fff;
+}
+#part1 .list {
+    width: 150px;
+    height: 40px;
+    float: left;
+    border-right: 1px solid #ccc;
+}
+#part1 .list ul {
+    overflow: hidden;
+    height: 20px;
+    /* 行间距 让文字在已知高度盒子内垂直居中 则行间距值为当前盒子高度 */
+    line-height: 20px;
+}
+#part1 .list ul li {
+    float: left;
+    margin-left: 8px;
+}
+#part1 .list:first-child  li:first-child {
+    margin-left: 0;
+}
+#part1 .list ul li a{
+    color: #000;
+    font-size: 12px;
+}
+#part1 .list ul li a:hover {
+    color: red;
+}
+#part1 .list1 {
+    width: 127px;
+    height: 40px;
+    float: left;
+    border-right: 1px solid #ccc;
+}
+#part1 .list1 ul {
+    overflow: hidden;
+    height: 20px;
+    /* 行间距 让文字在已知高度盒子内垂直居中 则行间距值为当前盒子高度 */
+    line-height: 20px;
+}
+#part1 .list1 ul li {
+    float: left;
+    margin-left: 8px;
+}
+#part1 .list1 ul li a{
+    color: #000;
+    font-size: 12px;
+}
+#part1 .list1 ul li a:hover {
+    color: red;
+}
+#part2 {
+    width: 100%;
+    height: 97px;
+    margin-top: 20px;
+    background: url('./images/4.png') no-repeat center center;
+    background-size: cover;
+}
+#part3 {
+    overflow: hidden;
+    margin-top: 22px;
+}
+#part3 .left {
+    width: 632px;
+    height: 464px;
+    float: left;
+    border-top: 1px solid #eee;
+    overflow: hidden;
+}
+#part3 .left .music {
+    width: 210px;
+    height: 453px;
+    float: left;
+}
+#part3 .left .music .tip1 {
+    width: 100%;
+    height: 40px;
+}
+#part3 .left .music .tip1 ul {
+    overflow: hidden;
+    height: 100%;
+    line-height: 40px;
+}
+#part3 .left .music .tip1 ul li {
+    width: 105px;
+    height: 100%;
+    float: left;
+}
+#part3 .left .music .tip1 ul li a {
+    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+#part3 .left .music .tip1 ul li:first-child  {
+    border-top: 2px solid #f00;
+}
+#part3 .left .music .tip1 ul li:first-child a {
+    font-size: 26px;
+    font-weight: bold;
+}
+#part3 .left .music .tip1 ul li img{
+    width: 24px;
+    height: 24px;
+}
+#part3 .left .music .tip2 {
+    width: 202px;
+    height: 172px;
+    margin-top: 28px;
+}
+#part3 .left .music .tip2 dt {
+    width: 202px;
+    height: 126px;
+}
+#part3 .left .music .tip2 dt img {
+    width: 100%;
+    height: 100%;
+}
+#part3 .left .music .tip2 dd {
+    width: 187px;
+    height: 37px;
+    font-size: 14px;
+}
+#part3 .left .message {
+    float: right;
+}
+#part3 .left .message #star {
+    width: 398px;
+    height: 20px;
+    margin-top: 20px;
+    color: #ccc;
+    font-size: 13px;
+    /* 文本水平位置 */
+    text-align: right;
+    line-height: 20px;
+}
+#part3 .left .message #together {
+    width: 384px;
+    height: 182px;
+    margin-top: 30px;
+} 
+#part3 .left .message #together ul li{
+    overflow: hidden;
+    line-height: 30px;
+}
+#part3 .left .message #together ul li:first-child a {
+    font-weight: bold;
+}
+#part3 .left .message #together ul li span {
+    display: block;
+    width: 5px;
+    height: 5px;
+    background: #ccc;
+    border-radius: 50%;
+    float: left;
+    margin-top: 15px;
+}
+#part3 .left .message #together ul li a {
+    color: #000;
+    font-size: 16px;
+    float: left;
+    margin-left: 5px;
+}
+#part3 .left .message #together ul li:hover a {
+    color: red;
+}
+#part3 .left .message #together ul li:hover span {
+    background: #f00;
+}
+#part3 .right {
+    width: 302px;
+    height: 478px;
+    float: right;
+    background: rgb(87, 215, 232);
+}
+#footer {
+    width: 100%;
+    height: 114px;
+    background: plum;
+}

day3/demo/index.html

@@ -0,0 +1,176 @@
+<!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="./index.css">
+</head>
+<body>
+    <div class="box">
+        <div class="contain">
+            <div id="header">
+                <div id="header-left">
+                    <img src="./images/1.png" alt="">
+                </div>
+                <div id="header-right">
+                    <img id="picture1" src="./images/2.png" alt="">
+                    <img id="picture2" src="./images/3.png" alt="">
+                </div>
+            </div>
+            <div id="main">
+                <div id="part1">
+                    <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="list1">
+                        <ul>
+                            <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>
+                        </ul>
+                    </div>
+                    <div class="list1">
+                        <ul>
+                            <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>
+                        </ul>
+                    </div>
+                    <div class="list1">
+                        <ul>
+                            <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>
+                        </ul>
+                    </div>
+                    <div class="list1">
+                        <ul>
+                            <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>
+                        </ul>
+                    </div>
+                </div>
+                <div id="part2">
+                </div>
+                <div id="part3">
+                    <div class="left">
+                        <div class="music">
+                            <div class="tip1">
+                                <ul>
+                                    <li>
+                                       <img src="./images/star.png" alt="">
+                                       <a>娱乐</a> 
+                                    </li>
+                                    <li>
+                                        <a href="">影视/音乐</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <dl class="tip2">
+                                <dt>
+                                    <img src="./images/5.png" alt="">
+                                </dt>
+                                <dd>快要过年了 喜迎亚冬会 哈哈哈哈</dd>
+                            </dl>
+                            <dl class="tip2">
+                                <dt>
+                                    <img src="./images/5.png" alt="">
+                                </dt>
+                                <dd>快要过年了 喜迎亚冬会 哈哈哈哈</dd>
+                            </dl>
+                        </div>
+                        <div class="message">
+                            <div id="star">
+                                明星热点/重磅八卦
+                            </div>
+                            <div id="together">
+                                <ul>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                </ul>
+                            </div>
+                            <div id="together">
+                                <ul>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                    <li><span></span><a href="">任达华首谈遇刺感受:大脑一片空白 女儿给我力量</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="right"></div>
+                </div>
+            </div>
+            <div id="footer"></div>
+        </div>
+    </div>
+</body>
+</html>