简易博客[ html + css ] 练习
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 ] 练习的更多相关文章
- django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务
上一篇博客介绍了comments库使用及ajax支持,现在blog已经具备了基本的功能,但是只能发表文字,不支持富文本编辑.今天我们利用markdown添加富文本支持. markdown语法说明: h ...
- django 简易博客开发 3 静态文件、from 应用与自定义
首先还是贴一下源代码地址 https://github.com/goodspeedcheng/sblog 上一篇博客我们介绍了 django 如何在views中使用templates以及一些常用的数 ...
- Django搭建简易博客
Django简易博客,主要实现了以下功能 连接数据库 创建超级用户与后台管理 利用django-admin-bootstrap美化界面 template,view与动态URL 多说评论功能 Markd ...
- Nodejs+MongoDB+Bootstrap+esj搭建的个人简易博客
github:https://github.com/yehuimmd/myNodeBloy Nodejs+MongoDB+jQuery+Bootstrap-esj搭建的个人简易博客 主要功能 前台 : ...
- django 简易博客开发 4 comments库使用及ajax支持
首先还是贴一下源代码地址 https://github.com/goodspeedcheng/sblog 上一篇文章我们介绍了静态文件使用以及如何使用from实现对blog的增删改,这篇将介绍如何给 ...
- django 简易博客开发 2 模板和数据查询
首先还是贴一下项目地址 https://github.com/goodspeedcheng/sblog 因为代码全在上面 上一篇博客我们介绍了 django的安装配置,新建project,新建a ...
- django 简易博客开发 1 安装、创建、配置、admin使用
首先贴一下项目地址吧 https://github.com/goodspeedcheng/sblog 到现在位置项目实现的功能有: 1.后台管理使用Admin ,前端显示使用bootstrap 2. ...
- django 简易博客开发 1 安装、创建、配置、admin使用(转)
Django 自称是“最适合开发有限期的完美WEB框架”.本文参考<Django web开发指南>,快速搭建一个blog 出来,在中间涉及诸多知识点,这里不会详细说明,如果你是第一次接触D ...
- Vue简易博客总结
项目结构: 首先,编写博客的导航栏组件BlogHeader.vue: <template> <nav> <ul> <li> <router-lin ...
随机推荐
- Next Permutation - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Next Permutation - LeetCode 注意点 如果是字典序最大的串则要返回字典序最小的串 解法 解法一:参见:http://www.cn ...
- 关于idea中新建web项目 webapp文件夹没有小蓝点 ,启动服务,访问不到解决方案
第一步: 选中项目按F4键,找到你的项目. 第二步: 选中项目下的web,如果没有web点击左上角的加号,找到web最下面,添加进去 第三步: 点开type下的节点,出来弹框, 第四步: 点击弹框的选 ...
- 牛客网NOIP赛前集训营-普及组(第一场)
前三题略 T4: 题目描述 小A有n个长度都是L的字符串.这些字符串只包含前8个小写字符,'a'~'h'.但这些字符串非常的混乱,它们几乎长得互不相同.小A想通过一些规则,让它们长得尽可能相同.小A现 ...
- YBT 6 数学基础
$补+写题ing$ 第 1 章 快速幂 序列的第 k 个数 link $solution:$ 板子 A 的 B 次方 link $solution:$ 板子 [NOIP2013] 转圈游戏 link ...
- R读取excel文件
2017.09.05 我一个下午的成果啊啊啊啊,看看失败 不禁感叹一声,失败的路真是多啊!!!! 一.安装xlsx包 下面具体讲一讲怎么弄的(太笨了,所以学得慢,需要一步一步的来) 用R读取excel ...
- weUI框架在github下载地址
1.公众号样式UI库的下载地址: https://github.com/Tencent/weui 2.微信小程序UI库的下载地址:https://github.com/Tencent/weui-wxs ...
- UITableViewCell在非Nib及Cell重用下设置CellStyle
在UITableViewController(实现了UITableViewDataSource)下需要实现 - (UITableViewCell *)tableView:(UITableView *) ...
- Shell记录-Shell命令(定时任务)
在Linux系统中, at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron(crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因 ...
- java多线程获取返回结果--Callable和Future示例
package test.guyezhai.thread; import java.util.ArrayList; import java.util.Date; import java.util.Li ...
- Google推荐的15条HTML 5代码军规----来看看你知道几个,我一个都不知道。。。
Google规范的原文链接大家可以访问:http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml 1.协议头: 建议在指向图 ...