diff --git a/CangJiGaoDeGuoMiaoHei.woff b/CangJiGaoDeGuoMiaoHei.woff new file mode 100644 index 0000000..bfe634d Binary files /dev/null and b/CangJiGaoDeGuoMiaoHei.woff differ diff --git a/README.md b/README.md index 115c38a..987ae4c 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ # Project-ALLA-UI-Design -ALLA的UI设计，同时提供css样式和psd样式 -使用CCO协议开源 +ALLA的UI设计，同时提供css样式和psd样式。 +使用CCO协议开源。 + +# 使用 +你可以在网页上引用css，或者使用psd文件进行自由创作。 +查看view.html来演示效果。 \ No newline at end of file diff --git a/button-normal.html b/button-normal.html new file mode 100644 index 0000000..6b5d35e --- /dev/null +++ b/button-normal.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + +


Normal


+
+
+ Button#1 +
+
+


Press


+
+
+ Button#2 +
+
+ + \ No newline at end of file diff --git a/main-menu-style.css b/main-menu-style.css new file mode 100644 index 0000000..4893043 --- /dev/null +++ b/main-menu-style.css @@ -0,0 +1,54 @@ +/* 主页UI */ +/* 四个斜方块 */ + +.box { + margin-left: auto; + margin-top: auto; + margin-bottom: auto; + margin-right: auto; + border: 80px; + border-radius: 10%; + width: 80px; + height: 80px; + border-color: #C0B0FF; + border-width: 1px; + border-style: solid; + display: flex; + align-items: center; + justify-content: center; + transform: rotate(45deg); + box-shadow: 0px 0px 2px 2px #CABDFF; + background-color: rgba(192, 176, 255, 0.3); +} + +.box_text { + font-size: large; + transform: rotate(-45deg); + color: #8F8F8F; +} + +.box_press { + margin-left: auto; + margin-top: auto; + margin-bottom: auto; + margin-right: auto; + border: 80px; + border-radius: 10%; + width: 80px; + height: 80px; + border-color: #C0B0FF; + border-width: 1px; + border-style: solid; + display: flex; + align-items: center; + justify-content: center; + transform: rotate(45deg); + box-shadow: 0px 0px 2px 2px #CABDFF; + background-color: rgba(138, 110, 250, 0.3); +} + +.box_text_press { + font-size: large; + transform: rotate(-45deg); + color: #555555; +} \ No newline at end of file diff --git a/main-menu-style.psd b/main-menu-style.psd new file mode 100644 index 0000000..e69de29 diff --git a/setting.css b/setting.css new file mode 100644 index 0000000..dec8c25 --- /dev/null +++ b/setting.css @@ -0,0 +1,52 @@ +.star { + position: absolute; + top: 0; + right: 0; + width: 20px; + height: auto; + margin-top: -8%; + margin-right: -9%; + z-index: 10; + transform: rotate(25deg); + stroke: #c0b0ff; + stroke-width: 5px; + fill: #fcfcfc; +} + +.star_press { + position: absolute; + top: 0; + right: 0; + width: 20px; + height: auto; + margin-top: -15%; + margin-right: 32%; + z-index: 10; + transform: rotate(25deg); + stroke: #c0b0ff; + stroke-width: 5px; + fill: #fcfcfc; +} + +.setting_button { + position: relative; + padding: 6px 15px; + font-weight: 400; + font-size: 14px; + text-align: center; + vertical-align: middle; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; + white-space: nowrap; + line-height: 1.5; + transition: color .3s ease, background-color .3s ease, border .3s ease; + box-sizing: border-box; + color: #8f8f8f; + background-color: #fcfcfc; + border-color: #c0b0ff; + margin-left: 40%; + margin-top: auto; + margin-bottom: auto; + margin-right: 40%; +} \ No newline at end of file diff --git a/view.css b/view.css new file mode 100644 index 0000000..a2d3c80 --- /dev/null +++ b/view.css @@ -0,0 +1,75 @@ +/* 这个样式只是为了让展示页好看，没什么大用的 */ + +@font-face { + font-family: 'Font1'; + src: url(CangJiGaoDeGuoMiaoHei.woff); +} + +* { + margin: 0; + padding: 0; +} + +.topbar { + height: 40px; + font-size: 12px; + border: 2px solid white; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: rgb(255, 255, 255); +} + +.topbar li { + display: inline; + color: rgb(0, 0, 0); + margin-right: 13px; + font-size: large; + font-family:Font1; +} + +.topbar ul { + display: inline-block; + line-height: 38px; +} + +.topbar-right { + position: absolute; + right: 10%; + +} + +.topbar-left { + margin-left: 10%; +} + +a{ + text-decoration: none; + color: black; +} + +h1 { + border: 2px solid white; + border-radius: 5px; + margin-top: 2%; + margin-right: 10%; + margin-bottom: auto; + margin-left: 10%; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: rgb(255, 255, 255); + font-family: Font1; +} + +p { + border: 2px solid white; + border-radius: 5px; + margin-top: auto; + margin-right: 10%; + margin-bottom: auto; + margin-left: 10%; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: rgb(255, 255, 255); + font-family: Font1; +} + +body { + background-image: linear-gradient(45deg, transparent 0%, transparent 55%, rgba(64, 64, 64, 0.04) 55%, rgba(64, 64, 64, 0.04) 76%, transparent 76%, transparent 100%), linear-gradient(135deg, transparent 0%, transparent 14%, rgba(64, 64, 64, 0.04) 14%, rgba(64, 64, 64, 0.04) 41%, transparent 41%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 2%, rgba(64, 64, 64, 0.04) 2%, rgba(64, 64, 64, 0.04) 18%, transparent 18%, transparent 100%), linear-gradient(135deg, transparent 0%, transparent 61%, rgba(64, 64, 64, 0.04) 61%, rgba(64, 64, 64, 0.04) 71%, transparent 71%, transparent 100%), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255)); +} \ No newline at end of file diff --git a/view.html b/view.html new file mode 100644 index 0000000..29c8157 --- /dev/null +++ b/view.html @@ -0,0 +1,65 @@ + + + + + + + + View UI Design + + + + + + + + + + +
+ + +
+

+ 主页UI-按钮 +

+

+
+
+ Button#1 +
+
+

+
+
+ Button#2 +
+
+

+

+ 设置页UI-按钮 +

+

+
+ + + + + awa +
+

+ + + \ No newline at end of file