Div+CSS 标准梳理 提升高效率

2021-03-14 02:07 jianzhan

1、           善用css缩写标准

    /*留意上、右、下、左的撰写次序*/

1.      有关边距(4边):

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px    (省略的左等于右)

1px 2px         (省略的上等于下)

1px            (4边都同样)

 

2.      简化全部:

*/ body{margin:0}------------表明网页页面内全部元素的margin0

#menu{ margin:0}------------表明menu盒子下的全部元素的margin0

 

3.      缩写(border)特殊款式:

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

 

4.      有关文本的缩写标准:

Font-style:italic;  斜身材式

Font-variant:small-caps/normal;  变体款式:小型大写字母/一切正常

Font-weight:bold;

Font-size:12px;

Line-height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif,verdana;

缩写成:

Font:italic small-caps bold 12px/1.5em arrial,sans-serif;

留意:Font-sizeLine-height用斜杠组成在1起不可以分开写。

 

5.      有关情况照片的:

Background:#FFF url(log.gif) no-repeat fixed top left;

 

6.      有关目录:

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

缩写成:

List-style:none inside url(filename.gif);

 

 

 

2、           应用4种方式来引进CSS款式

     1.link

<link rel=”stylesheet” type=”text/css” href=”a.css”>

rel 关联

type 数据信息种类,有多种多样

href 相对路径

一部分访问器适用候选款式,重要字:alternate:

<link rel=”stylesheet” type=”text/css” href=”a.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>

2.內部款式块

<style>

<!–

h1{color:red;}

>

</style>

3.@import

@import url{a.css}

留意:此命令务必放在<style>器皿中,而且在全部款式以前

提议放在1个html注解中,<!– –>访问器会无法显示注解内的內容,importcss编码能一切正常工作中

4.内联款式

<p style=”color:red;”>

挑选器是css的1个基础定义,基础标准以下:

1.标准构造:

h1 {color:red;}

挑选器 {特性:;}

这类是元素挑选器,基础能够包含全部html的元素

特性值能够包含好几个元素,如:border1px solid red;

常见英语的语法

1)排序:

挑选器和申明都可以以排序:

h1,h2,h3{color:red;background:#fff;} ,挑选器用“,”切分开,特性用”;”切分

2)类挑选器,即根据class=stylename”运用的申明

界定:

.stylename{color:red;}

留意:

html中可使用多类挑选:class=cn1 cn2 cn3

3)ID挑选器,即与id特性对应的款式

界定:

#a{color:red;} ->这个界定对用id=a”的元素

2.这一部分全是大家普遍的css英语的语法,下面谈1下大家不普遍的挑选器英语的语法

1)父子构造,跟文本文档构造图对应

p span{border:1px solid red;}对应的是<p>下面的<li>标识,这个很用主要用途,能够精确精准定位.

1些独特运用(IE7适用):

(1) p > span{},配对全部p下全部的span

(2) p + span{} ,配对紧接着p元素后出現的第1个span标识,2者要有同样的父标识

2)特性挑选器:(留意:特性挑选器ie7才刚开始适用,下列版本号其实不适用,别的的访问器基础能够)

英语的语法:img[alt]{border:1px solid;}

表明对应有alt特性的img标识,自然能够适用好几个特性对应,img[alt][title]{};表明这个2个特性都有的img标识,还可以与实际值对应::img[alt=”拍摄”]{};

特性挑选器中的高級运用,独特配对:

(1)img[class~=b],    ~= : 与特性中的1个值对应的,即与<img class=a b c>对应

(2)[class^=a],a开始的

(3)[class$=a],a完毕的

(4)[class*=a],包括a

(5)[class|=a],等于a或以a开始的

3)伪类和伪元素

平常应用中关键是<a>标识的几个伪类:link:hover:active:visited

:first-child:first:before:left:right:lang:focus:fist-line这些

留意:动态性伪类能够运用到任何元素,,input:focus{background:red;}input标识得到聚焦点时情况变红

