初学HTML+CSS练习搭建个人博客笔记

疯狂的沙粒

已于 2022-08-03 12:24:03 修改

阅读量2.4w

点赞数 48

CC 4.0 BY-SA版权

分类专栏： # Android 进阶文章标签： html css

于 2017-10-13 18:00:15 首次发布

本文链接：https://blog.csdn.net/huang3513/article/details/78229011

Android 进阶专栏收录该内容

97 篇文章

订阅专栏

本文分享了使用HTML和CSS构建个人博客的经验，包括页面布局、样式设置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前言

工作需求初学html+css的使用，在网上看视频学着写了一个个人博客

在这边只是做一下自己的学习笔记记录，如果对你有帮助，你就稍微看看，如果没有请忽略！

2.下面上html代码：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="main.css">
 </head>
 <body>
 	<div class="main-wrapper">
	<header>
		<nav>
			<!-- <li class="logo"><a href="#">黄墨一</a></li>
			<ul>
				<li><a href="#" class="active">首页</a></li>
				<li><a href="#">精品博客</a></li>
				<li><a href="#">微博</a></li>
				<li><a href="#">留言</a></li>
			</ul> -->
		</nav>
		<div id="banner">
			<div class="inner">
				<h1>黄墨一</h1>
				<p class="sub-heading">围观其实也是一种态度，你觉得呢？</p>
				 <button class="main-btn">了解我</button>
				 <!-- <div class="more">
				 	更多
				 </div> -->
			</div>
		</div>
	</header>

	<div class="content"><!--内容开始-->
		<section class="green-section">
			<div class="wrapper">
				<div>
					<h2>一个标题</h2>
					<div class="hr"></div>
					<p class="sub-heading">lorem ipsum dolor sit amet, 
					consectetur adipisicing elit.</p>
				</div>
				<div class="icon-group">
					<span class="icon">item1</span>
					<span class="icon">item2</span>
					<span class="icon">item3</span>
				</div>
			</div>
		</section>
		<section class="gray-section">

			<div class="article-preview">
			<div class="img-section">
					<img src="img/icon1.png" alt=""></div>
				<div class="text-section">
					<h2>又一个标题</h2>
					<div class="sub-heading">我是副标题你好</div>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>
				
				</div>

			<div class="article-preview">
				
				<div class="text-section">
					<h2>又一个标题</h2>
					<div class="sub-heading">我是副标题你好</div>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>

				<div class="img-section">
					<img src="img/icon2.png" alt="">
				</div>
				
			</div>

			<div class="article-preview">
				<div class="img-section">
					<img src="img/icon3.png" alt="">
				</div>
				<div class="text-section">
					<h2>又一个标题</h2>
					<div class="sub-heading">我是副标题你好</div>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>
			</div>
		</section>

		<section class="purple-section">
		<div class="wrapper">
			<div class="heading-wrspper">
				<h2>又是一个标题</h2>
				<div class="hr"></div>
				<div class="sub-heading">
					Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				</div>
			</div>
			<div class="card-group
			clearfix">
				<div class="card">
					<h3>标题三</h3>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>
				<div class="card">
					<h3>标题三</h3>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>
			</div>

			<div class="card-group
			clearfix">
				<div class="card">
					<h3>标题三</h3>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>
				<div class="card">
					<h3>标题三</h3>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>
			</div>

			<div class="card-group
			clearfix">
				<div class="card">
					<h3>标题三</h3>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>
				<div class="card">
					<h3>标题三</h3>
					<p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
				</div>
			</div>
		</div>
		</section>
	</div><!--内容结束-->

	<footer><!--页脚开始-->	
		<ul class="share-group">
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
			<li>item4</li>
			<li>item5</li>
		</ul>

		<div class="copy">
			&copy 黄墨一-2017
		</div>
	</footer><!--页脚结束-->
	</div>
	</body>
</html>

这里写图片描述

3.然后就是对应css代码：

.clearfix:after
{
	content: '';
	display: block;
	clear: both;
}

ul
{
	margin: 0;
}

header
{
	background: rgba(0,0,0,0.4);
}


nav{
	background: transparent;
	height: 50px;
}
#banner{
	background: transparent;
	height: 700px;
}

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: #fff;
}

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: #fff;
}

button
{
	border: none;
	background: #089DB0;
	color: #eee;
}

#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: #079494;
	width: 60%;
}

.green-section .icon-group .icon
{
	display: inline-block;
	width: 80px;
	height: 80px;
	border: 1px solid  #0D6F7C;
	transform: rotate(45deg);
	margin: 30px;
}

.icon-group
{
	margin-top: 60px;
}

.wrapper
{
	max-width: 1080px;
	margin: 0 auto;
}

.gray-section
{
	background: #252F34;
	color: #fff;
}

.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(255,255,255,0.05);
}

.article-preview:after
{
	content: '';
	display: block;
	clear: both;
}

.text-section
{
	position: relative;
	top: 68px;
	left: 50px;
}

.text-section h2
{
	margin-bottom: 20px;
}

.text-section .sub-heading
{
	font-size: 22px;
	margin-top: 0;
}

.text-section p
{
	font-size: 18px;
	letter-spacing: 1px;
}

.text-section > *{
	max-width: 90%;
}

.purple-section
{
	padding: 80px;
	background: #3F3965;
	color: #fff;
}

.purple-section .heading-wrapper
{
	text-align: center;
}

.purple-section .hr
{
	background: #373259;
	width: 100%;
}

.card
{
	float: left;
	width: 50%;
	min-height: 300px;
	padding: 50px;
	-webkit-box-sizing:border-box;
	-mon-box-sizing:border-box;
	box-sizing:border-box;
	/*border: 1px solid white;*/
}

.card:first-child
{
	background: rgba(0,0,0,0.04);
}

.card:nth-child(2)
{
	background: rgba(0,0,0,0.08);
}

.card:nth-child(3)
{
	background: rgba(0,0,0,0.12);
}

.card:nth-child(4)
{
	background: rgba(0,0,0,0.16);
}

.card:nth-child(5)
{
	background: rgba(0,0,0,0.20);
}

.card:nth-child(6)
{
	background: rgba(0,0,0,0.24);
}


footer
{
	background: #333;
	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: #444 url(img/icon04.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}