WEB实训

最新推荐文章于 2019-05-18 20:04:34 发布

i_jiebaby

最新推荐文章于 2019-05-18 20:04:34 发布

阅读量795

点赞数

分类专栏：前端文章标签： web

本文链接：https://blog.youkuaiyun.com/lovely_J/article/details/54378920

版权

前端专栏收录该内容

4 篇文章

订阅专栏

最小网页结构

<html>
<head>
    <title></title>
</head>
<body>
</body>
</html>

属性

<xxx  dd=""   d3="" d2=""  >
</xxx>
  <xxx df="" dd=""/>
 属性="白"
   @无序  @互斥
   区域  width  height
背景  background-color
     background-image
     background-repeat
位置  float:left right;

外    margin  left right top bottom
内    padding left right top bottom
字体  font-size font-style font-family font-weight text-align text-decoration   color
边框  border border -left right top bottom

背景

background-color:
   染色 #ff0000; #f00;
       red
       rgb(255,0,0) 
       rgb(100%,0%,0%)
       rgba()
       hsl() hsla()
background-image: 背景图 url()

img标记 前景图
        占大小   平铺    场景
img图片  占        1次    频繁改变
bgi图片  无大小    n次    工具区域

选择器

id选择器  #XXX{}
类选择器  .XXX{}
标记      p{} 
后代选择器  .XX #kk{}
紧贴选择器  p#kk{}
并列       #xx .abc,.dd span{}
通用      *{}
伪类     a{}
        a:link{}  没有点击过
        a:visited{} 访问后
        a:hover{} 鼠标移到区域内
        a:active{} 激活
  L-V-H-A 
   .abc{} 
   .abc:hover{}
   .abc:active{}
   input:focus{}
E>F  子选择器
E F  后代
E+F  F必须E紧跟的一个而且正好是F
E~F  F必须在E的后面

字体

color:#f00  字体颜色
font-size:20px 字体大小
font-family:"黑体","宋体",arail; 字体类别
font-weight:100-900;
line-height:20px  2; 行高
text-align:center left right; 文字对齐方式
font-style:normal italic 风格
居中的方法：margin:0 auto 块居中
          text-align 文字居于区域中
text-decoration:overline underline line-through none

内补丁padding

padding-left
padding-right
padding-top
padding-bottom

id 类的区别

      定义个数    调用个数    场合
#id    无数个     1次     @大区域@js
.a     无数个     无数次    @类
div    有限个     无数次    去除属性（前缀）

定位

广告 不动的元素 小箭头 装饰性 轮播图

特征：层级的堆积 必须用定位
         背景图  浮动 定位  父子关系
          位置     矩形框
static
fixed     不占     可视区域    不动
relative  占用     原有轮廓    动
absolute  不占        ↓      动
                距离自己最近的有position属性的祖宗元素轮廓 如果不存在这样的轮廓，则相对于第一屏的可视区域

absolute定位一般会给选择父亲position relatvie
relative定位不影响浮动 居中
absolute fixed定位影响浮动 居中

优先级:优先听谁的命令

!import      10000
行内样式     1000     element.style
 id           100     #kk  行号
 类           10
 标记          1

html属性     0.1  attributes style
默认样式  0.01  user agent stylesheet
继承        0.001 Inherited From
设置        0.0001 

优先级 加和
优先级相等 后者优先

兼容性：

什么兼容性:
       浏览器的原因导致的网页不同浏览器上显示的样子不同
       历史的原因：
       如何处理兼容性: 测试的时候找到对应的浏览器 特有的语法值纠正过来
特殊选择器
  * html 选择器{}
特殊前缀 width:190px;
   -width:200px;
条件注释
   <!--[if IE 6]>
   <![endif]-->
解决的办法无害 写到整体
  overflow:hidden;
最新处理办法
<!--[if lt IE 7 ]> <html class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]> <html  class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]> <html  class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="std"> <!--<![endif]-->

导航==一起出现

  ul  li 无序列表
  ol  li 有序列表
  dl dt dd 图文描述

<ul>
  <li></li>
</ul>
    list-style-type:
    list-style-image:
    list-style-position:
    list-style:circle url() outside;
语义化标记  div 实现

      固定宽导航
      不固定宽导航