以上英语的语法组成应用,就可以完成精准定位精确、简易间接性的款式了。

 

3、           挑选器归类整合

       优先选择级別遵照:行内款式 >ID > Class >标识

基础挑选器

标识挑选器(eg:<p></p>

种别挑选器(eg:class)

ID挑选器

复合型挑选器

相交复合型挑选器(eg:p.menu{color:red}) 务必是标识+种别/ID组成

并集复合型挑选器(eg:h1,h2,h3{color:red})

子孙后代复合型挑选器(eg: #menu .menulist{ ... })

 复合型挑选器(eg: #menu .menulist .selectit { ... })

 

 

 

 

4、           应用子挑选器降低idclass的界定

       示例构造:

<div id="menu">

  <div class="menulist">

     <div class="selectit">content</div>

  </div>

</div>

示例CSS

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

 

5、           应用组挑选器为不一样元素运用同样的款式

     h1,h2,h3,div{font-size:16px;font-weight:bold}

h1,h2,h3,div元素的款式都为字体样式16像素,字体样式粗体

 

6、           伪类和挑选符的相互配合应用

将伪类和类组成起来用,便可以在同1个网页页面中做几组不一样的连接实际效果了,比如,大家界定1组连接为鲜红色,浏览后为蓝色;另外一组为翠绿色,浏览后为黄色:

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

如今运用在不一样的连接上:

<a class="red" href="...">这是第1组连接</a>

<a class="blue" href="...">这是第2组连接</a>

 

7、           CSS的近期优先选择标准

 /*假如对1个元素界定了数次款式,则以近期的1级优先选择,近期1级的款式将遮盖别的  行内款式 >ID > Class >标识  */

   下列是引入片断:

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

<p>此处显示信息为鲜红色</p>

<p class="blue">此处显示信息为蓝色</p>

<p class="blue" style="color:green">此处显示信息为翠绿色</p>

<p class="blue yellow">此处显示信息为黄色</p>

留意:

 

      1)留意款式的几个优先选择次序(优先选择级由上至下下降,下面的款式遮盖上面的款式)

 

      --元素style设置

 

      --head<style></style>中的设置

 

      --外界引入css文档

 

      2)优先选择级并不是按浏览次序来设置的,而是又css中的申明次序来设的。

 

      如上例中<p class="yellow blue">此处显示信息为黄色</p>也显示信息为黄色,由于在css界定中.yellow.blue的后边。

  

8、           撰写正确的连接款式

    当用css界定连接的各种各样情况时,要留意撰写的次序即::link :visited :hover :active运用首字母:L V H A,你能够根据记忆力LoVe,Hate,两个单词来记牢其次序。

:link --------连接的色调

:visited -----电脑鼠标点一下后的色调

:hover -------电脑鼠标放上去未点的色调(悬停)

:active-------电脑鼠标点一下一瞬间的色调

 

9、           :hover的灵便应用

     IE6不适用除a标识之外的:hover特性,大家掌握:hover特性是电脑鼠标悬停实际效果。在IE7FF中,对基本上随意元素都可以以设定:hover特性实际效果。这对大家做不一样的浏览实际效果很好。

如:

p {

    width : 360px;

    height : 80px;

    padding : 20px;

    margin : 50px auto 0 auto;

    border : 1px solid #ccc;

    line-height : 25px;

    background : #fff;

}

p:hover {

    border : 1px solid #000;

    background : #ddd;

}

----------------此实际效果对于IE7FF

p a {

    color : #00f;

    text-decoration : none;

    font-size : 13px;

}

p a:hover {

    color : #036;

    text-decoration : underline;

}

  -----------------此实际效果对于IE6

 

 

10、           界定A标识要留意的小难题

      当大家界定a{color:red;}时,它意味着了A的4种情况的款式,假如此时要界定1个电脑鼠标放上的情况要是界定a:hover便可以了,其它3种情况便是A中所界定的款式。

只界定了1个a:link时,1定要记得把其它3种情况界定出来!

 

101、   严禁內容换行与强制性內容换行

   报表或层中大家将会期待內容不换行或强制性换行,大家能够根据1些css特性来做到这些规定。

    严禁换行:white-space:nowrap

强制性换行:word-break: break-all; white-space: normal;

 

102、   差别relativeabsolute

Absolute---CSS中的写法是:position:absolute; 他的意思是肯定精准定位,他是参考访问器的左上角,相互配合TOPRIGHTBOTTOMLEFT(下面简称TRBL)开展精准定位,在沒有设置TRBL,默认设置根据父级的做标初始点为初始点。假如设置TRBL而且父级沒有设置position特性,那末当今的absolute则以访问器左上角为初始点开展精准定位,部位将由TRBL决策。

Relative---CSS中的写法是:position:relative;  他的意思是肯定相对性精准定位,他是参考父级的初始点为初始点,无父级则以BODY的初始点为初始点,相互配合TRBL开展精准定位,当父级内有paddingCSS特性时,当今级的初始点则参考父级內容区的初始点开展精准定位。

 

 

103、   差别块级元素block和内联元素inline

块级---可界定宽高,另起占有1行  (如:div  ul

内联---不能界定宽高,如文字元素  (如a span

 

104、   差别displayvisibility

display:nonevisibility:hidden都可以以掩藏1个元素,visibility:hidden只是掩藏了元素的內容,但其应用的部位室内空间依然被保存。而display:none则非常把元素从网页页面中除去,其占有部位也将被删掉。

 

105、   情况background的1些英语的语法

  background-image:url(情况图案设计.jpg,gif,bmp);

background-color:#FFFFFF; (情况色调)

background-color : transparent;    <--设置情况为全透明色 –>

background-repeat 更改情况照片的反复并排的设置

      表明

repeat  情况照片并排 

repeat-x  情况照片以X方位 并排 

repeat-y  情况照片以Y方位 并排 

no-repeat  情况照片不 以并排的方法解决 

background-attachment是不是固定不动照片部位

   表明

scroll  拉动卷轴时,情况照片会跟随挪动(缺省值) 

fixed  拉动卷轴时,情况照片不容易跟随挪动 

以长度精准定位background-position: x y

应用百分比精准定位 background-position: x% y%

     表明

x%  往右移 

y%  往下移 

backgroud-position: 0% 0%; 左侧上方

backgroud-position: 0% 50%; 左侧正中间

backgroud-position: 50% 0%; 正中间上方

backgroud-position: 50% 50%; 中间

backgroud-position:100% 0%; 右侧上方

backgroud-position: 0% 100%; 左侧正下方

backgroud-position: 100% 50%; 右侧正中间

backgroud-position: 50% 100%; 正中间正下方

backgroud-position: 100% 100%; 右侧正下方

 

以重要字精准定位

重要字  表明 

top  ( y = 0 ) 

center  ( x = 50, y = 50 ) 

bottom  ( y = 100 ) 

left  ( x= 0 ) 

 

Exp:

background-position:center;

照片在特定情况中间X=50% Y=50%部位

background-position: 200px 30px

 

106、   注解的写法

Html中:

<-- footer -->
content
<-- end footer -->

CSS中:

/* ---------- header ----------------- */
style

 

107、   CSS的取名标准

1.    id的取名

    (1)网页页面构造

  器皿: container

  页头:header

  內容:content/container

  网页页面行为主体:main

  页尾:footer

  导航栏:nav

  侧栏:sidebar

  栏目:column

  网页页面外围操纵总体合理布局宽度:wrapper

上下中:left right center

(2)导航栏

  导航栏:nav

  主导航栏:mainnav

  子导航栏:subnav

  顶导航栏:topnav

  边导航栏:sidebar

  左导航栏:leftsidebar

  右导航栏:rightsidebar

  菜单:menu

  子菜单:submenu

  题目: title

  引言: summary

  (3)作用

  标示:logo

  广告宣传:banner

  登录:login

  登陆条:loginbar

  申请注册:regsiter

  检索:search

  作用区:shop

  题目:title

  添加:joinus

  情况:status

  按钮:btn

  翻转:scroll

  标识页:tab

  文章内容目录:list

  提醒信息内容:msg

  当今的: current

  小窍门:tips

  标志: icon

  注解:note

  指南:guild

  服务:service

  网络热点:hot

  新闻:news

  免费下载:download

  网络投票:vote

  协作小伙伴:partner

  友谊连接:link

  版权:copyright

 

2.    class的取名

     (1)色调:应用色调的名字或16进制编码,

  .red { color: red; }

  .f60 { color: #f60; }

  .ff8600 { color: #ff8600; }

  (2)字体样式尺寸,立即应用"font+字体样式尺寸"做为名字,

  .font12px { font-size: 12px; }

  .font9pt {font-size: 9pt; }

  (3)对齐款式,应用对齐总体目标的英文名字,

  .left { float:left; }

  .bottom { float:bottom; }

  (4)题目栏款式,应用"种别+作用"的方法取名,

  .barnews { }

  .barproduct { }

  留意事项::

u      1律小写;

u      尽可能用英文;

u      不加中杠和下划线;

u      2个组成的单词无需中杠和下划线能够将第2个单词的首字母大写(eg:mainContent);

u      尽可能不缩写,除非1看就搞清楚的单词.

3.    关键的站点css文档

         关键的 master.css

  控制模块 module.css

  基础同用 base.cssroot.css

  合理布局,版面 layout.css

  主题 themes.css

  专栏 columns.css

  文本 font.css

  表单 forms.css

  补钉 mend.css

  复印 print.css

     

108、   Padding危害宽度难题

      假如1组要嵌套循环的标识之间必须些间隔的话,那就留给坐落于里边的标识的margin特性吧,而不必去界定坐落于外面的标识的padding

 

109、   完善的单象素外框线报表

      table{border-collapse:collapse;}

td{border:1px solid #000;}

 

210、   假如文本太长,则将太长的一部分变为省略号显示信息

<style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap”>

 

2101、        其实不是全部款式都要简写

       当款式表前界定了如p{padding:1px 2px 3px 4px}时,在后续工程项目中又提升了1个款式上补白5px,下补白6px。大家其实不1定要写成p.style1{padding:5px 6px 3px 4px}。能够写成p.style1{padding-top:5px;padding-right:6px;},你将会会觉得这样写还比不上原先那样好,但你想没想过,你的那种写法反复界定了款式,此外你能够无须去找原先的下补白与左补白的值是是多少!假如之后前1个款式P变了话,你界定的p.style1的款式也要变。(此种方式对后期改动款式很关键)

 

2102、        几个常见到的CSS细节解决上的款式

    1)汉语字两边对齐:text-align:justify;text-justify:inter-ideograph;

2)固定不动宽度中国汉字断开:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不让其换行,但是只能解决文本在1行上的断开,不可以解决多行。)IE5以上)FF不可以,它只掩藏。

***全能强制性换行:white-space:normal;word-break:break-all;  

 

 

严禁换行:white-space:nowrap

强制性换行:word-wrap: break-word; word-break: normal;

.AutoNewline

{

  /*word-break: break-all; 方式1  务必*/

  /*word-wrap:break-word;overflow:hidden; 方式2  */

  /*word-wrap:break-word; word-break: normal;  方式3 */

    word-wrap:break-word; word-break:break-all;

}

 

.NoNewline

{

/*word-break: keep-all;  方式1  务必*/

white-space:nowrap;

}

 

 

3)固定不动宽度中国汉字(词)折行:table-layout:fixed; word-break:break-all;IE5以上)FF不可以。

 

