目录
溢出文本隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 40px;
/* border: 1px solid red; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* text-align: center;
line-height: 40px; */
}
</style>
</head>
<body>
<div class="box">不想直播反感做网红，每天吃安眠药，“跌落神坛”的董宇辉怎么了</div>
<div class="box">不想直播反感做网红，每天吃安眠药，“跌落神坛”的董宇辉怎么了</div>
<div class="box">不想直播反感做网红，每天吃安眠药，“跌落神坛”的董宇辉怎么了</div>
</body>
</html>列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.oUl {
/* list-style-image: url();
list-style-position: inside; */
/* 设置 列表样式在哪里 在内还是在外 */
list-style: none;
}
</style>
</head>
<body>
<ul class="oUl">
<li><span>1.</span>设置列表样式在哪里 在内还是在外</li>
</ul>
</body>
</html>二级菜单的显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.nav {
width: 100%;
height: 600px;
background: #fff;
}
.box {
width: 180px;
height: 60px;
display: inline-block;
text-align: center;
line-height: 60px;
position: relative;
}
.box1 {
width: 180px;
height: 300px;
background-color: aqua;
display: none;
list-style: none;
position: absolute;
}
.box:hover .box1 {
display: block;
}
.smbox {
color: #000;
cursor: pointer;
}
.smbox:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="nav">
<div class="box">标识符规范
<ul class="box1">
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
</ul>
</div>
<div class="box">标识符规范
<ul class="box1">
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
</ul>
</div>
<div class="box">标识符规范
<ul class="box1">
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
<li class="smbox">slider1</li>
</ul>
</div>
</div>
</body>
</html>视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mp4 {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<video class="mp4" src="./765060141-1-208.mp4" controls muted></video>
<video class="mp4" src="https://cdn-tg-pt.4366.com/games/2951dpdjfzclkZWFLJGXP/res/video/bgg.mp4" controls muted></video>
<!-- controls 播放控件 -->
</body>
</html>音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- audio 就是一个完整的音乐播放器 -->
<audio class="music" src="./最伟大的作品-周杰伦.mp3" autoplay controls loop></audio>
<!-- controls 播放控件 -->
<!-- autoplay 自动播放 打开页面 音频自动播放 -->
<!-- loop 循环播放 -->
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
