zoukankan      html  css  js  c++  java
  • Html学习

    html
    基本标签:
    网址:http://www.w3cschool.cn/html/html-Label.html
    <meta />设置页面信息的 <input />表单元素,type不同输入字段拥有不同形式
    <link /> 链接样式表 <frame />定义frameset中的一个特定的窗口(框架)
    <embed />定义嵌入的内容,比如插件
    <a href=地址 target=_blank></a>指定超链接目标的 URL(另开新窗口)
    <a href=地址 target=_top></a>指定超链接目标的 URL(全窗口连接)
    <a href=地址 target=页框名></a>指定超链接目标的 URL(在指定页框连接)
    <bgsound src=MID音乐文件地址 />
    <a href="#001">跳到001</a>
    …文字省略
    <a name="001" id="001" > </a>(一般用name就可以了,用id是考虑兼容)
    //////////////////////////////////////////////////////////////////////////////
    表单边框:
    <fieldset>
    <legend></legend>边框线上的字
    </fieldset>
    单选默认:checked="checked";
    下拉框默认:selected="selected" <select><option>
    文本框:<textarea rows="8" cols="25">
    图片加载不出来或者纯文本方式浏览能看到的值<img src="sds" alt="rikuan"/>
    css选择器:
    id---id="cs"---#cs{}
    class---.cs{}---class="cs"
    tage p{}
    color: 3种设置方式,分别是内置/#ccccdd/rgb(0-255,0-255,0-255)调和颜色
    font-style(normal,italic,oblique) 字体样式
    font-weight(normal,bold,100~900) 字的粗细
    text-align:文字对齐方式
    text-decoration(underline,line-through)
    background : background-color background-image background-repeat background-attachment background-position
    默认值为:transparent none repeat scroll 0% 0%。
    background-image:background:url() no-repeat;
    repeat:背景在x和y方向都重复
    no-repeat:背景不重复
    repeat-x:水平方向重复
    repeat-y:垂直方向重复
    background-attachment属性:
    设置图片的滚动属性
    scroll 背景图片随页面的其余部分滚动。这是默认
    fixed 背景图像是固定的
    inherit 指定background-attachment的设置应该从父元素继承
    local 背景图片随滚动元素滚动
    background-position属性
    设置背景图像的起始位置
    1、内置 center bottom 如果仅指定一个关键字,其他值将会是"center"
    2、百分比
    x% y% 第一个值是水平位置,第二个值是垂直。左上角是0% 0%。
    右下角是100% 100%。
    如果仅指定了一个值,其他值将是50%。默认值为:0%0%
    3、数值
    xpos ypos 第一个值是水平位置,第二个值是垂直。
    左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。
    如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions
    inherit指定background-position属性设置应该从父元素继承

    把图像设置为列表中的列表项目标记
    text-indent: 20%;文本缩进 他会自动继承!
    text-align:center 与 <CENTER>
    您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。
    <CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。
    元素本身不会从一段移到另一端,只是其中的文本受影响。
    justify
    最后一个水平对齐属性是 justify。
    text-transform 属性处理文本的大小写。这个属性有 4 个值:
    none
    uppercase
    lowercase
    capitalize
    接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,
    它提供了很多非常有趣的行为。
    text-decoration 有 5 个值:
    none
    underline
    overline
    line-through
    blink
    不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。
    overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through
    则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,
    类似于 Netscape 支持的颇招非议的 blink 标记。
    倾斜显示文本
    p.normal {font-style:normal;}
    p.italic {font-style:italic;}
    p.oblique {font-style:oblique;}
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    使用 font-family 属性 定义文本的字体系列。
    伪样式!!
    a:link {color:#FF0000;} /* 未被访问的链接 */
    a:visited {color:#00FF00;} /* 已被访问的链接 */
    a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
    a:active {color:#0000FF;} /* 正在被点击的链接 */
    text-decoration 属性大多用于去掉链接中的下划线:
    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:underline;}
    a:active {text-decoration:underline;}
    list-style : list-style-image || list-style-position || list-style-type
    为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style,
    就像这样:
    li {list-style : url(example.gif) square inside}

    text-decoration 属性大多用于去掉链接中的下划线:
    table-layout:auto|fixed 表格布局
    border-collapse:separate | collapse 边框合并
    border-spacing:<length>{1,2} 横向和纵向间距
    caption-side:top|bottom 设置表格的caption对象在头或尾
    empty-cells:hide | show 空单元格是否显示
    如何把当前表格水平居中
    margin: 0 auto;
    border-collapse 属性设置是否将表格边框折叠为单一边框:
    table
    {
    border-collapse:collapse;
    }

    table,th, td
    {
    border: 1px solid black;
    }
    text-align 和 vertical-align 属性设置表格中文本的对齐方式。
    text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:
    td
    {
    text-align:right;
    }
    table-layout: automatic
    table-layout: fixed 钉死 单元格宽度 内容会超出表格
    //////////////////////////////////////////////////////////////////////////////
    position位置
    absolute;用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素
    relative;即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。相对定位元素经常被用来作为绝对定位元素的容器块。
    relative;
    fixed;

    .dd{
    /*display: inline;*/
    /*position: relative;*/
    }
    .cc{
    /*position: absolute;*/
    display: none;
    }
    .dd:hover .cc{
    display: block;
    }
    </style>
    </head>
    <body>
    <div class="dd">
    <span>下拉</span>
    <div class="cc">
    <p>下拉1</p>
    <p>下拉2</p></div>
    </div>

  • 相关阅读:
    AutoLISP圆内接多边形
    AutoLISP以直线为基线添加文字
    jquery easyuidatagrid 如何清空数据
    MyBatis直接执行SQL查询及批量插入数据
    mappers文件中的#{}语法与${}语法的区别
    在windows7桌面上新建一个快捷方式,指向cmd命令窗口
    ResultSet转换List或直接遍历解决null问题
    linux命令
    flash build 4.6 报错 内存不足,无法加载...
    关于linux安装openoffice无法启动
  • 原文地址:https://www.cnblogs.com/lifusen/p/7278844.html
Copyright © 2011-2022 走看看