console
<!DOCTYPE html>
<title>个人博客网站</title>
<style>
body{
margin:15px auto;
font-family:Arial,sans-serif;
width:960px;
}
p{
margin:0 0 20px 0;
}
p,li{
line-height:20px;
}
#page_header{
width:100%;
}
#page_header > nav > ul,#page_footer > nav > ul{
list-style:none;
margin:0;
padding:0;
}
#page_header > nav > ul > li,#page_footer > nav > ul >li{
margin:0 20px 0 0;
padding:0;
display:inline;
}
#posts{
float:left;
width:74%;
}
#posts aside{
float:right;
font-size:20px;
line-height:40px;
margin-left:5%;
width:35%;
}
#sidebar{
float:left;
width:25%;
}
#page_footer{
clear:both;
display:block;
text-align:center;
width:100%;
}
</style>
<header id="page_header">
<h1>个人博客网站</h1>
<img src="http://dl.image.so.com/d?imgurl=http%3A%2F%2Fr.bstatic.com%2Fimages%2Fhotel%2Fmax1280x900%2F123%2F123517744.jpg&purl=http%3A%2F%2Fimage.so.com%2F%3Fsrc%3Ddl.image&key=e752057a20"width="180" height="180">
<nav>
<ul>
<li><a href="http://jsrun.net/LnfKp">我的精彩电影</a>
<li><a href="http://jsrun.net/UJfKp">我的豆瓣主页</a>
<li><a href="https://user.qzone.qq.com/2876220667/main">我的QQ空间</a>
<li><a href="https://baike.baidu.com/item/刘德华/114923?fr=aladdin">我的偶像刘德华</a>
</nav>
</header>
<section id="posts">
<article class="post">
<header>
<h2>我的music</h2>
<p>Itod
<time datetime="2019-04-17">2020-06-27</time>
</header>
<aside>
<p><a href="https://music.163.com/#/song?id=1344897943&market=baiduqk">网易云音乐
</aside>
<br>
<img src="http://dl.image.so.com/d?imgurl=http%3A%2F%2Fpic.ik123.com%2Fuploads%2Fallimg%2F160729%2F4-160H91G957.jpg&purl=http%3A%2F%2Fimage.so.com%2F%3Fsrc%3Ddl.image&key=6c608e8241" alt="你是人间的四月天" width="250" height="250"/>
</br>
<p>歌曲：你是人间的四月天
<footer>
<p><a href="#">7.6w评论</a>
</article>
</section>
<section id="sidebar">
<nav>
<h3>My 博客</h3>
<ul>
<li><a href="#">我的喜欢</a>
<li><a href="#">我的音乐</a>
<li><a href="#">我的电影</a>
<li><a href="#">我的空间</a>
</nav>
</section>
<footer id="page_footer">
<p>转身已逝去
<ul>
<a href="#">我的兴趣</a>
<a href="#">我的个人</a>
<a href="#">我的日记</a>
<a href="#">我的邮箱</a>
</ul>
<nav>
<ul>
<li><a href="#">主页</a>
<li><a href="#">关于</a>
<li><a href="#">语录</a>
<li><a href="#">隐私</a>
</footer>
————————————————
版权声明：本文为Chen_博主「Chen」的原创文章！！！
.clearfix:after
{
content: '';
display: block;
clear: both;
}
ul
{
margin: 0;
}
header
{
background: rgba(12, 219, 40, 0.4);
}
nav{
background: transparent;
height: 10px;
}
#banner{
background: transparent;
height: 600px;
}
nav ul{
list-style: none;
margin: 0;
float: right;
}
nav ul li, nav .logo
{
display: inline-block;
line-height: 50px;
margin: 5px;
}
nav ul li a{
line-height: 50px;
text-decoration: none;
display: inline-block;
height: inherit;
color: rgb(206, 187, 14);
}
nav ul li.logo{
float: left;
padding: 10px;
}
#banner .inner
{
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 160px;
}
#banner .inner h1
{
margin: 0;
color: rgb(23, 110, 241);
}
button
{
border: none;
background: #089DB0;
color: rgb(179, 31, 31);
}
#banner button
{
padding: 14px 60px;
}
#banner .inner .more
{
margin-top: 280px;
color: #fff;
}
.sub-heading
{
line-height: 30px;
margin: 30px 0;
color: #fff;
}
.logo
{
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.logo a
{
color: #fff;
}
h2
{
font-size: 30px;
}
h3
{
font-size: 24px;
}
p
{
font-size: 18px;
letter-spacing: 1px;
}
.hr
{
width: 100%;
height: 2px;
margin: 0 auto;
margin: 20px auto;
}
.sub-heading
{
font-size: 18px;
}
#main-btn
{
padding: 14px 28px;
font-size: 20px;
letter-spacing: 4px;
border-collapse: 6px;
background: #18a;
}
.green-section
{
background: #089DB0;
color: #fff;
text-align: center;
padding: 100px 0px;
}
.green-section .hr
{
background: #5af5f5;
width: 60%;
}
.green-section .icon-group .icon
{
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid rgb(62, 231, 253);
transform: rotate(45deg);
margin: 30px;
}
.icon-group
{
margin-top: 60px;
}
.wrapper
{
max-width: 1080px;
margin: 0 auto;
}
.gray-section
{
background: rgb(18, 143, 206);
color: rgb(150, 235, 13);
}
.gray-section .img-section
{
width: 45%;
margin: 0;
}
.img-section img
{
width: 100%
}
.gray-section .text-section
{
width: 55%;
}
.article-preview > div
{
float: left;
font-size: 0;
}
.article-preview:nth-child(odd)
{
background-color: rgba(8, 180, 80, 0.05);
}
.article-preview:after
{
content: '';
display: block;
clear: both;
}
.text-section
{
position: relative;
top: 58px;
left: 40px;
}
.text-section h2
{
margin-bottom: 20px;
}
.text-section .sub-heading
{
font-size: 22px;
margin-top: 0;
}
.text-section p
{
font-size: 15px;
letter-spacing: 1px;
}
.text-section > *{
max-width: 75%;
}
.purple-section
{
padding: 60px;
background: rgba(35, 9, 206, 0.719);
color: #fff;
}
.purple-section .heading-wrapper
{
text-align: center;
}
.purple-section .hr
{
background: #290de0;
width: 100%;
}
.card
{
float: left;
width: 30%;
min-height: 180px;
padding: 30px;
-webkit-box-sizing:border-box;
-mon-box-sizing:border-box;
box-sizing:border-box;
}
.card:first-child
{
background: rgba(201, 37, 37, 0.04);
}
.card:nth-child(2)
{
background: rgba(196, 21, 21, 0.08);
}
.card:nth-child(3)
{
background: rgba(160, 31, 31, 0.12);
}
.card:nth-child(4)
{
background: rgba(206, 20, 20, 0.16);
}
.card:nth-child(5)
{
background: rgba(211, 40, 40, 0.2);
}
.card:nth-child(6)
{
background: rgba(64, 137, 233, 0.24));
}
footer
{
background: rgb(238, 203, 238);
color: #fff;
text-align: center;
min-height: 200px
}
ul.share-group
{
display: block;
width: 1080px;
margin: 0 auto;
padding: 50px;
}
.share-group li
{
display: inline-block;
padding: 10px;
}
.copy
{
padding-bottom: 30px;
}
.main-wrapper
{
background: rgb(115, 235, 189) url(img/icon04.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}