HTML5+CSS3(播放视频，矩形，半圆，选择器)

来源：互联网发布：windows查看进程命令编辑：程序博客网时间：2024/05/29 04:33

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>视频</title></head><body><!--<video controls src="video/video.webm"></video>--><video controls>  <source src="video/video.webm" type="video/webm"/><!--    <source src="video/video.mp4" type="video/mp4"/>--></video></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>圆角矩形</title><style>    #ju{        box-sizing: border-box;        width:300px;        height:300px;        border:1px solid red;        padding-left: 20px;        -webkit-border-radius:20px;        -moz-border-radius:20px;        border-radius:20px;    }    #yuan{        box-sizing: border-box;        width:300px;        height:300px;        border:1px solid red;        padding-left: 20px;        -webkit-border-radius:150px;        -moz-border-radius:150px;        border-radius:150px;    }    #banyuan{        box-sizing: border-box;        width:300px;        height:150px;        border:1px solid red;        padding-left: 20px;        -webkit-border-radius:150px 150px 0px 0px;        -moz-border-radius:150px 150px 0px 0px;        border-radius:150px 150px 0px 0px;    }#siyuan{    box-sizing: border-box;    width:150px;    height:150px;    border:1px solid red;    padding-left: 20px;    -webkit-border-radius:150px 0px 0px 0px;    -moz-border-radius:150px 0px 0px 0px;    border-radius:150px 0px 0px 0px;}</style></head><body><div id="ju">圆角矩形</div><div id="yuan">圆形</div><div id="banyuan">半圆形</div><div id="siyuan">1/4圆形</div></body></html>



<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>盒子模型</title><style>    div{        box-sizing: border-box;        width:300px;        height:300px;        border:1px solid red;        padding-left: 20px;    }</style></head><body><!--<p><img src="images/0.jpg" height="300" width="400"/></p><p><img src="images/1.jpg" height="300" width="400"/></p>--><div>盒子</div></body></html>

伪类选择器
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3</title>    <style>      /*  li:first-child{            color:pink;        }*/    /*  li:last-child{          color:pink;      }        li:nth-child(2){            color:pink;        }*/      /*  li:only-child{            color:pink;        }*//*html:root li{    color:pink;}*/    </style></head><body><ul>    <li>哈哈哈</li>    <li>呵呵呵</li>    <li>啦啦啦</li></ul></body></html>
-
1、:hover选择器、:active选择器和:focus选择器:hover选择器：表示选择当鼠标悬停在某元素上的这种状态时指定样式；:active选择器：表示选择当某元素处于激活状态（鼠标在该元素上按下还没有松开）的这种状态时指定样式。:focus选择器：表示选择当元素获得光标焦点这种状态时指定样式，主要用于指定文本框输入文字时的样式。2、:enabled选择器和:disabled选择器:enabled选择器：表示选择当某元素处于可用状态时指定样式；:disabled选择器：表示选择当某元素处于不可用状态时指定样式。（常用于form表单）3、:read-only选择器和:read-write选择器:read-only选择器：表示选择当某元素处于只读状态时指定样式；:read-write选择器：表示选择当某元素处于非只读状态时指定样式。4、:default选择器、:checked选择器和:indeterminate选择器这三个选择器是针对复选框和单选框来使用的，目前只有Opera浏览器支持最好！:default选择器：表示选择当前元素处于非选取状态时的单选框或复选框指定样式；:checked选择器：表示选择当前元素处于选取状态时的单选框或复选框指定样式；:indeterminate选择器：表示选择当页面打开时，某组中的单选框或复选框元素还没有选取状态时指定样式。5、::selection选择器（选中状态选择器）

阅读全文

0 0