视频和音频
<!--音频-->
<audio controls="controls"> <!--controls="controls"添加控件-->
<source src="a.ogg" type="audio/ogg">
<source src="a.mp3" type="audio/mpeg"><!--浏览器会选择第一个可以识别的格式播放-->
</audio>
<!--视频-->
<video width="300px" height="300px" controls="controls"> <!--controls="controls"添加控件-->
<source src="a.ogg" type="audio/ogg">
<source src="a.mp3" type="audio/mpeg"><!--浏览器会选择第一个可以识别的格式播放-->
</video>
颜色标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
/*6位2进制 每两位为一组 RGB*/
/*background-color: #ff0000;*/
/*background-color: rgb(0,255,0);*/
/*透明度表示 rgba(0,255,0,0.5)第四个参数表示透明度*/
background-color: rgba(0,255,0,0.5);
margin: 100px auto;
position: relative;
/*
颜色透明：待写
*/
}
.box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top:50%;
margin-top: -50px;
margin-left: -50px;
}
body{
background-color: grey;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
元素显示和消失
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 150px;
height: 40px;
background-color: gainsboro;
text-align: center;
color: white;
line-height: 40px;
/*
pointer 小手
move 移动
help 问号
crosshair 十字架
*/
cursor:pointer;
position: relative;
}
img{
/*定位和浮动会把块级元素和行内元素转化成行内块*/
position: absolute;
left: 20px;
top: 40px;
/*隐藏一个元素*/
display: none;
}
.box:hover img{
/*显示属性 display:block*/
display: block;
}
</style>
</head>
<body>
<div class="box">我的京东
<!--鼠标移入父元素让子元素显示，不能是兄弟关系-->
<img src="1.png" alt="">
</div>
</body>
显示和隐藏
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 70px;
border: 5px double #ff0000;
/*overflow: hidden;*/ /*溢出隐藏*/
overflow: scroll; /*溢不溢出都加滚动条*/
overflow: auto; /*溢出加，不溢出不加滚动条*/
}
</style>
</head>
<body>
<!--
1.overflow：hidden 溢出的隐藏
scroll 出现滚动条（溢出不溢出都出现滚动条）
auto 出现滚动条（内容溢出则出现滚动条，不溢出则不出现）
-->
<div class="box">
hidden 溢出的隐藏
scroll 出现滚动条（溢出不溢出都出现滚动条）
auto 出现滚动条（内容溢出则出现滚动条，不溢出则不出现）
</div>