本文为Monyer原创，转载请声明作者！否则将视为抄袭本文主作者：Monyer 辅作者：80s 、 ganq 1月13日更新Monyer：这不是一篇高深的文章，也不是长篇大论，css能手请略过本文。最近monyer访问某些朋友空间总感觉很不适应，感觉某些地方似乎有什么毛病，但又说不好。于是打开他们的css源代码来看，还真发现了些问题，这里简单共享一下，希望有此毛病的朋友能够稍微借鉴一下！一、css代码的次序不对或许在你的印象中，css是无序的，可以随意掺插，其实这种想法是错误的。如果你的css代码含有多个相同的属性，但每一个属性都有不同的值，那么浏览器会选择哪个呢？譬如：body{background-color:red}body{background-color:blue}body{background-color:green}body{background-color:white}body{background-color:black}这段代码如果你测试后，你会知道你页面的最终的背景颜色会是黑色。当然没有人会傻到对一个标签给两个样式属性的，但是a:visited{color:#fff}a:hover{color:#000}你一定是常用的，而且你也一定知道visited指的是访问过的链接的颜色，hover是当鼠标放在链接上的颜色。但是你在编写css有没有留意一定要让每个标签链接属性的visited写在hover的前面呢？其原理是一样的，如果你写在后面，它的颜色就会把hover的颜色覆盖掉，那样的话当你鼠标不管是否放在链接上，链接的颜色都是访问过的颜色而不会改变。事实上他们的顺序为a:link { color: #000000;}a:visited { color: #000000;}a:hover { color: #000000;}a:active { color: #000000;}二、色彩搭配失误 Monyer告诉你的第二点就是：如果你的空间背景为黑色，那么你的空间就不应该有黑色或是灰色之类的文字出现；如果你空间为红色，就不应该有红色或是粉色文字出现......否则你的空间虽然漂亮，但是你别想让别人看到字，那么你的空间还有什么吸引力可言呢？另外一个问题就是大部分人的空间背景颜色太重了，这样当别人看起来会感觉眼睛很难受，其实下面这些颜色都是可以让人感到心情愉悦的上面为Monyer为你总结背景颜色，下面为80s为你总结的文字颜色Main颜色列表 #3333cc #6666ff #333366 #333300 #666633 #336633 #003300 #993399 #660066 #330000 #663366 #cc3333 #993333 #990000 Balance颜色列表 #ccffcc #cccc99 #999966 #cc99cc #ffff99 #ffffcc #ffcc66 #99cc00 #99cc99 #ffcccc #ffccff #cc9999 #cc9933 #ffcc99 #663333 #cccc99 #ccffff #9999cc #ccccff #cccccc #cc9900 #339999 ganq的古典型色彩你会发现文字颜色应该是那种比较重的颜色，而背景颜色是那种比较轻的颜色，这样搭配起来，会有一个很好的对比度，别人看起来会感到很舒服。你不认为这样和谐的布局就像维也纳殿堂里优美的画卷，而不是街头的顺手涂鸦么？好的颜色搭配会使更多的人喜欢上你的空间，这点毋庸质疑！Monyer不好说自己这个空间颜色搭配好不好，不过我知道目前百度空间中默默使用我模版的空间不下50个，而这其中甚至没有一丁点的宣传，Monyer亦没有通过共享模版共享过（但是我曾对代码开源过）。这并不说明我怎么样，而是说明好的颜色搭配会是人赏心悦目！三、不要在空间大面积放一闪一闪的图片这点应该是网页设计师都忌讳的问题。闪意味着吸引人的注意力，所以合理的在页面放在一个或几个“闪”，会使用户迅速注意到你希望他们注意的地方。但如果你的页面全部是“闪”，那么用户就会连他原有的注意力都分散掉，最终可能他连你页面的文章标题是什么都没有看就匆匆退出了——过多的“闪”会令人达到难以忍受的地步！所以这里Monyer提示您：不要把百度博客搞得跟qq空间似的大闪特闪。四、合理搭配背景与透明的关系很多空间都把版块设为透明，这样别人就能看到他的赏心悦目的背景。这里Monyer给大家讲一个故事，这个故事是我们老师曾经讲过的一位外国雕塑师的，不过我忘记是谁了：故事中的那位雕塑师做了一位思想家的塑像，几乎是perfect，所有观赏的人都不由得赞叹，雕像的神情啊等等。但是当雕塑师问“你们认为这座雕像最好的地方是什么地方？”，大家不约而同地说手雕的好，连皱纹和血管都能看见。于是雕塑师笑了笑，回屋里拿把斧子，一下子把雕像的手剁掉了。他说“我本想让你们看的是这个思想家的精神，但你们只看见了手，既然手夺去了你们的目光，那么这就是它的最大的缺陷”。Monyer想问大家一句——你让别人看的是你的漂亮背景呢？还是你辛辛苦苦写的精彩文章呢？如果你的漂亮背景夺去了众人的目光，使他们来不及去观赏你精彩的文章，那么你是否会忍痛割爱，把背景去掉呢？大家看到Monyer目前的页面和公布的模版有点不一样，那个css显示出来比这个漂亮很多——原因是，那个css中的文字大小为12px；我目前的文字大小为14px；这个是在三英告诉我我页面的文字太小，看起来很费劲后，我进行改变的！因为我想让人看的是我的文字——我辛辛苦苦一字一字打出来的文字——每一个经过认真思考的文字，而不是我的页面布局。大家因为没有做过网页设置，所有对网页所忌讳的东西还不是十分了解。其实透明背景是完全可行的做法，但是是否会影响页面要看你选择的是什么背景。一、背景图不能大于100k（按目前的网络网速）；二、背景图主颜色不能超过三种，一旦你的背景图颜色过多，就是所谓的“花”，“花”由于有各种颜色，势必会有一部分与你的文字部分产生冲突，导致这部分文字看不见或看不清。这样也是用户对你的文章兴趣大大降低；三、背景图要柔和，并和页面上的其他颜色严重区分开，大家知道Monyer在浏览部分人空间怎么看他的文章么？——ctrl+a全选来看。因为我感觉文章很精彩，但是他空间的字体又的确无法看清，有时候只好舍去。大家可以去看看曾经年少轻狂的日子的空间，颜色搭配就不错，有韩国网站韵味，但是她也犯了一条忌讳——导航条的背景图片有70多k（其实应该保持在30~40k左右正常），所以偶尔访问她的空间会先黑一下，然后才会显示图片。不过好在她的页面也非常简洁，没有过多的零碎东西，使整个空间加载并没有受多大影响。五、空间布局一般的空间分为两栏或者三栏，我们称文章列表那栏为主栏，另外一栏或两栏为副栏。这里先说一下所有人的习惯问题——由于长时间使用windows系统，我们养成的一个通病就是，一般我们习惯于把鼠标放在屏幕的右边，并且在右边的上半部。所以文章只需要看不需要点，而我们希望用户点击的部分一般是副栏。如果你的副栏在右侧，这样用户点击就有一个最短距离问题。而如果你的副栏在左侧的话，这个距离显然会大大拉长。这是其一其二，现在没有滚轮的鼠标应该快绝迹了吧！我不知道你在滚动屏幕的时候是拖动右侧的滚动条还是用滚轮，但是我知道大部分人还是用滚轮的。这样你在某些版块中加入scrolling显然很不合适，因为用户滚动滚轮时会滚动外部的滚动条（除非他把鼠标放在该模块里，但是你是博主，不要逼迫用户做他不想做的事），所以不管他喜不喜欢拖动，都得去拖动。而且如果该版块位于屏幕的右侧的话，则正好处于Monyer所说的鼠标经常活动范围内，用户在这部分空间最爱做的事是滚动滚轮，而你的这一创举会妨碍他继续“滚”下去（因为当滚到该版块时，要等该版块滚动完毕，才会接着去滚动全屏）；如果是友情链接，你不采用滚动会给你的盟友带来很大的访问量，事物是互利的，他的访问量应该不会影响你的博客发展吧！其三，如果你的版块中的链接过于密集，Monyer恳请您请一定要加上hover属性，这样有利于用户进行选择性点击六、鼠标样式选择为了使空间更加美观，大家都在用奇形怪状的鼠标样式。懂系统的人应该知道，其实并不是整个鼠标都是触点的，它的触点只在于一点。我们一般使用的系统鼠标图标时，触点都在最顶尖的那一点上。但是最近访问某些人空间时却发现他的空间里的鼠标图标的触点却不再它所显示的触点上，所以造成第二页面无法打开——除非你十分熟悉该样式的触点在哪里！所以Monyer奉劝大家赶快选择那些触点明确的鼠标图标，你的访问量正在悄悄流失，你知道么？七、Monyer认为需要用css美化的地方第一个地方是播放器其实我认为一定需要用css美化的地方有播放器，因为如果仅播放音乐，那块黑色的区域实在不是我们想要的，我们完全可以通过css属性把它去掉，下面简单给一下几种代码，方便大家使用！我的播放器#phx{FILTER: Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 400px; HEIGHT: 25px}透明灰： #phx{FILTER: Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 220px; HEIGHT: 32px} 透明蓝： #phx{FILTER: Alpha(Opacity=100, FinishOpacity=25, Style=2, StartX=20, StartY=100, FinishX=0, FinishY=0); WIDTH: 225px; HEIGHT: 32px} 透明黑： #phx{FILTER: Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)xray; WIDTH: 225px; HEIGHT: 43px 透明棕： #phx{FILTER: Alpha(Opacity=70, FinishOpacity=70, Style=0, StartX=0, StartY=0, FinishX=0, FinishY=0) invert(); WIDTH:98%; HEIGHT: 64px} 第二个需要美化的地方包括 ganq 帮我们想到文章行距、首行缩进 和我引申的文字间距文章行距与首行缩进用过word的朋友都知道，文章行高设置在1.5倍左右时，阅读起来是很舒适的。而百度默认的行高为1（即没有行距），并且没有提供设置文章行高的功能，遗憾的是发帖助手也没有提供这样的功能。我在这里提供两种设置文章行高的方法。1.用发帖助手的[源代码]功能在，段落标号里加上行高参数，例如，其中“1.5”代表行距为1.5倍。（这个有些麻烦，需要每次手动更改，但是好处就是有可定制性，建议你用第二条方法！）2.在css代码的文章内容部分加上行高参数，例如#m_blog div.cnt p{line-height:150%;} /*文章内容行高为1.5倍*/ 。特别注意加在#m_blog div.cnt里是无效的。上小学时，语文老师就教给我们，文章开头要空两格。这里提出两点注意。1.建议使用全角空格两个“ ”，而不是普通空格“ ”。（提示：如果你用智能ABC，这个空格可以通过输入“v11”得到，同样建议利用下面的第二种方法）2.可用上述方法在css中批量加首行自动缩进两个全角空格，例如#m_blog div.cnt p{TEXT-INDENT:2em;}文字间距我们知道文字与文字之间如果挨得太近，我们看起来就会很累眼睛，合理地调整文字与文字之间的距离会使用户看起来更舒服。而这个css属性为“letter-spacing”，对于中国用户，最好的间距是“2.4pt”。但这里Monyer推荐为2.0即可，例如：#m_blog div.cnt{letter-spacing:2.0pt;}所以以上三个对文字的css美化可以总结为：#m_blog div.cnt{letter-spacing:2.0pt;}#m_blog div.cnt p{line-height:150%;TEXT-INDENT:2em;} 好了就这些，Monyer这里仅仅假设你已经学会css并如果对博客进行架构与美化，通过更改css的排列次序、进行必要的色彩搭配、选择性放闪动图片、合理搭配背景与透明之间的关系、空间布局、鼠标图标的选择、必要的美化地方，来教会你如何利用已经学会的css知识来使你的百度博客空间变得更加完美，并不是单纯的css技巧，关于css的技巧，你可以查看CSS十大密技。更多请看:http://hi.baidu.com/monyer/blog/item/6c0dbb01dc186603728da57d.html参考资料：http://hi.baidu.com/monyer/blog/item/6c0dbb01dc186603728da57d.html
已赞过已踩过<
|
