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>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。

@ 2020.5.14

如何快速搭建一个博客园风格的界面？只需两个文件，很多行代码就可搞定噢

下面带你一起来山寨DIY吧

1、思路

html

1、新建html 文件，用注释标注代码块

2、先用 div 划定区域——左栏 右栏

3、使用html 占位，再调节样式

为标签添加 id / class 属性

CSS

1、新建CSS文件，使用注释标注区域

2、先写万金油

3、按照html 的划分，逐一添加样式（选择器的使用，从基础选择器到复杂选择器）

4、调试运行，修改样式

2、实现效果

3、具体代码

2、先用 div 划定区域——左栏右栏

　　为标签添加 id / class 属性