Home Explore Help
Sign In
lovecoding
/
VIP28
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

day5

e 1 year ago
parent
2184b1b0b3
commit
9aae1cc972
5 changed files with 181 additions and 0 deletions
Unified View Show Diff Stats
  1. 128 0
      day5/昵图网/demo.css
  2. 53 0
      day5/昵图网/demo.html
  3. BIN
      day5/昵图网/images/banner.jpg
  4. BIN
      day5/昵图网/images/newIndex-searchBtn.png
  5. BIN
      day5/昵图网/images/soso.png

+ 128 - 0
day5/昵图网/demo.css
View File 

@@ -0,0 +1,128 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    list-style: none;
 
+    text-decoration: none;
 
+    box-sizing: border-box;
 
+}
 
+
 
+/* 页眉 */
 
+#header {
 
+    width: 100%;
 
+    height: 75px;
 
+}
 
+#header .nav {
 
+    width: 1250px;
 
+    height: 100%;
 
+    margin: 0 auto;
 
+    overflow: hidden;
 
+}
 
+#header .nav .partOne {
 
+    width: 151px;
 
+    height: 50px;
 
+    float: left;
 
+    padding-top: 10px;
 
+}
 
+#header .nav .logo {
 
+    width: 151px;
 
+    height: 50px;
 
+    background: url("./images/soso.png");
 
+    background-position-x: -206px;
 
+    background-position-y: 3px;
 
+}
 
+#header .nav .partTwo {
 
+    float: left;
 
+    height: 100%;
 
+    line-height: 75px;
 
+    margin-left: 65px;
 
+    position: relative;
 
+}
 
+#header .nav .partTwo ul {
 
+    overflow: hidden;
 
+}
 
+#header .nav .partTwo ul li {
 
+    float: left;
 
+    margin-left: 35px;
 
+}
 
+#header .nav .partTwo ul li:first-child a {
 
+    color: #31CCFF;
 
+}
 
+#header .nav .partTwo ul li:first-child {
 
+    margin-left: 0;
 
+}
 
+#header .nav .partTwo ul li a:hover {
 
+    color: #31CCFF;
 
+} 
+#header .nav .partTwo .beta {
 
+    width: 39px;
 
+    height: 16px;
 
+    background: #F5F7F9;
 
+    position: absolute;
 
+    left: 384px;
 
+    top: 10px;
 
+    font-size: 14px;
 
+    line-height: 16px;
 
+    color: #999999;
 
+    text-align: center;
 
+    border-radius: 30px;
 
+    border:1px solid #dddddd;
 
+}
 
+#header .nav .partThree {
 
+    width: 102px;
 
+    height: 38px;
 
+    float: right;
 
+    margin-top: 18px;
 
+}
 
+#header .nav .partThree .btn {
 
+    width: 100%;
 
+    height: 100%;
 
+    background: #1ebcf0;
 
+    color: #fff;
 
+    font-size: 16px;
 
+    text-align: center;
 
+    line-height: 38px;
 
+    border-radius: 4px;
 
+}
 
+#header .nav .partThree .btn:hover {
 
+    background: #31ccff;
 
+}
 
+/* 主体 */
 
+#main .banner {
 
+    width: 100%;
 
+    height: 480px;
 
+    position: relative;
 
+}
 
+#main .banner img {
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+#main .banner .search {
 
+    width: 692px;
 
+    height: 58px;
 
+    background: rgba(0,0,0,.15);
 
+    overflow: hidden;
 
+    position: absolute;
 
+    top: 214px;
 
+    left: 606px;
 
+
 
+}
 
+#main .banner .search input {
 
+    width: 588px;
 
+    height: 50px;
 
+    float: left;
 
+    padding: 15px;
 
+    color: #999999;
 
+    outline: none;
 
+    margin-top: 4px;
 
+    margin-left: 3px;
 
+    border: 1px solid #adadad;
 
+    border-top-left-radius: 4px;
 
+    border-bottom-left-radius: 4px;
 
+    background: rgba(255,255,255,.88);;
 
+}
 
+#main .banner .search img {
 
+    width: 97px;
 
+    height: 50px;
 
+    float: left;
 
+    margin-top: 4px;
 
+}

+ 53 - 0
day5/昵图网/demo.html
View File 

@@ -0,0 +1,53 @@
 
+<!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="header">
 
+            <div class="nav">
 
+                <div class="partOne">
 
+                    <div class="logo"></div>
 
+                </div>
 
+                <div class="partTwo">
 
+                    <ul>
 
+                        <li><a href="">首页</a></li>
 
+                        <li><a href="">设计</a></li>
 
+                        <li><a href="">摄影</a></li>
 
+                        <li><a href="">多媒体</a></li>
 
+                        <li><a href="">AI生画</a></li>
 
+                    </ul>
 
+                    <div class="beta">Beta</div>
 
+                </div>
 
+                <div class="partThree">
 
+                    <div class="btn">登录/注册</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <!-- 主体 -->
 
+        <div id="main">
 
+            <!-- 轮播图 -->
 
+            <div class="banner">
 
+                <img src="./images/banner.jpg" alt="">
 
+                <div class="search">
 
+                    <input type="text" placeholder="请输入标题、关键字、作品编号搜索">
 
+                    <img src="./images/newIndex-searchBtn.png" alt="">
 
+                </div>
 
+            </div>
 
+            <!-- 第二部分 -->
 
+            <div class="vase1"></div>
 
+            <!-- 第三部分 -->
 
+            <div class="vase2"></div>
 
+            <!-- 第四部分 -->
 
+            <div class="vase3"></div>
 
+        </div>
 
+        <!-- 页尾 -->
 
+        <div id="footer"></div>
 
+    </div>
 
+</body>
 
+</html>

BIN
day5/昵图网/images/banner.jpg
View File


BIN
day5/昵图网/images/newIndex-searchBtn.png
View File


BIN
day5/昵图网/images/soso.png
View File