css柱状效果，h5柱状图

百度空间问题

参照这个修改就对了!

空间名称和简介区域

#header ——主体部分—空间头部的整个标题部分

#header div.lc ——主页左上角背景图片

#header div.rc—— 主页右上角背景图片

#header div.tit ——空间名称，即主标题，名字大小颜色

#header div.tit a.titlink ——空间名称链接，未被点击

#header div.tit a.titlink:visited——已被访问过的链接

#header div.desc ——空间简介，即副标题，位置大小颜色

-------------------------------------------------------------------------------

导航栏

#tabline ——菜单下方的横线，即分隔符，用来与空间名称分开

#tab ——导航菜单栏主体—页面上方“主页博客|相册……”栏背景图片

#tab a.on,#tab a.on:link,#tab a.on:visited—— 选中状态，即“导航栏链接”，大小颜色＋背景

#tab span ——导航栏项与项之间的分割符“|”

#tab a:link ——TAB“博客|相册……”栏链接颜色，未被点击

#tab a:visited——“博客|相册……”已被访问过的链接

#tab2 ——(基本选项 | 模板设置 | 高级设置 | 访问统计) 这行的菜单主体属性

#tab2 span ——TAB选中状态

#tab2 a ——TAB未选中状态

#tab2 a:link

#tab2 a:visited ——已被访问过的链接

-------------------------------------------------------------------------------

内容区域

.stage ——页面正文所有部分（导航栏以下）

其它区域（即访问量等信息）

#comm_info 主体部分——“其它”中“已有 人次访问本空间”颜色、位置

#comm_info div.line ——“已有 人次访问本空间”下面粉红色分割线相关设置

#comm_info a——“其它”中“什么是RSS？”颜色

#comm_info a:hover——悬停效果

#comm_info.mod——区域标题

#m_comm_info.modbox——其它区域模块

#pvshow——访问量数字字体#m_comm_info div a——百度logo

--------------------------------------------------------------------------------

页码区域

#page ——主体 高度大小位置

#page span—— 当前页码（不可点击）

#page a.pc—— 上一页和下一页 未被点击

#page a.pc:visited—— 已被点击

#page a.pi ——页码（可点击）

#page a.pi:visited ——已被访问过的链接

--------------------------------------------------------------------------------

模块区域

.mod ——模块标题，上下间距

.modhandle{cursor:move}

.modth ——模块标题栏主体和正文之间的距离

.modhead ——模块标题区的位置

.modopt ——模块操作区（如写新文章），间距

.modtit ——模块标题区（如文章列表、个人档案）大小颜色

.modtitlink ——模块标题链接

.modact ——操作文字链接，“修改个人资料”链接，——右上角“编辑”等链接的相关大小颜色设置。

.modbox ——模块内容区主背景颜色等

a.modact:link——“修改个人资料”链接颜色

a.modactlink:visited ——已被访问过的链接

.modtl ——模块左上角远郊边沿图片背景,第一列，空列

.modtc—— 模块中上的背景图片背景，第二、三列，个人档案、修改个人资料

.modtr ——模块右上角背景图片背景，第四列，空列

.modbl ——模块左下角背景图片背景

.modbc—— 模块中下、最下端一条背景图片背景

.modbr ——模块右下角背景图片背景

--------------------------------------------------------------------------------

文章区域

#m_blog div.tit ——文章标题

#m_blog div.tit a ——文章标题链接，大小颜色，未被点击

#m_blog div.tit a:visited ——文章标题大小颜色已被访问过的链接

#m_blog div.date ——文章发表日期，文字大小颜色

#m_blog div.cnt—— 文章内容大小颜色

#m_blog div.more ——“阅读全文”

#m_blog div.more a ——“阅读全文”的大小颜色，未被点击

#m_blog div.more a:visited ——“阅读全文”的大小颜色已被访问过的链接

#m_blog div.opt ——文章操作区（如“编辑”等的颜色大小）

#m_blog div.opt a ——文章操作链接大小颜色

#m_blog div.opt a:visited ——“编辑 删除 评论(4) 浏览(21)”已被访问过的链接

#m_blog div.line ——分隔条的相关设置

#m_blog div.none ——无文章提示信息，隐形设置，不需要改变

