简易博客搭建(html与css学习)(静态网页)

成品图如下:
简易博客搭建(html与css学习)(静态网页)_第1张图片
本页代码:

<! doctype html>
<html>
	<head lang="zh-CN">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<!--视窗,宽度默认设备宽度,开始缩放1-->
		<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css">
		<!---标准格式-->
		<link rel="stylesheet" href="text.css">
		<title>我的博客</title>
	</head>
	<body>
		<div class="side-bar">
			<div class="header">
				<a href="./index.html" class="logo">我的博客</a>
				<p class="intro">她说这是有意义的,能给世界带来欢笑。</p>
			</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"></a>
				<a href="#",class="item"></a>
				<a href="#",class="item"></a>
			</div>
		</div>
		<div class="main">
			<div class="article-list">
				<div class="item">
					<div class="title"><a href="article1.html">Java基本知识</a></div>
					<div class="status">发表于2020/3/4|阅读量:0|标签:Java</div>
					<div class="content"> 
					1、JVM、JRE和JDK的区别:<br> 
JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性。 
java语言是跨平台,jvm不是跨平台的。<br>
JRE(Java Runtime Environment):java的运行环境,包括jvm+java的核心类库。<br>  
JDK(Java Development Kit):java的开发工具,包括jre+开发工具 
					</div>
				</div>
				<div class="item">
					<div class="title"><a href="article2.html">Java面向对象</a></div>
					<div class="status">发表于2020/3/4|阅读量:0|标签:Java</div>
					<div class="content"> 
					1、面向对象思想:<br>  
(1)概述:面向对象是相对于面向过程而言的,面向过程强调的是功能,面向对象强调的是将功能封装进对象, 
强调具备功能的对象; 
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

css代码:

body{
     
	background:rgba(30,20,30,0.5);
	line-height:2;
}
a,body{
     
	color:#eee;
}
a{
     
	text-decoration:none;
}
.side-bar{
     
	float:left;/*向左浮动*/
	width:20%;/*控制侧栏宽度*/
	position:fixed;
}
.side-bar>*{
     
	padding:10px 20px;
}
.side-bar .nav a,
.side-bar .tag-list a{
     
	display:block;
	padding:5px;
	color:#444;
}
.side-bar .nav a:hover,
.side-bar .tag-list a:hover{
     
	color:#eee;
}/*伪类,当鼠标划到时显示颜色#eee*/
.side-bar .nav a,{
     
	font-weight:700;
}
.main{
     
	float:right;
	width:80%;
	color:#555;
}
.article-list{
     
	margin-right:30%;
	background:#fff;
	padding:20px 30px;
}
.header .logo{
     
	line-height:1;
	border:5px solid #eee;/*边框*/
	padding:10px,20px;/*内边距*/
	font-size:30px;
	display:inline-table;
	margin-bottom:10px;/*margin 控制外边距*/
}
.article-list .item{
     
	margin-bottom:24px;
}
.article-list .item>*{
     
	margin:10px 0;
}
.status{
     
	font-size:14px;
	color:#ccc;
}
.title a{
     
	font-size:40px;
	color:black;
}

你可能感兴趣的:(html,css)