前端学习

!!!记住一定要清除浮动.txt

background:url(../images/logobg.jpg) rrepeat-x left top;

我们有时发现ie6的margin不起作用
我们就把ie6的这个元素设置成float:left

当高度不变时 line-height:越小越朝上,等于高度时在中间 ,越大 越朝下 ,

div 在 object上面

 1)<object里增加  <param value="transparent" name="wmode">

2)embed标签可以在标签中加入  wmode="transparent"  
好像是两个加起来才有用

你是不是想让一个div中的元素垂直方向上居中？
vertical-align属性适用于inline元素和table-cell，不适用于block元素。

<div style="width:200px; height:60px; background-color:#ffeecc; line-height:60px;vertical-align:middle;">
    Hello World
</div>



如果不加上那个line-height的属性的话，div会认为你vertical-align的是默认高度，而不是你设置的60px像素的高度的。

1)清除浮动
父元素{
    height: 1%;
    overflow: hidden;
}
子元素{
float:left;
}

2)清除浮动
最后一个子元素后<div style="clear:both"></div>

第二种方法这个好像是比较好

开始标签 结束标签 对应
1)padding 是在里面;border 是在里面;margin 是在外面
  div 标签
  可以套 除 html body 的任意标签
2)h1,h2,h3,h4,h5,h6的标签 是搜索引擎优化起作用的,要尽量用
h1 里面不能套用 div ul li dl dt等标签 可以套用 span strong del标签
可以套用 span
3)p内容标签
4)ul li 列表(无序) ol li(有序)
5)dl dt dd标题 内容
    <dl>
        <dt>标题</dt>
        <dd>内容</dd>
    </dl>
6)点左边 按tab键 缩进
7)a 标签 是搜索引擎优化起作用的
8)span "更多" 不怎么重要的内容 内联的文字 一般不用设宽,高等
9)strong 与 span 差不多 郑重申明里面的内容 加粗
10)del 删除标签 带删除线
11)img     src     alt搜索引擎起作用
12)b 加粗  seo重要
13)table 表格(一般不用table)  tr td
th(第一行 默认加粗居中)
14)选择父标签 工具 光标在标签里面 选择父标签

1)background url(1.jpg) no-repeat 200px 100px;
先是距左边200px;再是距右边100px;
2)border:1px solid red;
3)border-color:red;
4).jj a{color:red;text-decoration:none}
.jj a:hover{color:red;text-decoration:none}  //放上去时
5) .color li{line-height:50px;list-style-type:}  //li前的样式
list-style:none //li前没有样式
ul{padding:0;margin:0}
li{padding-left:10px;background:url(a.jpg) no-repeat left 30px;}//左边不动 离顶部30px


 1)<div class="nav">
    <ul>                        
        <li><a href="#">网站首页</a></li>    
        <li><a href="#">关于我们</a></li>    
        <li><a href="#">新闻与媒体</a></li>    
        <li><a href="#">产品与服务</a></li>    
        <li><a href="#">责任与关怀</a></li>    
        <li><a href="#">人力资源</a></li>    
        <li><a href="#">国际业务</a></li>    
        <li><a href="#">科技创新</a></li>    
        <li><a href="#">化工与生活</a></li>    
    </ul>
</div>
<div></div>
li 浮动 清浮 在父标签在 设高度 height:33px;或height:1%,overflow:hidden;
浮动的内容本来不占位置的
或者在下面的div clear:both; 清除浮动,清除上面的浮动
 是在 最后一个float 的div是下面 ,而不是父元素的下面 加上 clear:both;
并且 父元素最好不要加高度

2)好像是在绝对定位里的东西不必清除浮动,,不是 在绝对定位里的东西也要清除浮动的,否则
有可能不正常..
       <div class="about">
            <ul>
                <li><a href="#">设为首页</a></li>
                <li><a href="#">加入收藏</a></li>
            </ul>
        </div>
.about{position:absolute;left:815px;top:30px;}
.about li{float:left;}
3).about li a:hover{text-decoration:underline;} 鼠标放在去时有下划线
4)ie6 中浮动的内容用 margin 是有bug
line-height height 相等 就垂直居中
 

