网运营实战|网站主题的CSS样式表的修改

网运营实战|网站主题的CSS样式表的修改

接着上一集继续来说。很多人看到别的网站觉得很清爽,而且很清楚,为什么?

01)网站主题宽度

三栏式我建议宽度要1230px,二栏式大概是1000px左右。

02)文字够大

网站内的文章建议要15~16pt,侧边栏文字大小在11~12pt。

03)有规律

文字大小统一,文字颜色统一,不要整那些花里胡哨的。

好,接着来看要怎么修改,我举三个实例:侧栏、文章、宽度。

一、侧边栏的文字太小,想要改大一点,怎么改?

首先您要先知道侧边栏的样式名称,您可以用上一集教的在浏览器直接按F12查找CSS样式的名称。

另外还有一招就是参考:网站主题内的说明

查看模版架构图,侧栏的标题是.box-title,内容是.box-text

后台→样式管理→CSS源代码→搜寻.box-title (侧栏标题)

文字大小的关键字是font-size: (请注意要有冒号) 请改成font-size:11pt;(请注意最后要有分号)

接下来继续改下面的.box-text(侧栏内文)

找不到关键字font-size: (没关系,请自已打上去)

font-size:11pt;(请注意最后要有分号)

这样侧边栏标题及文字就改成11pt了。

侧栏文字是置中对齐,我希望是靠左对齐,关键字text-align:left; (原本是center,改成left)

二、内文的文字太小,怎么变大?

请在浏览器按F12查找文章框架CSS样式的名称为.article-content

在后台→样式管理→CSS源代码→搜寻.article-content (内文框架) font-size:16pt;(文字大小改成16pt)

经过以上的调整,文章及侧栏文字都变大了,而且侧栏的文字改成靠左了。

我的建议内容页文章的字体大小是16pt,侧栏是11~12pt。另外还有一些细节的调整,例如文章内行距建议是170%,文字颜色用#444,也就是深灰色,注意文字不要用全黑,要用深灰色看起来会比较舒服。

三、网站主题的宽度怎么变大?

请在浏览器直接按F12查找内文CSS样式的名称为#container

请在后台→样式管理→部落格CSS原始码→搜寻#container

你会发现有#container1及#container2,这是因为网站主题的CSS层叠样式是一层包裹一层的。

在目前的CSS样式中,宽度是在#container2这个框架中设定width:980px;(把宽度改成1230px)

我们把宽度从980px改成1230px之后,你会发现最上面的底图不够大,要换背景图。

再者是文章内右边多了空白,就把文章的宽度加大即可。

好,本集CSS修改的实例就讲到这里,要再提醒您一点,在修改CSS之前请先备份一下CSS源代码,这样就算你把整个网站样式改到崩溃了也不用怕。

接下来我给你补充一些常用的CSS语法:

文字类:

字体 font-family: Arial,”新细明体”;

大小 font-size: 16px;

颜色 color: #666;

粗体 font-weight: bold;

行高 line-height: 170%;

段距 margin-bottom: 1em;

对齐 text-align: center;

底线 text-decoration: underline;(none;不要底线)

字距 letter-spacing: 0.2em;

位置类

宽度width: 600px;(宽度600px)

边界 margin-top: 20px;(上边界留20px)

内距 padding-bottom: 20px;(下内距留20px)

框线 border: 1px solid #ccc;(实线)dotted(点线)dashed (虚线)

背景图片

background: url(../images/header.jpg) #fff left top repeat-x; 底色白色,靠左、靠上,水平重覆

文字的大小的单位,一般用pt或px皆可。

  • 10pt = 13px
  • 11pt = 14~15px
  • 12pt = 16px
  • 13pt = 17px
  • 14pt = 18~19px
  • 15pt = 20px
  • 16pt = 21px

网友:我很喜欢你的主题,可以跟你买网站主题的css源代码吗?

没有卖。建议您学习CSS语法后,可以直接查找我的CSS源代码并修改成您自己喜欢的样式。

最后我还要补充一点,这一点也很重要:

请不要在写文章时「直接在编辑区调整文字大小」,文字大小请统一在CSS样式表中修改。

未经允许不得转载:藤条部落 » 网运营实战|网站主题的CSS样式表的修改


深夜美绣视频
已添加在线视频资源,免费欣赏