Question

CSS代码达人进 百度空间求助

本人博客有几个页面问题要解决，麻烦CSS达人给写些代码，而那些粘贴复制党请54我吧！

BLOG地址：hi.baidu.com/ppsbc

问题一：模块页面（中间所有内容）太窄了，我要拓宽一点
问题二：页面两边留白太多，自己改不出来
问题三：好友和个人档案里的内容太窄了（很明显的，看了就清楚了），我要向右边延伸

在此求助了～
代码这里发不下，我放在BLOG里了

Answer 1

我的模版就是从人家该的，当时也是很窄。 复制我自己的代码算不算，文章比较长，你有空就慢慢看。比较麻烦。 我最喜欢的模版地址：http://hi.baidu.com/kyzon/modify/preview/d655dc1b3c6789faae513348.css 我所有的模版：http://hi.baidu.com/sys/share/myshare/kyzon 很伤心啊，是自己原创的，花了很多心思，但是有人原样抄袭并拿去共享。 看到百度上有很多的空间设计模版，但是没有我最喜欢的。 我不喜欢花里胡哨的图案 我也不喜欢人物背景 我不喜欢深色的主题 也不希望自己的空间太绚丽 我也不喜欢鼠标变来变去 找来找去，我还是没有找到合意的模版，因此我决定自己试试。 感谢下面的资料对我提供的帮助： 1. 百度对于CSS的详细说明，其中颜色选择器是会用到的 http://www.baidu.com/search/hi/hi_css.html 2. 天涯何处写的关于如何得到他人的模版空间代码http://hi.baidu.com/mrlipeng/blog/item/70fddfcedcd31e0392457e54.html 我没有学过编程，不需要有编程的基础。 因为有既成的模版，我要做的三件事就是： 极简白模版的主题是蓝色的，抬头的图片是蓝色，链接显示字体也是蓝色。 1. 将抬头的图片改为我自己设计的； 2. 将链接显示字体该为绿色，成就我的绿色主题； 3. 原来的模版框架太小，我希望将整个框架宽度提高。 第一步换抬头图片 Photoshop是我的强项，因此这对于我来说很容易。 先将原模版上的图片另存到本地，然后用Photoshop进行编辑就可以了，这样主要是为了保证图片的宽度能和空间的框架相统一。 做好图片后，将图片放到自己的空间上，我的图片就放到http://hi.baidu.com/kyzon/album上面了，因为空间只接受网络路径上的图片，将原来的图片替换： /*头部*/ #header{height:153px ; padding-left:120px;background:url(https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/kyzon/pic/item/54a587caaf816584c8176862.jpg
) no-repeat;margin-left:61px;margin-right:-100px} 也就是上面url后面的路径。 第二步更改字体颜色 将链接语言上的颜色由蓝色变为绿色，只改变了二种颜色，第一是显示颜色由天蓝变为绿色，第二是鼠标放上去后的文字悬浮颜色，将深蓝变为深绿。 找到颜色，例如#226DDD天蓝为显示的链接字体颜色，#445F88深蓝为链接字体颜色的悬浮颜色，将这二种颜色替换为你喜欢的颜色就可以了。 也就是下面的文字的显示颜色。 阅读全文>> 类别：心如明镜 | 编辑 | 删除 | 评论(2) | 浏览(11 ) 如果你想将文章的颜色改变，则去寻找#000，将其进行更改。 第三步更改网页框架的宽度 用查找的方式将所有的width：750px替换为：width:913px 框架变大了。不过框架应该和头部的图片宽度是对应的，如果你的头部图片宽度更改了，相应要对网页结构的框架进行调整，变大变小直到头部图像和网页结构能否效果统一。 一些小技巧： 1. 如果你想更改头部文字的字体以及离边框的距离可以找到#header进行更改 /*头部*/ #header{height:153px;background:url(https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/kyzon/pic/item/784d82526476bb0c0df3e376.jpg
) no-repeat;margin-left:0px;margin-right:0px} /*URL链接的图片为头部的背景图片*/ #header div.lc{} #header div.rc{} #header div.tit{top:55px;left:240px;line-height:50px;font-size:34px;font-family:宋体;} /*你的博客的名称，即为我的博客名“写在牛皮纸上的青葱岁月”，top为离顶部的距离，left为离左边框的距离，line-height为行距，行距一定要大于font-size，否则显示不全，font-size为字体大小，font-family为字体，这里CSS好像支持很多字体，我试过微软自带的一些字体，例如宋体、黑体等等，而且也试过方正字体，例如方正准圆简体等等，都支持，所以你可以任意的去输入你希望显示出来的字体*/ #header div.tit a.titlink{color:#fff;text-decoration:none} /*这里的color即为你的博客名称，例如我的“写在牛皮纸上的青葱岁月”的字体颜色*/ #header div.tit a.titlink:visited{color#fff;text-decoration:none} #header div.desc{top:40px;right:80px;color:#fff;font-size:14px;font-family:Kristen ITC} /*空间简介字体颜色距离的设置，例如我的“质朴 坚韧 朴实”，top为离顶部的距离，right为离右边框的距离，字体颜色，行距，字体大小，字体，这些你和博客名称一样，你都可以任意设置的*/ 2. 如果你想更改导航区域的设置，可以找到#tabline进行设置 #tabline{display:none} #tab{top:129px;background:url() no-repeat;margin-left:30px } /*主页、博客、相册……离上边框的距离，背景（这里没有设置），离左边框的距离*/ #tab a.on,#tab a.on:link,#tab a.on:visited{font-size:14px;background-color:none;color:#666} #tab a.on:hover{color:#000;background-color:none ;text-decoration:underline;} #tab span{display:none} #tab a:link{font-size:14px;color:#000;text-decoration:none;} #tab a:visited{font-size:14px;color:#000;text-decoration:none;} #tab a:hover{color:#000;background-color:none;text-decoration:underline;} /*这里面也有字体以及悬浮字体的颜色、大小的设置，都是大同小异，可以去更改你喜欢的效果*/ 3. 如何更改“最近访客”的显示效果？ 我本人是不太喜欢默认的“最近访客”的显示效果的 一是：每人用的图片和颜色大小都不一致，放在博客里太花哨； 二是：默认的字体、颜色也不是我喜欢的。 不过欣慰的是我找到了一段可以更改其显示效果的代码，并进行了更改，之前的代码太过复杂，而且很多效果我并想要，所以我简单的进行了一些修改： /*最近访客-给图片加边框加滤镜*/ #mod_track .modbox table td img{width:45px!important;height:45px!important;border:#386138 2px solid;} /*这里是对“最近访客”的图片进行强制限制，无论之前你的图片的长宽比是多少，强制限制显示为：45px*45px，也就是width和height后面的显示值，当然这个大小你也可以更改为你喜欢的大小。border为图片的边框颜色和边框的宽度，我设置为2px，边框样式我选择为实线solid，如果你不喜欢可以设置为虚线dashed*/ #mod_track .modbox table td a img{filter:Gray(enabled=bEnabled) Alpha(opacity=25);-moz-opacity:0.5} /*这里对“最近访客”图片进行了静态滤镜效果，默认显示为灰度，透明值opacity我设置为了25，可以从0~100人任意更改，Gray是灰度滤镜效果，还有二种可以选择，invert和Xray*/ #mod_track .modbox table td a:hover img{filter:Gray(enabled=0) Alpha(opacity=100);-moz-opacity:1} /*这里对“最近访客”图片的悬浮效果进行了设置，也就是将鼠标移动上去时的滤镜效果*/ #mod_track .modbox table td a{text-decoration:none;color:#328932;font-family:Georgia;} /*“最近访客”的用户名文字样式，你可以更改其显示颜色和字体以及是否加下划线，以及字体是否加粗font-weight:bold为字体加粗*/ ------终于------- 终于我有了一个全新的空间！效果： 四叶草模版：http://hi.baidu.com/kyzon/modify/preview/d655dc1b3c6789faae513348.css

