左边框,浅色背景内容块,代码如下:
<p style="border-left: 4px solid #cc0417; background: #ffcfd4; color: #b30011; padding: 2px 0 2px 10px;">左边框,浅色背景内容块,代码如下:</p>

这是模块说明 有细边框包围,上边框有说明的内容块,代码如下:
<p style="position: relative; margin: 30px 0 0; border: 1px solid #ae0006; border-radius: 5px; color: #ae0006; padding: 20px 10px;">
<span style="position: absolute; left: 50px; top: -12px; background: #ae0006; color: #fff; padding: 2px 10px;">这是模块说明</span>
有细边框包围,上边框有说明的内容块,代码如下:
</p>

四个角有角标的内容块,代码如下:
<p style="margin-top:30px;">
<span style="display: block; height: 6px; width: 100%; zoom: 1;">
<span style="display: block; float: left; width: 6px; height: 100%; border-left: 2px solid #ae0006; border-top: 2px solid #ae0006;">&nbsp;</span><span style="display: block; float: right; width: 6px; height: 100%; border-right: 2px solid #ae0006; border-top: 2px solid #ae0006;">&nbsp;</span>
</span>
<span style="display: block; margin: -2px 4px -3px; padding: 10px; background: #ffcfd4; color: #ae0006; border: 1px solid #ae0006;">四个角有角标的内容块,代码如下:</span>
<span style="display: block; height: 6px; width: 100%; zoom: 1;">
<span style="display: block; float: left; width: 6px; height: 100%; border-left: 2px solid #ae0006; border-bottom: 2px solid #ae0006;">&nbsp;</span><span style="display: block; float: right; width: 6px; height: 100%; border-right: 2px solid #ae0006; border-bottom: 2px solid #ae0006;">&nbsp;</span>
</span>
</p>

转载于:https://www.cnblogs.com/CryOnMyShoulder/p/10516004.html

好看的文章排版样式(转)相关推荐

  1. 公众号文章排版样式——隐藏样式

    今天我们介绍的公众号文章排版样式 //隐藏样式// 什么是隐藏样式? 隐藏样式一般是需要读者去点击某块区域,才能显示隐藏的图片或者文字.这种样式可以真正跟读者互动起来,趣味性十足.另外,此类样式也可以 ...

  2. ai中如何插入签名_如何在微信公众号文章排版中插入趣味问答互动样式?

    每天都有一批运营人,在为微信公众号文章的互动抓破了脑袋.绞尽脑汁想尽办法让用户点进了文章,奈何缺乏互动导致用户很快离开.有小伙伴在阅读其他公众号文章的时候发现公众号文章里,有很有趣的互动模式,就是趣味 ...

  3. 公众号文章排版神器,Markdown一键排版,微信公号文章里代码的美化排版

    自己经常在简书,掘金上面写一些技术文章,喜欢用Markdown编辑器.最近需要把自己的一些技术博客文章发表到微信公众号文章里. 刚开始偷懒,就直接把用markdown写的技术博客复制粘贴到公号里(大多 ...

  4. 嵌套页面h5怎么调起手机文件_让微信公众号文章排版像网页h5一样高大上

    做过微信公众号文章排版的同学都知道,微信自己的排版工具只能排些简单的图文混合.遇到这种同况时,很多同学会考虑用第三方编辑器或直接用他们的模板,然后稍微改改便直接发布. 没有我想要的排版样式怎么办,可以 ...

  5. 内卷时代,文章排版当然要快人一步(附公文排版插件)

    本文1783字,预计阅读时间5分钟 Hello,大家好,我是似最初! 一名非著名PPTer,对于word的使用你是如何应用的? 是每日打开按部就班的选择录入排版?还是略懂一些邮件合并做出批量文档? 如 ...

  6. 小程序页面排版样式例子

    在网上下载一个小程序源码,排版样式挺好看的,参照着写了几个例子. 1.例子1效果图 代码实现 (1)全局样式app.wxss @import 'style/weui.wxss';page{backgr ...

  7. 轻松上手写作利器 Markdown:从此文章排版无烦恼

    写作是每个人日常生活和工作中必不可少的内容,无论是写博客.写邮件,还是写报告.写项目方案,都无法避免写作. 在使用 Word 或类似编辑工具写作时,想必你一定纠结过字体.字号.间距等等的排版问题吧! ...

  8. 高赞 GitHub 项目盘点:美观的中文排版样式

    推荐 5 个不错的开源项目,本期所有的开源项目都是 逛逛 GitHub 公众号粉丝推荐的,它们分别是: 1. 美观的中文排版样式 2. 一条命令就能离线安装高可用 Kubernetes 3. 使用 T ...

  9. 用Markdown,3分钟搞定微信公众号文章排版!

    用Markdown,3分钟搞定微信公众号文章排版! 还在使用第三方编辑器排版微信公众号文章?OUT了!只要你掌握本文推荐的3大操作流程,就可以熟练.高效的做好微信公众号文章排版,3分钟搞定!并且可以一 ...

最新文章

  1. 【MATLAB】————matlab raw图转bmp实现
  2. Hadoop Hive sql 语法详细解释
  3. DJango-如何快速准备Python虚拟开发环境并快速定制一个项目
  4. The 15th UESTC Programming Contest Preliminary C - C0ins cdoj1554
  5. JavaScript 实现数组的foreach
  6. 一图解码数据中心数字化运维管理之道
  7. 七点人脸姿态估计_Github开源库简单配置即可上线的3D人脸检测工具箱
  8. You must install 'msgfmt' on your build machine
  9. mysql5.7 hibenate5.1_5.7 Spring与Hibernate整合应用
  10. 等保测评报告_昆仑健康保2.0要停售了,还值得买这款产品吗?有哪些优缺点?...
  11. 2017.4.19 数列 思考记录
  12. uk码对照表_这份中外衣服鞋码尺寸对照表,请收好!
  13. 一文带你实现RPC框架
  14. 8.Jenkins 权威指南 --- 自动化部署和持续交付
  15. 用户名_网络安全与防御-OpenSSH用户名枚举及其检测方法
  16. 20200529每日一句
  17. 使用YASM编程 - 06
  18. 汽车控制器自研AUTOSAR开发工具链需要哪些?
  19. 殡仪馆计算机控制火化机,殡仪馆火化炉进行尾气处理
  20. 开源库UniTask笔记

热门文章

  1. Python Cookbook(第3版)pdf
  2. 网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
  3. 第一百一十八天 how can I 坚持
  4. C#代码生成目录树(转)
  5. sparkTransformation算子
  6. linux安装XtraBackup8
  7. java程序默认使用的xmx_为什么JAVA进程占用内存会超过Xmx设置
  8. Office365 PowerShell打开邮箱审计功能
  9. Spring Tool Suite插件的安装
  10. ElasticSearch的基本用法与集群搭建