style
This commit is contained in:
728
@ -20,6 +20,7 @@
|
||||
--color-gray: hsl(0, 0%, 90%);
|
||||
--color-white: hsl(0, 0%, 95%);
|
||||
--interval: 20px;
|
||||
--shadow: 6px;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -33,10 +34,12 @@
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
background: var(--color-black);
|
||||
box-shadow: var(--color-black) 1px 0 var(--shadow);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 50px;
|
||||
text-shadow: var(--color-red) 1px 0 var(--shadow);
|
||||
}
|
||||
|
||||
.left {
|
||||
@ -56,19 +59,49 @@
|
||||
padding: var(--interval);
|
||||
}
|
||||
|
||||
.card {
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
article {
|
||||
background: var(--color-black);
|
||||
padding: var(--interval);
|
||||
margin-top: var(--interval);
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--color-black) 1px 0 var(--shadow);
|
||||
}
|
||||
|
||||
.card .title {
|
||||
header {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
.card .tag {
|
||||
list-style-type: none;
|
||||
header h1,
|
||||
header h2,
|
||||
header h3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header code {
|
||||
font-family: consolas, "Courier New", Courier, monospace;
|
||||
font-size: 20px;
|
||||
background: var(--color-purple);
|
||||
border-radius: 6px;
|
||||
color: var(--color-black);
|
||||
padding: 0.5ch;
|
||||
margin-right: 0.5ch;
|
||||
}
|
||||
|
||||
.tag {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
color: var(--color-yellow);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.tag li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
@ -77,8 +110,9 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.footer {
|
||||
footer {
|
||||
background: var(--color-black);
|
||||
box-shadow: var(--color-black) 1px 0 var(--shadow);
|
||||
text-align: center;
|
||||
padding: var(--interval);
|
||||
margin-top: var(--interval);
|
||||
@ -97,55 +131,75 @@
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>主义主义 活动公示</h1>
|
||||
<p>This is a test.</p>
|
||||
<h1><a href="">主义主义 <span style="color: var(--color-red);">活动</span>公示</a></h1>
|
||||
<p>This is a slogan.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="left">
|
||||
<div class="card">
|
||||
<h2 class="title">TITLE HEADING</h2>
|
||||
<h5 class="tag">Title description, Dec 7, 2017</h5>
|
||||
<div class="noimg" style="height:200px;">Image</div>
|
||||
<p>Some text..</p>
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||||
eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation
|
||||
ullamco.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2 class="title">TITLE HEADING</h2>
|
||||
<h5 class="tag">Title description, Sep 2, 2017</h5>
|
||||
<div class="noimg" style="height:200px;">Image</div>
|
||||
<p>Some text..</p>
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||||
eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation
|
||||
ullamco.</p>
|
||||
</div>
|
||||
<article>
|
||||
<header>
|
||||
<div>
|
||||
<code><a href="#1">#1</a></code>
|
||||
<h1><a href="#1">星星家园扩建</a></h1>
|
||||
</div>
|
||||
<ul class="tag">
|
||||
<li><a href="#活动公示">#活动公示</a></li>
|
||||
<li><a href="#星星家园">#星星家园</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<div>
|
||||
<div class="noimg" style="height:200px;">Image</div>
|
||||
<p>Some text..</p>
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||||
eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation
|
||||
ullamco.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<header>
|
||||
<div>
|
||||
<code><a href="#0">#0</a></code>
|
||||
<h1><a href="#0">网站说明</a></h1>
|
||||
</div>
|
||||
<ul class="tag">
|
||||
<li><a href="#信息公示">#信息公示</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<div>
|
||||
<div class="noimg" style="height:200px;">Image</div>
|
||||
<p>Some text..</p>
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||||
eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation
|
||||
ullamco.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="card">
|
||||
<article>
|
||||
<h3>公示标签</h3>
|
||||
<ul class="tag">
|
||||
<li>#活动公示</li>
|
||||
<li>#信息发布</li>
|
||||
<li>#星星家园</li>
|
||||
<li><a href="#所有公式">#所有公示</a></li>
|
||||
<li><a href="#活动公示">#活动公示</a></li>
|
||||
<li><a href="#活动公示">#信息公示</a></li>
|
||||
<li><a href="#星星家园">#星星家园</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
</article>
|
||||
<article>
|
||||
<h3>相关链接</h3>
|
||||
<p>Some text..</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<footer>
|
||||
<h2>联系方式</h2>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<script src="bind.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user