HTML DIV CSS 笔记汇总

齐晓威_518

浏览: 625830 次
性别:
来自: 郑州

最近访客更多访客>>

huangsheng2012

cr135810

ws07

gaochunhu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS+DIV布局心得与体会

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)框架:其页面名称不允许包含特殊字符,连接符,空格,等必须是单个的单词或者字母组合

       

       

       

       

       

       

       

                       

<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 滚动延迟

分享到：

jQuery对下拉框、单选框、多选框的处理 | Javascript Dom Jquery 笔记汇总--转

2012-10-20 00:30
浏览 2793
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论