css应用示例（一）

CSS ：层叠样式表,Cascading Style Sheets。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1 vertical-align　在图片与文字对齐时的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0px;
    }
    img{
        width: 80px;
        height: 60px;
    };
    
    </style>
</head>
<body>
    旗木卡卡西<img src="C:\Users\zuo\Desktop\2.jpg">
</body>

　　显示：

改进后代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0px;
    }
    img{
        width: 80px;
        height: 60px;
        vertical-align: bottom;
    };
    
    </style>
</head>
<body>
    旗木卡卡西<img src="C:\Users\zuo\Desktop\2.jpg">        
</body>

　　显示：主要在于字的最下端和图片的水平距离

PS：在这里涉及到一个地址分隔符。以下是从网上查找的资料：

Unix使用斜杆/作为路径分隔符，而web应用最新使用的Unix系统上面，所以目前所有网络地址都采用斜杠/最为分割符。

Windows用于使用斜杆作为DOS命令提示符的参数标志了，为了不混淆，所以采用反斜杆\作为路径的分隔符。所有目前Windows系统上的文件浏览器都是用反斜杆\最为路径分隔符。随着发展，DOS系统已经被淘汰了，命令提示符也用的很少，斜杆和反斜杠在大多数情况下可以互换，没有影响。

知道这个背景后，可以总结一下结论：
（1）浏览器地址栏网址使用斜杆/ ;
（2）windows文件浏览器上使用反斜杠\ ;
（3）出现在html url() 属性中的路径，指定的路径是网络路径，所以必须用斜杆/ ;

（4）出现在普通字符串中的路径，如果代表的是windows文件路径，则使用斜杆/ 和反斜杠\ 是一样的；如果代表的是网络文件路径，则必须使用斜杆/ ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0px;
    }
    div{
        border: 1px solid red;
        width: 100%;
        height: 300px;
        background-image: url("C:/Users/zuo/Desktop/2.jpg");      #所以在这里，地址分隔符必须是  /,用 \会报错。
        background-repeat: repeat;
    };
    </style>
</head>
<body>
    <div>dddd</div>
</body>

　　显示：

2.设置圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    div{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        background-color: yellow;
        border-radius: 20%;
    }
    </style>
</head>
<body>
    <div></div>
</body>

　　显示：

3.利用 ul/ol标签模拟实现div block element的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    .c1{
        list-style: none;
        padding:0;
    }
    </style>
</head>
<body>
    <ul class='c1'>
        <li>AAAA</li>
        <li>BBBB</li>
        <li>CCCC</li>
        <li>DDDD</li>
    </ul>
</body>

　　输出：

AAAA
BBBB
CCCC
DDDD

4 display属性，规定元素应该生成的框的类型。用的比较多的有none，block，inline-block（行内块元素），inline（默认）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    .c1{
        list-style: none;
        padding:0;

    }
    .hide{
        display: none;
    }
    </style>
</head>
<body>
    <ul class='c1 hide'>
        <li>AAAA</li>
        <li>BBBB</li>
        <li>CCCC</li>
        <li>DDDD</li>
    </ul>
</body>

　　输出：隐藏显示，display设为none就可以了。

5.clear 指定段落的左侧或右侧不允许存在浮动元素。但管不了后面的元素干什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    .c1,.c2,.c3{
        border: 1px solid red;
        width: 200px;
        height: 200px;
        float: left;
    }
    .c1{
        background-color: yellow;
    }
    .c2{
        background-color: red;
        clear: both;
    }
    .c3{
        background-color: grey;
    }
    </style>
</head>
<body>
    <div class='c1'></div>
    <div class='c2'></div>
    <div class='c3'></div>
    
</body>

　　输出：

6.解决父级塌陷的问题

　　现象：父级如果不指定高度，其子元素如果是浮动，父级的高度则为零。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    .header{
        border: 1px solid red;
        width: 100%;
    }
    .header>.c1{
        width: 40%;
        height: 30px;
        float: left;
        border: 1px solid grey;
    }
    .header>.c2{
        width: 40%;
        height: 30px;
        float: right;
        border: 1px solid green;
    }
    .body{
        width: 100%;
        height: 300px;
        background-color: lightgrey;
    }
    </style>
</head>
<body>
    <div class="header ">
        <div class="c1">
        </div>
        <div class="c2">
        </div>
    </div>
    <div class="body">
    </div>
</body>

　　输出：

可以看出：子元素并没有撑起父元素。后面的class=body 直接越过两个float

升级版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    .header{
        border: 1px solid red;
        width: 100%;
    }
    .header>.c1{
        width: 40%;
        height: 30px;
        float: left;
        border: 1px solid grey;
    }
    .header>.c2{
        width: 40%;
        height: 30px;
        float: right;
        border: 1px solid green;
    }
    .body{
        width: 100%;
        height: 300px;
        background-color: lightgrey;
    }
    .clearfix:after{               #clearfix在后面加一个空的block元素，并且clear属性为both。作为一个中介。
        content: '';
        display: block;
        clear: both;
    }
    </style>
</head>
<body>
    <div class="header  clearfix">  #父元素继承clearfix
        <div class="c1">
        </div>
        <div class="c2">
        </div>
    </div>
    <div class="body">
    </div>
</body>

　　输出：

7.position 规定元素的定位类型。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移

　　relative：空间位置依然存在，并未脱离文档流，参照物是自己之前的位置。

　　absolute：完全脱离文档流，参照物是已经定位的父元素。

　　fixed：完全脱离文档流，参照物是可是窗口。

　　应用：简单的模拟京东主页面的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        .ulc{
            list-style: none;
            padding: 0;
        }
        .divc{
            width: 790px;
            height: 340px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
        }    
        .ulc li{
            position: absolute;
            left: 0;
            top: 0;
        }
        .hide{
            display: none;
        }
    </style>
    
</head>
<body>
    <div class="divc">
        <ul class='ulc'>
            <li class="hide"><a href=""></a><img src="https://img10.360buyimg.com/babel/jfs/t11170/7/945475996/99456/797de9e8/59fc2c36N61120663.jpg"></li>
            <li class="hide"><a href=""></a><img src="https://img14.360buyimg.com/da/jfs/t11980/135/924837807/134618/9eac7429/59fae7e9Nca8bba9c.jpg"></li>
            <li><a href=""></a><img src="https://img14.360buyimg.com/babel/jfs/t10513/238/2452506278/104893/f5eac171/59f73c11Nd8904b62.jpg"></li>
        </ul>
    </div>
    
</body>
</html>

　　示例二：fixed的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .return{
            width: 80px;
            height: 40px;
            position: fixed;
            right: 30px;
            bottom: 30px;
            border: 1px solid red;
            border-radius: 20%;
            color:green;
            background-color: grey;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class="return">返回</div>
    
</body>
</html>

posted @ 2017-12-06 16:54 可造之猿阅读(185) 评论(0) 收藏举报

刷新页面返回顶部