css文章排版代码,css文章排版

现在太懒了，好久每更新博客了,最近在重新研究下css,记录总结下自己的学习经验

还有要整理整理博客的分类了，因为我的生活跟在学校相比发生了较大的改变

现在都在提倡网站标准，先结构后表现，结构与表现分离，根据我这么久的试用，觉得确实更改挺方便的，而且代码量大大减少，看起来确实是种美感，条理特别清晰。好了，好处不说了，总结正文的排版结构如下：

标题：h1，h2，h3，h4，h5,h6,h7等，是正文标题就用这个标签，不要直接换行加粗或者用

标签等，最后的形式用传统的html一样可以实现一样的效果，但我们提倡的是效率和条理。其实都是为了后面维护的效率上。而且标题用h对搜索引擎更有优先的作用，对网站的推广来说更有好处。段落的缩进就直接用css控制就可以了，没必要每个段落去手动缩进。

2段落：

。直接按enter回车就换行了，在word里也是一样，而按shift+enter是段内换行，这样会导致段落与段落之间的距离跟行距一样，当然有人用两个br来做到这点，但肯定不提倡，这还是没规定好格式，到后面上万篇文章格式的更新将是个噩梦。而且这样在语义上或者说结构上是不好的，网站标准就是强调结构和表现分离，让每个标签都有语义。而p就是段落的结构化标签。

3列表

4 图片

src=””>,要实现图文混排，就是图片靠左或靠右，文字环绕它，这种方式直接设置图片本身的属性就可以达到，无需再加一个表格啦，还要强调点的是，图片最好加上alt属性，这样让人家显示不了你的图片的话可以指导图片的内容。

表格

span行内嵌元素，这个不独自成行，就是不会换行，比如文章中有个词想要变成红色，那就加上span

7水平线

:一般标题下面会有条线，这个就直接用代码hr解决，尽量不用图片。

8引用

:文章中引用其他文章中的话，就用这个标签

9

链接:在规范的网站中，文中的链接都最好加上title属性，也就是鼠标放上去时候显示的文字，这样让人指导链接什么东西，为什么要链接，这样会显得很专业和规范。

10 段内换行

对文章的排版要知道的名词和结构标签基本就这么多了，有了这样的概念，排出来的版式就会让人阅读舒服，条理清晰，用相应的标签就能做到表现与结构分离，维护更容易。

css文章排版代码,css文章排版相关推荐

公众号文章排版神器，Markdown一键排版，微信公号文章里代码的美化排版
自己经常在简书,掘金上面写一些技术文章,喜欢用Markdown编辑器.最近需要把自己的一些技术博客文章发表到微信公众号文章里. 刚开始偷懒,就直接把用markdown写的技术博客复制粘贴到公号里(大多 ...
套料排版代码python_雕刻机排版下料套料软件，可生成G代码格式和DXF图形、木工下料...
橱柜门自动排版软件现已升级为2017版本,新增排版完成后版面显示详细订单尺寸,省去人为测量麻烦,废料可以入后期的排版当中继续自动排版,板材优化率比2014更加优化,搜索精度更高,避免频繁换刀操作,单头 ...
wordpress 使用mysql添加文章_WordPress代码插入文章函数:wp_insert_post
[描述] 该函数可在数据库中插入文章(及页面).它可以进行处理变量,检查操作,填充日期/时间等缺失变量等工作.该函数以对象作为变量,返回已创建文章的编号(出错时返回0). [使用方法] [参数] $p ...
工具使用|利用工具实现微信公众号文章中代码部分的排版~
在做公众号的运营过程中,除了内容外,排版也是至关重要的,网上有很多排版编辑器,可以将版面设计的比较漂亮,但是在进行代码粘贴编辑时,往往实现不了.搜了网上大部分关于此类的问题都说Markdown方式,确 ...
套料排版代码python_2D板材排版套料开源代码
[实例简介] 该开源代码实现的是2d板材套料,使用遗传算法,不断优化得到的解,最后得出一个利用率最高的结果.因为是开源,可以看到其算法的实现,给想做排版的提供了很好的参考. [实例截图] [核心代码] ...
css 字体特效代码,css实用字体特效
列举三种比较普遍的字体效果 1.鼠标上移闪光字体 a1.png 代码: main { width: 300px; height: 100px; padding: 20px; font:500%/1 R ...
CSS初始化示例代码
CSS初始化示例代码/*css reset www.admin10000.com*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form ...
文章高效排版(js+css+markdown)
reveal.js制作PPT https://www.jianshu.com/p/2625505319ab css生成漂亮的水平分割线 https://www.jianshu.com/p/7c451a ...
【小技巧】如何对混乱的HTML/CSS/JS代码进行格式化排版
如何对混乱的HTML/CSS/JS代码进行格式化排版 1. 将混乱的代码拷贝到一个文档中,通过NotePad++打开: 2.点开插件-插件管理: 3.搜索JSTool,并安装: 4.安装成功后会重启N ...
Bootstrap【第二章】全局CSS之排版代码表格
前言:今天要学习的是Bootstrap的全局CSS之排版&代码&表格一张图概括今天的内容: 一.排版 1.1.页面主题 1.段落突出:通过.lead类可以让段落突 ...

css文章排版代码,css文章排版

css文章排版代码,css文章排版相关推荐

最新文章

热门文章