12

你！鸿章

于 2019-02-13 17:19:51 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/weixin_43024812/article/details/87192547

版权

盒子模型
边框 border-color border-(top)-color 边框颜色

    border-width  border-(top)-width 边框粗细

   border-style  border-(top)-style none表示无线框  dotted点线边框  dsahed虚线边框  solid 实线边框

border 简写 boder: width color style

外边距 margin: px margin:0px auto;(让整个盒子居中)

内边距 padding:px padding:30px 10px;(表单内部都设置空隙)

box-sizing拯救布局：border-sizing: content-box | border-box | inherit

圆角边框 border-radius:px

使用border-radius制作特殊图形
1.圆形 border-radius:50%;
2.半圆形 border-radius: px px 0 0;
3.伞形；border-radius:px 0 0 0;

盒子阴影 box-shadow: inset x y blur-radius color; inset(不设置就是外阴影设置就是内阴影) blur-radius 模糊半径

   制作爱奇艺视频

1.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="qi.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
    <h3>热播</h3>
    <div class="div1">
            <img alt="" src="图片/img1.png" />
<ul>
            <li>神武赵子龙</li>
    <li> <v class="che">怒，林更新不抱网红抱女神</v></li>
    <li><v>点击次数：242445次</v></li>

</ul>
            </div>
    <div class="div1">
            <img alt=""src="图片/img2.png"/>
        <ul>
            <li>旋风十一人</li>
            <li> <v  class="che">胡歌变教练在撩前女友</v></li>
            <li><v>点击次数：242445次</v></li>
        </ul>
    </div>
                <div class="div1">
            <img alt="" src="图片/img3.png" />
                    <ul>
                        <li> 太阳的后裔</li>
                        <li><v  class="che">宋慧乔吃嫩草</v></li>
                        <li><v>点击次数: 242445次></v></li>
                    </ul>
                </div>
            <div class="div1">
            <img alt="" src="图片/img4.png" />
                <ul>
                    <li> 山海经之赤影传说</li>
                    <li> <v  class="che">娜扎张翰在联手</v></li>
                    <li><v>点击次数：242445次</v></li>
                </ul>
            </div>
    </ul>
</div>
</body>
</html>


*{
    padding: 0px;
    margin: 0px;
    font-size: 16px;
}
h3{
    margin: 20px;
    font-size: 20px;
}
div{
    width: 1000px;
    height: 600px;
    border: solid saddlebrown 0px;
    margin: 0px auto;
}
 .div1{
     width: 240px;
     display: inline-block;
 }
 ul{
  list-style-type: none;

 }
li{
    padding: 10px;
    margin-right: 5px;
    line-height: 40px;
    font-size: 18px;
}
v{
   color: blue;
}
.che{
    color: #9d2f28;
}
img{
    border-radius:20px;
    box-shadow: 2px 2px 2px black;
}