1)一般情况下 更多 什么的 用 span标签括起来
2)text-indent:2em  首行空2个字
3)
.index_news li{height:25px;line-height:25px; position:relative;}
 .index_news li a{ color:#666666;}
.index_news li span{ color:#990000; position:absolute;left:458px;top:0px;}
一定要声明 top:0px; 才能够居中

焦点图代码
1)google(baidu) 一下焦点图代码
http://www.zzhaoz.com/sucai/jiaodiantu/

2)<h1><span>客户服务</span></h1>
有背景图 为了优化 写上 span 里的字 再 display:none;

3)里面有多行文字 一般用 p 标签

4).kf_content h1{height:78px;font-size;12px;}
给h1设定大小 防止 高度超过78px,样式会错乱

5)shift+enter 得到 <br />


6)·热烈庆祝中凯工贸有限公司网站试运行开通
前面这个  · 是方点

1).index_footer{width:980px;background:url(../images/foot_logo.jpg) no-repeat right bottom;
表示靠右和靠底部对齐

1)浮动的父元素一般为清除浮动 弄成 height:1%,(有时不起作用改成 height:实际高度),overflow:hidden;
2)一般设字体 font-family:"宋体";
3)一般情况下设向右padding .top_menu li{float:left;line-height:22px;height:22px;padding-right:15px;}
4)父元素是绝对定位的话 ,子元素就用相对 来使用 left:  right: 反之则相反,父用相对,子用绝对
5)_表示ie6 *表示ie7 *+表示ie7
6)top_nav_right img{vertical-align:middle;}图片垂直居中

7)(*width:120px ; 假如没有 *+时,也对 IE7起作用)
(_width:120px ; 假如没有 *+时,也仅对 IE6起作用)


/*只适用于ie6,好像是不适用于ie7 */
*html  .aaaa{
width:140px;
}
/* 只适用于 ie7  不适用于 ie6 */
*+html .aaa{
width:130px;
}
8) background:url(../images/gif01.jpg) no-repeat left 5px;
背景是 先左 后上;
9)a {display:inline-block;text-align:center:width:30px}
内联块元素
10) 红色<font color="red">aaa</font>
11)text-align:center;  居中对齐

1) div ul 也是一个块元素
2)span 是内联元素
display:inline-block !important; 优先级最高 (firefox chrome 识别)
display:inline-block !important; display:inline;  又进行识别
3)background:#fff url(aaa.jpg)  先给白色,再给背景色
4)padding不可以为负数，就算你设置为负值也没用。设置负值强制为0了
但是 margin 可以为负数
5)line-height 变小 朝上移

1) 一般情况下 站 padding-left 与 padding-right 相等
2)font-weight:normal 不加粗的效果
3)选中以后 按住 ctrl 直接往下拉 ,可以复制
4)当 height: overflow 不能清除浮动时 我们在下一个元素用 clear:both;
5)height: overflow  可以用在父级 ,也可以用在父级的父级

