首页 发现 帮助
登录
lovecoding
/
vipAllDay
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

昵图网

e 1 年之前
父节点
20a6672f4b
当前提交
593f1aba59
共有 6 个文件被更改，包括 306 次插入 和 0 次删除
分列视图 显示文件统计
  1. 208 0
      css/demo1.css
  2. 98 0
      css/demo1.html
  3. 二进制
      images/banner.jpg
  4. 二进制
      images/card.jpg
  5. 二进制
      images/newIndex-searchBtn.png
  6. 二进制
      images/soso.png

+ 208 - 0
css/demo1.css
查看文件 

@@ -0,0 +1,208 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    list-style: none;
 
+    text-decoration: none;
 
+    box-sizing: border-box;
 
+}
 
+/* 主体给宽不给高 */
 
+#contain {
 
+    width: 100%;
 
+}
 
+/* 头部样式 */
 
+#header {
 
+    width: 1260px;
 
+    height: 75px;
 
+    margin: 0 auto;
 
+    overflow: hidden;
 
+}
 
+#header .logo {
 
+    width: 149px;
 
+    height: 45px;
 
+    float: left;
 
+    margin-top: 18px;
 
+    background: url("../images/soso.png");
 
+    background-position: -207px 0px
 
+}
 
+#header .nav {
 
+    width: 352px;
 
+    height: 75px;
 
+    float: left;
 
+    margin-left: 70px;
 
+    line-height: 75px;
 
+    position: relative;
 
+}
 
+#header .nav ul {
 
+    overflow: hidden;
 
+}
 
+#header .nav ul li {
 
+    float: left;
 
+    margin-left: 33px;
 
+}
 
+#header .nav ul li:first-child {
 
+    margin-left: 0;
 
+}
 
+#header .nav ul li:first-child a {
 
+    color: #31ccff;
 
+}
 
+#header .nav ul li a {
 
+    color: #000;
 
+    font-size: 16px;
 
+}
 
+#header .nav ul li a:hover {
 
+    color:#31ccff;
 
+}
 
+#header .nav .btn {
 
+    width: 37px;
 
+    height: 14px;
 
+    color: #999999;
 
+    background-color: #f5f7f9;
 
+    border-radius: 8px;
 
+    border: solid 1px #dddddd;
 
+    text-align: center;
 
+    line-height: 13px;
 
+    font-size: 12px;
 
+    position: absolute;
 
+    top: 10px;
 
+    right: 2px;
 
+}
 
+#header .login {
 
+    width: 102px;
 
+    height: 38px;
 
+    float: right;
 
+    margin-right: 10px;
 
+    margin-top: 18px;
 
+    border-radius: 3px;
 
+    color: #fff;
 
+    text-align: center;
 
+    line-height: 38px;
 
+    font-size: 16px;
 
+    background: #1ebcf0;
 
+}
 
+#main {
 
+    width: 100%;
 
+}
 
+#main .banner {
 
+    width: 1920px;
 
+    height: 482px;
 
+    margin: 0 auto;
 
+}
 
+#main .banner .site {
 
+    width: 1260px;
 
+    height: 100%;
 
+    margin:  -488px auto 0;
 
+    position: relative;
 
+    /* 开启定位后  */
 
+    z-index: 9;
 
+    /* z-index: 999; */
 
+}
 
+#main .banner img {
 
+    width: 1920px;
 
+    height: 100%;
 
+}
 
+#main .banner .search {
 
+    width: 692px;
 
+    height: 58px;
 
+    background: rgba(0,0,0,.2);
 
+    overflow: hidden;
 
+    position: absolute;
 
+    top: 221px;
 
+    left: 288px;
 
+    /* margin: 0 auto; */
 
+    padding:4px 2.5px;
 
+    border-radius: 3px;
 
+}
 
+#main .banner .search input{
 
+    width: 588px;
 
+    height: 50px;
 
+    float: left;
 
+    font-size: 14px;
 
+    padding: 10px;
 
+    outline: none;
 
+    border: 1px solid #adadad;
 
+    border-top-left-radius: 3px;
 
+    border-bottom-left-radius: 3px;
 
+    /* background: #f00; */
 
+}
 
+#main .banner .search img{
 
+    width: 98px;
 
+    height: 50px;
 
+    float: left;
 
+    /* background: #f00; */
 
+}
 
+#main .card {
 
+    width: 1260px;
 
+    height: 450px;
 
+    margin: 0 auto;
 
+    overflow: hidden;
 
+    padding-top: 108px;
 
