自定义CSDN Blog的CSS样式
原文传送门:http://blog.csdn.net/dux003/archive/2009/11/08/4786371.aspx
csdn blog css自定义设置
可以在博客的配置页面的自定义css栏中填入css样式代码来自定也blog的风格
csdn blog的页面架构基本是由div实现的,整个页面主要由三个div组成,它们的id分别是:
csdnblog_header, csdnblog_sidebar, csdnblog_content。
所以,定义它们的主体样式可以这样:
#csdnblog_header
{
//头部的风格
}
#csdnblog_sidebar
{
//侧边栏的风格
}
#csdnblog_content
{
//主体内容的风格
}
这三个div又被两个div包裹起来了,它们的id分别是csdnblog_allwrap, csdnblog_midwrap
这两个还可以定义整个页面的整体样式
#csdnblog_allwrap
{
//你想要的风格
}
#csdnblog_midwrap
{
//你想要的风格
}
页面的头部由以下几部分组成
1、h1,显示blog的用户自定义标题
#csdnblog_header h1
{
//标题风格设置
}
2、h2,显示用户自定义的blog描述
#csdnblog_header h2
{
//blog描述风格设置
}
3、ul, id为personalnav, 个人导航列表
#csdnblog_header ul#personalnav
{
//blog个人导航栏风格设置
}
4、ul,id为blogsearchsty,搜索栏
#csdnblog_header ul#blogsearchsty
{
//blog搜索框风格设置
//如果不想显示,可以使用:
//display:none
}
5、ul,id为menu,菜单栏
#csdnblog_header ul#menu
{
//blog菜单风格设置
//如果不想显示,可以使用:
//display:none
}
自定义侧边栏的CSS
侧边栏主div的id为csdnblog_sidebar,中间被一层class为gutter的div包裹,最里面一层div的的class为aboutauthor。里面剩下的就是一个个的dl了
修改起风格可以这样:
#csdnblog_sidebar div.gutter div.aboutauthor
{
}
更进一步的话,可以:
#csdnblog_sidebar div.gutter div.aboutauthor dl
{
}
#csdnblog_sidebar div.gutter div.aboutauthor dl dt
{
}
#csdnblog_sidebar div.gutter div.aboutauthor dl dd
{
}
自定义文章的CSS
每一篇文章都是一个div,其class为default_contents, 这个div包含两个子元素
1、h6, class为p
相关文档:
原文转载自 NextCool [ http://www.nextcool.cn ]
在当前IE6 IE7 FifeFox三分天下的情况下,浏览器兼容性问题成为网页设计者需要考虑的问题.
区别不同浏览器的CSS hack写法:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与 ......
visibility: hidden, visible
display: block, inline, none
visibility: 控制页面元素的显示和隐藏,不空值元素的位置特征。
document.getElementById("div").style.visibility = "hidden"; //隐藏元素
document.getElementById("div").style.visibility = "visible"; //显示元素
当元素在页面是隐藏时, ......
第一步:规划网站,本教程将以图示为例构建网站
1.规划网站,本教程将以下图为例构建网站。
点击看大图
其基本布局见下图:
点击看大图
主要由五个部分构成:
1.Main Navigation 导航条,具有按钮特效。 Width: 760px Height: 50px
2.Header 网站头部图标,包含网站的logo和站名。 Width: 760px Height: 15 ......
css控制位置:
纯数字
el.style.posLeft = 0;
el.style.posTop = 0;
数字+单位
el.style.left = "0px";
el.style.top = "0px";
css控制元素的样式:
document.getElementById("para").style.fontWeight ="bold";
或(其他也是这样):
document.getElementById("para").className ="strong"; ......
1、容器不扩展问题
这个是经常在我切图的时候遇到的问题,如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content= ......