1)左边 - 号 点击一下就隐藏了 变成了 +
2)li {/*这里最好不要定义字体颜色*?}
在 li a{color:#F00;} //在这里定义颜色
3)<a href="#"><b>AA</b></a>  b标签加在a里面吧
3)<a href="#"><strong>AA</strong></a>  strong标签加在a里面吧

1)让 h1 a{font-size:12px} 而不是h1{font-size:12px}
2)h1 也可以相对定位的
3)定位的时候可以{right:20px; top:0px;}
4)图文混排 img{vertical-align:middle;}
垂直居中 它只针对 表格td input img 起作用 对div 不起作用
如果不行的话 就用绝对定位吧 再实在不行 给img加上div标签
5)父元素相对定位 放在css上面
子元素绝对定位放在 它的下面
2)有的时候 要设成 把 a 设成
 display:inline-block 或 display:block;
 display:inline-block  一行的内的块

只有块元素 才有什么margin padding
padding, border ,width,在块里面
margin 在块外面


display:block;  只能是不同的行
3) img  外面最好用上 span div 等
4)不只div 其它 如 p ,ul 都可以浮动的
5)清除浮动 好像 只能在浮动元素的 父元素 或 父元素的下面同级元素才行
6)浮动的上上级 也可以清除浮动
7)在div(父元素内定义 text-align:center) 里面的 a 标签就会水平居中

1)爷div height:1%;overflow:hidden;  孙div float:left;
     父div  要设高度 ;其背景才起作用
2)offset = width + padding + width;  背景在 offset 里
3)实在找不出问题  利用 背景查在哪里 ,然后加上宽,高
4)background:url(aa.jpg) no-repeat;
这里 no-repeat 前要有空,否则ie6可能有问题

5)ctrl+c 然后  选中 另外的 最到 ctrl+v 就覆盖了另外

1).aa,.bb{color:#F00;}
逗号表示并列关系
2)最外层的div 一定要设置宽度
3)好多情况下 内间距 或 外间距 都是可以的
4)背景可以 只用左边的一个图 其它部分为颜色
5)好像只有块元素才能加边框 背景 padding等  又好像不是这样
6)表单元素一般放在表格里比较方便
7)一般这样 <table cellpadding="0" cellspacing="0" border="0" >
8)<input type="submit" value=" " class="aaa" />
背景在样式里设
9)select  vertical-align:middle 垂直居中 与文字就同一行了
10)似乎 background 背景只填充 padding 和 width ; 不填充 border
11).news_outer_down .chong .chong_in_up span.current
{border:1px solid #c9cdd6;/*border-bottom:1px solid #FFF;*/}
在里面的注释好像不起作用

没法确定盒子时
用 backgroud:#000;来定一下
也可用 border:1px solid red; 来定一下



父div
background:url();/*中间图*/
子vid
background:url() repeat-y left botttom;/*最下圆角图*/


也可以
父div
background:url() repeat-y left botttom;/*最下圆角图*/*高度为3px*/
padding-bottom:3px;
子vid
background:url();/*中间图*/

制作的时候
看哪些样式相同 复制相同的地方
这样能省好多代码
相对定位 就是 没有定位的情况下 即 static的情况下再进行定位 比如
tiyu_list li img{position:relative;left:4px;}
没有定位时它紧靠着前面的字,,,定位后 它左边离字4px
中文状态下 按住 shift+2 得到方块点

<img src="aa.jpg" width="90" height="80" />
这宽 高 不要定义像素

<p><img src="aa.jpg" width="90" height="80" /> 一般我们截图截到最右边 ,,左边是从图开始

var lis= document.getElementById('ul_list').getElementsByTagName("li");
//得到 id 为  ul_list 下的所有的li对象

for(i==0;i<li.length;i++)
{
  if(i%2 ==0){
      lis[i].className = 'li_bg';
    if(i==(li.length-1)){
                lis[i].className = "li_none"
    }
  }

}

1)清除浮动就是在
浮动父元素的上面 有height:1%;overflow:hidden;当然height是多少,是无所谓的,只要有就行
此时父元素的父元素最好没有什么明确高度,,否则将会是父元素的父元素的真实的高度的1%

2)块元素整个一行 哪怕一个汉字
  内联块 内联元素 无论多少文字,下面的元素都跟它横向走动
3)background:#000 url('aa.jpg')    来进行测试 也可以用boder:1px solid red 来进行测试
4)background:
url('aaa.jpg') left 10px 靠左对齐 离上边10px;
5)background:none;  背景设为无
6) postition:relative 相对定位 就是相对于它本来的位置进行定位
7)方块点　如何出来
一、在中文输入法的状态栏右右键点一下键盘符号，选择“特殊符号”，会出理特殊符号软键盘，什么都有！
二、遇到在软键盘特殊符号里没有的，在WORD的插入特殊符号里插入，再复制粘贴就行了。
将下面复制过去 ■■■■■■■■■■  把输入法改成智能拼音 输入 V1 然后按加号翻页 你看看
8)<img src="aa.jpg" width="60.jpg" height="60" /> 图片的宽 高 这里不要加 px
9)如果标签代码 标准的话 ie6的bug就会少.

