本代码用基础的html代码和css代码构成了一个简易博客页面
<!--more-->
html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>博客示例</title>
<link rel="stylesheet" href="c1.css">
</head>
<body>
<div class="flu">
<!--导航栏开始-->
<div class="nav-top">
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">标签</a></li>
<li><a href="">分类</a></li>
<li><a href="">归档</a></li>
</ul>
</div>
<div class="register">
<a href="">注册</a>
<a href="">登录</a>
</div>
</div>
<!--导航栏结束-->
<!--左边栏开始-->
<div class="left">
<!--头像-->
<div class="head">
<img src="https://img04.sogoucdn.com/app/a/100520093/d71a6360ba8601ff-3cc95dbc4e7ef3af-e99d542fe510b8af4215157258d88b3b.jpg" alt="">
</div>
<!--头像-->
<!--主标题-->
<div class="title"><h1>小强的狗窝</h1></div>
<!--主标题-->
<!--副标题-->
<div class="subtitle">这条狗很懒，什么都没有留下。</div>
<!--副标题-->
<!--栏目-->
<div class="categeroy">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">关于你</a></li>
<li><a href="">关于他</a></li>
</ul>
</div>
<!--栏目-->
<!--标签-->
<div class="tags">
<ul>
<li><a href="">JS</a></li>
<li><a href="">CSS</a></li>
<li><a href="">HTML</a></li>
</ul>
</div>
<!--标签-->
</div>
<!--左边栏结束-->
<!--右边栏开始-->
<div class="right">
<!--文章列表开始-->
<div class="artic-list">
<div class="artic">
<p class="head-title">海燕</p>
<p class="head-date">2019-04-08</p>
<p class="content-arc">在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
一会儿翅膀碰着波浪，一会儿箭一般地直冲向乌云，它叫喊着，──就在这鸟儿勇敢的叫喊声里，乌云听出了欢乐。</p>
<div class="tag-div">
<p class="tag-arc"><a href="">#HTML</a></p>
<p class="tag-arc"><a href="">#CSS</a></p>
</div>
</div>
<div class="artic">
<p class="head-title">海燕</p>
<p class="head-date">2019-04-08</p>
<p class="content-arc">在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
一会儿翅膀碰着波浪，一会儿箭一般地直冲向乌云，它叫喊着，──就在这鸟儿勇敢的叫喊声里，乌云听出了欢乐。</p>
<div class="tag-div">
<p class="tag-arc"><a href="">#HTML</a></p>
<p class="tag-arc"><a href="">#CSS</a></p>
</div>
</div>
<div class="artic">
<p class="head-title">海燕</p>
<p class="head-date">2019-04-08</p>
<p class="content-arc">在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
一会儿翅膀碰着波浪，一会儿箭一般地直冲向乌云，它叫喊着，──就在这鸟儿勇敢的叫喊声里，乌云听出了欢乐。</p>
<div class="tag-div">
<p class="tag-arc"><a href="">#HTML</a></p>
<p class="tag-arc"><a href="">#CSS</a></p>
</div>
</div>
</div>
<!--文章列表结束-->
</div>
<!--右边栏结束-->
</div>
</body>
</html>css代码
以下是html文件中引用的css代码
* {
margin:0;
padding:0;
}
.left {
height: 1000px;
width: 29%;
border: 1px solid black;
background-color: #3f3a3a;
margin-top: 50px;
float: left;
}
.head {
margin: 20px auto;
height: 150px;
width: 150px;
border: 2px solid white;
border-radius: 50%;
overflow: hidden;
}
.head>img {
max-width: 100%;
}
.title {
margin: 0 auto;
color: white;
}
.title>h1 {
text-align: center;
color: white;
}
.subtitle {
margin: 10px 30px;
color: white;
text-align: center;
border: 1px solid white;
padding: 5px;
}
.categeroy,
.tags{
text-align: center;
margin-top: 30px;
}
.categeroy a,
.tags a {
color: white;
text-decoration: none;
}
.categeroy ul,
.tags ul{
list-style-type: none;
}
.categeroy ul li,
.tags ul li{
padding: 5px 80px;
}
.tags a:before{
content: "#";
}
.right {
height: 1000px;
width: 70%;
background-color: rgba(128, 128, 128, 0.5);
margin-top: 50px;
float: right;
}
.artic-list {
margin-top: -30px;
margin-left: 30px;
margin-right: 80px;
}
.artic {
background-color: white;
margin-top: 40px;
padding: 20px;
border: 1px solid white;
border-radius: 10px;
}
.head-title {
font-size: 20px;
font-weight: bold;
border-left: 3px solid red;
padding: 5px;
float: left;
}
.head-date {
float: right;
}
.content-arc {
text-indent: 32px;
padding-top: 5px;
padding-bottom: 10px;
clear: both;
border-bottom: 1px solid gray;
}
.content-arc:before{
content: "";
}
.tag-arc {
display: inline;
padding-right: 10px;
}
.tag-arc a {
text-decoration: none;
color: black;
}
.tag-div {
margin-top: 10px;
}
.nav-top {
height: 50px;
width: 100%;
background-color: black;
position: fixed;
}
.nav {
margin-top: 15px;
margin-left: 25px;
float: left;
}
.nav ul {
list-style-type: none;
}
.nav ul li,
.register a
{
display: inline;
padding: 15px;
}
.nav ul li a,
.register a {
color: white;
text-decoration: none;
}
.register {
margin-top: 15px;
margin-right: 90px;
float: right;
}
.nav ul li a:hover,
.register a:hover {
color: gray;
}