4<acronym title=”键入要提醒的文本” style=cursor:help;>文本</acronym>用电脑鼠标放在前面的文本上看实际效果。这个实际效果在海外的许多网站都可以以看到,而中国的少又少。

 

5)照片设为半全透明:.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}IE6IE5检测根据,FF未根据,这是由于这个款式是IE独享的物品;

 

6FLASH全透明:选定swf,开启原编码对话框,在</object>前键入<param name=wmode value=transparent> 以上是对于IE的编码。

对于FIREFOX <embed> 标识也提升相近主要参数wmode=transparent

 

7)在做网页页面经常用到把电脑鼠标放在照片上会出現照片变亮的实际效果,能够用照片更换的技能,还可以用以下的滤镜:

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

 

8)层在访问器中垂直居中对齐难题

 body { text-align: center }

#content { text-align: left; width: 700px; margin: 0 auto }

 

9)单行內容在层中竖直对齐难题

# content{height:19px; line-height:19px; }缺陷是要內容不必换行。

 

10)层在访问器中竖直垂直居中对齐难题

    缺陷是:水平、竖直方位上不可以出現翻转条,只能是在1屏的状况下

实际上处理的思路是这样的:首们必须position:absolute;肯定精准定位。而层的精准定位,应用外补钉margin负值的方式。负值的尺寸为层本身宽度高宽比除以2

