接着上一集继续来说。很多人看到别的网站觉得很清爽,而且很清楚,为什么?
文章目录
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样式表的修改