Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
zachary
/
expo-museums
1
0
Másolás 0

4 Commit-ok 08db56dcf2 ... db01289c26

Szerző SHA1 Üzenet Dátum
  zachary db01289c26 ”万物墙“完成 4 éve
  zachary 28acb3ba4f 修改滚动条样式 4 éve
  zachary 67cef66c4f 圆角矩阵，大背景 4 éve
  zachary f671648906 完成页面顶部基本布局 4 éve
7 módosított fájl, 213 hozzáadás és 0 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. BIN
      b02664eff.png
  2. 6 0
      backcloth.svg
  3. 37 0
      index.html
  4. 150 0
      main.css
  5. 0 0
      main.js
  6. 20 0
      readme.md
  7. BIN
      win11.jpg

BIN
b02664eff.png
Fájl Megtekintése


+ 6 - 0
backcloth.svg
Fájl Megtekintése 

@@ -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>

+ 37 - 0
index.html
Fájl Megtekintése 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <title>第八届中国博物馆及相关产品与技术博览会</title>
 
+        <meta name="discription" content="第八届博博会"/>
 
+        <meta name="keyword" content="博物馆,文物,文化"/>
 
+        <meta name="author" content="zachary"/>
 
+        <link rel="stylesheet" href="./main.css" />
 
+    </head>
 
+    <body>
 
+        <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="item"><a href="">点击看展</a></div>
 
+                <div class="item"><a href="" >参加云展</a></div>
 
+                <div class="item special-item"><a href="">往届博博会</a></div>
 
+            </div>
 
+            <div class="module wanwuqiang">
 
+                <img alt="背景板" class="img" src="backcloth.svg"/>
 
+                <div class="title">
 
+                    <p><span style="text-decoration: none;"></span></p>
 
+                    <p><span style="text-decoration: none;">万物墙</span></p>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+    </body>
 
+</html>

+ 150 - 0
main.css
Fájl Megtekintése 

@@ -0,0 +1,150 @@
 
+::-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{
 
+    position: absolute;
 
+    border-width: 0;
 
+    left:0;
 
+    top:0;
 
+    width:100%;
 
+    height:1080px;
 
+    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{
 
+    position:absolute;
 
+    width:1017px;
 
+    height:316px;
 
+    top:358px;;
 
+    left:452px;
 
+
 
+
 
+    background-color:darkkhaki;
 
+}
 
+
 
+.link-items{
 
+    position:absolute;
 
+    top:829px;
 
+    left:0;
 
+    width: 100%;
 
+    /* background-color:cyan; */
 
+    text-align: center;
 
+
 
+}
 
+
 
+.item{
 
+    display: inline-block;
 
+    text-align: center;
 
+    width: 177px;
 
+    height:50px;
 
+    margin:0 40px 0 40px;
 
+    padding-top:20px;
 
+    border-radius: 80px / 75px;
 
+
 
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
 
+    font-weight: 700;
 
+    font-style: normal;
 
+    font-size:21px;
 
+    color:white;
 
+
 
+    background-color: #C09E65;
 
+    
+}
 
+
 
+.special-item{
 
+    background-color:#FFFFFF;
 
+    color:#000000;
 
+}
 
+
 
+.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;
 
+}
 
+
 
+.module{
 
+    border-width:0;;
 
+    position:absolute;
 
+    top:0;
 
+    left:0;
 
+    width:100%;
 
+    font-size: 48px;
 
+
 
+    text-align: center;
 
+}
 
+
 
+.wanwuqiang{
 
+    top:1080px;
 
+}
 
+
 
+.title{
 
+    position:absolute;
 
+    top:0;
 
+    left:0;
 
+    display: flex;
 
+    align-self: flex-start;
 
+    justify-content: center;
 
+    padding: 2px 2px 2px 2px;
 
+    box-sizing: border-box;
 
+    width: 100%;
 
+}

+ 0 - 0
main.js
Fájl Megtekintése


+ 20 - 0
readme.md
Fájl Megtekintése 

@@ -0,0 +1,20 @@
 
+完成博博会网页
 
+
 
+参考资料：
 
+圆角矩阵：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

BIN
win11.jpg
Fájl Megtekintése