--------------------------------------------------------------------------------

个人档案区域

#mod_profile.modtit——首页个人档案标题

#m_pro a ——个人档案中“查看详细信息”的颜色，未被点击

#m_pro a:hover——悬停效果

#m_pro a:visited ——个人档案中“查看详细信息”已被访问过的链接

#m_pro div.image ——个人档案中个人头像的显示位置，分为“中，左，右——center,left,right”

#m_pro div.act ——操作区——个人介绍和头像的间距

#m_pro div.user ——个人用户名的大小颜色

#m_pro div.desc ——个人简介的大小颜色

#m_pro div.line—— 分界线

#m_pro td

#m_pro .photo——照片的背景(此项以下不能预览

#m_pro .photo td——加为好友发送消息中间“|”

#m_pro .photo .image

#m_pro .photo .line——头像下划线

#m_pro .ref

#m_pro .ref .tit——从“用户名”到“圈子”

#m_pro .ref .cnt

#m_pro .basic td——用户名至查看该用户在百度的等

#m_pro .basic .tit

#m_pro .basic a:hover——男省份日期链接，鼠标悬浮在上的链接，未被点击

#m_pro .basic a.nlk:hover——“贴吧发言”“知道回答”

#m_pro .pline——中间分界线

#m_pro .pitem——字体 高度

#m_pro .pitem .tit——我曾就读过的学校等

#m_pro .pitem a:hover——鼠标悬浮在上的链接

--------------------------------------------------------------------------------

相册区域

#m_album div.image ——相册中照片的显示位置，分为“中，左，右——center,left,right”

#m_album div.page ——“上一页”“下一页”

#m_album div.page a ——“上一页”的“下一页”未被点击

#m_album div.page a:visited—— “上一页”的“下一页”已被访问过的链接

#m_album div.image——相册预览区域

#m_album a img——图片链接

#m_album a:hover img——图片悬停效果

#cbut——相册操作按钮

#cbut a img{border:0px;filter:alpha(enabled=0)} ——按钮图片

--------------------------------------------------------------------------------

友情链接区域

#m_links div.item ——子项——友情链接中字体颜色大小

#m_links div.item a ——名称（链接）——友情链接中字体的大小颜色，未被点击

#m_links div.item a:visited ——友情链接中字体的大小颜色，已被点击

#m_links div.line ——分界线

--------------------------------------------------------------------------------

自定义模块1-4

#m_mylink1-4 div.item——“描述”的内容

#m_mylink1-4 div.item a——标题链接名称

#m_mylink1-4 div.item a:visited——标题链接名称已被访问过的链接

#m_mylink1-4 div.line——分割线

--------------------------------------------------------------------------------

文章分类区域

#m_artclg div.item ——子项——文章分类中各分类后面主题数及括号的大小颜色

#m_artclg div.item a ——分类名称（链接）——文章分类中各分类的大小颜色，未被点击

#m_artclg div.item a:visited ——文章分类中各分类已被访问过的链接

#m_artclg div.line ——分界线——文章分类中各分类之间的分隔符的相关设置

--------------------------------------------------------------------------------

最新评论区域

#m_comment div.item ——子项——最新评论中用户名的大小颜色，未被点击

#m_comment div.item a ——最新评论中用户名的大小颜色，未被点击

#m_comment div.item a:visited—— 最新评论中用户名的大小颜色，已被点击

#m_comment div.item a.cnt ——最新评论中评论文字的大小颜色，未被点击

#m_comment div.item a.cnt:visited ——最新评论中评论文字的大小颜色已被访问过的链接

#m_comment div.item a.cnt:hover ——最新评论中评论文字鼠标悬浮在上的链接

#m_comment div.line ——最新评论中各评论之间的分割线的相关设置

--------------------------------------------------------------------------------

相册列表

#m_albumlist——第一层相册区域背景

#m_albumlist div.none——无照片提示信息

#m_albumlist a img——小相册封面图

#m_albumlist a:hover img——鼠标悬停效果

#m_albumlist div.line——分界线

#m_albumlist div.tit——相册标题

#m_albumlist div.tit a

#m_albumlist div.tit a:hover——悬停效果

