web实训课笔记

1.标记 <xx> </xx>
       <xx/>
  行  块
2.div----(h1 p)
3
   3.1 标记
       div   img h1-h6 p body
       style
   3.1.1 超链接：负责页面跳转的语句。类似目录
   3.2 CSS
     3.2.1 选择器
           id选择器  #XXX{}
           类选择器  .XXX{}
           标记      p{}
           后代选择器 .XX ##kk{}
           紧贴选择器 p#kk{}
           并列选择器 #xx .abc,.dd span{}
           通用选择器 *{}
           伪类选择器 a:link{}  没有点击过
                      a:visited{} 访问后
                      a:hover{}  鼠标移到区域内
                      a:active{} 激活
                    顺序：L-V-H-A
               （hover active普通标签也可使用）
                      input:focus{}


            ** E>F 子选择器 F为E的子 ；E+F 选择E的下一个为F的。（F必须为E紧跟的一个而且正好是F）；E~F 选择E后面所有的F
     3.2.2 属性
           区域 width height
           背景 background-color
                background-image
                background-repeat
           位置 float:left right;


           外 margin left right top
              bottom
           内 paddingi left right top bottom
           字体 font-size font-style font-family font-weight
           边框 border border -left -right -top -bottom
           width color style
           border-top-width:(默认2px)
           border-top-color:（默认黑）
           border-top-style:(边框样式，必须写)
           简写:border-top:xxpx solid #003; 
                border:xxpx solid #003(四周一样) 
                border-style:solid;(与margin的简写相似)
                border-color:#ff0;
                border-width:20px;             
           万金油属性：id class style title accecckey dir lang 
           CSS做三角形：本体宽高为0，边框其中三边改为透明，剩下一个为一个等腰直角三角形
     3.3 js
4.总结
  路径：
       前者：绝对路径
       后者：相对路径：相对于我而言你在哪里


  行高 内容 行间距/2 以上以下各拉参考线内容行高 距离 标题 行高
  超链接加颜色，不能写到父亲和以上标记上，必须写a上


代码特别多 
共同成分 字体的话 可以写到父亲上
         不是字体 可以写成共同的类（如宽 高等不可以继承）


删除背景色
  1. 找到css文件
  2. ctrl+f 查找替换 
  3. 勾选 Regular expression(正则表达式)
  4. find what中输入
     background-color:#[\w]*；
  5  Replace（尽量一个一个替换）


transparent透明


后来黏上的东西不需要考虑加上主题计算的px中
！--测试（浏览器 
          IE6 
          IE7 
          IE8
          IE9
          IE10 IE11
          360 兼容 急速
          chrome firefox opera
）
图片直接放入div中
  div没有高 div 被撑开的高度是图片+3px
  img 行块 displayLinline-block;
  div 块 display:block
  span a 行 display:inline
行 无宽高 不换行  左右m p 无上下mp
块 有宽高 换行    上下左右均有mp
行块 有宽高 不换行    上下左右均有mp
行块在<img><img>之间有空格或回车，横向会有8px间隙
                                解决：1块(display:block)或 float:left
                                      2将两者之间删掉字符
                                 垂直 3px间隙
                                 图片和文字为基线对齐
                                解决：@垂直 vertical-align:middle只能对display:inline盒子设置 img
                                      @盒子设置高
                                      @字体大小
      ie6毛病 设置100%的高还是能 撑开 解决：overflow:hidden（超出部分隐藏）（设置高后此解决方法才有用）




CSS文件类似头文件，可以引用。将CSS直接拖拽到代码界面或者将CSS插入也可，或者自己输入


盒子模型
     区域==轮廓==盒子==（content padding border margin）
                           →宽和高
    盒子模型 值顺序 穿衣服
    background-position 背景位置
    "left right centertop bottom center数值"
    复合：background:各种数据。
    display:block将行转换为块
定位                        position:fix....;left:.....
定位是：
 定位在哪里？ 广告 不动的元素 小箭头 装饰性 轮播图
 特征：层级的堆积 必须用定位
       背景图 浮动 定位 父子关系
                      位置         矩形框（相对区域）    相对页面
position static
         fixed        不占         可视区域               动  
         relative     占用         原有轮廓               不动
         absolute     不占         距离自己最近的有position属性的祖宗（爸爸，爷爷及以上）元素轮廓 如果不存在这样的轮廓，则相对于第一屏（你看的页面屏幕）的可视区域                        不动
absolute定位一般会给选择父亲position:relative
relative 
relative定位不影响浮动 居中
absolute fixed定位影响浮动 居中
定位：采用什么定位模式
  具体位置：left right top bottom
##必须和position联用
##轮廓区域 以内为正，以外为负
##对门 left>right top>bottom
##left 轮廓在margin之外，可以添加margin
##外边定位参考轮廓？border内边界 padding外边界
##定位剧中 relative margin:0 auto;
  absolute fixed; left:50%(使盒子的一边居中，但是盒子有自己的宽度);margin-left:宽度一半
##定位盒子默认比不定位盒子的优先级高
##不定位盒子默认z-index 0
##z-index必须与position一起食用
##z-index越大越在上（优先级越高）
##z-index 有限制，不能太大
##如果都为定位，一般后写的定位优先级比先写的定位优先级大（设置z-index，情况会不同）
##z-index还受父亲影响，如果一个z-index的父亲a比另外一个z-index的父亲b的值小，则该父亲的儿子的z-index无论再大也无法覆盖b以及b的儿子
                                           区别            联系
         left right top bottom
                      必须和position一起
                      可以进行层级堆积
         margin-left
                      不用和postion一起
                      不能进行层级堆积
img src width height
   width height 都不写 ，正常
   写其中一个，按比例扩大或缩小
   两个都写，按照所写内容改变，但可能会失真
   建议：图片尽量保持原来大小，若要改变，幅度尽量在0.8~1.5之间。若要下载图片，下载得到的仍然为原来的图片。可PS
   title=""显示悬停的文字 
   alt=""当图片被删后，显示此内容
4.优先级：优先听谁的命令
   !import            10000 
   行内属性（样式）   1000   element.style
   id                 100    优先级从上到下依次降低     行内属性<div id="name" style="***"></div>   
   类                 10
   标记                1


   html属性           0.1      attributes style
   默认样式           0.01     user agent stylesheet
   继承               0.001    Inherited From 
   设置               0.0001
   优先级 加和
   优先级相等 后者优先
 导航==一起出现
  ul li 无序列表
  ol li 有序列表
  dl dt dd 图文描述


<ul>
 <li></li>
</ul>
 list-style-type:(ul和ol利用此方法变换)
 list-style-image：（小标题为图片）（位置不易控制，尽量不要使用，可以使用背景图或者图片background-position background）list-style系列不占用你定义的像素格
 list-style-position
 list-style:circle url() outside;
语义化标记div也可实现
导航： 固定宽导航
       不固定宽导航