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

最新推荐文章于 2024-02-24 09:55:28 发布

原创最新推荐文章于 2024-02-24 09:55:28 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

本文通过HTML5的`<video>`元素展示了如何添加视频播放功能，并利用CSS3创建了圆角矩形、圆形、半圆形和1/4圆形。此外，还介绍了CSS3的选择器应用，如`:hover`、`:active`、`:focus`等伪类选择器，以及`:enabled`、`:disabled`、`:read-only`和`:read-write`等状态选择器，为网页元素增添交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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选择器（选中状态选择器）