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>
运行实例 »
点击 "运行实例" 按钮查看在线实例