Home Explore Help
Register Sign In
zachary
/
expo-museums
1
0
Fork 0
Files Issues 1 Pull Requests 0 Wiki
Browse Source

修改滚动条样式

zachary 4 years ago
parent
67cef66c4f
commit
28acb3ba4f
5 changed files with 140 additions and 18 deletions
Unified View Show Diff Stats
  1. BIN
      b02664eff.png
  2. 6 0
      backcloth.svg
  3. 18 8
      index.html
  4. 99 9
      main.css
  5. 17 1
      readme.md

BIN
b02664eff.png
View File


+ 6 - 0
backcloth.svg
View File 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1921px" height="781px" xmlns="http://www.w3.org/2000/svg">
 
+  <g transform="matrix(1 0 0 1 0 -1080 )">
 
+    <path d="M 0 1080  L 1921 1080  L 1921 1861  L 0 1861  L 0 1080  Z " fill-rule="nonzero" fill="#f2f2f2" stroke="none" />
 
+  </g>
 
+</svg>

+ 18 - 8
index.html
View File 

@@ -8,15 +8,25 @@
 
         <link rel="stylesheet" href="./main.css" />
 
         <link rel="stylesheet" href="./main.css" />
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <div class="back-picture">
 
-            <!-- <div>
 
-                <img src="win11.jpg"/>
 
-            </div> -->
 
-            <div class="subject-picture"></div>
 
+        <div id="base">
 
+            <div class="back-picture">
 
+                <img class="back-image" src="win11.jpg">
 
+            </div>
 
+            <div class="tech-support">
 
+                <div class="box"></div>
 
+                <div class="box"></div>
 
+            </div>
 
+            <div class="subject-picture">
 
+                <img alt="永不落幕的博博会" src="./b02664eff.png" />
 
+            </div>
 
             <div class="link-items">
 
             <div class="link-items">
 
-                <div class="item">点击看展</div>
 
-                <div class="item">参加云展</div>
 
-                <div class="item special-item">往届博博会</div>
 
+                <div class="item"><a href="">点击看展</a></div>
 
+                <div class="item"><a href="" >参加云展</a></div>
 
+                <div class="item special-item"><a href="">往届博博会</a></div>
 
+            </div>
 
+            <div id="wanwuqiang">
 
+                <div class="title">万物墙</div>
 
+                <img alt="背景板" src="backcloth.svg"/>
 
             </div>
 
             </div>
 
         </div>
 
         </div>

+ 99 - 9
main.css
View File 

@@ -1,24 +1,83 @@
 
+::-webkit-scrollbar {
 
+    width: 8px;
 
+    height: 8px;
 
+    background: #f2f2f2;
 
+    padding-right: 2px;
 
+}
 
+
 
+::-webkit-scrollbar-thumb {
 
+    background: #b4bbc5;
 
+    border-radius: 10px;
 
+    border: 0;
 
+}
 
+
 
+body{
 
+    margin:0;
 
+    position: relative;
 
+    left:0;
 
+}
 
+
 
+#base{
 
+    position:absolute;
 
+    width:100%;
 
+}
 
+
 
+
 
 .back-picture{
 
 .back-picture{
 
+    position: absolute;
 
+    border-width: 0;
 
+    left:0;
 
+    top:0;
 
     width:100%;
 
     width:100%;
 
     height:1080px;
 
     height:1080px;
 
-    padding-top:50px;
 
-    padding-bottom:80px;
 
-    margin-top:-50px;
 
-    background-image: url('./win11.jpg');
 
-    background-size: cover;
 
-
 
     background-color:darkseagreen;
 
     background-color:darkseagreen;
 
 }
 
 }
 
 
 
+.back-image{
 
+    border-width: 0px;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    width: 100%;
 
+    height: 1080px;
 
+    display: flex;
 
+    opacity: 0.69;
 
+}
 
+
 
+.tech-support{
 
+    position: absolute;
 
+    border-width: 0px;
 
+    left: 30px;
 
+    top: 30px;
 
+    width: 327px;
 
+    height: 80px;
 
+    background: inherit;
 
+    background-color: rgba(255, 255, 255, 1);
 
+    border: none;
 
+    border-radius: 0px;
 
+    -moz-box-shadow: none;
 
+    -webkit-box-shadow: none;
 
+    box-shadow: none;
 
+    opacity: 0.53;
 
+}
 
+
 
 .subject-picture{
 
 .subject-picture{
 
+    position:absolute;
 
     width:1017px;
 
     width:1017px;
 
     height:316px;
 
     height:316px;
 
-    margin:350px auto 120px auto;
 
+    top:358px;;
 
+    left:452px;
 
+
 
+
 
     background-color:darkkhaki;
 
     background-color:darkkhaki;
 
 }
 
 }
 
 
 
 .link-items{
 
 .link-items{
 
-    background-color:cyan;
 
+    position:absolute;
 
+    top:829px;
 
+    left:0;
 
+    width: 100%;
 
+    /* background-color:cyan; */
 
     text-align: center;
 
     text-align: center;
 
 
 
 }
 
 }
 
@@ -36,6 +95,37 @@
 
     font-weight: 700;
 
     font-weight: 700;
 
     font-style: normal;
 
     font-style: normal;
 
     font-size:21px;
 
     font-size:21px;
 
+    color:white;
 
+
 
+    background-color: #C09E65;
 
+    
+}
 
+
 
+.special-item{
 
+    background-color:#FFFFFF;
 
+    color:#000000;
 
+}
 
 
 
-    background-color: #ff9933;
 
+.link-items a{
 
+    color: inherit;
 
+}
 
+.link-items a:link{
 
+    text-decoration:none;
 
+}
 
+.link-items a:visited{
 
+    text-decoration:none;
 
+}
 
+.link-items a:hover{
 
+    text-decoration:none;
 
+}
 
+.link-items a:active{
 
+    text-decoration:none;
 
+}
 
+
 
+#wanwuqiang{
 
+    border-width:0;;
 
+    position:absolute;
 
+    top:1080px;
 
+    left:0;
 
+    width:100%;
 
 }
 
 }

+ 17 - 1
readme.md
View File 

@@ -1,4 +1,20 @@
 
 完成博博会网页
 
 完成博博会网页
 
 
 
 参考资料：
 
 参考资料：
 
-圆角矩阵：https://www.w3cplus.com/css3/css-secrets/flexible-ellipses.html
 
+圆角矩阵：https://www.w3cplus.com/css3/css-secrets/flexible-ellipses.html
 
+
 
+### #issue：背景图片无法贴边
 
+使用css中的background-image时，背景图片无法贴边
 
+
 
+### #issue：使用img标签不懂如何限制在一定的尺寸内
 
+img标签贴背景出错
 
+
 
+### #issue：元素层叠z-index不熟悉
 
+无法正确层叠，position默认值为static，不支持top,bottom,right,left和z-index
 
+
 
+### #issue：考虑absolute定位
 
+设立一个div作为基点，···
 
+看懂代码
 
+关于position：
 
+https://www.hangge.com/blog/cache/detail_1776.html
 
+http://www.ruanyifeng.com/blog/2019/11/css-position.html