css基础，padding内边距，border边框，margin外边距的简单应用实操
写笔记
css优先级
元素style>id选择器>类选择器>标签选择器
引入css <link>标签 <link rel="stylesheet" href="style1.css">
padding/margin 内边距 上右下左
id选择器css开头#
#demoid{
}
class选择器用.
.democlass{
}
video标签 outpay自动播放 poster封面图片 comtrols 播放器控件 preload 预加载 loop 循环播放
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.left {
/* background-color: red;
color: black;*/
border: #800d07 1px ridge;
tab-size: 10px;
float: left;
width: 25%;
height: 300px;
}
.center {
/* background-color: #7fff10;
color: #d85ecb;*/
border: green 1px solid;
tab-size: 10px;
float: left;
width: 48%;
height: 300px;
}
.right {
/* background-color: #fffe15;
color: #d80d27;*/
border: #030f80 1px ridge;
tab-size: 10px;
float: right;
width: 25%;
height: 300px;
}
ol {
padding: 5% ;
}
</style>
<title>css盒子布局</title>
</head>
<body>
<div id="top">
<h1 style="margin: auto;padding-top: 5%" align="center">css学习</h1>
</div>
<hr>
<div id="main">
<div class="left">
<ul>
<span></span>
<ol>导航1</ol>
<ol>导航2</ol>
<ol>导航3</ol>
<ol>导航4</ol>
</ul>
</div>
<!-- comtrols 播放器控件
property 预览图片
outpay 自动播放
loop: （循环播放）
preload: （预加载）
-->
<div class="center"><video src="/0423/static/images/demo.mp4" autoplay controls poster="/0423/static/images/zly.jpg" style="height: inherit; padding-left: 12%"></video></div>
<div class="right"><img src="/0423/static/images/bg.jpg" style="width: 100%;height: 100%"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