如:1个层宽度是400,高宽比是300。应用肯定精准定位间距上部与左部都设定成50%。而margin-top的值为-150margin-left的值为-200。这样大家就完成了层竖直垂直居中于访问器的款式撰写。

 请看案例编码:

div {

    position:absolute;

    top:50%;

    left:50%;

    margin:⑴50px 0 0 ⑵00px;

    width:400px;

    height:300px;

    border:1px solid red;

    }

 

11CSS操纵照片自融入尺寸

div img {

 max-width:600px;

 width:600px;

 width:expression(document.body.clientWidth>600?"600px":"auto");

 overflow:hidden;

}

 

2103、        应用float特性的元素要留意的难题

1.      运用border特性明确错误元素的合理布局特点

  应用float特性合理布局1一不小心就会错误。这时候为元素加上border特性明确元素界限,不正确缘故即真相大白。

 

2.      float元素的父元素不可以特定clear特性

  MacIE下假如对float的元素的父元素应用clear特性,周边的float元素合理布局就会错乱。这是MacIE的知名的bug,假若不知道道就会走弯路。

 

3.      float元素尽量特定width特性

  许多访问器在显示信息未特定widthfloat元素时会有bug。因此无论float元素的內容怎样,1定要为其特定width特性。

  此外特定元素时尽可能应用em而并不是px做企业。

 

