CSS与HTML实战技巧
本文详细介绍了CSS和HTML的应用技巧，包括元素样式设置、表单控件美化、表格布局优化及响应式设计等方面的知识。
CSS 层叠样式表单
Ctrl+j 弹出自动提示,帮助.
鼠标放到元素上变形状(鼠标样式,鼠标形状变了):cursor: pointer;
元素的显示模式(display:none)
给控件做文本内容(即label来修饰文本) <label for=”user”>婚否</label><input typ=”checkbox” id=”user”/> 这样,当点击”婚否”的时候也可以选中或不选复选框了
<fieldset>
<legend>这是标题</legend>
<input type=”text”/>
<input type=”text”/>
<input type=”text”/>
</fieldset>
上面这个控件相当于 winfor 里面的 groupbox容器, 就是将一些控件框起来
全局css: *{padding:0;margin:0}
绝对定位/相对定位: position:absolute|relative
Css兼容性问题(在firfox中可以,在IE中不行时,设置元素;z-index:100;position:relative
):例子:选项卡效果
零散知识点:<pre>标签是去除特殊效果的</pre>
<center>这个标签代表居中显示</center>
<br/>和P标签对的区别: p标签前后有大量的空白
元素边缘距离(padding)内边距, margin 是外边距
<img alt=” 图片无法显示的时候显示的文字” title=” 是将鼠标放到图片上的时 候出现的提示信息” />
如果样式发生冲突,则按样式优先级来( 1.行内样式 2.嵌入式样式 3.外链样式 )
<a href="http://baidu.com/" target="_blank">target设置是否新窗口中打开</a>
<font face="宋体" size="+4" color="#CC0000" style="background-color:#000099">调整字体的, 只调整这个标签里的字体，不影响其他</font>
导入外部css样式表(不常用)
<style type=text/css>
@import style.css
</style>
返回顶部: <a href="#top">返回顶部</a>
设为首页: <a onclick="this.style.behavior='url(#default#homepage)';
this.sethomepage('http://baidu.com');"href="#">设为首页</a>
粗体(加粗) : b标签对或strong标签对,css中是 font-weight:bold
斜体 : I标签对或em标签对
上划线/下划线: u标签对
缩进 blockquote标签对
回车换行 : <br/>
横线: <hr/> 例子: <hr width="500" size="1" noshade="noshade" align="center">
<xmp>取消标签对里的所有特效 ,仅仅用于查错</xmp>
<p align="center">对齐方式</p>
<nobr>取消文字的换行,禁止换行</nobr>
描点,锚点其实就是设置a标签,超链接的href=”#name” name就是想要跳到地 点的控件的name
小技巧:网页中插入图片时,最好指定大小,这样,哪怕图片没有加载完成,也会先把位置占上
如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下width,height来 缩小,因为任然会下载大图,会使得加载速度很慢
想要什么符号的话直接在设计器里敲就行了( 版权符号©用 © )
自动刷新页面 < meta http-equiv="Refresh" content="10 ; url=http://yourlink" />
在不同浏览器中显示中文 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
Div中不允许使用 <p></p>,可以用 <span></span>解决
获取匹配元素在当前视口的相对偏移: kj.offset().left 或者 kj.offset().top 即获取当前对象的top和left 顶点坐标
//遮罩
<style type="text/css">
.mask {width:100%;height:100%; background-color:#000;position:absolute;
top:0px;left:0px;filter:alpha(opacity=30);display:block;z-index:100}
</style>
边框样式: border:solid 4px #F60
样式分类: web样式 ; 内联样式 ; 行列样式
选择器: HTML选择器
DIV{ font-size:100px;}
Class选择器 ; (可以用到多个标签)
.wjq{ background-color: red} 然后相应的标签设置class=”wjq”
ID选择器 ; (只能用到一个标签)
#wjq{ background-color: red} 然后相应的标签设置id=”wjq”
关联选择器 ; (意思是class=”.divnum1”内的P标签使用该样式)
.DIVNum1 P{ font-size:35px;}
组合选择器 ; (逗号两边的都应用此样式)
div,p{ font-size:35px;} 或者 .aaa,#bbb{ font-size:35px;}
伪元素选择器 (针对一个标签不同的状态显示不同的样式)
a{color:#ccc; font-size:12px;} (正常情况下)
A:visited{TEXT-DECORATION:none} //超链接点击过的样式
A:active{TEXT-DECORATION:none } //选中超链接时的样式
A:link{TEXT-DECORATION:none} //超链接未被访问过的状态
A:hover{TEXT-DECORATION:underline} //(当鼠标放上去时)
<body link="#0000CC" alink="#CC6600" vlink="#FF0000">设置正在访问的链接文本颜色,将鼠标指针放在这里，链接文本就会变成红色，单击超链接，文字的颜色变成第三种</body>
如果想同时使用两个不同的样式,如 class=”yangshiyi01 yangshi02” 那么这个控件同时就同时有了两个样式的效果
CSS注释: 一般在头部 /*网页css注释*/
CSS规范:标签要成对(标签对)例: <body></body> 或者 <br/>
CSS属性: 字体 : text-family:隶书 或者 font-family:’黑体’
单位:px或%
颜色: color:red
字体粗细: font-weight:blod(或3px)
字体风格:font-style:normal(主要定义斜体什么的)
划线: text-decoration:none ( 下/上划线,删除线(s标签对),斜线,文字闪烁等)
字母大小写: text-transform:uppercase (大小写转换)
Font-variant : small-caps ( 字母转为大写)
段落 : 水平对齐方式 text-align:right(右对齐) |inherit(继承父类对齐样式)
垂直对齐设置: vertical-align:top|middle|bottom|sub|super|10px(相 对于元素行高属性的百分比)
字母间距:letter-spacing
单词间距:word-spacing
文本行高:line-height:20px (行与行之间的间距,行间距)如果div中为 空,如果使用line-height 则他会自动填充 29px的高度,就相当于div中有东西
缩进方式:text-indent:pre
排版方式: white-space:normal|pre(,默认多个空格算一个,但pre将保 留空格个数)|nowrap(不换行,除非遇到br)
边框 : border-width:
Border-color:
Border-style:
Border
border:30px solid #000 (这是边框的标准写法,去掉任意一个都不行)
Border-left:3px dotted #060; (左边框(虚线),3像素,绿色)虚线(dotted)
Border-style:solid 边框风格,实线,虚线,点线(dotted)等
背景 : 背景颜色: background-color:red , 第二种写法bgcolor=”red”
背景图片: style=”background-image:url(‘/image/123.jpg’)”
背景重复方式设置: background-repeat:repeat-x| no-repeat|…
背景位置设置 background-position:center bottom
background-position:0px 2px
固定背景或滚动背景设置 background-attachment:fixed(填充背景)
合并设置背景样式例子:
{ background:#00cc00 url(logo.jpg) no-repeat bottom right}
背景音乐: <bgsound src="音频地址" loop="循环次数">
列表 列表图片符号 (list-style-image:url(‘logo.jpg’))
列表项的项目符号样式, 设置时将图片符号去掉(因为二者冲突)
(list-style-type: disc(实心圆)|circle(空心圆)|square(方块)|decimal(阿拉伯数字)|
lower-roman(小写罗马数字)|upper-roman(大写罗马数字)|
lower-alpha(小写英文字母)|upper-alpha(大写英文字母)|none(无项目符号);)
Li不显示圆点: list-style-type:none ; 一般设在li或者ul上
列表项位置 list-style-position设置值:inside(内部)|outside(外部)
list-style-position: 2px 10px;
<!—type=”disc”可以设置列表项左侧符号的样式-->
<ul type="disc">
<li type="circle" style="font-size:16px">列表项</li>
<li type="circle" style="font-size:16px">列表项</li>
</ul>
表格table 表格宽度和表格内容的关联方式 table{ table-layout : fixed;}
表格标题的显示方式和显示位置
table{ caption-side : bottom; text-align:left} (表格标题在表格上面的左边)
表格边框的显示方式 table{ border-collapse : collapse;}
表格边框和外边框之间的距离 table{ border –spacing : }
控制对空单元格的显示 table{ empty-cells : hide} (空单元格隐藏)
鼠标放入时显示方式 tr : hover{ color : red;}
表头的td可以用th代替,这样就会表头粗体,居中显示,建议表头标题 用<thead>代替<tr>
Rowspan(行跨度), colspan(列跨度)进行单元格的合并,占用多个单元格
<caption>表格的标题,自动居中,也可以用align设置对齐方式</caption>
border-collapse:collapse; /*是消除单元格之间的间距*/
<thead bgcolor="#CCFFFF">
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</thead>
主题: 选择界面风格：可以用来更改主题
<select onChange="document.styleSheets[0].href=
this.options[this.selectedIndex].value+'.css'" >
<option value="Style/mr" selected>默认风格</ option >
< option value="Style/red">粉红风情</ option >
</select>
位置 :居中:margin:0 auto (margin是外边距)
居左/右(左/右漂移):float:left|right
表单 给input添加背景色,背景图
一条线的文本框
.wjq { border:none; border-bottom:dashed 1px #060; color:#9c0; }
按钮样式控制 onMouseOver=”this.className=’.wjq’ ”
彩色的下拉框 给单个option选项单独设置class样式即可
类似Excel表格的表单 其实就是前台表格和后台数据库的交互
伪元素 超链接的正常状态( 没有任何动静 ) a : link { color:#000 }
访问过的超链接状态 a : visited { color:#ccc }
光标移动到超链接上的状态 a : hover { color:#f90 }
选中超链接时的状态 a : active { color:#f00 }
段落中的第一行文本 p : first - line {…}
段落中的第一个字母 P : first – letter {…}
h1 : first – child{ color: #ccc; font-size:77px;}
.div.d1>h1:first-child { color:red; font-size:20px; } 与下一句
.d1h1:first-child { color:red; font-size:20px; } 同上一句效果一样
鼠标样式: .p1{cursor:url(‘logo.jpg’)} 或者
Style=”cursor:url(图案的链接,后缀名为.cur)”
.span1{ cursor:move; }
.b1{cursor:text;}
滚动条: Overflow:hidden 隐藏滚动条
例子:.div1{ Overflow-x:hidden|auto 隐藏横向滚动条;
Overflow-y:scroll 显示纵向滚动条;
}
以下的滚动条的样式只对IE起作用,此外还要将代码第一行删除
ScrollBar – face – color: red (滚动条突出部分的颜色)
ScrollBar – highlight – color: red (滚动条空白部分的颜色)
ScrollBar – shadow – color: red (立体滚动条阴影的颜色)
ScrollBar – 3Dlight – color: red (滚动条亮边的颜色)
ScrollBar – arrow – color: red (上下按钮上三角箭头的颜色)
ScrollBar – track – color: red ( 滚动条的背景颜色 )
ScrollBar – darkshadow – color: red ( 滚动条强阴影的颜色)
ScrollBar – base – color: red (滚动条的基本颜色)
布局 DIV 不要将DIV用到文字中,DIV 是用来布局的
z-index空间位置,( z-index:auto|数字 ) 其实就是设置层叠div的层叠顺序
层(div ) 块( span)
层:<div></div>将内容放到层中,就以这些内容当成一个整体进行 处理,比如整体隐藏,整体移动等,div非常强大和常用
块:<span> div是将内容放到一个矩形的区域中(整体性),会影 响布局,而span只是把一段内容定义成一个整体进行操作,但不 影响该布局显示.
框架结构iframe(浮动框架) 和水平垂直(frameSet)框架:其页面名称不允许包含特殊字符,连接符,空格,等必须是单个的单词或者字母组合
<!--如果希望将同一个浏览器窗口进行水平分割,又进行垂直分割,就需要用到嵌套框架技术了-->
<!--frameborder属性是设置边框的 framespacing是设置边框宽度的 bordercolor是设置边框颜色的 -->
<!--noresize 是禁止调整框架窗口尺寸只要加上这个单词就是禁止 -->
<!--marginwidth设置框架边框与页面内容的水平边距 marginheight 设置边框与页面内容的垂直边距 -->
<!--scrolling = "是否显示滚动条" -->
<!-- <noframes></noframes> 标签对是当浏览器不支持框架页面时替换的内容 -->
<!--在原网页中写入超链接里加入属性 target="网页框架中的frame名称" 那么在框架网页中点击链接相应位置就会跳转到这个超链接的地址-->
<!--设置浮动框架-->
<iframe src=http://baidu.com/ name="k" width="76" scrolling scrolling="yes"></iframe>
<!如果要使用frameset,name静态网页中就不能写body及其里面的内容,即没有body>
<!--下面又是一个构架的嵌套-->
<frameset rows="163*,430*" framespacing="10" frameborder="yes" border="11" bordercolor="#CC0000">
<frame src="http://www.baidu.com/" name="top01">
<framesetcols="60*,100*" >
<frame src="http://www.baidu.com/" name="left01">
<frameset rows="100*,100*" >
<frame src="http://www.baidu.com/" name="right01">
<frame src="http://www.baidu.com/" name="right02">
</frameset>
<noframes>对不起,您的浏览器不支持框架页面</noframes>
</frameset>
</frameset>
调用iframe: 在同一页面中,iframe以外的 A 标签或者按钮(linkButton等)的target=”本页中 iframe的name”,则当点击A标签时, 链接到的页面就会显示在iframe框架中
例子: 加入本页iframe以外有个<a href="http://baidu.com" target="ifame123">
那么本页中名为 iframe123 就会装载百度页面
其他 display : block (块级元素,上下显示) | inline(行级元素,一行显示)|
inline-block(行级块元素) | list-item (列表级元素)| none
Float : left | right | none
Clear: left(清除左侧浮动属性)|right(清除右侧浮动属性)|
None(不清除)|both(两边清除)
Visibility : hidden (隐藏,但保留空间位置)| visible
Display: none(隐藏,并删除保留位,即内容,空间位同时消失)
裁切 clip: rect(top|right|bottom|left) auto
元素溢出后如何处理 Overflow:visible| hidden(将超出部分隐藏)| scroll| auto (自动产生滚动条)
超链接(url链接地址格式):“/” 表示网站根目录
“../”表示父目录
“http://www.cnblogs.com/”表示父目录的父目录
“./”或者不写任何斜线(反斜杠)表示相对于当前路 径的目录,站内引用最好相对URL ,这样域名改变了,目录改变了都不受影响
Src=”/image/pic01.jpg”; 这是正确的
Src=”../image/pic01.jpg”; 这是正确的
Src=”image/pic01.jpg”; 这是错误的
控件
Radio单选按钮:相同name属性的为一组(分组),不同的radio设置不同的value值来区分
File 文件选择控件 把 enctype必须设置为multipart/form-data, method属性为post
Select下拉列表控件,如果size属性大于1就是listbox ,
(在listbox的option中如果multiple=”设置是否可以多选”)
combobox,<select multiple>或者<select multiple=”multiple”>(推荐),那么就是可以多选的listbox
Select中的项是<option>这是一个待选项</option>
<option selected>设置本项为选中项</selected>或者
<option selected=”selected”>设置本项为选中项</selected>(推荐)
如何实现”不选择” 添加一个<option value=”-1”>不选择</option>然后编程判断select 选中的值如果是-1 就认为是不选择
Select分组选项,可以使用optgroup 对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都使用
分组演示:
<select size=”3”>
<optgrouplabel=”亚洲”>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
<optgroup label=”欧洲”>
<option>法国</option>
<option>德国</option>
<option>英国</option>
</optgroup>
</select>
<textarea cols=”100” rows=”10”> 多行文本</textarea>
Image或者img图像图片标签: 一些属性 alt提示文字 Border边框 hspace 水 平间距 vspace垂直间距 align对齐方式(多种) lowsrc 设置低分 辨率图片 usemap 印象地图
embed播放流媒体文件: <embed src="音频视频地址" width="400px" height="400px" autostart="true(是否自动播放)" loop="true(是否循环)" hidden="false(是否隐藏面板)">播放器需要一个播放插件</embed>
marquee滚动,图片滚动,文字滚动
<marquee direction="right" behavior="scroll" loop="-1" scrollamount="3" scrolldelay="3" bgcolor="#FF0000" width="500" height="50">这是设置滚动效果的文字</marquee>
一些属性: direction 设置滚动方向 behavior 滚动方式----循环滚动 ;滚动一次就停; 来回交替滚动 loop循环次数 scrollamount 滚动速度 scrolldelay 滚动延迟
Ctrl+j 弹出自动提示,帮助.
鼠标放到元素上变形状(鼠标样式,鼠标形状变了):cursor: pointer;
元素的显示模式(display:none)
给控件做文本内容(即label来修饰文本) <label for=”user”>婚否</label><input typ=”checkbox” id=”user”/> 这样,当点击”婚否”的时候也可以选中或不选复选框了
<fieldset>
<legend>这是标题</legend>
<input type=”text”/>
<input type=”text”/>
<input type=”text”/>
</fieldset>
上面这个控件相当于 winfor 里面的 groupbox容器, 就是将一些控件框起来
全局css: *{padding:0;margin:0}
绝对定位/相对定位: position:absolute|relative
Css兼容性问题(在firfox中可以,在IE中不行时,设置元素;z-index:100;position:relative
):例子:选项卡效果
零散知识点:<pre>标签是去除特殊效果的</pre>
<center>这个标签代表居中显示</center>
<br/>和P标签对的区别: p标签前后有大量的空白
元素边缘距离(padding)内边距, margin 是外边距
<img alt=” 图片无法显示的时候显示的文字” title=” 是将鼠标放到图片上的时 候出现的提示信息” />
如果样式发生冲突,则按样式优先级来( 1.行内样式 2.嵌入式样式 3.外链样式 )
<a href="http://baidu.com/" target="_blank">target设置是否新窗口中打开</a>
<font face="宋体" size="+4" color="#CC0000" style="background-color:#000099">调整字体的, 只调整这个标签里的字体，不影响其他</font>
导入外部css样式表(不常用)
<style type=text/css>
@import style.css
</style>
返回顶部: <a href="#top">返回顶部</a>
设为首页: <a onclick="this.style.behavior='url(#default#homepage)';
this.sethomepage('http://baidu.com');"href="#">设为首页</a>
粗体(加粗) : b标签对或strong标签对,css中是 font-weight:bold
斜体 : I标签对或em标签对
上划线/下划线: u标签对
缩进 blockquote标签对
回车换行 : <br/>
横线: <hr/> 例子: <hr width="500" size="1" noshade="noshade" align="center">
<xmp>取消标签对里的所有特效 ,仅仅用于查错</xmp>
<p align="center">对齐方式</p>
<nobr>取消文字的换行,禁止换行</nobr>
描点,锚点其实就是设置a标签,超链接的href=”#name” name就是想要跳到地 点的控件的name
小技巧:网页中插入图片时,最好指定大小,这样,哪怕图片没有加载完成,也会先把位置占上
如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下width,height来 缩小,因为任然会下载大图,会使得加载速度很慢
想要什么符号的话直接在设计器里敲就行了( 版权符号©用 © )
自动刷新页面 < meta http-equiv="Refresh" content="10 ; url=http://yourlink" />
在不同浏览器中显示中文 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
Div中不允许使用 <p></p>,可以用 <span></span>解决
获取匹配元素在当前视口的相对偏移: kj.offset().left 或者 kj.offset().top 即获取当前对象的top和left 顶点坐标
//遮罩
<style type="text/css">
.mask {width:100%;height:100%; background-color:#000;position:absolute;
top:0px;left:0px;filter:alpha(opacity=30);display:block;z-index:100}
</style>
边框样式: border:solid 4px #F60
样式分类: web样式 ; 内联样式 ; 行列样式
选择器: HTML选择器
DIV{ font-size:100px;}
Class选择器 ; (可以用到多个标签)
.wjq{ background-color: red} 然后相应的标签设置class=”wjq”
ID选择器 ; (只能用到一个标签)
#wjq{ background-color: red} 然后相应的标签设置id=”wjq”
关联选择器 ; (意思是class=”.divnum1”内的P标签使用该样式)
.DIVNum1 P{ font-size:35px;}
组合选择器 ; (逗号两边的都应用此样式)
div,p{ font-size:35px;} 或者 .aaa,#bbb{ font-size:35px;}
伪元素选择器 (针对一个标签不同的状态显示不同的样式)
a{color:#ccc; font-size:12px;} (正常情况下)
A:visited{TEXT-DECORATION:none} //超链接点击过的样式
A:active{TEXT-DECORATION:none } //选中超链接时的样式
A:link{TEXT-DECORATION:none} //超链接未被访问过的状态
A:hover{TEXT-DECORATION:underline} //(当鼠标放上去时)
<body link="#0000CC" alink="#CC6600" vlink="#FF0000">设置正在访问的链接文本颜色,将鼠标指针放在这里，链接文本就会变成红色，单击超链接，文字的颜色变成第三种</body>
如果想同时使用两个不同的样式,如 class=”yangshiyi01 yangshi02” 那么这个控件同时就同时有了两个样式的效果
CSS注释: 一般在头部 /*网页css注释*/
CSS规范:标签要成对(标签对)例: <body></body> 或者 <br/>
CSS属性: 字体 : text-family:隶书 或者 font-family:’黑体’
单位:px或%
颜色: color:red
字体粗细: font-weight:blod(或3px)
字体风格:font-style:normal(主要定义斜体什么的)
划线: text-decoration:none ( 下/上划线,删除线(s标签对),斜线,文字闪烁等)
字母大小写: text-transform:uppercase (大小写转换)
Font-variant : small-caps ( 字母转为大写)
段落 : 水平对齐方式 text-align:right(右对齐) |inherit(继承父类对齐样式)
垂直对齐设置: vertical-align:top|middle|bottom|sub|super|10px(相 对于元素行高属性的百分比)
字母间距:letter-spacing
单词间距:word-spacing
文本行高:line-height:20px (行与行之间的间距,行间距)如果div中为 空,如果使用line-height 则他会自动填充 29px的高度,就相当于div中有东西
缩进方式:text-indent:pre
排版方式: white-space:normal|pre(,默认多个空格算一个,但pre将保 留空格个数)|nowrap(不换行,除非遇到br)
边框 : border-width:
Border-color:
Border-style:
Border
border:30px solid #000 (这是边框的标准写法,去掉任意一个都不行)
Border-left:3px dotted #060; (左边框(虚线),3像素,绿色)虚线(dotted)
Border-style:solid 边框风格,实线,虚线,点线(dotted)等
背景 : 背景颜色: background-color:red , 第二种写法bgcolor=”red”
背景图片: style=”background-image:url(‘/image/123.jpg’)”
背景重复方式设置: background-repeat:repeat-x| no-repeat|…
背景位置设置 background-position:center bottom
background-position:0px 2px
固定背景或滚动背景设置 background-attachment:fixed(填充背景)
合并设置背景样式例子:
{ background:#00cc00 url(logo.jpg) no-repeat bottom right}
背景音乐: <bgsound src="音频地址" loop="循环次数">
列表 列表图片符号 (list-style-image:url(‘logo.jpg’))
列表项的项目符号样式, 设置时将图片符号去掉(因为二者冲突)
(list-style-type: disc(实心圆)|circle(空心圆)|square(方块)|decimal(阿拉伯数字)|
lower-roman(小写罗马数字)|upper-roman(大写罗马数字)|
lower-alpha(小写英文字母)|upper-alpha(大写英文字母)|none(无项目符号);)
Li不显示圆点: list-style-type:none ; 一般设在li或者ul上
列表项位置 list-style-position设置值:inside(内部)|outside(外部)
list-style-position: 2px 10px;
<!—type=”disc”可以设置列表项左侧符号的样式-->
<ul type="disc">
<li type="circle" style="font-size:16px">列表项</li>
<li type="circle" style="font-size:16px">列表项</li>
</ul>
表格table 表格宽度和表格内容的关联方式 table{ table-layout : fixed;}
表格标题的显示方式和显示位置
table{ caption-side : bottom; text-align:left} (表格标题在表格上面的左边)
表格边框的显示方式 table{ border-collapse : collapse;}
表格边框和外边框之间的距离 table{ border –spacing : }
控制对空单元格的显示 table{ empty-cells : hide} (空单元格隐藏)
鼠标放入时显示方式 tr : hover{ color : red;}
表头的td可以用th代替,这样就会表头粗体,居中显示,建议表头标题 用<thead>代替<tr>
Rowspan(行跨度), colspan(列跨度)进行单元格的合并,占用多个单元格
<caption>表格的标题,自动居中,也可以用align设置对齐方式</caption>
border-collapse:collapse; /*是消除单元格之间的间距*/
<thead bgcolor="#CCFFFF">
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</thead>
主题: 选择界面风格：可以用来更改主题
<select onChange="document.styleSheets[0].href=
this.options[this.selectedIndex].value+'.css'" >
<option value="Style/mr" selected>默认风格</ option >
< option value="Style/red">粉红风情</ option >
</select>
位置 :居中:margin:0 auto (margin是外边距)
居左/右(左/右漂移):float:left|right
表单 给input添加背景色,背景图
一条线的文本框
.wjq { border:none; border-bottom:dashed 1px #060; color:#9c0; }
按钮样式控制 onMouseOver=”this.className=’.wjq’ ”
彩色的下拉框 给单个option选项单独设置class样式即可
类似Excel表格的表单 其实就是前台表格和后台数据库的交互
伪元素 超链接的正常状态( 没有任何动静 ) a : link { color:#000 }
访问过的超链接状态 a : visited { color:#ccc }
光标移动到超链接上的状态 a : hover { color:#f90 }
选中超链接时的状态 a : active { color:#f00 }
段落中的第一行文本 p : first - line {…}
段落中的第一个字母 P : first – letter {…}
h1 : first – child{ color: #ccc; font-size:77px;}
.div.d1>h1:first-child { color:red; font-size:20px; } 与下一句
.d1h1:first-child { color:red; font-size:20px; } 同上一句效果一样
鼠标样式: .p1{cursor:url(‘logo.jpg’)} 或者
Style=”cursor:url(图案的链接,后缀名为.cur)”
.span1{ cursor:move; }
.b1{cursor:text;}
滚动条: Overflow:hidden 隐藏滚动条
例子:.div1{ Overflow-x:hidden|auto 隐藏横向滚动条;
Overflow-y:scroll 显示纵向滚动条;
}
以下的滚动条的样式只对IE起作用,此外还要将代码第一行删除
ScrollBar – face – color: red (滚动条突出部分的颜色)
ScrollBar – highlight – color: red (滚动条空白部分的颜色)
ScrollBar – shadow – color: red (立体滚动条阴影的颜色)
ScrollBar – 3Dlight – color: red (滚动条亮边的颜色)
ScrollBar – arrow – color: red (上下按钮上三角箭头的颜色)
ScrollBar – track – color: red ( 滚动条的背景颜色 )
ScrollBar – darkshadow – color: red ( 滚动条强阴影的颜色)
ScrollBar – base – color: red (滚动条的基本颜色)
布局 DIV 不要将DIV用到文字中,DIV 是用来布局的
z-index空间位置,( z-index:auto|数字 ) 其实就是设置层叠div的层叠顺序
层(div ) 块( span)
层:<div></div>将内容放到层中,就以这些内容当成一个整体进行 处理,比如整体隐藏,整体移动等,div非常强大和常用
块:<span> div是将内容放到一个矩形的区域中(整体性),会影 响布局,而span只是把一段内容定义成一个整体进行操作,但不 影响该布局显示.
框架结构iframe(浮动框架) 和水平垂直(frameSet)框架:其页面名称不允许包含特殊字符,连接符,空格,等必须是单个的单词或者字母组合
<!--如果希望将同一个浏览器窗口进行水平分割,又进行垂直分割,就需要用到嵌套框架技术了-->
<!--frameborder属性是设置边框的 framespacing是设置边框宽度的 bordercolor是设置边框颜色的 -->
<!--noresize 是禁止调整框架窗口尺寸只要加上这个单词就是禁止 -->
<!--marginwidth设置框架边框与页面内容的水平边距 marginheight 设置边框与页面内容的垂直边距 -->
<!--scrolling = "是否显示滚动条" -->
<!-- <noframes></noframes> 标签对是当浏览器不支持框架页面时替换的内容 -->
<!--在原网页中写入超链接里加入属性 target="网页框架中的frame名称" 那么在框架网页中点击链接相应位置就会跳转到这个超链接的地址-->
<!--设置浮动框架-->
<iframe src=http://baidu.com/ name="k" width="76" scrolling scrolling="yes"></iframe>
<!如果要使用frameset,name静态网页中就不能写body及其里面的内容,即没有body>
<!--下面又是一个构架的嵌套-->
<frameset rows="163*,430*" framespacing="10" frameborder="yes" border="11" bordercolor="#CC0000">
<frame src="http://www.baidu.com/" name="top01">
<framesetcols="60*,100*" >
<frame src="http://www.baidu.com/" name="left01">
<frameset rows="100*,100*" >
<frame src="http://www.baidu.com/" name="right01">
<frame src="http://www.baidu.com/" name="right02">
</frameset>
<noframes>对不起,您的浏览器不支持框架页面</noframes>
</frameset>
</frameset>
调用iframe: 在同一页面中,iframe以外的 A 标签或者按钮(linkButton等)的target=”本页中 iframe的name”,则当点击A标签时, 链接到的页面就会显示在iframe框架中
例子: 加入本页iframe以外有个<a href="http://baidu.com" target="ifame123">
那么本页中名为 iframe123 就会装载百度页面
其他 display : block (块级元素,上下显示) | inline(行级元素,一行显示)|
inline-block(行级块元素) | list-item (列表级元素)| none
Float : left | right | none
Clear: left(清除左侧浮动属性)|right(清除右侧浮动属性)|
None(不清除)|both(两边清除)
Visibility : hidden (隐藏,但保留空间位置)| visible
Display: none(隐藏,并删除保留位,即内容,空间位同时消失)
裁切 clip: rect(top|right|bottom|left) auto
元素溢出后如何处理 Overflow:visible| hidden(将超出部分隐藏)| scroll| auto (自动产生滚动条)
超链接(url链接地址格式):“/” 表示网站根目录
“../”表示父目录
“http://www.cnblogs.com/”表示父目录的父目录
“./”或者不写任何斜线(反斜杠)表示相对于当前路 径的目录,站内引用最好相对URL ,这样域名改变了,目录改变了都不受影响
Src=”/image/pic01.jpg”; 这是正确的
Src=”../image/pic01.jpg”; 这是正确的
Src=”image/pic01.jpg”; 这是错误的
控件
Radio单选按钮:相同name属性的为一组(分组),不同的radio设置不同的value值来区分
File 文件选择控件 把 enctype必须设置为multipart/form-data, method属性为post
Select下拉列表控件,如果size属性大于1就是listbox ,
(在listbox的option中如果multiple=”设置是否可以多选”)
combobox,<select multiple>或者<select multiple=”multiple”>(推荐),那么就是可以多选的listbox
Select中的项是<option>这是一个待选项</option>
<option selected>设置本项为选中项</selected>或者
<option selected=”selected”>设置本项为选中项</selected>(推荐)
如何实现”不选择” 添加一个<option value=”-1”>不选择</option>然后编程判断select 选中的值如果是-1 就认为是不选择
Select分组选项,可以使用optgroup 对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都使用
分组演示:
<select size=”3”>
<optgrouplabel=”亚洲”>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
<optgroup label=”欧洲”>
<option>法国</option>
<option>德国</option>
<option>英国</option>
</optgroup>
</select>
<textarea cols=”100” rows=”10”> 多行文本</textarea>
Image或者img图像图片标签: 一些属性 alt提示文字 Border边框 hspace 水 平间距 vspace垂直间距 align对齐方式(多种) lowsrc 设置低分 辨率图片 usemap 印象地图
embed播放流媒体文件: <embed src="音频视频地址" width="400px" height="400px" autostart="true(是否自动播放)" loop="true(是否循环)" hidden="false(是否隐藏面板)">播放器需要一个播放插件</embed>
marquee滚动,图片滚动,文字滚动
<marquee direction="right" behavior="scroll" loop="-1" scrollamount="3" scrolldelay="3" bgcolor="#FF0000" width="500" height="50">这是设置滚动效果的文字</marquee>
一些属性: direction 设置滚动方向 behavior 滚动方式----循环滚动 ;滚动一次就停; 来回交替滚动 loop循环次数 scrollamount 滚动速度 scrolldelay 滚动延迟
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