+}
 
+#main .card .news {
 
+    width: 290px;
 
+    height: 100%;
 
+    float: left;
 
+    margin-left: 33px;
 
+    position: relative;
 
+}
 
+#main .card .news:first-child {
 
+    margin-left: 0;
 
+}
 
+#main .card dl {
 
+    width: 290px;
 
+    height: 250px;
 
+}
 
+#main .card dl dt{
 
+    width: 290px;
 
+    height: 200px;
 
+}
 
+#main .card dl dt img {
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+#main .card dl dd {
 
+    overflow: hidden;
 
+    margin-top: 37px;
 
+}
 
+#main .card dl dd p {
 
+    width: 140px;
 
+    height: 48px;
 
+    color: #666;
 
+    font-size: 12px;
 
+    float: left;
 
+    border:1px solid #dfdfdf;
 
+    text-align: center;
 
+    line-height: 48px;
 
+}
 
+#main .card dl dd p:last-child {
 
+    float: right;
 
+}
 
+#main .card dl dd p:hover {
 
+    color: #31ccff;
 
+}
 
+#main .card .news .title {
 
+    width: 100%;
 
+    height: 50px;
 
+    color: #fff;
 
+    text-align: center;
 
+    line-height: 50px;
 
+    font-size: 16px;
 
+    position: absolute;
 
+    top:151px;
 
+    left: 0;
 
+    display: none;
 
+    background: rgba(0,0,0,.4);
 
+}
 
+#main .card .news dl dt:hover .title {
 
+    display: block;
 
+}
 
+#main .area {
 
+    width: 100%;
 
+    height: 500px;
 
+    background: #ff0;
 
+}
 
+#main .area .contain {
 
+    width: 1260px;
 
+    height: 100%;
 
+    background: #00f;
 
+    margin: 0 auto;
 
+}

+ 98 - 0
css/demo1.html
查看文件 

@@ -0,0 +1,98 @@
 
+<!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="./demo1.css" />
 
+  </head>
 
+  <body>
 
+    <div id="contain">
 
+      <div id="header">
 
+        <div class="logo"></div>
 
+        <div class="nav">
 
+          <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="btn">Beta</div>
 
+        </div>
 
+        <div class="login">登录/注册</div>
 
+      </div>
 
+      <div id="main">
 
+        <!-- 第一部分 -->
 
+        <div class="banner">
 
+          <img src="../images/banner.jpg" alt="" />
 
+          <div class="site">
 
+            <div class="search">
 
+              <input
 
+                type="text"
 
+                placeholder="请输入标题、关键字、作品编号搜索"
 
+              />
 
+              <img src="../images/newIndex-searchBtn.png" alt="" />
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <!-- 第二部分 -->
 
+        <div class="card">
 
+            <div class="news">
 
+              <dl>
 
+                <dt>
 
+                  <img src="../images/card.jpg" alt="" />
 
+                  <div class="title">儿童节美陈</div>
 
+                </dt>
 
+                <dd>
 
+                  <p>新能源</p>
 
+                  <p>招聘海报</p>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+            <div class="news">
 
+              <dl>
 
+                <dt>
 
+                  <img src="../images/card.jpg" alt="" />
 
+                  <div class="title">儿童节美陈</div>
 
+                </dt>
 
+                <dd>
 
+                  <p>新能源</p>
 
+                  <p>招聘海报</p>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+            <div class="news">
 
+              <dl>
 
+                <dt>
 
+                  <img src="../images/card.jpg" alt="" />
 
+                  <div class="title">儿童节美陈</div>
 
+                </dt>
 
+                <dd>
 
+                  <p>新能源</p>
 
+                  <p>招聘海报</p>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+            <div class="news">
 
+              <dl>
 
+                <dt>
 
+                  <img src="../images/card.jpg" alt="" />
 
+                  <div class="title">儿童节美陈</div>
 
+                </dt>
 
+                <dd>
 
+                  <p>新能源</p>
 
+                  <p>招聘海报</p>
 
+                </dd>
 
+              </dl>
 
+            </div>
 
+        </div>
 
+        <!-- 第三部分 -->
 
+        <div class="area">
 
+          <div class="contain"></div>
 
+        </div>
 
+      </div>
 
+      <div id="footer"></div>
 
+    </div>
 
+  </body>
 
+</html>

二进制
images/banner.jpg
查看文件


二进制
images/card.jpg
查看文件


二进制
images/newIndex-searchBtn.png
查看文件


二进制
images/soso.png
查看文件