#m_albumlist span.count——照片数量

#m_albumlist a.act——操作区链接，如编辑、删除

#m_albumlist a.act:hover——鼠标悬停效果

#m_albumlist div.note——相册第二层图片区域

#m_albumlist div.desc——相册简介

#m_albumlist span.size——照片尺寸

#m_albumlist #page ——当前页码

#m_albumlist #page a——其他页码

#m_albumlist #page a:hover——鼠标悬停效果

#imagee a img——第三层图片区域

#m_albumlist div.phimg a img——图片

#m_albumlist div.phimg a:hover img——图片按钮悬停样式

#m_albumlist div.phinfo——图片信息

#m_albumlist div.phpage——操作按钮的区域

#m_albumlist div.phpage a img——操作按钮

#m_albumlist div.phpage a:hover img——操作按钮悬停样式

--------------------------------------------------------------------------------

好友列表

#m_friend div.filter

#m_friend div.catalog

#m_friend a img——好友头像

#m_friend a:hover img——悬停效果

#m_friend div.user

#m_friend div.user a ——好友名称（链接），未被点击

#m_friend div.user a:hover——悬停效果

#m_friend div.user a img——操作按钮图片

#m_friend div.user a:hover img——操作按钮图片

#m_friend div.user a:visited ——已被访问过的链接

#m_friend div.line ——分界线

--------------------------------------------------------------------------------

设置访问统计、模板设置

#m_setting a ——链接{color:#3399CC}

#m_setting a:hover——悬停效果

#m_setting a:visited ——颜色的设置，已被访问过的链接

#m_setting ——主体颜色的设置，已被点击

#m_setting img.sel ——模板预览图（选中状态）{border:4px solid #FFDB7B}

#m_setting img.unsel ——模板预览图（未选中状态）

#m_setting span.tit ——模板标题名称

#m_setting span.usr ——作者名

#m_setting div.sel ——“当前模板”文字

#m_setting div.line ——分界线

--------------------------------------------------------------------------------

系统公告

#m_sysinfo a ——链接 颜色的设置，未被点击

#m_sysinfo a:visited ——颜色的设置，已被访问过的链接

#m_sysinfo ——主体 颜色大小

#m_sysinfo span.new ——最新 颜色大小

#m_sysinfo span.date ——发布时间颜色大小

--------------------------------------------------------------------------------

基本选项

#m_setbase ——主体颜色大小

#m_setbase td ——颜色大小

#m_setbase div.line—— 分界线

#spSpaceName——空间名称

#spSpaceDescri——空间简介

#spConfigDispNum——每页显示文章

#spConfigDispMod——文章显示

#spDateMod——时间格式

#btn_submit——保存选项按钮

--------------------------------------------------------------------------------

网友评论

#in_comment ——主体宽度

#in_comment div.tit ——标题颜色大小等设置

#in_comment div.user ——发表人名、序号、-线颜色大小等设置

#in_comment div.user a ——发表人名（链接）未被点击的颜色大小

#in_comment div.user a:visited ——已被访问过的链接

#in_comment div.user span.date—— 发表时间颜色大小

#in_comment div.desc ——评论内容颜色大小

#in_comment div.line ——分隔符的设置

#in_send div.tit ——发表评论（标题）的设置

--------------------------------------------------------------------------------

文章存档

#m_filed div.item ——主题的颜色大小设置

#m_filed div.item a ——未被点击的颜色大小设置

#m_filed div.item a:visited ——已被访问过的链接

#m_filed div.line ——分界线

--------------------------------------------------------------------------------

最近访客

#m_track a ——访客ID字体颜色大小

#m_track a:hover—— 鼠标悬浮在ID上的链接

#m_track a img ——访客头像的滤镜效果，其他滤镜效果 {filter:invert} , {filter:xray }

#m_track a:hover img ——鼠标在访客头像上的悬停效果

--------------------------------------------------------------------------------

百度搜索

#m_search——百度搜索区域

#m_search input.text ——“互联网”等字体设置

#m_search input.radio ——“互联网”等底色设置

#m_search input.submit ——“百度搜索”设置

#mod_search.mod{background:url() no-repeat 0% 0%} ——百度搜索标题