<div>
</div>

方块层 最好设一个固定宽度 高度值 在任何一个浏览器中兼容


1)有时,最好把div设成固定高度,这样在各个浏览器中容易兼容

1)display:block;或者display:inline-block  只有这样,才能设置宽和高
2)一般情况下 p 里面放img 或文字,又好像是为了浮动准备的
3)为什么用li行高 不用 li a的行高
4)<span  class="curr">拍拍热卖</span><span  class="normal">放心正品</span>
<span  class="normal nomargin">最热卖场</span>
假如span 标签之间有空格 会产生距离
5)table在div里要给个宽度高度,否则它的宽度高度都是auto;

1)<li><a href="#">AA</a><span>|</span></li>
这里span可以用空格 ,但是空格在各种浏览器中宽度是不一样的,最好用span来控制宽度
/*这里是css注释 */
/**这里是注释,最好加两个星,据说有的浏览器一个星会出现问题**/
<!--html注释-->据说html注释在兼容有一问题,所以尽量不要用
//这里是js注释
/*这里是js注释*/
2)制作网页时 什么margin,padding尽量取整
3)display:block,display:inline-block的情况下 才能宽度高度的设定
4)li浮动的情况下,可以在div上清浮,也可以在ul上清浮
<div><ul><li>aaaaa</li><li>aaaaa</li><li>aaaaa</li></ul></div>

5)<div><ul><li>aaaaa</li><li>aaaaa</li><li>aaaaa</li></ul></div>
居中有两种方法 第一种给padding-left:100px,(只有在元素li宽度固定(li个数一定)的情况下使用)
           第二种方法就是给ul display:inline-block,这样ul的宽度就是所以li宽度加起来,
               而不是等于div的宽度,然后给div text-align:center,这样ul就居中了
        (在ie中,就使用*display:inline;*zoom:1 就行)
 
7)zoom就是缩放比例的意思     
8)<li><a href="#><font color="#ff0000">我们中国</font></a>  
最好font 在a标签里面  
9)为什么用li的行高不用li a的行高,难道是a标签不是块元素 也像也可以吧
10)shift+enter 得到 <br />   
11)浮动的话 ie6 的margin 有双边距bug   

可以不看___比较简单
常用标签
1) div img ul li a

li标签里不能有 div 不能有table 等标签
2) <dl><dt>最当前</dt><dd>内容1</dd><dd>内容2</dd></dl>
 dl 标签用于定义列表类型标签。 如标题、标题对应列表效果。

3)dd内可以放置<ul>标签使用。

4)h1,h2,h3,h4,h5,h6
h1标题 最好只出现一个
h2二级标题
h3二级标题的下面,小标题
5)span b strong font
face 字体 样式最好用6位
<font face=""verdana,Geneva,sans-serif" color="#000000">
    文字
</font>
6)<table>
    <thead><tr><th>表头部</th></tr></thead>    
    <tbody><tr><td>表头部</td></tr></tbody>
    <tfoot><tr><td>表头部</td></tr></tfoot>
  </table>

7)<input type="image" >图片作为按钮 提交


css属性
1).header{height:100px;overflow:hidden;}
body{font-famlily:"宋体";}
background:#f00 url(1.jpg) no-repeat;
//图片没有盖住的地方 就用红色
2)
*{margin:0px;padding:0px;}
div,li,dt,dd,dl{margin:0px;paddding:0px;}
3)ul,li{list-style:none;}
4)清浮 方法一 在父元素
 .headFather {height:1%;overflow:hidden;}
 或者  .headFather {height:100px;overflow:hidden;}
方法二 在父元素的下一个元素
.headFatherNext{clear:both;}
5).ad{padding:0px 10px; margin:0px 10px}
首先上下 然后左右
6)定位
 .adsf{position:absolut;left:100px;top:100px;}
默认是根据body定位的
如果父元素是相对的 则是根据父元素定位

 .bndd{position:relative;left:100px;top:10px;}
