学习微信小程序之css7

盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*.class_list{*/
            /*display: block;*/
            /*width: 90%;*/
            /*height: 300px;*/
            /*margin: 200px auto;*/
            /*background-color: aqua;*/
        /*}*/
       /*.class_fout{*/
           /*font-size: 25px;*/
           /*font: 25px "黑体";*/
           /*line-height: 300px;*/
           /*text-align: center;*/
       /*}*/
        .*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            padding: 100px;
            /*border: 100px solid red;*/
            border: 100px dotted red;
            background-color: #555555;
        }

    </style>
</head>
<body>
    <!--<div class="class_list class_fout">这是一个测试界面</div>-->

  <div class="box">jfdhsakjdfhaskjdfhsakjdhskj</div>



</body>
</html>

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height: 200px;
            width: 200px;
            background-color: green;
            /*设置上边框的宽度*/
            border-top-width: 20px;
            /*设置上边框的颜色*/
            border-top-color: red;
            /*设置上边框的样式*/

           /*border-top-style: double;*/
            /*border-top-style: solid;*/
            border-top-style: dotted;


            /*设置下边框*/
            border-bottom-color: yellowgreen;
            border-bottom-width: 5px;
            border-bottom-style: solid;
            /*边框的样式可以合写*/
            /*border-left: 宽度,样式,颜色;*/
            border-left: 5px solid blue;

            可以用一行设置上下左右的所有的样式

        }
        .box1{
            background-color: #999999;
            height: 200px;
            width: 200px;
            border: 5px solid blue;
        }

    </style>
</head>
<body>
    <div class="box"></div>

    <div class="box1"></div>
</body>
</html>

 

 

 

posted @ 2017-01-06 10:28  hanyongwei  阅读(1852)  评论(0)  编辑  收藏  举报