博客列表 >css基础,padding内边距 border边框 margin外边距的简单应用实操

css基础,padding内边距 border边框 margin外边距的简单应用实操

如花似玉的小牛牛的博客
如花似玉的小牛牛的博客原创
2019年04月25日 19:41:49752浏览

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议