Answer 2

问题一：装扮空间 更改板块样式 你选的样式估计就是窄的 这没办法- -
其他几个留给其他人吧

Answer 3

把你的css代码发过来。

Answer 4

用编辑器试试

Answer 5

1、宽度：

html body div .stage{
position:relative;
width: 700px;
left: 50%;
margin-left: -350px;
border: 1px solid #000;
}

把width值改得大一点，比如说800，但是不建议超过1000，不然影响文字阅读（一行字太多可能会打消访客的阅读兴致）

2、留白：

同上，中间宽了左右留白就少了

不过你将tab菜单向右移动的话右侧会溢出，这一点在火狐下比较明显，IE下倒是无所谓，所以建议你在#main里面写一个overflow-x:hidden

3、宽度

这几句代码的问题：
html #layout td.c2t1{
width: 435px;
}

html #layout td.c2t2{
width: 0;
}

html body center #layout td.c2t3{
padding-right: 10px;
border-left: 1px dashed #000000;
width: 175px!important;
}

其实百度官方本身就不推荐你用这种写法，因为默认情况下主页、博客、个人档案等页面分栏的宽度是不同的，而且也是它既定的，你在模板里这么改可以在主页上满足你的宽度要求，但是这个样式会匹配到每个页面，所以放到别的页面宽度就乱了，建议你把这几个删掉，然后用系统默认的分栏宽度