#m_search input.text——输入框

#m_search label——选框区域

#m_search input.radio——选框前的圆圈

#m_search input.submit——提交按钮

--------------------------------------------------------------------------------

留言板

#mod_board.mod——留言板模块

#mod_board table.modth——以下6项如不设定则继承通用模块的样式

#mod_board td.modtl

#mod_board div.modhead

#mod_board span.modtit

#mod_board td.modtc

#mod_board td.modtr

input.#spBCmtAuthor——留言姓名输入框

input.#spBCmtURL——留言网址输入框

#spBCmtText——留言输入框

#vercode input——验证码输入框

#in_send td.f14 input——留言按钮

#in_msg div——留言区

#in_msg a——留言区链接

#in_msg a:hover——悬停效果

#in_msg div.tit——网友留言标题

#in_msg table.item——网友留言标题

#in_msg td.index——留言序号

#in_msg div.user——留言用户

#in_msg div.user a img——用户头像

#in_msg div.user a:hover img——悬停效果

#in_msg td.cnt——留言时间

#in_msg div.desc——留言内容

#in_msg div.line——分界线

--------------------------------------------------------------------------------

我的搜藏

#m_cang div.item——主体的颜色大小设置

#m_cang div.item a——未被点击的颜色大小设置

#m_cang div.item a:hover——悬停效果

#m_cang div.item a:visited——已被访问过的链接

#m_cang div.line——分界线

--------------------------------------------------------------------------------

柱状图

