1. 前言

　　通过使用 html + css 编写一个简易的博客作为入门练习

2. 代码及实现

2.1 目录结构

2.2 代码部分

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/main.css">

    <title>Blogs</title>

</head>

<body>

    <div class="side-bar">

        <div class="header">

            <a href="" class="logo">周杰伦</a>

            <div class="intro">哼哼哈嘿</div>

        </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">HTML</a>

            <a href="#" class="item">CSS</a>

            <a href="#" class="item">JS</a>

        </div>

    </div>

    <div class="main">

        <div class="article-list">

            <div class="item">

                <a href="article.html" class="title">彩虹</a>

                <div class="status">发布于：2019-10-10 | 阅读：3500 | #HTML #CSS</div>

                <div class="content">看不见你的笑，我怎么睡的着.</div>

            </div>

            <div class="item">

                <a href="#" class="title">彩虹</a>

                <div class="status">发布于：2019-10-10 | 阅读：3500 | #HTML #CSS</div>

                <div class="content">看不见你的笑，我怎么睡的着.</div>

            </div>

            <div class="item">

                <a href="#" class="title">彩虹</a>

                <div class="status">发布于：2019-10-10 | 阅读：3500 | #HTML #CSS</div>

                <div class="content">看不见你的笑，我怎么睡的着.</div>

            </div>

        </div>

    </div>

</body>

</html>

index.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/main.css">

    <title>Blogs</title>

</head>

<body>

    <div class="side-bar">

        <div class="header">

            <a href="" class="logo">周杰伦</a>

            <div class="intro">哼哼哈嘿</div>

        </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">HTML</a>

            <a href="#" class="item">CSS</a>

            <a href="#" class="item">JS</a>

        </div>

    </div>

    <div class="main">

            <div class="article">

                <h1 class="title">彩虹</h1>

                <div class="content">

                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquam aspernatur commodi

                        corporis ducimus in inventore iusto laborum libero maxime nemo nobis nostrum omnis perspiciatis

                        quibusdam saepe, sequi tempora velit.

                    </div>

                    <div>Cupiditate dolore est maxime vero? Cum illum minima modi nobis qui reprehenderit sed?

                        Consequatur distinctio eius nam quae vitae! Alias, beatae dolorum enim hic id impedit nobis

                        suscipit temporibus veniam.

                    </div>

                    <div>Ab, architecto aspernatur autem enim fuga maxime odio reiciendis reprehenderit suscipit velit?

                        Itaque labore porro recusandae vel velit. Ad at, dignissimos error illo iusto laboriosam maxime

                        non odit quod voluptatem.

                    </div></div>

            </div>

    </div>

</body>

</html>

article.html

body {

    background-color: #454545;

    line-height: 1.7;

}

body, a {

    color: white;

}

a {

    text-decoration: none;

}

.side-bar {

    float: left;

    width: 20%;

    position: fixed;

}

.main {

    float: right;

    width: 80%;

    color: #454545;

}

.side-bar > * {

    padding: 10px 15px;

}

.side-bar .header .logo {

    line-height:;

    display: inline-block;

    font-size: 30px;

    border: 3px solid white;

    padding: 10px 20px;

    margin-bottom: 10px;

}

.side-bar .nav a,

.side-bar .tag-list a {

    display: block;

    padding: 5px;

    transition: color 200ms;

    color: #666666;

}

.side-bar .nav a:hover,

.side-bar .tag-list a:hover {

    color: #eeeeee;

}

.side-bar .nav a {

    font-weight:;

}

.side-bar .tag-list a:before {

    content: '#';

}

.main .article-list,

.main .article {

    margin-right: 30%;

    background-color: white;

    padding: 20px 30px;

}

.article-list .item {

    margin-bottom: 25px;

}

.article-list .item .title {

    color: #454545;

    font-size: 22px;

    font-weight:;

}

.article-list .item .status {

    color: #cccccc;

    font-size: 13px;

}

.article-list .item > * {

    margin-bottom: 10px;

}

main.css

2.3 展示图

index.html

article.html

3. 总结

通过 简易博客 的练习，总结知识点如下：

1. 在编写 页面的时候，首先应该讲 HTML 布局写出来，也就是应该先架构 HTML 代码部分，HTML 代码部分完成，再进行 CSS 部分的编写。

2. 写 HTML 代码的时候，应该从整体上规划布局，比如 index.html   我第一次看到的时候以为是 三个 div 的 【左 中 右】，其实应该是两个 div 一个背景图而已。

3. CSS 代码中，要总结的知识点比较多，重点总结如下：

a {

    text-decoration: none;

}

text-decoration: none; 取消 a 标签的下划线

display: inline-block;

注意 display 的使用，参考：

http://www.w3school.com.cn/cssref/pr_class_display.asp

transition: color 200ms;

延迟 2 毫秒，这样看起来更加丝滑

.side-bar .nav a:hover

hover 鼠标指针选中时的样式

