صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
lovecoding
/
VIP26
9
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

fix:day7

e 1 سال پیش
والد
3337c5cd72
کامیت
d67b195e6a
5فایلهای تغییر یافته به همراه173 افزوده شده و 0 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 129 0
      day7/css/index.css
  2. 44 0
      day7/html/index.html
  3. BIN
      day7/images/banner.jpg
  4. BIN
      day7/images/newIndex-searchBtn.png
  5. BIN
      day7/images/soso.png

+ 129 - 0
day7/css/index.css
مشاهده فایل 

@@ -0,0 +1,129 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    list-style: none;
 
+    text-decoration: none;
 
+    box-sizing: border-box;
 
+}
 
+.header {
 
+    width: 100%;
 
+}
 
+.header .headerMain {
 
+    width: 1260px;
 
+    height: 73px;
 
+    margin: 0 auto;
 
+    overflow: hidden;
 
+    position: relative;
 
+}
 
+.header .headerMain .logoList {
 
+    width: 153px;
 
+    height: 100%;
 
+    float: left;
 
+    padding-top: 15px;
 
+}
 
+.header .headerMain .logoList .logo {
 
+    width: 153px;
 
+    height: 46px;
 
+    background: url(../images/soso.png);
 
+    background-position: 221px top;
 
+}
 
+.header .headerMain .list {
 
+    width: 361px;
 
+    height: 100%;
 
+    float: left;
 
+    margin-left: 72px;
 
+    line-height: 73px;
 
+}
 
+.header .headerMain .list ul {
 
+    overflow: hidden;
 
+}
 
+.header .headerMain .list ul li {
 
+    float: left;
 
+    margin-left: 30px;
 
+}
 
+.header .headerMain .list ul li:first-child {
 
+    margin-left: 0;
 
+}
 
+.header .headerMain .list ul li a {
 
+    color: #000;
 
+    font-size: 16px;
 
+}
 
+.header .headerMain .list ul li a:hover {
 
+    color: #31ccff;
 
+}
 
+.active {
 
+    color: #31ccff !important;
 
+}
 
+.tips {
 
+    width: 39px;
 
+    height: 16px;
 
+    color: #999999;
 
+    font-size: 12px;
 
+    background: #F5F7F9;
 
+    line-height: 16px;
 
+    text-align: center;
 
+    border-radius: 8px;
 
+    border:1px solid #dddddd;
 
+    position: absolute;
 
+    top: 11px;
 
+    left: 531px;
 
+}
 
+.header .headerMain .btn {
 
+    width: 674px;
 
+    height: 100%;
 
+    float: left;
 
+    padding-top: 17px;
 
+}
 
+.header .headerMain .btn .login {
 
+    width: 102px;
 
+    height: 38px;
 
+    background-color: #1EBCF0;
 
+    color: #fff;
 
+    font-size: 16px;
 
+    text-align: center;
 
+    line-height: 38px;
 
+    border-radius: 4px;
 
+    float: right;
 
+}
 
+.main {
 
+    position: relative;
 
+}
 
+.main .banner {
 
+    width: 100%;
 
+    height: 482px;
 
+    background: url("../images/banner.jpg");
 
+}
 
+.main .search {
 
+    width: 692px;
 
+    height: 58px;
 
+    /* alpha 0~1 */
 
+    /* rgba(0,0,0,alpha) */
 
+    background: rgb(0,0,0,.2);
 
+    /* opacity: 0.2; */
 
+    position: absolute;
 
+    top: 218px;
 
+    left: 610px;
 
+    border-radius: 4px;
 
+    overflow: hidden;
 
+}
 
+.main .search input {
 
+    width: 588px;
 
+    height: 50px;
 
+    background: #fff;
 
+    opacity: 0.8;
 
+    padding: 16px;
 
+    float: left;
 
+    margin-top: 4px;
 
+    outline: none;
 
+    margin-left: 6px;
 
+    border: none;
 
+    border-top-left-radius: 4px;
 
+    border-bottom-left-radius:4px;
 
+    border: 1px solid #ccc;
 
+}
 
+.main .search img {
 
+    float: left;
 
+    width: 94px;
 
+    height: 50px;
 
+    margin-top: 4px;
 
+}

+ 44 - 0
day7/html/index.html
مشاهده فایل 

@@ -0,0 +1,44 @@
 
+<!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="../css/index.css">
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <!-- 页眉 -->
 
+        <div class="header">
 
+            <div class="headerMain">
 
+                <div class="logoList">
 
+                    <div class="logo"></div>
 
+                </div>
 
+                <div class="list">
 
+                    <ul>
 
+                        <li><a href="" class="active">首页</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>
 
+                <div class="tips">Beta</div>
 
+                <div class="btn">
 
+                    <div class="login">登录/注册</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <!-- 主体 -->
 
+        <div class="main">
 
+            <div class="banner"></div>
 
+            <div class="search">
 
+                <input type="text" placeholder="请输入标题、关键字、作品编号搜索">
 
+                <img src="../images/newIndex-searchBtn.png" alt="">
 
+            </div>
 
+        </div>
 
+        <!-- 页尾 -->
 
+        <div class="footer"></div>
 
+    </div>
 
+</body>
 
+</html>

BIN
day7/images/banner.jpg
مشاهده فایل


BIN
day7/images/newIndex-searchBtn.png
مشاهده فایل


BIN
day7/images/soso.png
مشاهده فایل