2020前端练习 —— 超级无敌简易版博客园
@ 2020.5.14
如何快速搭建一个博客园风格的界面？只需两个文件，很多行代码就可搞定噢
下面带你一起来山寨DIY吧
1、思路
html
1、新建html 文件，用注释标注代码块
2、先用 div 划定区域——左栏 右栏
3、使用html 占位，再调节样式
为标签添加 id / class 属性
CSS
1、新建CSS文件，使用注释标注区域
2、先写万金油
3、按照html 的划分，逐一添加样式（选择器的使用，从基础选择器到复杂选择器）
4、调试运行，修改样式
2、实现效果
3、具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>welcomeTo大诚小铺</title>
<link rel="stylesheet" href="博客园样式.css">
</head>
<body>
<!-- 先用div划分布局 -->
<!-- 左侧栏 -->
<div class="blog-left">
<!-- 头像 -->
<div class="blog-image">
<img src="鸢尾花.jpg" alt="鸢尾花呀鸢尾花">
</div>
<div class="blog-title">
<p>
赞 (0)