HTML DIV CSS 笔记汇总

HTML DIV CSS 笔记汇总

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

css html 

CSS 层叠样式表单 



Ctrl+j 弹出自动提示,帮助. 

鼠标放到元素上变形状(鼠标样式,鼠标形状变了):cursor: pointer; 

元素的显示模式(display:none) 



给控件做文本内容(即label来修饰文本) 婚否     这样,当点击”婚否”的时候也可以选中或不选复选框了 

 

        

这是标题

 

          

          

          

 

上面这个控件相当于 winfor 里面的  groupbox容器, 就是将一些控件框起来 



全局css: *{padding:0;margin:0} 

绝对定位/相对定位: position:absolute|relative 

Css兼容性问题(在firfox中可以,在IE中不行时,设置元素;z-index:100;position:relative 

):例子:选项卡效果 

零散知识点:

标签是去除特殊效果的

 

                            这个标签代表居中显示 

                           
和P标签对的区别: p标签前后有大量的空白 

                            元素边缘距离(padding)内边距, margin 是外边距 

                             

                   如果样式发生冲突,则按样式优先级来( 1.行内样式  2.嵌入式样式  3.外链样式 ) 

                   target设置是否新窗口中打开 

调整字体的, 只调整这个标签里的字体，不影响其他 

          导入外部css样式表(不常用) 

                      

        返回顶部: 返回顶部 

              设为首页: 设为首页 



                   粗体(加粗) : b标签对或strong标签对,css中是 font-weight:bold 

                   斜体 : I标签对或em标签对 

        上划线/下划线: u标签对 

                   缩进  blockquote标签对 

             回车换行 :
 

        横线:

---

  例子:

---

 

                   取消标签对里的所有特效 ,仅仅用于查错 

             

对齐方式

 

              取消文字的换行,禁止换行 

              描点,锚点其实就是设置a标签,超链接的href=”#name”    name就是想要跳到地                                          点的控件的name 

             

小技巧:网页中插入图片时,最好指定大小,这样,哪怕图片没有加载完成,也会先把位置占上 

            如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下width,height来           缩小,因为任然会下载大图,会使得加载速度很慢 

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

                   自动刷新页面  < meta http-equiv="Refresh" content="10 ; url=http://yourlink" /> 

                   在不同浏览器中显示中文   

                   Div中不允许使用

,可以用 解决 

                  

获取匹配元素在当前视口的相对偏移: kj.offset().left 或者 kj.offset().top  即获取当前对象的top和left 顶点坐标 



//遮罩 

      







边框样式:      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}  //(当鼠标放上去时) 

设置正在访问的链接文本颜色,将鼠标指针放在这里，链接文本就会变成红色，单击超链接，文字的颜色变成第三种 



如果想同时使用两个不同的样式,如  class=”yangshiyi01  yangshi02”  那么这个控件同时就同时有了两个样式的效果 





CSS注释: 一般在头部 /*网页css注释*/ 

CSS规范:标签要成对(标签对)例: 或者
 

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} 

                                        背景音乐:  

                            列表   列表图片符号  (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; 

                                      

                                  

 

                                              
• 列表项
 

                              
• 列表项
 

                                     

 



                            表格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代替,这样就会表头粗体,居中显示,建议表头标题                                                     用代替 

                      Rowspan(行跨度), colspan(列跨度)进行单元格的合并,占用多个单元格 

                 表格的标题,自动居中,也可以用align设置对齐方式 

                     border-collapse:collapse; /*是消除单元格之间的间距*/ 



                   

                            列标题1 

                            列标题2 

                            列标题3 

                      

                            主题: 选择界面风格：可以用来更改主题 

                              

                                         默认风格  

                                         < option  value="Style/red">粉红风情  

                            



            位置  :居中: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是将内容放到一个矩形的区域中(整体性),会影                                      响布局,而span只是把一段内容定义成一个整体进行操作,但不                                        影响该布局显示. 

              框架结构iframe(浮动框架) 和水平垂直(frameSet)框架:其页面名称不允许包含特殊字符,连接符,空格,等必须是单个的单词或者字母组合 

        

        

        

        

        

        

        



                        

 

                 

                        

                      

               

               

                      

                             

                                      

                                      

                             

                            对不起,您的浏览器不支持框架页面 

               

        





调用iframe: 在同一页面中,iframe以外的 A 标签或者按钮(linkButton等)的target=”本页中                 iframe的name”,则当点击A标签时, 链接到的页面就会显示在iframe框架中 

例子:  加入本页iframe以外有个 

                     那么本页中名为 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,或者(推荐),那么就是可以多选的listbox 

Select中的项是这是一个待选项 

设置本项为选中项或者 

设置本项为选中项(推荐) 

如何实现”不选择” 添加一个不选择然后编程判断select 选中的值如果是-1 就认为是不选择 

Select分组选项,可以使用optgroup 对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都使用 

分组演示: 

 

   

         北京 

上海 

深圳 

 

 

         法国 

德国 

英国 

 

 

多行文本 

Image或者img图像图片标签: 一些属性 alt提示文字  Border边框   hspace 水                                          平间距  vspace垂直间距  align对齐方式(多种)  lowsrc 设置低分                                      辨率图片   usemap 印象地图 

embed播放流媒体文件: 播放器需要一个播放插件 

marquee滚动,图片滚动,文字滚动 

这是设置滚动效果的文字 

一些属性:  direction 设置滚动方向  behavior 滚动方式----循环滚动 ;滚动一次就停; 来回交替滚动  loop循环次数 scrollamount 滚动速度 scrolldelay 滚动延迟