//相对于其本身的原始的位置 向离左边100px;离上边 10px;
7)line-height:
  height: 一样才垂直居中
8)水平居中   .aaa{margin:0 auto;}
9)id 也可设样式  如 #aaa
10)js
//得到ul 对象
 var gehang=document.getElementById('gehang');
//得到ul 对象下的li
 var lis = gehang.getElementByName('li');
 for(i=0;i<lis.length;i++){
    if(i%2==0){
      lis[i].className='oshu';
    }
 }
<style>
.oshu{color:red;}
</style>

table 与 ul 是一个道理,,
11什么情况下用gif,什么情况下用jpg,什么情况下用png,
原理:哪个小就用哪个
png 有透明 png格式图片可以拉伸放大，所以你在需要放大的情况用png
在色彩少的时候 gif小,就用gif 有动画 有透明
色彩多的时候,jpg小,就用jpg ，jpg格式的图片便于传送，但是不能放大

简单粗暴地说，小图标，用png储存最好。
png可以储存透明，完爆gif的地方在于失真小，没锯齿；劣势是不支持动画；

使用JPG
如果你不需要保存图片的透明背景；
如果你的图片需要保存图像质量，色彩以及饱和度。

使用PNG
当你的图片需要透明时
当使用纯绘图图片时。.png格式渲染照片效果没有那么好。


.gif文件一直用于网页设计，并且可以像.png一样保留透明度。使用.gif的问题主要有两点：
1、如果你导出一张照片（如下所示），.gif无论是文件大小还是图片质量上都无法与.jpg竞争：
2、如果你再次考虑用.gif导出绘图。.gif保留透明的方式与.png不同。看一下下面的例子，
我希望保留按钮周围的鲜艳色彩。我切出这个按钮，隐藏了格子背景，
并且点击“文件>存储为Web和设备所用格式”弹出对话框：
在对话框中你可以看到当到选择“gif”时按钮展现成什么样。按钮被我在“杂边”下拉菜单中选择的颜色所围绕。.gif格式要求任何透明渐变都需要一个背景（或杂边）色以使渐变可以过渡。
想像一下这个按钮在我的格子背景中会长成什么样，唉。
这也就是.png为什么是一个很棒的东西的原因。
看到什么是真正的透明了吧？加上一个所选背景层，它还是会样本中所看到的一样！









可以不看___比较简单
常用标签
1) div img ul li a

li标签里不能有 div 不能有table 等标签
2) <dl><dt>最当前</dt><dd>内容1</dd><dd>内容2</dd></dl>
 dl 标签用于定义列表类型标签。 如标题、标题对应列表效果。

3)dd内可以放置<ul>标签使用。

4)h1,h2,h3,h4,h5,h6
h1标题 最好只出现一个
h2二级标题
h3二级标题的下面,小标题
5)span b strong font
face 字体 样式最好用6位
<font face=""verdana,Geneva,sans-serif" color="#000000">
    文字
</font>
6)<table>
    <thead><tr><th>表头部</th></tr></thead>    
    <tbody><tr><td>表头部</td></tr></tbody>
    <tfoot><tr><td>表头部</td></tr></tfoot>
  </table>

7)<input type="image" >图片作为按钮 提交


css属性
1).header{height:100px;overflow:hidden;}
body{font-famlily:"宋体";}
background:#f00 url(1.jpg) no-repeat;
//图片没有盖住的地方 就用红色
2)
*{margin:0px;padding:0px;}
div,li,dt,dd,dl{margin:0px;paddding:0px;}
3)ul,li{list-style:none;}
4)清浮 方法一 在父元素
 .headFather {height:1%;overflow:hidden;}
 或者  .headFather {height:100px;overflow:hidden;}
方法二 在父元素的下一个元素
.headFatherNext{clear:both;}
5).ad{padding:0px 10px; margin:0px 10px}
首先上下 然后左右
6)定位
 .adsf{position:absolut;left:100px;top:100px;}
默认是根据body定位的
如果父元素是相对的 则是根据父元素定位

 .bndd{position:relative;left:100px;top:10px;}
