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. 【转】关于在linux下清屏的几种技巧

    在windows的DOS操作界面里面,清屏的命令是cls,那么在linux 里面的清屏命令是什么呢?下面笔者分享几种在linux下用过的清屏方法. 1.clear命令.这个命令将会刷新屏幕,本质上只是 ...

  2. BZOJ4919 [Lydsy1706月赛]大根堆 【dp + 启发式合并】

    题目链接 BZOJ4919 题解 链上的\(LIS\)维护一个数组\(f[i]\)表示长度为\(i\)的\(LIS\)最小的结尾大小 我们可以用\(multiset\)来维护这个数组,子树互不影响,启 ...

  3. ListView嵌套webView 事件冲突解决

    如图,红色部分为WebView,作为ListView头部存在,测试视频(h5)要左右滑动,ListView要上下滑动,保证视频控件和下面评论部分可以显示,但是这个时候就存在WebView横向滑动和Li ...

  4. ACM比赛_注意

    ACM比赛_注意: 比赛前: 1.前一天早一点睡觉 2.避免参加激烈的活动,以免比赛时精力不足; 3.少喝水,并提前上厕所; 4.把账号,密码都准备好,放在txt中 5.提前创建多个程序(etc.10 ...

  5. 2 Kafka Broker

    Log的读写.删除流程---日志管理器(log manager)负责创建日志.获取日志.清理日志.所有的日志读写操作都交给具体的日志实例来完成. KafkaServer启动的时候,初始化三个类: Lo ...

  6. idea 安装lombok 插件过程

    一.作用 Lombok是一个可以通过简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 Java 代码的工具,bean,entity等类,绝大部分数据类类中都需要get.set.toStrin ...

  7. Jenkins配置定时任务

    在任务配置中,滚动到构建触发器-->勾选"Build periodically"-->在输入框中配置触发时间 以上配置,表示在6月13日23点触发. 如果配置成  00 ...

  8. 经典全屏滚动插件fullPage.js

    要写简单可以写的很简单,对着github上面的参数和注释随便写了个demo.这个插件十分高端大气上档次,配上良好的配色和布局,简单几笔就可以把网站装扮得十分洋气. 唯一的缺点就是,感觉对移动端的兼容性 ...

  9. 另类之将ipython notebook嵌入blog方法

    另类之将ipython notebook嵌入blog方法 ipynb文件很强大. 可是一直苦于没有找到好的方法把它直接嵌入到博文里. 现在得到一个另类的方法: 就是利用github集成了nbviewe ...

  10. Element-UI 表格 列过多内容换行问题

    本文地址:http://www.cnblogs.com/veinyin/p/8487098.html  一般表格不会有很多列,所以在使用时会很方便,但是如果有25+个列时,就会发现宽度完全不够用,只有 ...