.side-bar {

    float: left;

    width: 20%;

    position: fixed;

}

float: left;

width: 20%;    

float 一般为 left 和 right ，而且配合 width 使用 left 和 right 加起来 100%

position: fixed 生成绝对定位的元素

position 参考：

http://www.w3school.com.cn/cssref/pr_class_position.asp

border: 3px solid white;    画边框必要属性，solid 为实线

其他还要注意：

padding

margin

应该使用在什么地方比较合适。

简易博客[ html + css ] 练习的更多相关文章

  1. django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务

    上一篇博客介绍了comments库使用及ajax支持,现在blog已经具备了基本的功能,但是只能发表文字,不支持富文本编辑.今天我们利用markdown添加富文本支持. markdown语法说明: h ...

  2. django 简易博客开发 3 静态文件、from 应用与自定义

    首先还是贴一下源代码地址  https://github.com/goodspeedcheng/sblog 上一篇博客我们介绍了 django 如何在views中使用templates以及一些常用的数 ...

  3. Django搭建简易博客

    Django简易博客,主要实现了以下功能 连接数据库 创建超级用户与后台管理 利用django-admin-bootstrap美化界面 template,view与动态URL 多说评论功能 Markd ...

  4. Nodejs+MongoDB+Bootstrap+esj搭建的个人简易博客

    github:https://github.com/yehuimmd/myNodeBloy Nodejs+MongoDB+jQuery+Bootstrap-esj搭建的个人简易博客 主要功能 前台 : ...

  5. django 简易博客开发 4 comments库使用及ajax支持

    首先还是贴一下源代码地址  https://github.com/goodspeedcheng/sblog 上一篇文章我们介绍了静态文件使用以及如何使用from实现对blog的增删改,这篇将介绍如何给 ...

  6. django 简易博客开发 2 模板和数据查询

    首先还是贴一下项目地址  https://github.com/goodspeedcheng/sblog   因为代码全在上面 上一篇博客我们介绍了 django的安装配置,新建project,新建a ...

  7. django 简易博客开发 1 安装、创建、配置、admin使用

    首先贴一下项目地址吧  https://github.com/goodspeedcheng/sblog 到现在位置项目实现的功能有: 1.后台管理使用Admin ,前端显示使用bootstrap 2. ...

  8. django 简易博客开发 1 安装、创建、配置、admin使用（转）

    Django 自称是“最适合开发有限期的完美WEB框架”.本文参考<Django web开发指南>,快速搭建一个blog 出来,在中间涉及诸多知识点,这里不会详细说明,如果你是第一次接触D ...

  9. Vue简易博客总结

    项目结构: 首先,编写博客的导航栏组件BlogHeader.vue: <template> <nav> <ul> <li> <router-lin ...

随机推荐

  1. Alpha 冲刺 —— 十分之六

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 测试服务器并行能力 学习MSI.CUDA ...

  2. Android Support Palette使用详解

    使用Palette API选择颜色 良好的视觉设计是app成功所必不可少的, 而色彩设计体系是设计的基础构成. Palette包是支持包, 能够从图片中解析出突出的颜色, 从而帮助你创建出视觉迷人的应 ...

  3. spring管理hibernate，mybatis，一级缓存失效原因

    mybatis缓存:一级缓存和二级缓存 hibernate缓存:一级缓存和二级缓存 关于缓存: 缓存是介于物理数据源与应用程序之间,是对数据库中的数据复制一份临时放在内存中的容器, 其作用是为了减少应 ...

  4. Docker 及 nvidia-docker 使用

    Docker 基本用法 1. 安装社区版docker-ce 及 nvidia-docker2 插件 通过官网介绍的软件源的方式安装. 如果要安装nvidia-docker,由于其需要与docker-c ...

  5. DBMS_RANDOM 用法

    oracle中用于生成随机数的包:DBMS_RANDOM,这个包里面包含了很多方法,以下列出几个常用的方法 1.DBMS_RANDOM.RANDOM方法: FUNCTION random RETURN ...

  6. oracle进阶之分析函数

    本博客是自己在学习和工作途中的积累与总结,纯属经验之谈,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6797119.html 分 ...

  7. N制和PAL制区别

  8. NOIP2011 提高组 Day1

    自测:8:27——11:51 实际得分:100+60+20=180 期望得分:100+60+40=200 T3读错题,失20 http://cogs.pro/cogs/page/page.php?ai ...

  9. 容斥 或者 单调栈 hihocoder #1476 : 矩形计数 和 G. Snake Rana 2017 ACM Arabella Collegiate Programming Contest

    先说一个简单的题目(题目大意自己看去,反正中文):hihocoder上的:http://hihocoder.com/problemset/problem/1476 然后因为这个n和m的矩阵范围是100 ...

  10. Java获取精确到毫秒的时间戳

    import java.util.Date; public class Timestamp { /** 获取精确到毫秒的时间戳 * @param date * @return **/ public s ...