zoukankan      html  css  js  c++  java
  • css美化网页元素

    1.CSS设置字体样式

    font字体属性的顺序:字体的风格—>字体的粗细—>字体大小—>字体
    2.CSS设置文本样式

    扩展:text-shadow:可向文本应用阴影

    例:text-shadow:5px 5px 5px #ffff00;

    3.超连接伪类

    语法:

    4.鼠标的形状


    5.CSS设置图片对齐方式

    5.1背景设置

    background—image:为指定的元素使用多个背景图案

    6. CSS设置列表样式 list-style-typelist-style:简写列表属性,将所有的列表写在一个声明中

    list-style-type:decimal;改变列表的标志类型
    list-style-image: url("images/dog.gif");用图像表示标志
    list-style-position: inside;确定标志出现在列表项内容之外还是内容内部


    7.控制溢出

    8.隐藏元素

    9.盒子模型

    9.1什么是盒子模型

    9.2 边框相关属性

    border-style:边框样式,值有以下情况:
                    solid:实线
                    double:空心线
                    dashed:圆点组成的边框
                    dotted:虚线组成的边框
                    border-color:边框颜色
                    border-边框宽度

    9.3 外边距的相关属性

                   margin:外间距,边框和边框外层的元素的距离(就是最外层的边框与浏览器的距离)
                   margin:四个方向的距离(top right bottom left)
                   margin-top:
                   margin-bottom:
                   margin-left:
                   margin-right:

    10.clear扩展盒子的高度

    规定元素的那一侧不允许其他浮动元素

     

    运用:

    如果页面中有绝对定位元素且元素超出了父级的范围,就必须使用clear属性来清除浮动来扩展盒子高度
    11.定位属性

    11.1 默认的值(static)

    没有定位以标准流方向显示

    11.2 相对定位(relative)(*****)

    相对自身的原来位置进行偏移

    属性的定义:h2.pos_left {
                    position: relative;
                    left: -20px
                }

    11.3 绝对定位(absolute)

    使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
    绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响。
    例:position:absolute;
        right:30px;

    11.4 固定定位(fixed)

    fixed目前还不被一些浏览器支持,实际网页制作中不常用

    12.元素透明度

    13.元素的重叠

    调整元素定位时重叠层的上下位置
    z-index属性值:整数,默认值为0
    设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系。
    z-index值大的层位于其值小的层上方

    网页中的元素都含有两个堆叠层级,一个是未设置绝对定位时所处的环境,此时z-index是0;另一个是设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定。
    改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可

     14.css扩展属性

    10.1 border-radius创建圆角

    10.2 box-shadow:用于向方框添加阴影

  • 相关阅读:
    Nginx、PCRE和中文URL(UTF8编码)rewrite路径重写匹配问题
    Nginx 使用中文URL,中文目录路径
    再谈Nginx Rewrite, 中文URL和其它
    事务管理
    commons-dbcp连接池的使用
    JDBC操作简单实用了IOUtils
    JDBC进行处理大文件和批处理
    mysql日期函数(转)
    mysql约束(自己原先总结的有点不准)
    mysql笔记(前面自己写的不标准有些地方)
  • 原文地址:https://www.cnblogs.com/wanghuaying/p/9520118.html
Copyright © 2011-2022 走看看