zoukankan      html  css  js  c++  java
  • html笔记

    一:html语法之--使用图像映射
    1 什么是图像映射
    所谓图像映射是指在一幅图中定义若干个区域,每个区域中指定一个不同的超链接,当单击不同的区域时便可以跳转到相应的目标页面。
    2 创建图像映射
    2.1 定义映射区域
    定义映射区域使用MAP标记符,在<MAP>和</MAP>之间添加映射区域。添加映射区域使 用AREA标记符。该标记符具有三个基本属性:
    href 标识出目标的URL
    shape 说明映射区域的形状。取值可是:
    rect 矩形
    circle 圆形
    poly 多边形
    default 整个图像区域 coords 用于标识映射区域的边界。
    2.2 对映射区域进行引用
    标记了映射区域之后,就可以通过在IMG标记符中使用usermap属性来引用相应的映射信息。
    一个完整的图像映射语法如下:
    <map name="mymap">
    <area href=URL1 shape=rect coords="x1,y1,x2,y2">
    <area href=URL2 shape=circle coords="x,y,r">
    <area href=URL3 shape=poly coords="x1,y1,x2,y2,...,xn,yn">
    </map>
    <img src=image_URL usemap=#mymap>
    注意:map标记符中,name属性的取值必须与img标记符中,usemap属性的取值相同,只是usemap属性的值前面多了一个# 。

    二、fieldset 元素可将表单内的相关元素分组。
    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
    <legend> 标签为 fieldset 元素定义标题。
    eg: <body>
    <fieldset style="300px;color:red">
    <legend><font color="blue">★ 审核状态</font></legend>
    <form>
    <input type="radio" name="state">已经审核
    <input type="radio" name="state">没有审核
    <input type="radio" name="state">全部
    </form>
    </fieldset>
    </body>

    三、CSS中的常用四种选择器
    1.类选择器(class)
    2.id选择器
    3.html元素选择器
    4.通配符选择器
    我们希望所有的超链接
    (1)默认样式是黑色,24px,没有下划线
    (2)当鼠标移动到超链接时,自动出现下划线
    (3)点击后,超链接变成红色。这又该怎么实现呢?
    a:link{
    color:black;
    text-decoration:none;
    font-size:24px;
    }
    a:hover{
    text-decoration:underline;
    font-size:40px;
    color:green;
    }
    a:visited{
    color:red;
    }

    /*对同一中html 元素分类*/
    p.cls1{
    color:blue;
    font-size:30px;
    }
    p.cls2{
    color:red;
    font-size:20px;
    }
    四、四个选取器优先权
    Id 选择器> class 选择器> html 选择器> 通配符选则器

    五、常见的行内元素和块元素
    常见的行内元素有<a> <span> <inpu type=”xxx”>
    常见块元素有<div> <p>
    行内元素和块元素可以转换
    使用
    Display: inline 表示使用行内元素方式显示
    Display: block 表示使用块元素方式显示

    六、浮动
    浮动在div+css 中浮动分为左浮动,右浮动,清除浮动
    右浮动
    所谓右浮动,指一个块元素向右移动,让出自己空间,向右移动直到碰到包含自己的父元素的最右边的边框.
    左浮动
    所谓左浮动就是指: 某个块元素尽量向左边移动,这样就让出它右面的空间,让别的块元素显示.
    如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:直到有足够空间.

    七、定位
    常见的定位有四种
    1. static 定位(默认值) 【left 和top 无效】//left top 属性对static 没有效果, static 定位是靠margin-left margin-top 来移动位置的.
    2. relative 相对定位 (空余部分不会被占用)
    3. absolute 绝对定位(空余部分会被补齐)
    4. fixed 固定定位.
    所谓相对定位是指,相对该元素应当显示的左上角重新定位,虽然它脱离的标准流,但是它的空间,不能被占用.
    所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位,如果没有父元素(或者有父元素,但是父元素没有脱离标准流),则相对body 左上角定位.
    所谓fixed 定位就是不管怎样,总是以视窗的左上角定位.
    z-index用于设置对象(div) 显示时候,层叠的属性, z-index 值越小,则越在下层显示!!

  • 相关阅读:
    [Python] Python2 、Python3 urllib 模块对应关系
    [Python] Mac pip安装的模块包路径以及常规python路径
    git 使用详解
    版本控制工具简介
    python基础练习题(二)
    python简介,安装
    python基础练习题(一)
    python练习题之面向对象(三)
    python之input函数,if,else条件语句使用的练习题(一)
    C++ 静态变量
  • 原文地址:https://www.cnblogs.com/xs-yqz/p/4272064.html
Copyright © 2011-2022 走看看