HTML DIV CSS 笔记汇总

HTML DIV CSS 笔记汇总

博客分类： 
• CSS+DIV布局心得与体会

csshtml 

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来           缩小,因为任然会下载大图,会使得加载速度很慢 

           想要什么符号的话直接在设计器里敲就行了( 版权符号©用 &copy; ) 

                   自动刷新页面  < 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 滚动延迟