CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset(重置浏览器默认样式)

一.Css绘图

1.1css绘制三角形

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型 - 三角形</title>
        <style type="text/css">
            #box{
                width: 0;
                height: 0;
                border: 100px solid blue;
                border-color: blue transparent transparent transparent;
                /*设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向*/
            }
        </style>
    </head>
    <body>
        <div id="box">
        </div>
    </body>
</html>

运行效果：

2.css绘制爱心

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #heart {
                position: relative;
                width: 100px;
                height: 90px;
            }
            #heart:after,#heart:before {
                position: absolute;
                content: "";
                left: 50px;
                top: 0;
                width: 50px;
                height: 80px;
                background: red;
                border-radius: 50px 50px 0px 0px;
                transform: rotate(-45deg);
                transform-origin: 0 100%;
            }
            #heart:after {
                left: 0;
                transform: rotate(45deg);
                transform-origin: 100% 100%;
            }
        </style>
    </head>
    <body>
        <div id="heart">
        </div>
    </body>
</html>

运行效果：

 3.css绘制返回图标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> 
        <style>
        .back{ 
            width: 200px;
            height: 66px;
            border:20px solid #494831; 
            border-radius: 0px 50px 50px 0px;
            border-left: none; 
            position: relative;
        }
        .back:before{ 
            content: '';
            width: 20px;
            background: white; 
            height:0px; 
            position: absolute;  
            top: 52px; 
            border: 24px solid saddlebrown;
            border-color: transparent #494831 transparent transparent;   
        }
        </style>
    </head>
    <body>
        <div class="back"> 
        </div>
    </body>
</html>

运行效果：

 4.css3 attr的使用

html结构

<div class="test" data-title="测试">hello</div>

css

　　　　.test{
            margin: 60px;
            border: 1px solid saddlebrown;
            position: relative;
            display: inline-block;
            padding: 5px 10px;
            cursor: pointer;
        }
        .test:hover::after{
            content: attr(data-title);
            position: absolute;
            text-align: center;
            width: 100px;
            padding: 10px 20px;
            border-radius: 4px;
            border: 1px seagreen solid;
            top: -50px;
            left: -50%;
        }

运行效果：

 

posted @ 2016-11-28 10:34  指间流逝的夏末  阅读(664)  评论(0)  编辑  收藏  举报