前端界面大改符合本世紀初的特色

deploy
DESKTOP-4RNDQIC\29019 2019-11-09 17:14:29 +08:00
parent a014838bb3
commit af1ee04e35
2 changed files with 49 additions and 45 deletions

View File

@ -29,11 +29,11 @@
bottom: auto; bottom: auto;
left: 0px; left: 0px;
right: 0px; right: 0px;
width: 1280px; width: 100%;
height: 50px; height: 80px;
z-index: 0; z-index: 0;
padding: 24px 0px 0px 0px; padding: 24px 0px 0px 0px;
background: #0b58a2; background: #20375f;
border: 1px solid rgb(187, 187, 187); border: 1px solid rgb(187, 187, 187);
overflow: auto; overflow: auto;
display: block; display: block;
@ -58,41 +58,34 @@
display: block; display: block;
position:absolute; position:absolute;
left:50%; left:50%;
margin-left: -640px; margin-left: -50%;
top:74px; top:104px;
width:1280px; width:100%;
height: 860px; height:auto!important;
margin-top: 3px; min-height:600px;
} }
#footer{ #footer{
position: absolute;
bottom: 0px; bottom: 0px;
background: #FFFDFF; background: #FFFDFF;
left:50%; left:35%;
top: 940px;
margin-left: -400px;
width: 800px;
height: 50px; height: 50px;
} }
#container #left{ #container #left{
border: #0b93d5 solid 1px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
width:240px; width: 14%;
height: 860px; height: auto;
background: #0b58a2; background: #d9d6cb;
} }
#container #right{ #container #right{
vertical-align:top; vertical-align:top;
top: 0px; top: 0px;
display: inline-block; display: inline-block;
width: 1024px; width: 85%;
height: 860px; height: auto;
float: top; float: top;
border: #0b93d5 solid 1px;
border-radius: 1px;
} }
ul li a{ ul li a{
color: white; color: white;
@ -134,7 +127,7 @@ ul li a{
<div id="right" style="overflow:hidden"> <div id="right" style="overflow:hidden">
{% if index == true %} {% if index == true %}
{% for doc in docs %} {% for doc in docs %}
<div style="width: 1024px; height: 160px; border-bottom: #0b58a2 solid 2px ;margin: 5px 5px 5px 0px; overflow:hidden;padding-bottom: 4px;"> <div style="width: 100%; height: 160px; margin: 5px 5px 5px 0px; overflow:hidden;padding-bottom: 4px;">
<div class="title" style="font-size: 12px;font-weight: bold"> <div class="title" style="font-size: 12px;font-weight: bold">
<p style="display: inline;margin-left: 5px;">2019-08-04 </p> <p style="display: inline;margin-left: 5px;">2019-08-04 </p>
{% if debug == true %} {% if debug == true %}
@ -152,13 +145,13 @@ ul li a{
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% if article == true %} {% if article == true %}
<div style="width: 1024px; height: 100%; border-bottom: #0b58a2 solid 1px ;margin: 5px 5px 5px 5px;"> <div style="width: 100%; height: 100%; margin: 5px 5px 5px 5px;">
<p style="display: block;font-size: 16px;text-align: center;font-family: 黑体;"> <p style="display: block;font-size: 20px ; font-family: 宋体 bold ;text-align: center;font-family: 黑体;">
<br>{{ title }}</br> <br>{{ title }}</br>
</p> </p>
<div style="width: 1024px;height: 800px; <div style="width: 100%;height: auto;
display: block;font-size: 14px;text-align: left; display: block;font-size: 16px;text-align: left;
font-family: 'Droid Sans Mono'; word-break: break-all; word-wrap:break-word;overflow-y: scroll"> word-break: break-all; word-wrap:break-word;">
{{ content | raw}} {{ content | raw}}
</div> </div>
</div> </div>
@ -168,6 +161,11 @@ ul li a{
style="width: 300px;height: 420px;margin-left: 25%;"> style="width: 300px;height: 420px;margin-left: 25%;">
{% endif %} {% endif %}
</div> </div>
<div id="footer">
<p style="font-size: 5px;margin: auto;width: 250px;text-align: center">个人网站,备案号: 闽ICP备19002644号-1</p>
<p style="font-size: 5px;margin: auto;width: 150px;text-align: center">testingcloud.club</p>
<p style="font-size: 5px;margin: auto;width: 150px;text-align: center">联系方式290198252@qq.com</p>
</div>
</div> </div>
<script type="text/javascript" async> <script type="text/javascript" async>
setTimeout( function(){ setTimeout( function(){
@ -177,9 +175,5 @@ ul li a{
console.log({{type}}); console.log({{type}});
},400); },400);
</script> </script>
<div id="footer">
<p style="font-size: 5px;margin: auto;width: 250px;text-align: center">个人网站,备案号: 闽ICP备19002644号-1</p>
<p style="font-size: 5px;margin: auto;width: 150px;text-align: center">testingcloud.club</p>
<p style="font-size: 5px;margin: auto;width: 150px;text-align: center">联系方式290198252@qq.com</p>
</div>
</body> </body>

View File

@ -1,60 +1,70 @@
.navMenuBox { .navMenuBox {
overflow: hidden; overflow: hidden;
background: #eee;
color: lightgrey;
} }
ul.navMenu{ ul.navMenu{
overflow: hidden; overflow: hidden;
padding-left: 0px; padding-left: 0px;
background: #eee;
} }
/*去掉默认样式*/ /*去掉默认样式*/
.navMenuBox ul, .navMenuBox ul,
.navMenuBox li { .navMenuBox li {
width: 240px; width: 100%;
list-style: none; list-style: none;
padding: 0px; padding: 0px;
margin: 2px; margin-top: 2px;
overflow: hidden; overflow: hidden;
color: lightgrey;
line-height: 50px;
} }
.navMenu>li>a { .navMenu>li>a {
text-align: center; text-align: center;
display: block; display: block;
line-height: 40px; line-height: 40px;
font-size: 16px;
text-decoration: none; text-decoration: none;
color: #ffffff; color: lightgrey;
border-top: 1px solid #222932; font: bold 16px "宋体" ;
background: #0a0a0a;
line-height: 50px;
} }
.navMenu>li.active>a, .navMenu>li.active>a,
.navMenu>li>a:hover, .navMenu>li>a:hover,
.subMenu>li.active>a, .subMenu>li.active>a,
.subMenu>li>a:hover { .subMenu>li>a:hover {
color: #f5f8f9; color: #0b3e6f;
cursor:default; cursor:default;
width: 240px; width: 100%;
} }
.subMenu>li>a { .subMenu>li>a {
text-align: center; text-align: center;
display: block; display: block;
line-height: 36px; line-height: 30px;
font-size: 13px;
text-decoration: none; text-decoration: none;
color: #ffffff; color: #0a0a0a;
font-size: 16px;
font-family: "宋体";
} }
ul.subMenu { ul.subMenu {
margin-top: 8px; margin-top: 8px;
padding-bottom: 5px; padding-bottom: 5px;
width: 240px; width: 100%;
} }
.subMenu>li>a { .subMenu>li>a {
padding-left: 0px; padding-left: 0px;
padding-right: 30px; padding-right: 30px;
width: 240px; width: 100%;
} }
a #arrow{ a #arrow{
@ -62,7 +72,7 @@ a #arrow{
float: right; float: right;
margin-right: 15px; margin-right: 15px;
font-size: 25px; font-size: 25px;
line-height: 40px; line-height: 60px;
font-weight: 300; font-weight: 300;
text-shadow: none; text-shadow: none;
width: 200px; width: 200px;