Please enable JavaScript.

Coggle requires JavaScript to display documents.

html, CSS3美化网页元素, 浮动 ((浮动：float), (clear:清除浮动(不是去掉浮动，让后面的元素不受上面浮动元素的影响)),…

- - - - a.同一页面间的：
        
        在目的地做标记：<a name="标记名">目的地</a>
        
        在要点击的地方：<a href="#标记名">点击的地方</a>
      - b.不同页面间的：
        
        在目的地做标记：<a name="标记名">目的地</a>
        
        在要点击的地方：<a href="页面路径#标记名">点击的地方</a>
    - - 邮箱：<a href="mailto:邮箱地址">联系我们</a>
      - QQ:<a href="Tencent://Message/?uin=QQ号">QQ</a>
- - - - 中划线line-through
      - 上划线overline
      - 不加线none
- - - - 不平铺：no-repeat
      - 水平平铺：repeat-x
      - 垂直平铺：repeat-y
      - 平铺：repeat
    - - auto：默认值，使用背景图片保持原样
      - percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
      - cover：整个背景图片放大填充了整个元素
      - contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
- - - - none:没有图标
      - disc:实心圆
      - circle：空心圆
      - square：正方形
    - - inside:在li里面
      - outside:在li外面
    - - 3.list-style-image:列表显示的图片,每个列表的图片都一致
        
        例： list-style-image: url("../images/arrow-icon.gif");
        
        4.list-style:缩写：先type -> postion ->image
        
        例：list-style:none inside url(路径);
- - - - right;向右浮动
      - none;不浮动
    - - 将块级元素转换为内联元素
      - 文字将会环绕浮动元素显示
- - - - .clear:after{
        
        content: '';/空内容/
        
        display: block;/显示为块元素/
        
        clear: both;/清除左右浮动/
        
        }
- - - - <li></li>可以有多个li,所有的内容必须放入li中 </ul>
      - <li></li>
    - - disc:实心圈
      - circle:空心圈
      - square:正方形
- - - - <th></th>----标题
      - <td></td>---单元格
- - - - 使用方便，不利于后期维护
    - - 只设置一个网页的样式
    - - 多个网页可以共用一个css页面
      - <link href="css页面的路径" type="text/css" rel="stylesheet" />
      - <style type="text/css">
      - 
      - </style>
    - - 行内样式表 > 内部样式表 > 外部样式表
- - - - 样式2;
      - }
    - - 样式2;
      - }
    - - ID选择器 > 类选择器 > 标签选择器
    - - }
      - 样式2;
- - - - thin:细的
      - medium:加粗
      - thick：更粗
    - - 例：border:1px solid red;
  - - - padding:10px;（四个方向都是10px间距）
      - padding:10px 20px;（10px:上下 20px:左右）
      - padding:10px 20px 30px;(10px:上 20px:左右 30px:下)
      - padding:10px 20px 30px 40px(上右下左)顺时针方向
- - - - 变形函数：translate(x,y):平移函数,基于x,y坐标位移,
        
        x轴左移为负数,右移为正数
        
        y轴上移为负数,下移为正数
        
        scale():缩放函数,缩小写为0-1,放大为1以上
        
        rotate():旋转函数,单位deg(度)
        
        skew():倾斜函数,单位deg(度)
- - - - linear：速度恒速（匀速运动）
      - ease-in：速度越来越快（渐显效果）
      - ease-out：速度越来越慢（渐隐效果）
      - ease-in-out：速度先加速再减速（渐显渐隐效果）
- - - - 1.设置关键帧
        
        keyframes 名称{
        
        from{css样式}
        
        percentage{css样式}
        
        to{css样式}
        
        }
      - 2.调用关键帧
        
        animation:动画名称动画时间延迟时间播放次数播放方向播放状态动画发生的操作;
        
        播放次数:默认为1
        
        infinite:无限次播放
        
        播放方向:normal，动画每次都是循环向前播放
        
        alternate，动画播放为偶数次则向前播放
        
        动画的播放状态
        
        running将暂停的动画重新播放
        
        paused将正在播放的元素动画停下来
        
        动画发生的操作
        
        forwards表示动画在结束后应用最后关键帧的位置
        
        backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
        
        both表示元素动画同时具有forwards和 backwards的效果
- - - - 13.邮箱:<input type="email" name="email"/>
      - 14.网址:<input type="url" name="userUrl"/>
      - 15:数字:<input type="number" name="num" min="0" max="100" step="10"/>
        
        step:数字间隔
      - 16:滑块:<input type="range" name="range1" min="0" max="10" step="2"/>
      - 17：搜索的关键词:<input type="search" name="sousuo"/>
    - - 提交按钮：<input type="submit" />
      - 重置按钮：<input type="reset" />
      - 图片按钮：<input type="image" src="路径" />
    - - <option selected="selected">内容</option>
        
        </select>