(一) 视频标签
两种路径: 1. 相对路径 2. 在线路径
autoplay="autoplay" 自动播放属性 按的键盘上的 F5 去刷新
controls="controls" 控制器
loop="loop" 无限循环播放
(二) 圆角
CSS 属性样式: border-radius:;
值: 两个值: 第一个代表左上和右下, 第二个右上和左下
三个值: 第一个代表左上, 第二个右上和左下, 第三个代表右下
四个值: 第一个左上, 第二个右上, 第三个右下, 第四个左下
值的写法, 第一种写 px, 第二种写 %
让一个元素变成圆形, 前提宽高相等, border-radius:50%;
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- div{ width: 200px; height: 200px; background: red; border-radius:10px
- 50px 100px 80px; }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </HTML>
border-radius
(三) 阴影
box-shadow:;
第一个值水平方向上的, 第二个值竖直方向, 第三个值模糊程度, 小于 0 阴影消失, 第四个值颜色
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- div{
- width: 100px;
- height: 30px;
- text-align: center;
- line-height: 30px;
- background: skyblue;
- color:white;
- /*box-shadow 盒子的阴影 */
- /* 第一个值水平方向上的, 第二个值竖直方向, 第三个值模糊程度, 小于 0 阴影消失, 第四个值颜色 */
- }
- div:hover{
- box-shadow: 10px 10px 8px black;
- }
- </style>
- </head>
- <body>
- <div>
搜索一下
- </div>
- </body>
- </HTML>
box-shadow
(四) 外边距
- margin,margin-top,margin-bottom,margin-left,margin-right
- margin:;
一个值: 所有边距;
两个值: 第一个值指 margin-top,margin-bottom 第二个值指 margin-left,margin-right;
三个值: 第一个值指 margin-top, 第二个值 margin-right 和 margin-left, 第三个值 margin-bottom;
四个值: 第一个值 margin-top, 第二个值 margin-right, 第三个值 margin-bottom, 第三个值 margin-left;
来源: http://www.bubuko.com/infodetail-3122158.html