.stat td{line-height:22px;color:#333333;font-size:14px}/*累计访问量等字体*/

.chart{position:relative;margin:10px 0 30px 31px;border:1px solid #B3B3DC}/*柱状图上\左边线*/

.chart div.bar,.chart div.barhl{position:absolute;background:#DCDCF4;border:1px solid #B3B3DC;line-height:0}/*线柱颜色\底边颜色*/

.chart div.barhl{background:#C2C2F4}/*线柱悬停效果*/

.chart div.liney{position:absolute;border-top:1px dotted #B9B9B9;line-height:0}/*分隔线*/

.chart div.titx,.chart div.titxhl,.chart div.tity{position:absolute;color:#666;font-size:9px;font-family:Arial;text-align:center;white-space:nowrap}/*坐标数字*/

.chart div.titxhl{color:#FF0000}/*月份起始字体颜色*/

.chart div.hit{position:absolute;z-index:1000;width:100px;color:#666;font-size:12px;font-family:Arial}/*线柱悬停访问统计数字效果*/

.chart div.tity{text-align:right}

.stattop{float:left;margin-top:20px;margin-right:14px;padding:10px;width:199px!important;width:220px;border:1px solid #CDCDCD}/*以下为分析设置*/

.stattop{float:left;margin-top:20px;margin-right:14px;padding:10px;width:199px!important;width:220px;border:1px solid #CDCDCD}

.stattop .list{margin-top:6px}

.stattop .list td{height:20px}

--------------------------------------------------------------------------------

日历

#mod_cals .modbox——日历模块

#cals——日历主体背景、边框

#mod_cals .modbox td ——字体颜色设置

#m_cals——设置模块背景颜色

#m_cals div——背景设置

#cals .cal_body,#cals .cal_mth——除年月控制器外的日期部分，包括周和一般日期

#cals .cal_yr table——年、月表格

#cals .cal_yr td——*年、月单元格

#cals .cal_yr .cal_pre——上一月箭头（正常）

#cals .cal_yr .cal_nxt——下一月箭头（正常）

#cals .cal_yr .cal_pre_ovr——上一月箭头（鼠标悬停）

#cals .cal_yr .cal_nxt_ovr——下一月箭头（鼠标悬停）

相关问答

Q1: css样式设置排行榜效果

给你做了一个，美化的工作交给你啦，不过我看还可以，兼容性没什么问题。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title无标题文档/title

style type="text/css"

!--

#zhuti{

width:280px;

}

#uu{

margin:0px;

padding:0px;

}

.h{

width:280px;

margin:0px;

list-style-type: none;

font-size:13px;

color:#0066FF;

line-height:39px;

padding-left:15px;

}

.xianshi{

width:280px;

height:45px;

border:2px #FF9900 solid;

background-color:#FFF3E8;

padding-top:10px;

margin:0px;

list-style-type: none;

font-size:12px;

font-weight:bold;

color:#0066FF;

padding-left:15px;

display:none;

}

--

/style

script

var num=12; //确定li数量。

function a() //网页加载的时候设置li背景颜色。

{

var a=document.getElementById("uu").getElementsByTagName("li");

for(var i=0;inum;i++)

{

if((i%2)==1) a[i].style.display="none";

if((i%4)==0) a[i].style.backgroundColor="#dddddd"; //设置li的背景颜色。

}

}

function over(n)

{

var a=document.getElementById("uu").getElementsByTagName("li");

for(var i=0;inum;i++) //一个循环让鼠标经过的li显示对应的装有详细内容的li。

{

if((i%2)==1) a[i].style.display="none";

else

a[i].style.display="block";

}

a[n].style.display="none";

a[n+1].style.display="block";

}

/script

/head

body onload="a()"

div id="zhuti"

ul id="uu"

li class="h" onmouseover="over(0)"知性OL－简约大方通勤必备 /li

li class="xianshi"知性OL－简约大方通勤必备知性OL－简约大方通勤必备br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(2)"淑女系－可爱小女生最爱 /li

li class="xianshi"淑女系－可爱小女生最爱淑女系－可爱小女生最爱br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(4)"时尚派－柱形手提斜挎女包 /li

li class="xianshi"时尚派－柱形手提斜挎女包时尚派－柱形手提斜挎女包br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(6)"蝴蝶结－闪金淡蓝可爱单鞋 /li

li class="xianshi"蝴蝶结－闪金淡蓝可爱单鞋蝴蝶结－闪金淡蓝可爱单鞋br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(8)"坡跟鞋－韩版甜美坡跟凉鞋 /li

li class="xianshi"坡跟鞋－韩版甜美坡跟凉鞋坡跟鞋－韩版甜美坡跟凉鞋br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(10)"高跟鞋－复古小名媛圆头鞋 /li

li class="xianshi"高跟鞋－复古小名媛圆头鞋高跟鞋－复古小名媛圆头鞋br /font color="#CC0000"淘宝价：xx/font/li

/ul

/div

/body

/html

Q2: CSS常用样式二

实际应用，更多的使用italic属性值

实际应用中， 行高的数值通过设计图获取， 量取数值时需要使用一些辅助软件工具

选中文字工具，属性选中：不消除锯齿

字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。

font属性五个单一属性的值可以进行合写， 属性值可以有2到多个， 值之间用空格进行分隔。

font进行综合书写时， 必须有字号和字体参与， 而且必须字号在前， 字体在后， 不能颠倒顺序。

font属性经常对字体、 字号、 行高进行合写， 书写顺序必须是字号、 行高、 字体， 字号和行高之间必须用/进行分隔

如果font属性需要设置加粗和斜体， 两个属性值只能写在最前面， 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置

作用：设置文本整体是否有线条的装饰效果

作用：设置段落首行是否进行缩进

实际应用中，常用em

属性值区分正负， 正数表示向右缩进， 负数表示向左缩进

浏览器控制台中的盒模型图

作用： 设置可以添加元素内容的区域的宽度。

作用： 设置可以添加元素内容的区域的高度。

如果一个元素不添加 height 属性， 默认属性值为auto， 浏览器会自动计算出实际高度， 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。

书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左

设置四个属性值， 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值， 分配给上下、 左右 。

设置属性值只有一个， 四边的值相同。

作用： 设置边框的颜色。

属性值： 颜色名或颜色值， 整体类似 padding 综合属性写法。

每个单一属性都必须与复合属性 border 一致， 设置三个属性值。

书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左

设置四个属性值， 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值， 分配给上下、 左右 。

设置属性值只有一个， 四边的值相同。

给 body 标签设置整体文字样式， 让大部分后代标签全部去继承

设计图中盒子高度占位是固定的， 后面同级元素在高度下面加载。多余内容会溢出盒子。

设置了高度的盒子， 如果内部元素的加载高度超过父级， 会溢出。可以通过一个溢出的属性 overflow， 进行溢出部分内容的显示效果设置。

要求盒子高度必须自适应内部内容的高度。

或者设置height的属性值是自动的。

一个元素内部嵌套的子元素， 在父元素中居中。

针对类似 div 样式上必须独占一行的盒子， 如果子盒子宽度低于父盒子宽度， 可以设置子盒子的 margin 值， 水平方向的值都设置为 auto。

原因： auto 只在水平方向有作用， 水平方向的 margin 如果设置为 auto， 边距会自动无限增大， 直到撑满整个父元素除了子元素宽度之外剩余的区域， 如果两个水平方向都是 auto， 两边都要无限大， 只能达到一个平衡， 两边距离相同， 导致盒子居中。

一般情况下， 一个父元素内部可以放一个或多个子元素， 而且多个子元素要排成一行显示， 必须保证父元素的宽度一定要足够（不考虑溢出情况） ， 需要遵循一个设置尺寸的规律： 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin

如果不满足条件： 要么多余的子元素掉下来不能在一排， 要么溢出父元素

父子盒模型中， 只有一个子元素， 且子元素是类似 div 标签必须占一行的。不设置子元素的 width 属性， 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin， 不需要手动去进行内减， 子元素的 width 会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

在垂直方向如果有两个元素的外边距有相遇的， 浏览器中加载的真正的外边距不是两个间距的加和， 而是两个边距中值较大的， 边距值小的塌陷到了边距值大的值内部。

上面的元素有下边距， 下面的元素有上边距， 两个边距相遇， 真正的盒子间距离是较大的那个值

父子元素之间也会出现 margin 塌陷， 父元素和子元素都设置了同方向的margin-top 值， 两个属性之间没有其他的内容进行隔离， 导致两个属性相遇， 发生margin 塌陷。

本身父元素与上一个元素的距离是0， 子元素如果设置了垂直方向的上边距， 会带着父级一起掉下来。

水平方向的 margin 没有塌陷现象。

在标准流中， 大部分元素是区分等级的， 习惯将元素划分为几种常见的加载级别：块级元素、 行内元素、 行内块元素等。

大部分容器级标签包括p标签都是块级元素， 比如 div 、 h1 等。

大部分的文本级标签， 比如 span、 a、 b 等。

比如 img、 input 等。

可以通过 display 属性更改一个标签的显示模式。

属性值： 元素根据属性值不同， 可以加载对应元素等级的显示模式的特点。

display 属性更改的显示模式并没有改变标准流本质性质， 页面还是只能从上往下加载， 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括： 浮动、 绝对定位、 固定定位。

margin 塌陷现象出现在标准流中的， 浮动元素已经脱离标准流， 不再具有 margin塌陷现象。

与前面压盖效果结构类似， 同级元素中前面的元素浮动， 后面的元素不浮动， 不浮动的元素内部还有一些文字， 浮动的蓝盒子会压盖住粉盒子的一部分， 但是文字内容不会被盖住， 粉盒子中的文字会让开蓝盒子位置， 围绕它进行加载。这种效果称为字围现象。

可以利用字围现象制作一些特殊的图文混排布局效果

给标准流的父元素强制给一个合适的高度

作用： 清除标签元素自身受到的前面的浮动元素的影响。

给标准流父元素添加 clear 属性， 父元素不受前面浮动影响， 不会再占有浮动让出的位置。

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性， 可以解决浮动的所有问题。

父元素有了高度后， 可以管理住内部所有的浮动元素， 不会延伸到后面标签中影响贴边。

a 标签可以根据用户行为不同， 划分为四种状态， 通过a 标签的伪类可以将四种状态选中设置为不同的样式效果， 用户触发对应行为， 就可以加载对应的样式。

一般会将访问前和访问后状态设置为一样的效果， 保证了页面的统一性， 可以选择性的设置鼠标移上和鼠标点击状态。

更加常用的一种设置方式如下：

a 标签任何普通的选择器， 可以同时选中四种状态， 可以将四种状态设置为相同的样式， 属性可以设置所有的 a 默认显示样式的属性， 包括盒模型、 文字等。

a:hover 伪类选择器： 设置鼠标移上时不一样的样式属性。

属性值都是使用代表方向的单词进行书写。

使用像素值作为背景定位的属性值。

百分比表示法使用百分比数字作为属性值。

100%代表的数值：

background 属性可以将五个单一属性的值进行合写。

属性值： 可以有 1-5 个属性值， 值之间用空格进行分隔， 背景定位的两个属性值算作一个属性值， 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。

在h1 标签是权重最高的标签， 一般会在内部书写最重要的内容， 比如 logo 图片、 最大的标题等。

另外 h1 内部的文字， 可以帮助提高 SEO 搜索排名。

在设置的是 logo 图片时， 如果使用插入图， 就不能书写搜索关键字。

如果想解决 SEO 问题， 可以将 HTML 结构中， 插入图换成搜索关键字， 然后使用 css 添加背景图给 a 标签或 h1 标签。

在一个盒子中有背景图部分， 而且有文字内容， 文字会让开背景图区域进行加载，

背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图。

当用户访问一个网站时， 需要向服务器发送请求， 网页上的每张图像都要经过一次求才能展现给用户。

然而， 一个网页中往往会应用很多小的背景图像作为修饰， 当网页中的图像过多时，服务器就会频繁地接受和发送请求， 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数， 提高页面的加载速度， 出现了 CSS精灵技术（也称 CSS Sprites、 CSS 雪碧） 。

CSS 精灵是一种处理网页背景图像的方式。

它将一个页面涉及到的所有零星背景图像都集中到一张大图中去， 然后将大图应用于网页， 这样， 当用户访问该页面时， 只需向服务发送一次请求， 网页中的背景图像即可全部展示出来。

通常情况下， 这个由很多小的背景图像合成的大图被称为精灵图。

CSS3 支持背景半透明的写法， 颜色值增加了一种 rgba 模式。

rgba 模式 ： 在 rgb 基础上增加了一个不透明度的设置， 不透明度 alpha 取值范围在0-1 之间， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。

书写方式： rgba(红色， 绿色， 蓝色， 不透明度)

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

通过 background-size 设置背景图片的尺寸， 就像我们设置 img 的尺寸一样， 在移动 Web 开发中做屏幕适配应用非常广泛。

CSS3 中规定， 一个盒子上， 可以添加多个背景图片。

background-image 的属性值书写时， 以逗号分隔多背景的 URL路径地址。

注意： 背景加载时， 先写的背景压盖后写的背景图片。

属性名： position。

作用： 设置定位的元素， 它需要根据某个参考元素发生位置的偏移。

定位的元素要想发生位置的移动， 必须搭配偏移量属性进行设置。

水平方向： left、 right。

垂直方向： top、 bottom。

属性值： 常用 px 为单位的数值， 或者百分比。

子绝父相、 子绝父绝、 子绝父固

属性值： absolute， 绝对的意思。

参考元素： 参考的是距离最近的有定位的祖先元素， 如果祖先都没有定位， 参考body。必须搭配偏移量属性才会发生位置移动。

性质： 绝对定位的元素脱离标准流， 会让出标准流位置， 可以设置宽高， 也可以随时定义位置， 绝对定位的元素不设置宽高只能被内容撑开。

注意1： 绝对定位的参考元素是不固定的， 不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同， 具体位移效果不同。

注意2： 在绝对定位中， 由于参考点不同， left 正值不再等价于 right 的负值。

以 body 为参考元素时， 参考点的确定与偏移量方向有关

第一， 如果有 top 参与的定位， 参考点就是 body 页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。

第二， 如果有 bottom 参与的绝对定位， 参考点是 body 页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。

实际应用中， 如果以 body 为参考元素， 不同分辨率的浏览器中， 绝对定位的元素位置是不同的， 所以较少使用 body 作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素， 就不会去参考 body 。

参考元素： 参考的是祖先元素中有任意定位的， 在 HTML 结构中距离目标最近的祖先。

如果绝对定位的参考元素是某个祖先级， 参考点是盒子 border 以内的四个顶点， 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离， 会忽视参考元素的 padding 区域。

所有的定位类型都可以实现压盖效果。

由于绝对定位的元素脱标， 不占标准流位置， 压盖效果更彻底， 实际工作中， 常见的是 绝对定位制作压盖。

定位的元素不区分定位类型， 都会去压盖标准流或浮动的元素。

如果都是定位的元素， 在 HTML 中 后写定位压盖先写的定位 。

更改定位的元素的压盖顺序， 设置一个 z-index 属性。

属性值： 数字。

Q3: 如何用css结合mysql制作柱形图

利用mysql查出数据 然后然后通过js显示柱形图背景图片的百分比就是了

Q4: 如何css制作3d旋转立方体效果？

具体步骤如下：

一、立方体结构中，使用一个wrapper div来包裹立方体。在里面使用6个div来制作立方体的6个面。

二、立方体的每一个面都有它自己的元素。我们稍后会使用CSS来将立方体的6个面放置到正确的位置上。

三、在立方体的CSS样式中，首先要关注的是立方体的wrapper div。为了制作3D效果，我们需要为它提供一个 CSS perspective。

四、CSS perspective属性是一个比较复杂的CSS3属性。最好的理解它的方法是看完文档后，自己动手修改一下DEMO中的perspective属性来看看它的变化。

下面需要给包含立方体6个面的立方体的容器.cube提供样式：

1、.cube {

position: relative;

width: 200px;

transform-style: preserve-3d;

2、给立方体容器200像素的宽度，并设置为相对定位，这样在它里面的立方体的6个面可以设置为绝对定位。

3、preserve-3d属性确保所有6个面都处于3D立体状态。

4、在为6个面设置它们的位置之前，先给它们一些通用的样式：

.cube div {

position: absolute;

width: 200px;

height: 200px;

}

5、在进过上面对立方体6个面的一系列设置之后，现在我们可以为6个面制作变形效果，以使它们组装为一个立方体。

6、rotateY的值可以旋转立方体的各个面，使上面的文字处于正确的位置上。

7、而 translateZ 的值使元素在指定容器中向前或向后移动。translateY的值看起来有些混乱，但是请记住，它的作用是通过透明的面板来使指定的面升高或降低来制作3D效果。

8、每一个面都有自己的translations值来使它们处于适当的位置上。你可以自己修改一下这些值来看看效果。

Q5: css3中新增了哪些动画效果

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。

transform

rotate

设置元素顺时针旋转的角度，用法是：

transform: rotate(x);

参数x必须是以deg结尾的角度数或0，可为负数表示反向。

scale

设置元素放大或缩小的倍数，用法包括：

transform: scale(a); 元素x和y方向均缩放a倍

transform: scale(a, b); 元素x方向缩放a倍，y方向缩放b倍

transform: scaleX(a); 元素x方向缩放a倍，y方向不变

transform: scaleY(b); 元素y方向缩放b倍，x方向不变

translate

设置元素的位移，用法为：

transform: translate(a, b); 元素x方向位移a，y方向位移b

transform: translateX(a); 元素x方向位移a，y方向不变

transform: translateY(b); 元素y方向位移b，x方向不变

skew

设置元素倾斜的角度，用法包括：

transform: skew(a, b); 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b

transform: skewX(a); 元素x方向逆时针倾斜角度a，y方向不变

transform: skewY(b); 元素y方向顺时针倾斜角度b，想方向不变

以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。

matrix

设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。

origin

设置元素的悬挂点，用法包括：

transform-origin: a b; 元素的悬挂点为(a, b)

元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。

transition

transition-property

指定transition效果作用的CSS属性，其值是CSS属性名。

transition-duration

动画效果持续的时间，其值为以s结尾的秒数。

transition-timing-function

指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：

transition-delay

动画效果推迟开始执行的时间，其值为以s结尾的秒数。

CSS3动画的生命周期如下图所示，从中可以清楚的看出duration和delay之间的关系：

animation

CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。

关键帧@keyframes的语法结构如下：

@keyframesNAME {

a% {

/*CSS属性*/

}

b% {

/*CSS属性*/

}

...

}

NAME表示动画的名字；a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes中时无序的。

设置完关键帧后就可以继续设定animation了。

animation-name

指定选用的动画的名字，即keyframes中的NAME。

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。

animation-direction

设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放）。

css柱状效果的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于h5柱状图、css柱状效果的信息别忘了在本站进行查找喔。