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. Next Permutation - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Next Permutation - LeetCode 注意点 如果是字典序最大的串则要返回字典序最小的串 解法 解法一:参见:http://www.cn ...

  2. 关于idea中新建web项目 webapp文件夹没有小蓝点 ,启动服务,访问不到解决方案

    第一步: 选中项目按F4键,找到你的项目. 第二步: 选中项目下的web,如果没有web点击左上角的加号,找到web最下面,添加进去 第三步: 点开type下的节点,出来弹框, 第四步: 点击弹框的选 ...

  3. 牛客网NOIP赛前集训营-普及组(第一场)

    前三题略 T4: 题目描述 小A有n个长度都是L的字符串.这些字符串只包含前8个小写字符,'a'~'h'.但这些字符串非常的混乱,它们几乎长得互不相同.小A想通过一些规则,让它们长得尽可能相同.小A现 ...

  4. YBT 6 数学基础

    $补+写题ing$ 第 1 章 快速幂 序列的第 k 个数 link $solution:$ 板子 A 的 B 次方 link $solution:$ 板子 [NOIP2013] 转圈游戏 link ...

  5. R读取excel文件

    2017.09.05 我一个下午的成果啊啊啊啊,看看失败 不禁感叹一声,失败的路真是多啊!!!! 一.安装xlsx包 下面具体讲一讲怎么弄的(太笨了,所以学得慢,需要一步一步的来) 用R读取excel ...

  6. weUI框架在github下载地址

    1.公众号样式UI库的下载地址: https://github.com/Tencent/weui 2.微信小程序UI库的下载地址:https://github.com/Tencent/weui-wxs ...

  7. UITableViewCell在非Nib及Cell重用下设置CellStyle

    在UITableViewController(实现了UITableViewDataSource)下需要实现 - (UITableViewCell *)tableView:(UITableView *) ...

  8. Shell记录-Shell命令(定时任务)

    在Linux系统中, at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron(crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因 ...

  9. java多线程获取返回结果--Callable和Future示例

    package test.guyezhai.thread; import java.util.ArrayList; import java.util.Date; import java.util.Li ...

  10. Google推荐的15条HTML 5代码军规----来看看你知道几个,我一个都不知道。。。

    Google规范的原文链接大家可以访问:http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml 1.协议头: 建议在指向图 ...