HTML DIV CSS 笔记汇总
CSS层叠样式表单
Ctrl+j弹出自动提示,帮助.
鼠标放到元素上变形状(鼠标样式,鼠标形状变了):cursor:pointer;
元素的显示模式(display:none)
给控件做文本内容(即label来修饰文本)<labelfor=”user”>婚否</label><inputtyp=”checkbox”id=”user”/>这样,当点击”婚否”的时候也可以选中或不选复选框了
<fieldset>
<legend>这是标题</legend>
<inputtype=”text”/>
<inputtype=”text”/>
<inputtype=”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是外边距
<imgalt=”图片无法显示的时候显示的文字”title=”是将鼠标放到图片上的时候出现的提示信息”/>
如果样式发生冲突,则按样式优先级来(1.行内样式2.嵌入式样式3.外链样式)
<ahref="http://baidu.com/"target="_blank">target设置是否新窗口中打开</a>
<fontface="宋体"size="+4"color="#CC0000"style="background-color:#000099">调整字体的,只调整这个标签里的字体，不影响其他</font>
导入外部css样式表(不常用)
<styletype=text/css>
@importstyle.css
</style>
返回顶部:<ahref="#top">返回顶部</a>
设为首页:<aonclick="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/>例子:<hrwidth="500"size="1"noshade="noshade"align="center">
<xmp>取消标签对里的所有特效,仅仅用于查错</xmp>
<palign="center">对齐方式</p>
<nobr>取消文字的换行,禁止换行</nobr>
描点,锚点其实就是设置a标签,超链接的href=”#name”name就是想要跳到地点的控件的name
小技巧:网页中插入图片时,最好指定大小,这样,哪怕图片没有加载完成,也会先把位置占上
如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下width,height来缩小,因为任然会下载大图,会使得加载速度很慢
想要什么符号的话直接在设计器里敲就行了(版权符号©用©)
自动刷新页面<metahttp-equiv="Refresh"content="10;url=http://yourlink"/>
在不同浏览器中显示中文<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
Div中不允许使用<p></p>,可以用<span></span>解决
获取匹配元素在当前视口的相对偏移:kj.offset().left或者kj.offset().top即获取当前对象的top和left顶点坐标
//遮罩
<styletype="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:solid4px#F60
样式分类:web样式;内联样式;行列样式
选择器:HTML选择器
DIV{font-size:100px;}
Class选择器;(可以用到多个标签)
.wjq{background-color:red}然后相应的标签设置class=”wjq”
ID选择器;(只能用到一个标签)
#wjq{background-color:red}然后相应的标签设置id=”wjq”
关联选择器;(意思是class=”.divnum1”内的P标签使用该样式)
.DIVNum1P{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}//(当鼠标放上去时)
<bodylink="#0000CC"alink="#CC6600"vlink="#FF0000">设置正在访问的链接文本颜色,将鼠标指针放在这里，链接文本就会变成红色，单击超链接，文字的颜色变成第三种</body>
如果想同时使用两个不同的样式,如class=”yangshiyi01yangshi02”那么这个控件同时就同时有了两个样式的效果
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:30pxsolid#000(这是边框的标准写法,去掉任意一个都不行)
Border-left:3pxdotted#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:centerbottom
background-position:0px2px
固定背景或滚动背景设置background-attachment:fixed(填充背景)
合并设置背景样式例子:
{background:#00cc00url(logo.jpg)no-repeatbottomright}
背景音乐:<bgsoundsrc="音频地址"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:2px10px;
<!—type=”disc”可以设置列表项左侧符号的样式-->
<ultype="disc">
<litype="circle"style="font-size:16px">列表项</li>
<litype="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;/*是消除单元格之间的间距*/
<theadbgcolor="#CCFFFF">
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</thead>
主题:选择界面风格：可以用来更改主题
<selectonChange="document.styleSheets[0].href=
this.options[this.selectedIndex].value+'.css'">
<optionvalue="Style/mr"selected>默认风格</option>
<optionvalue="Style/red">粉红风情</option>
</select>
位置:居中:margin:0auto(margin是外边距)
居左/右(左/右漂移):float:left|right
表单给input添加背景色,背景图
一条线的文本框
.wjq{border:none;border-bottom:dashed1px#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名称"那么在框架网页中点击链接相应位置就会跳转到这个超链接的地址-->
<!--设置浮动框架-->
<iframesrc=http://baidu.com/name="k"width="76"scrollingscrolling="yes"></iframe>
<!如果要使用frameset,name静态网页中就不能写body及其里面的内容,即没有body>
<!--下面又是一个构架的嵌套-->
<framesetrows="163*,430*"framespacing="10"frameborder="yes"border="11"bordercolor="#CC0000">
<framesrc="http://www.baidu.com/"name="top01">
<framesetcols="60*,100*">
<framesrc="http://www.baidu.com/"name="left01">
<framesetrows="100*,100*">
<framesrc="http://www.baidu.com/"name="right01">
<framesrc="http://www.baidu.com/"name="right02">
</frameset>
<noframes>对不起,您的浏览器不支持框架页面</noframes>
</frameset>
</frameset>
调用iframe:在同一页面中,iframe以外的A标签或者按钮(linkButton等)的target=”本页中iframe的name”,则当点击A标签时,链接到的页面就会显示在iframe框架中
例子:加入本页iframe以外有个<ahref="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,<selectmultiple>或者<selectmultiple=”multiple”>(推荐),那么就是可以多选的listbox
Select中的项是<option>这是一个待选项</option>
<optionselected>设置本项为选中项</selected>或者
<optionselected=”selected”>设置本项为选中项</selected>(推荐)
如何实现”不选择”添加一个<optionvalue=”-1”>不选择</option>然后编程判断select选中的值如果是-1就认为是不选择
Select分组选项,可以使用optgroup对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都使用
分组演示:
<selectsize=”3”>
<optgrouplabel=”亚洲”>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
<optgrouplabel=”欧洲”>
<option>法国</option>
<option>德国</option>
<option>英国</option>
</optgroup>
</select>
<textareacols=”100”rows=”10”>多行文本</textarea>
Image或者img图像图片标签:一些属性alt提示文字Border边框hspace水平间距vspace垂直间距align对齐方式(多种)lowsrc设置低分辨率图片usemap印象地图
embed播放流媒体文件:<embedsrc="音频视频地址"width="400px"height="400px"autostart="true(是否自动播放)"loop="true(是否循环)"hidden="false(是否隐藏面板)">播放器需要一个播放插件</embed>
marquee滚动,图片滚动,文字滚动
<marqueedirection="right"behavior="scroll"loop="-1"scrollamount="3"scrolldelay="3"bgcolor="#FF0000"width="500"height="50">这是设置滚动效果的文字</marquee>
一些属性:direction设置滚动方向behavior滚动方式----循环滚动;滚动一次就停;来回交替滚动loop循环次数scrollamount滚动速度scrolldelay滚动延迟