z-blogPHP拍拍看主题模版的文章页面样式效果

——测试主题排版所用

 2016-10-23 15:19

一个好的网页模板,往往在排版上非常讲究。因为浏览者第一眼看的就是文章,喜欢你的风格才能常常浏览你的网站。我是紫铜炉,我的个人博客是拍拍看科技。可以自豪的告诉你,我是名网页设计师,精通HTML+CSS,最喜欢使用的还是z-blogPHP。

H1标签下的文字样式

H2标签下的文字样式

H3标签下的文字样式

H4标签下的文字样式

H5标签下的文字样式
H6标签下的文字样式

引用文字的样式

一行引用的文字。

单行引用文字样式

多行引用文字样式

众所周知,如果不给元素指定一个具体的height,它就会自动适应其内容的高度。假如我们希望width也具有类似的行为,该怎么做呢?从这个案例中,我们来找寻答案吧。

——紫铜炉

排序的样式

  • 排序

  • 排序

  • 排序

    • 排序

    • 排序

    • 排序

    1. 排序

    2. 排序

    3. 排序

  • 排序

HTML里面的一些要素

首先展示的是链接按钮。默认颜色绿色,:hover变浅绿色。加深文字的方法有两种:<b>、<strong>。个人比较喜欢前者。代码用<code>进行包裹就可以了,包裹样式见上图。

平常的文字不带下划线。但如果你需要可以用<u>来包裹下。<del>可以显示文字删除的效果,如果你想让文字变小。那么可以尝试用<small>来实现它。还有一个为移动用户准备的:<kbd>。它是标签标记用户通过键盘输入的内容。

插入代码<pre>样式
<div class="cat">
    <a href="..." target="_blank" title="...">
        ...
    </a>
</div>

图像展示功能

图像采用自适应的图片,大部分根据图的实际效果来做,有的部分采用CMS系统或bootstarp自带的效果来做,整体代码分别放置在多个style里面。

测试图片

如果图片不在段落里面,那么图与下文的空间有限,如果与段落控制一样的间隔,需要图片外框再加一个<p>。如果你想在图片上做点效果,可以增加如下样式:

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">


作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。