html css学习笔记.docx
- 文档编号:29633879
- 上传时间:2023-07-25
- 格式:DOCX
- 页数:40
- 大小:41.43KB
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表示没有下划线 鼠标移动到按钮或链接上时背景变色 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; } 调用方法:
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。
最后效果
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html css学习笔记 css 学习 笔记
![提示](https://static.bdocx.com/images/bang_tan.gif)