//相对于其本身的原始的位置 向离左边100px;离上边 10px;
7)line-height:
  height: 一样才垂直居中
8)水平居中   .aaa{margin:0 auto;}
9)id 也可设样式  如 #aaa
10)js
//得到ul 对象
 var gehang=document.getElementById('gehang');
//得到ul 对象下的li
 var lis = gehang.getElementByName('li');
 for(i=0;i<lis.length;i++){
    if(i%2==0){
      lis[i].className='oshu';
    }
 }
<style>
.oshu{color:red;}
</style>

table 与 ul 是一个道理,,
11什么情况下用gif,什么情况下用jpg,什么情况下用png,
原理:哪个小就用哪个
png 有透明 png格式图片可以拉伸放大，所以你在需要放大的情况用png
在色彩少的时候 gif小,就用gif 有动画 有透明
色彩多的时候,jpg小,就用jpg ，jpg格式的图片便于传送，但是不能放大

简单粗暴地说，小图标，用png储存最好。
png可以储存透明，完爆gif的地方在于失真小，没锯齿；劣势是不支持动画；

使用JPG
如果你不需要保存图片的透明背景；
如果你的图片需要保存图像质量，色彩以及饱和度。

使用PNG
当你的图片需要透明时
当使用纯绘图图片时。.png格式渲染照片效果没有那么好。


.gif文件一直用于网页设计，并且可以像.png一样保留透明度。使用.gif的问题主要有两点：
1、如果你导出一张照片（如下所示），.gif无论是文件大小还是图片质量上都无法与.jpg竞争：
2、如果你再次考虑用.gif导出绘图。.gif保留透明的方式与.png不同。看一下下面的例子，
我希望保留按钮周围的鲜艳色彩。我切出这个按钮，隐藏了格子背景，
并且点击“文件>存储为Web和设备所用格式”弹出对话框：
在对话框中你可以看到当到选择“gif”时按钮展现成什么样。按钮被我在“杂边”下拉菜单中选择的颜色所围绕。.gif格式要求任何透明渐变都需要一个背景（或杂边）色以使渐变可以过渡。
想像一下这个按钮在我的格子背景中会长成什么样，唉。
这也就是.png为什么是一个很棒的东西的原因。
看到什么是真正的透明了吧？加上一个所选背景层，它还是会样本中所看到的一样！






一)css hack http://www.zzhaoz.com/wangzhanyunying/wangzhangsheji/20110912/243
1)强制ie8使用ie7
<meta htttp-equiv="X-UA-Compatible" content="IE=7" />
2)*{padding:0;margin:0}
 也可以 div,li{padding:0;maring:0} 这样设置要比*好一点,但不知何原因
3)一种方法
  .web{background:#AAAAAA;} 所有浏览器
  .web{background:red\9;} ie6,ie7,ie8所有的ie都是红的
  .web{*background:#FF0;} ie6,ie7
  .web{_background:#555555;}ie6
   顺序不能乱
  另一方法  
  .web{background:#AAAAAA;} 所有浏览器
  .web{background:red\9;} ie6,ie7,ie8所有的ie都是红的
  *html .web{background:#555555;} ie6
  *+html .web{background:#BBBBBB;} ie7
   顺序不能乱
4)标准的写法是尽量没有这些特有的标签的

二)仿站
  1)复制html源代码
  2)复制css文件代码 ,新建css文件,然后粘贴
  3)图片另存为本地
  4)复制js文件代码 ,新建js文件,然后粘贴

 


1)选取框 变换选区后如何覆盖  拉出选取框后 ctrl+t 然后按住 shift 即可 最后按 enter
    ctrl + d 取消选区
2)选取框 中 如何变成一种选定的颜色
3)dreamweaver 光标跳到最后的快捷键
4)js 增加样式 而不是document.getElementById('aa').className=''
5)从最后一行跳到第一行ctrl+home 从第一行跳到最后一行ctrl+end
但是ctrl+home起作用  ctrl+end不起作用
6)为什么用li行高 不用 li a的行高
7)左边有折叠隐藏的  工具栏的功能
8)table里面的字默认是垂直居中.