4.       float元素不可以特定marginpadding等特性

  IE在显示信息特定了marginpaddingfloat元素时有bug。因而不必对float元素特定marginpadding特性(能够在float元素內部嵌套循环1个div来设定marginpadding)。还可以应用hack方式为IE特定非常的值。

 

5.      float元素的宽度之和要小于100%

假如float元素的宽度之和恰好是100%,一些古老的访问器将不可以一切正常显示信息。因而请确保宽度之和小于99%

 

2104、        访问器的适配性难题(对于FF/IE6/IE7

    1.CSS hack:区别IE6IE7firefox

        差别FFIE7IE6

               background:green !important;  background:orange;  *background:blue;

        IE6能鉴别*,但不可以鉴别 !important,

        IE7能鉴别*,也能鉴别!important;

        FF不可以鉴别*,但能鉴别!important;

        此外再填补1个,下划线”_,

        IE6适用下划线,IE7firefox均不适用下划线。

        因而大伙儿还能够这样来区别firefoxIE7IE6

                 background:green!important; *background:orange;  _background:blue;

        注:无论是甚么方式,撰写的次序全是firefox的写在前面,IE7的写在正中间,IE6的写在最终面。

 

2.firefoxIE中的BOX实体模型解释不1致致使相差2px处理方式

  div{margin:30px!important;margin:28px;}

留意这两个margin的次序1定不可以写反,!important这个特性IE不可以鉴别,但其他访问器能够鉴别。因此在IE下实际上解释成这样:div{maring:30px;margin:28px}反复界定的话依照最终1个来实行,因此不能以只写margin:XXpx!important;

 

3.标准性注解来挑选不一样的访问器(比CSS hack简约)

   <!–[if IE 6]>

<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>

<![endif]–>

 

4.区别IE8

.color{

background-color: #CC00FF;      /*全部访问器都会显示信息为紫色*/

background-color: #FF0000\9;    /*IE6IE7IE8会显示信息鲜红色*/

*background-color: #0066FF;     /*IE6IE7会变成蓝色*/     

_background-color: #009933;     /*IE6会变成翠绿色*/

 

 

2105、        W3C遵照的规范标准

1. 在排布报表以前,请大伙儿1定好些好思索1个最好的计划方案,报表的嵌套循环尽可能操纵在3层之内,而且应当尽可能防止 <colspan> <rowspan> 两个标识,工作经验说明,这两个标识会带来很多不便。

  2. 1个网页页面要尽可能防止用全部1张大报表,全部的內容都嵌套循环在这个大报表以内,由于访问器在解释网页页面的元素时,是以报表为企业逐1显示信息,假如1张网页页面是嵌套循环在1个大报表以内,那末极可能导致的不良影响便是,当访问者敲入网站地址,他要先应对1片空白很长期,随后全部的网页页面內容另外出現。假如务必这样做,请应用 <tbody>标识,便于可以使这个大报表分层显示信息。


  3. 排版中大家常常会遇到必须开展首行缩进的解决,不必应用 或全角空格来做到实际效果,标准的做法是在款式表格中界定 p { text-indent: 2em; } 随后给每段再加 <p> 标识,留意,1般状况下,请不必省略 </p> 完毕标识 


  4. 标准上,大家严禁用 <img width=? height=?> 来人为因素干涉照片显示信息的规格,并且提议 <img> 标识中不必带上width height 两个特性,这是由于制做全过程中,照片常常必须不断的改动,这样能够防止人为因素干涉照片显示信息的规格,尽量的充分发挥访问器本身的作用;可是这样的1个不良反应是当网页页面还未载入照片时,不容易留出照片的站位尺寸,将会会导致网页页面在载入全过程中颤动(假如照片是插在1个固定不动尺寸的报表里的,不容易有这个状况),特别是当照片的规格较大时,这类状况会很显著,因此当意料到这类会显著致使网页页面颤动的状况会产生时,请大伙儿尽量在最终给 <img>附上 width  height 特性。


  5. 以便最大水平的充分发挥访问器全自动排版的作用,在1段详细的文本中请尽可能不必应用<br> 来人力干涉分段。


  6. 不一样语种的文本之间应当有1个半角空格,但避头的标记以前和避尾的标记以后以外中国汉字之间的标点要用全角标点,英文本母和数据周边的括号应当应用半角括号。


  7. 全部的字号都应当用款式表来完成,严禁在网页页面中出現 <font size=?> 标识。


  8. 请不必在网页页面中持续出現多于1个的也尽可能少应用全角空格(英文本符集下,全角空格会变为错码),空白应当尽可能应用 text-indent, padding, margin, hspace, vspace 和全透明的gif 照片来完成。


  9. 中英文混排时,大家尽量的将英文和数据界定为verdana arial 两种字体样式。


  10. 行距提议用百分比来界定,常见的两个行距的值是line-height:120%/150%.


  11. 网站中的相对路径所有选用相对性相对路径,1般连接到某1文件目录下的缺省文档的连接相对路径无须写全名,如大家无须这样:<a href=”aboutus/index.htm”> 而应当这样:<a href=”aboutus/”>


  12. 嵌入图型文字的应用较大的字体样式,提议不必在图型中包含文字。


  13.“网页页面尺寸界定为网页页面的全部文档尺寸的总和,包含HTML文档和全部的嵌入的目标。客户喜爱快的而并不是奇特的站点。针对解调器客户,网页页面尺寸维持在34K下列为适合。

 

   14. float元素尽量特定width特性
  许多访问器在显示信息未特定widthfloat元素时会有bug。因此无论float元素的內容怎样,1定要为其特定width特性。
  此外特定元素时尽可能应用em而并不是px做企业。

  15. float元素不可以特定marginpadding等特性
  IE在显示信息特定了marginpaddingfloat元素时有bug。因而不必对float元素特定marginpadding特性(能够在float元素內部嵌套循环1个div来设定marginpadding)。还可以应用hack方式为IE特定非常的值。

  16. float元素的宽度之和要小于100%
  假如float元素的宽度之和恰好是100%,一些古老的访问器将不可以一切正常显示信息。因而请确保宽度之和小于99%

 

 

2106、        目录元素ul ol li dl dt dd释义

     <ul>

        <li>內容1</li>

<li>內容2</li>

</ul>

 

<dl>

  <dt>题目<dt>

  <dd>內容叙述1</dd>

<dd>內容叙述2</dd>

</dl>

 

l      dt dd中能够再添加 ol ul lip

 

2107、        消除波动

clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

Firefox中,当子级都为波动时,那末父级的高宽比就没法彻底的包住全部子级,那末这时候用这个消除波动的HACK来对父级做1次界定,那末便可以处理这个难题 。

.clearfix {

  display:inline-block;

}

/* Hides from IE-mac \*/

* html .clearfix {

  height:1%;

}

.clearfix {

  display:block;

}

/* End hide from IE-mac */

 

**这类用法在开展图文混排时较为多,可是不大好操纵,用margin相互配合clear{clear:both}立即来操纵。

 

2108、        文本的解决

1.        1般的字体样式:

font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, "宋体",sans-serif;

 

题目字体样式(h1/h2):font-family: Cambria, Georgia, "Times New Roman", Times, serif;

 

2.    首字下沉:

P:first-letter{padding:10px,fontsize:32pt;float:left}

3.    拼音中国汉字:

<ruby>布鲁斯狼<rt style="font-size: 11px;">bu lu si lang</rt></ruby>

 

2109、        Min-height多访问器适配难题

Div{

        min-height:450px;

  height:auto!important;

  height:450px;

  overflow:visible;????

}

310、   CSS合理布局口诀 - CSS BUG顺口溜

·          IE边框若显若无,须留意,定是高宽比设定已忘掉;

·          波动造成有原因,若要父层包括住,紧跟波动要消除,器皿当然显在其中;

·          3像素文字慢移无须慌,高宽比设定帮你忙;

·          适配各个访问须留意,默认设置设定行高将会是杀手;

·          单独消除波动须牢记,行高设无,高设零,设计方案实际效果兼访问;

·          学合理布局须思路,路随合理布局基本原理当然直,轻轻松松掌控html,流水合理布局少hack,编码清新,适配好,友善模块喜爱迎。

·          全部标识皆有源,只是默认设置各不一样,span是无极,无极生两仪—内联和块级,img较独特,但也遵法理,别的只是更新改造各不一样,1个*号全归原,堆叠款式理须多训练,万物皆规律性。

·          照片连接排版须当心,照片连接文本连接若对齐,paddingvertical-align:middle要设置,虽差微细倒可以。

·          IE波动双边距,请用displayinline拘。

·          目录横向排版,目录编码须紧靠,间隙自消须牢记。

 

3101、        Web中的字体样式运用

总结几套好用而简易的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字体样式。强烈推荐应用在13px以上的自然环境。

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的宽扁字体样式。强烈推荐在11px下列自然环境应用。

font-family: Geogia, Times New Roman, Times, serif;

衬线字体样式的不2之选。 多用于大号的题目字体样式16px以上。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

1系列等宽字体样式。写编码很功能强大。此外,假如感觉Lucida Console太宽的话,能够换为较为窄的Lucida Sans Typewriter。话说老赵blog上的编码块应用的便是Lucida Sans Typewriter ~

 

 

假如在divstyle中把visibility设为hiddendiv掩藏,可是它会占有空白室内空间,而假如设定成displaynone则不占有空白室内空间;
visible="false"div不回到在html中;