0基础学Web—背景渐变和文本溢出、精灵图、音视频、定位、二级列表
背景渐变和文本溢出
表示颜色:
单词: red yellow green
rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,0-1): 不影响文本
十六进制： #
255=128+64+32+=1111 1111
body代码
<body>
<div class="wrapper">
<div class="fourth">
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
</div>
<br>
<div class="third">
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;有点意思;
<br>
</div>
<div class="first"></div>
<br>
<div class="second">
张三
</div>
</body>
背景渐变与文本溢出处理
<style>
/* 渐变 */
.first {
width: 200px;
height: 200px;
/* 线性渐变 */
background-image: linear-gradient(to right bottom, red 10%, orange, yellow, green);
}
/* 颜色表示 */
.second {
width: 200px;
height: 200px;
background-color: rgb(255, 0, 0);
/* 透明 0-1*/
opacity: 0.5;
}
/* 文本溢出处理 */
.third {
width: 200px;
height: 200px;
border: 1px solid red;
/*
hidden:隐藏
scroll：x y都有滚动框
*/
overflow: auto;
/* 不换行 */
/* white-space: nowrap; */
}
/* 文本省略 */
.fourth {
/* 固定样式 */
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
/* 英文单词允许换行 */
word-break: break-all;
/* 省略号的行数 */
-webkit-line-clamp: 2;
/* 高度必须和多行的行高一致 */
height: 48px;
line-height: 24px;
/* 自定义样式 */
font-size: 16px;
width: 200px;
}
</style>
结果展示
精灵图
body代码
<body>
<div class="wrapper">
<ul>
<li>
<i class="icon"></i>
<span class="title">
<a href="#">奶粉辅食</a>
<a href="#">奶粉</a>
<a href="#">辅食</a>
</span>
<i class="arrow"></i>
</li>
<li>
<i class="icon"></i>
<span class="title">
<a href="#">奶粉辅食</a>
<a href="#">奶粉</a>
<a href="#">辅食</a>
</span>
<i class="arrow"></i>
</li>
</ul>
</div>
</body>
精灵图
<style>
ul {
background-color: #313030;
width: 242px;
}
ul>li {
display: flex;
align-items: center;
}
ul>li:hover {
background-color: #fff;
}
ul>li:hover>.title>a {
color: rgb(49, 43, 48);
}
.icon {
margin-right: 15px;
}
.arrow {
background: url(./imgs/京东精灵图.png) no-repeat;
background-position: -60px -102px;
width: 6px;
height: 9px;
margin-left: 25px;
}
ul>li:hover .arrow {
background-position: -83px -102px;
line-height: 40px;
}
.title {
font-size: 14px;
}
.title>a:hover {
text-decoration: underline;
}
.title>a:nth-of-type(1) {
color: #fff;
}
.title>a:nth-of-type(2) {
margin: 0 15px;
color: rgb(192, 182, 194);
}
.title>a:nth-of-type(3) {
color: rgb(192, 182, 194);
}
.icon,
.arrow {
display: inline-block;
}
ul>li:nth-of-type(1) .icon {
background: url(./imgs/京东精灵图.png) no-repeat;
background-position: -28px 0;
width: 22px;
height: 22px;
}
ul>li:nth-of-type(1):hover>.icon {
background-position: 0 0;
}
ul>li:nth-of-type(2) .icon {
background: url(./imgs/京东精灵图.png) no-repeat -28px -43px;
width: 18px;
height: 20px;
}
ul>li:nth-of-type(2):hover .icon {
background-position: 0 -43px;
}
</style>
音频与视频
音频
controls：控制条
autoplay：自动播放
loop:循环
muted:静音
body代码
<body>
<audio controls autoplay loop muted>
<source src="./media/music.ogg">
<source src="./media/music.mp3">
</audio>
</body>
视频
controls：控制条
autoplay：自动播放
loop:循环
muted:静音
poster：视频封面，播放后消失
body代码
<body>
<video width="500" height="500" poster="./media/rt.jpg" controls loop muted>
<source src="./media/video.webm">
<source src="./media/video.mp4">
</video>
</body>
定位
标准文档流: 根据元素本身的特性从左到右 或 从上到下排列
脱离标准文档流: 层级提高，脱标的元素都有行内块相似特性
相对定位
相对于自身定位
不脱标
固定定位
相对于浏览器，不随滚动条滚动
脱标
绝对定位
相对于 <最近的> <已经定位的祖先元素>，
如果祖先元素没有定位，相对于浏览器
脱标，层级提高，影响下边元素
body代码
<body>
<div class="wrapper">
<div class="inner">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
<div class="fix"></div>
</div>
</body>
定位
<style>
.wrapper {
position: relative;
border: 2px solid black;
padding: 30px;
}
.inner {
height: 500px;
border: 2px solid red;
/* 以父元素为参照 */
position: relative;
}
.inner>.first {
width: 100px;
height: 50px;
border: 5px dashed green;
position: relative;
left: 20px;
bottom: 20px;
}
.inner>.second {
width: 200px;
height: 100px;
background-color: #c32a5b;
position: absolute;
left: 50px;
top: 50px;
}
.inner>.third {
width: 300px;
height: 150px;
background-color: #282525;
}
.fix {
width: 50px;
height: 300px;
background-color: #b01010;
position: fixed;
right: 10px;
bottom: 20px;
}
/* 出现滚动条 */
body {
height: 1500px;
}
</style>
结果展示
粘性定位
粘性定位的使用语法是通过设置 position: sticky; 来实现，并可以在 top、bottom、left 或 right 属性中指定相应的值，表示元素在满足触发条件时固定在距离指定边距的位置，实现吸附效果。
body代码
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="content">
<p>Scroll down to see the effect.</p>
<!-- 示例内容 -->
</div>
</body>
粘性定位
<style>
.navbar {
position: sticky;
top: 0;
background-color: #727272;
color: white;
padding: 10px 0;
text-align: center;
margin-top: 100px;
}
.content {
height: 2000px;
/* 示例内容高度 */
padding: 20px;
}
</style>
二级列表
body代码
<body>
<div class="wrapper">
<div class="inner">
<ul class="nav">
<li>
<a href="#">
网站首页
</a>
</li>
<li>
<a href="#">
品牌介绍
</a>
</li>
<li>
<a href="#">
门店查询
<ul class="subnav">
<li><a href="#">360探店</a></li>
<li><a href="#">摄影师</a></li>
<li><a href="#">化妆师</a></li>
</ul>
</a>
</li>
<li>
<a href="#">
网站首页
<ul class="subnav">
<li><a href="#">360探店</a></li>
<li><a href="#">摄影师</a></li>
<li><a href="#">化妆师</a></li>
</ul>
</a>
</li>
<li>
<a href="#">
品牌介绍
</a>
</li>
<li>
<a href="#">
门店查询
</a>
</li>
<li>
<a href="#">
品牌介绍
</a>
</li>
<li>
<a href="#">
门店查询
</a>
</li>
</ul>
</div>
<img src="./imgs/banner-02.jpg" alt="">
</div>
</body>
二级列表
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
/* 最外层背景 */
.inner {
background-color: #010101;
}
/* 一级ul样式 */
.nav {
display: flex;
width: 1200px;
margin: 0 auto;
/* justify-content: space-between; */
}
/* 所有li样式相同 */
.nav li {
width: 100px;
line-height: 60px;
text-align: center;
position: relative;
}
/* 一级字体默认白色 */
.nav>li>a {
color: white;
}
/* 一级悬浮，背景改为灰色 */
.nav>li:hover {
background-color: #454242;
}
/* 一级li悬浮 二级ul显示 */
.nav>li:hover .subnav {
display: block;
}
/* 一级li悬浮 改变字体颜色 */
.nav>li:hover>a {
color: orange;
}
/* 二级ul样式 */
.subnav {
display: none;
position: absolute;
left: 0;
top: 40px;
}
/* 二级li样式 */
.subnav>li {
background-color: #454242;
border-top: 1px solid white;
}
/* 二级默认字体 */
.subnav>li>a {
color: orange;
}
/* 二级悬浮半透明 */
.subnav>li:hover {
opacity: 0.5;
}
</style>
结果展示
鼠标经过时即可显示出二级列表
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
