资源描述
html css学习笔记.docx
《html css学习笔记.docx》由会员分享,可在线阅读,更多相关《html css学习笔记.docx(40页珍藏版)》请在冰豆网上搜索。
htmlcss学习笔记
HTMLButton.onclick事件汇总
2011-05-1817:
10:
57
"+window.location.href'type="button"value="查看源文件"name="Button7">
\\Autorun.inf')"type="button"value="另存为">
(1)"type="button"value="前进">
window.open('#','','scrollbars=yes,width=600,height=200')">
history.go(-1);"/>
关于web设计中的命名标准
#page
#header
#logo
#sm(servicemenu)
.regsiter
.login
#nav
.menu
.subMenu
.search
.sreachbtn(搜索按钮).sreachinput(搜索输入框)
#container
.bread
[#areaSidebar]
#sidebar
.title
.service
.news
.newslist
.piclist
.hot
.msg(提示信息)
.download
.tab
.list
.accordion
[#areaBanner]
#content
.contentMain
.input
.select
.note
.summary
.column
#footer
.areaFooter
.footerBottom
.partner
.copyRight
.friendLink
--------------------------------
#page(w:
960px)
#logo(w:
250pxH:
60px)
#areaHeader(W:
468pxH:
60px)
#areaSidebar(W:
200pxH:
auto)
#areaBanner(W:
760pxH:
auto)
.areaFooter(W:
autoH:
auto)
--------------------------------
hlcf
hcrf
hlcrf
hcf
组件命名:
.box
.boxHeader
.boxBody
.boxFooter
.tab
.tabHeader
.tabHeaderContent
.tabContent
.tabFooter
.tabFooterContent
.panel
.panelHeader
.panelHeaderContent
.panelBody
.panelFooter
.panelFooterContent
.dialog
.dialogHeader
.dialogContent
.dialogFooter
.table
.caption
.tableList
.pageList
.Previous
.next
-------------------------------
页面碎片fragment命名:
/
index.html
login.html
/account
apply.html
/info
newsList.html
news.html
staticPage.html
/myaccount
overview.html
updUser.html
changePwd.html
energyAssessment.html
resourceCenter.html
/myaccount/report
reportManage.html
reportList.html(QA提到的report列表)
/myaccount/report/rdsap
reportList.html(EA提到的report列表)
addReport.html
step_ADDRESS.html
step_CHS.html()
step_CLA.html()
step_DIM.html()
step_FLAM.html()
step_FLO.html()
step_GEN.html()
step_IM.html()
step_MAIHS.html()
step_NOTSC.html()
step_ROO.html()
step_ROOR.html()
step_SECHS.html()
step_WAL.html()
step_WATHS.html()
step_WIN.html()
/myaccount/report/sap
/myaccount/report/airs
text-decoration:
none表示没有下划线
鼠标移动到按钮或链接上时背景变色
你给标签设上样式.再给a:
hover设上另外的样式就行了.
a{background:
#ff0000;}
a:
hover{background:
#00ff00}
如果是按钮就这样
.mover{background:
#ff0000;}
.mout{background:
#00ff00}
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。
其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是:
:
link
:
visited
:
hover
:
active
因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下:
a:
link,定义正常链接的样式;
a:
visited,定义已访问过链接的样式;
a:
hover,定义鼠标悬浮在链接上时的样式;
a:
active,定义鼠标点击链接时的样式。
示例:
a:
link{
color:
#FF0000;
text-decoration:
underline;
}
a:
visited{
color:
#00FF00;
text-decoration:
none;
}
a:
hover{
color:
#000000;
text-decoration:
none;
}
a:
active{
color:
#FFFFFF;
text-decoration:
none;
}
上面示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。
如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义:
a:
link,
a:
visited{
color:
#FF0000;
text-decoration:
underline;
}
a:
hover,
a:
active{
color:
#000000;
text-decoration:
none;
}
链接定义的顺序
没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVeHAte原则(大写字母就是它们的首字母)。
定义局部链接样式
在CSS中写上a:
link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。
示例:
#sidebara:
link,
#sidebara:
visiteid{
color:
#FF0000;
text-decoration:
none;
}
#sidebara:
hover,
#sidebara:
active{
color:
#000000;
text-decoration:
underline;
}
调用方法:
链接到aa页面
class的定义方法和id相同,只要将#sidebar改为.sidebar就行了,还有一种方法是直接定义链接的样式,那样更直接,不过调用时比较麻烦,需要给每个特定的链接加上定义的代码。
示例:
.redlinka:
link,
.redlinka:
visiteid
{
color:
#FF0000;
text-decoration:
none;
}
.redlinka:
hover,
.redlinka:
active
{
color:
#000000;
text-decoration:
underline;
background:
#FFFFFF;
}
在最后两种方式中是制定某个a标签的样式,因此需要在a.link......前面写上标签上一层的类名或者id
渐变色火狐和ie
css之FILTER:
progid:
DXImageTransform.Microsoft.Gradient使用
分类:
Html2012-12-2421:
194788人阅读评论
(2)收藏举报
在修改UI-UE工作的时候遇到一个问题,一个样式在firefox上正常的在IE上不正常经过查找发现是当时的开发人员只实现了firefox的逐渐变色效果,却没有去实现IE的效果,后来查找了一些资料使用IE的滤镜来完善相应的页面,并找到了rgba和16进制颜色转变的方法
火狐下的样式background-image:
-moz-linear-gradient(rgba(255,255,255,0.7)0%,rgba(255,255,255,0)100%);
IE下:
filter:
progid:
DXImageTransform.Microsoft.gradient(startColorstr='#B2FFFFFF',endColorstr='#00FFFFFF',GradientType=0);/*IE6-9*/
语法:
filter:
progid:
DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)
属性:
enabled:
可选项。
布尔值(Boolean)。
设置或检索滤镜是否激活。
true|false
true:
默认值。
滤镜激活。
false:
滤镜被禁止。
startColorStr:
可选项。
字符串(String)。
设置或检索色彩渐变的开始颜色和透明度。
其格式为#AARRGGBB。
AA、RR、GG、BB为十六进制正整数。
取值范围为00-FF。
RR指定红色值,GG指定绿色值,BB指定蓝色值,参阅#RRGGBB颜色单位。
AA指定透明度。
00是完全透明。
FF是完全不透明。
超出取值范围的值将被恢复为默认值。
取值范围为#FF000000-#FFFFFFFF。
默认值为#FF0000FF。
不透明蓝色。
EndColorStr:
可选项。
字符串(String)。
设置或检索色彩渐变的结束颜色和透明度。
参阅startColorStr属性。
默认值为#FF000000。
不透明黑色。
特性:
Enabled:
可读写。
布尔值(Boolean)。
参阅enabled属性。
GradientType:
可读写。
整数值(Integer)。
设置或检索色彩渐变的方向。
1|0
1:
默认值。
水平渐变。
0:
垂直渐变。
StartColorStr:
可读写。
字符串(String)。
参阅startColorStr属性。
StartColor:
可读写。
整数值(Integer)。
设置或检索色彩渐变的开始颜色。
取值范围为0-4294967295。
0为透明。
4294967295为不透明白色。
EndColorStr:
可读写。
字符串(String)。
设置或检索色彩渐变的结束颜色和透明度。
参阅startColorStr属性。
默认值为#FF000000。
不透明黑色。
EndColor:
可读写。
整数值(Integer)。
设置或检索色彩渐变的结束颜色。
取值范围为0-4294967295。
0为透明。
4294967295为不透明白色。
当在脚本中使用此特性时,也可以用十六进制格式:
0xAARRGGBB。
说明:
在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时,在渐变册色彩层之上的文本程序性的初始化为透明的,当色彩渐变实现后,文本颜色会以其定义的值更新。
示例:
#idDiv{position:
absolute;left:
140px;height:
400;width:
400;filter:
progid:
DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550000FF,endColorstr=#55FFFF00);}
#idDiv{position:
absolute;left:
140px;height:
400;width:
400;filter:
progid:
DXImageTransform.Microsoft.gradient();}
具体使用
progid:
DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#ffffff',endColorStr='#ff0000')">
滤镜实用:
哀悼日,各网站页面全部用黑白色,用以下滤镜!
!
为方便站点哀悼,特提供css滤镜代码,以表哀悼。
以下为全站CSS代码。
html{filter:
progid:
DXImageTransform.Microsoft.BasicImage(grayscale=1);}
使用方法:
这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装
如果网站没有使用CSS,可以在网页/模板的HTML代码和之间插入:
html{filter:
progid:
DXImageTransform.Microsoft.BasicImage(grayscale=1);}
<>
有一些站长的网站可能使用这个css不能生效,是因为网站没有使用最新的网页标准协议
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http:
//www.w3.org/1999/xhtml">
请将网页最头部的替换为以上代码。
有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:
最简单的把页面变成灰色的代码是在head之间加
html{
FILTER:
gray
}
<>
DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的,其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的RRGGBB就是颜色的十六进制代码。
例子中background:
rgba(125,0,0,.3);表示的是30%不透明度的红色背景。
把30%的不透明度转换成十六制呢的方法如下:
先计算#AA的的十进制x,x/255=3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4B。
最后效果