Web_6 极简博客开发(2)
2020-01-11 本文已影响0人
kerooooo
1 index.html
<!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>王花花</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./normalize.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!--侧边-->
<div class="side-bar">
<div class="header">
<a href="simpleBlog.html" class="logo">王花花</a>
<div class="intro">我是王花花</div>
</div>
<div class="nav">
<a href="#" class="item">关于我</a>
<a href="#" class="item">联系我</a>
<a href="#" class="item">关注我</a>
</div>
<div class="tag-list">
<a href="#" class="item"># Scratch</a>
<a href="#" class="item"># 前端</a>
<a href="#" class="item"># php</a>
</div>
</div>
<div class="main">
<div class="article-list">
<div class="item">
<a href="./article1.html" class="title">One Day</a>
<div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
<div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
</div>
</div>
<div class="line"></div>
<div class="item">
<a href="./article1.html" class="title">One Day</a>
<div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
<div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
</div>
</div>
<div class="line"></div>
<div class="item">
<a href="./article1.html" class="title">One Day</a>
<div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
<div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
</div>
</div>
<div class="line"></div>
<div class="item">
<a href="./article1.html" class="title">One Day</a>
<div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
<div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
</div>
</div>
<div class="line"></div>
<div class="item">
<a href="./article1.html" class="title">One Day</a>
<div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
<div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
</div>
</div>
<div class="line"></div>
<div class="item">
<a href="./article1.html" class="title">One Day</a>
<div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
<div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
</div>
</div>
<div class="line"></div>
</div>
</div>
</body>
</html>
2 article1.html
<!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>王花花</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./normalize.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--侧边-->
<div class="side-bar">
<div class="header">
<a href="simpleBlog.html" class="logo">王花花</a>
<div class="intro">我是王花花</div>
</div>
<div class="nav">
<a href="#" class="item">关于我</a>
<a href="#" class="item">联系我</a>
<a href="#" class="item">关注我</a>
</div>
<div class="tag-list">
<a href="#" class="item"># Scratch</a>
<a href="#" class="item"># 前端</a>
<a href="#" class="item"># php</a>
</div>
</div>
<div class="main">
<div class="article">
<h1 class="title">One Day</h1>
<div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto cumque tempora, vitae natus quos molestiae nulla consectetur temporibus dolor officia velit, laudantium nemo odio unde perspiciatis animi ad consequuntur autem.
<br>Sed quis iusto ut, asperiores possimus voluptatem! Illo officiis non magni ipsum ipsam eos quasi libero fugit iste ex. Nostrum eius fugit voluptatem error aut labore accusantium voluptates expedita ratione!
<br>Magni earum velit eum obcaecati quaerat ea nobis voluptatum, commodi excepturi vel architecto officiis similique, quam odit, fugit sapiente voluptatem culpa nemo consequatur. Distinctio corporis dolores iure illum, porro molestiae.
<br>Voluptate odio vitae fuga nam necessitatibus explicabo eveniet corporis. Mollitia id alias veritatis, recusandae asperiores est cumque. Quis, ex dolor! Explicabo fugit ipsum quisquam quibusdam quam magni! Doloribus, ullam similique!
<br>Accusantium beatae, eius impedit minus qui earum inventore ad aliquid dolorum cupiditate, aperiam delectus consectetur exercitationem incidunt maiores vitae eligendi rerum, repudiandae natus. Ipsa eligendi illum accusamus? Quaerat, provident repellat.
<br>Tenetur recusandae dolorem quisquam maiores exercitationem ipsum commodi eaque beatae, amet ad doloremque esse dolorum dicta nostrum. Fuga quae optio ducimus doloremque dolores dicta quis repellat assumenda consectetur? Iste, sed!
<br>Quos doloribus non, rem voluptas deleniti deserunt ea architecto tenetur eius quia quidem placeat, laboriosam aliquid adipisci impedit quasi, aliquam praesentium voluptatum minima et reiciendis accusantium. Omnis eum atque deleniti!
<br>Natus non quisquam accusantium excepturi perspiciatis ratione ipsum provident fuga, dolores veritatis voluptatum nihil, necessitatibus, accusamus consequatur aliquam eos velit beatae veniam illo porro. Odio cumque labore nihil cupiditate quisquam.
<br>Accusantium beatae, eius impedit minus qui earum inventore ad aliquid dolorum cupiditate, aperiam delectus consectetur exercitationem incidunt maiores vitae eligendi rerum, repudiandae natus. Ipsa eligendi illum accusamus? Quaerat, provident repellat.
<br>Tenetur recusandae dolorem quisquam maiores exercitationem ipsum commodi eaque beatae, amet ad doloremque esse dolorum dicta nostrum. Fuga quae optio ducimus doloremque dolores dicta quis repellat assumenda consectetur? Iste, sed!
<br>Quos doloribus non, rem voluptas deleniti deserunt ea architecto tenetur eius quia quidem placeat, laboriosam aliquid adipisci impedit quasi, aliquam praesentium voluptatum minima et reiciendis accusantium. Omnis eum atque deleniti!
<br>Natus non quisquam accusantium excepturi perspiciatis ratione ipsum provident fuga, dolores veritatis voluptatum nihil, necessitatibus, accusamus consequatur aliquam eos velit beatae veniam illo porro. Odio cumque labore nihil cupiditate quisquam.
</div>
</div>
</div>
</body>
</html>
3 index.css（包含article1.html的样式）
body{
background:#454545;
line-height:1.7;/*用于改变行距*/
}
a{
text-decoration: none;/*无文字装饰：去除下划线*/
}
a,body{
color:#eee;
}
.side-bar{
float:left;
width:20%;
position:fixed;/*侧边栏固定*/
}
.side-bar > *{ /*side-bar 下面的子元素*/
padding:10px 15px;
}
.side-bar .nav a,
.side-bar .tag-list a{
display:block; /*占母元素的整宽*/
padding:8px;
color:#888;
transition: color 200ms;
}
.side-bar .nav a:hover,
.side-bar .tag-list a:hover{
color:#eee;
}
.side-bar .nav a{
font-weight: 700;
}
.main{
float:right;
width:80%;
color:#454545;
}
.header .logo{
margin-bottom:10px;
border:5px solid #eee;
padding:10px 20px;
font-size:30px;
display:inline-block; /*使padding和margin有效 还不占一行*/
line-height:1;
}
.article-list,.article{
background:#fff;
margin-right:30%;
padding:20px 30px;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.article-list .item .title,
.article .title{
font-size:25px;
font-weight: 700;
color:#454545;
}
.article-list .item .status,
.article .status{
font-size:13px;
color:#ccc;
}
.article-list .item > *,
.article > *{
margin:10px 0;
}
.article-list .item{
margin-bottom:20px;
}
.line{
height:2px;
background:#454545;
}
