06-定位+交集选择器+图标字体
06-定位+交集选择器+图标字体
1.相对定位
<html lang="en">
<head>
<style type="text/css">
/*
1 定位：将元素设置到网页中的一个具体的坐标位置。
2 相对定位也叫占位定位，相对定位通过偏移量以元素在标准流的自身位置为参考点移动，
在移动时，是在z轴的空间移动。
3 相对定义的移动不会影响周围的元素，通过相对定位移动后元素在标准流的位置还是存在的。
4 通过position: relative;开启相对定位。
5 通过偏移量改变元素的位置。
水平偏移量，如果水平偏移量left和right同时存在，则left优先。
left 正值向右，负值向左。
right 正值向左，负值向右。
垂直偏移量，垂直偏移量top和bottom同时存在，则top优先。
top 正值向下，负值向上。
bottom 正值向上，负值向下。
*/
div {
width: 300px;
height: 300px;
background: red;
}
img {
position: relative;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div></div>
<img src="./img/timg.jpg">
<div></div>
</body>
</html>
2.绝对定位
<html lang="en">
<head>
<style type="text/css">
/*
绝对定位是一个脱离标准流的状态，默认参考点是浏览器的第一屏或者初始化包含块。
*/
div {
margin-top: 10px;
width: 1000px;
height: 1000px;
background: red;
}
img {
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div></div>
<div>
<img src="./img/timg.jpg">
</div>
</body>
</html>
3.相对定位和绝对定位结合使用
<html lang="en">
<head>
<style type="text/css">
/*
1 给元素设置绝对定位后会改变元素的显示模式，即给元素设置宽高会起作用。
2 相对定位和绝对定位比较，绝对定位使用的场景比较多，因为绝对定位不会占用标准流的位置。
3 想要让元素的绝对定位以父元素的参考点，就需要给父元素设置相对定位。
4 绝对定位的参考点是设置定位（绝对定位和相对定位）的父元素，如果没有设置相对定位的父元素，默认是body初始包含块。
5 子绝父相，父子表示标签的关系，绝表示子元素是绝对定位，相表示父元素是相对定位。
*/
.box {
width: 1000px;
height: 500px;
border: 1px solid red;
position: relative;
}
.box span {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="box">
<span></span>
</div>
</body>
</html>
4.定位的层级
<html lang="en">
<head>
<style type="text/css">
/*
1 层级默认是0，可以通过z-index来设置层级，z-index的取值范围是整数。
2 开启定位后，层级默认为0。层级相同时后写的标签会压在先写的标签上面；层级不同时，层级高的在上面。
3 没有设置z-index时，开启定位的标签会压在标准流（没有开启定位）标签上。
4 开启定位后，将元素的z-index设置为-1，则该元素在标准流元素的下面。
*/
.box {
width: 500px;
height: 300px;
border: 1px solid red;
}
.s1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
.s2 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 20px;
top: 0;
z-index: 1;
}
.s3 {
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 40px;
top: 0;
}
.s4 {
width: 100px;
height: 100px;
margin-top: 10px;
background: gray;
}
.s5 {
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 40px;
top: 20px;
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5"></div>
</div>
</body>
</html>
5.定位元素水平垂直居中
<html lang="en">
<head>
<style type="text/css">
/*
1 定位的水平居中：left: 50%，先走父元素宽度的一半；margin-left: -50px，在往回走自身宽度的一半。
2 定位的垂直居中：top: 50%，先走父元素高度的一半；margin-top: -50px，在往回走自身高度的一半。
*/
.box {
width: 500px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
position: relative;
}
.phone {
width: 100px;
height: 100px;
background: burlywood;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="box">
<div class="phone"></div>
</div>
</body>
</html>
6.练习-小米轮播图
<html lang="en">
<head>
<style type="text/css">
/*
开启bfc，Block Formatting Context(块级格式化上下文)，开启bfc后是一个独立的区域，脱离了标准流，可以解决父元素高度塌陷问题。
开启bfc的三种方式：
1. overflow: hidden,scroll
2. float: left/right
3. position: absolution,fixed.
*/
/*
1 .box加相对定位为了使得加绝对定位的子元素以.box为参考点。
2 .left加绝对定位为了放在img的上边。
3 切换按钮和小圆点加绝对定位为了放在img的上面。
4 .left>ul>li>a div加绝对定位为了放在img上。
*/
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 1226px;
height: 460px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.box img {
display: block;
}
/*
使用ul完成轮播图。定义ul的宽width为图片的宽的和；然后给ul的父元素设置overflow: hidden，溢出隐藏；
通过改变left的值，来完成轮播的切换。
*/
.imageList {
width: 6130px;
position: absolute;
left: 0;
top: 0;
}
.imageList li {
float: left;
}
.left {
width: 234px;
height: 460px;
background: rgba(0, 0, 0, .5);
position: absolute;
left: 0;
top: 0;
}
.left ul {
margin-top: 20px;
}
.left>ul>li>a {
display: block;
height: 42px;
padding: 0 24px 0 29px;
text-decoration: none;
line-height: 42px;
color: #fff;
font-size: 14px;
}
.left>ul>li a span {
float: left;
}
.left>ul>li a i {
float: right;
font-weight: normal;
}
.left>ul>li a:hover {
background: #ff6700;
}
.left>ul>li>a div {
width: 992px;
height: 460px;
background: red;
/*display: none;*/
position: absolute;
left: 234px;
top: 0;
z-index: 1;
display: none;
}
.left>ul>li:hover div {
display: block;
}
/* 选中.box中的一级span标签。 */
.box > span {
width: 41px;
height: 69px;
display: block;
background: pink;
position: absolute;
left: 234px;
/* 设置垂直居中 */
top: 50%;
margin-top: -35px;
text-align: center;
line-height: 69px;
font-size: 30px;
/* 鼠标移动上去之后，显示小手的状态。 */
cursor: pointer;
}
.box .rightButton {
/* width: auto，将继承的width属性设置为无效。 */
width: auto;
/*
在定位中如果left和right都存在，会优先使用left属性。
left: auto，表示将left设置为无效。
*/
left: auto;
right: 0;
}
.box ol {
position: absolute;
right: 34px;
bottom: 30px;
}
.box ol li {
/* li设浮动之后，可以避免父元素高度塌陷。 */
float: left;
width: 10px;
height: 10px;
border: 2px solid #fff;
/* 色饱和度 */
border-color: hsla(0, 0%, 100%, .3);
background: rgba(0,0,0,.4);
border-radius: 50%;
margin-left: 8px;
}
.box ol .current {
background: #fff;
/* 背景裁剪属性，只设置背景的颜色，不改变边框的属性。 */
background-clip: content-box;
}
.box ol li:hover {
background: #fff;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="box">
<ul class="imageList">
<li>
<a href="#">
<img src="./img/banner.webp">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner.webp">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner.webp">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner.webp">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner.webp">
</a>
</li>
</ul>
<!-- 侧导航 -->
<div class="left">
<ul>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
<div></div>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
<div style="background: black"></div>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
<div style="background: blue"></div>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
</a>
</li>
<li>
<a href="#">
<span>手机 卡包</span>
<i>></i>
</a>
</li>
</ul>
</div>
<!-- 切换按钮 -->
<span class="leftButton"><</span>
<span class="rightButton">></span>
<!-- 小圆点 -->
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
7.占位隐藏和不占位隐藏
<html lang="en">
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
img {
display: block;
}
.box {
width: 1226px;
height: 460px;
background: pink;
}
.box .demo1 {
/* 不占位隐藏 */
display: none;
}
.box .demo2 {
/* 占位隐藏 */
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/banner.webp" class="demo">
<img src="./img/banner.webp" class="demo2">
<span>tom</span>
<img src="./img/banner.webp" class="demo1">
<span>alice</span>
</div>
</body>
</html>
8.透明属性
<html lang="en">
<head>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
/*
1 第一种设置透明度的方式，使用opacity属性，取值为0-1之间的小数，默认值为1，内容会一起透明。
CSS中的0-1之间的小数可以简写，如0.5，可以简写为.5。
*/
opacity: 0.5;
background: black;
color: red;
}
.box2 {
width: 100px;
height: 100px;
/* 2 第二种设置透明度的方式，rgba是CSS3中的属性，使用rgba设置透明度内容不会一起透明。 */
background: rgba(0, 0, 0, .5);
color: red;
}
</style>
</head>
<body>
<div class="box1">
tom
</div>
<div class="box2">
alice
</div>
</body>
</html>
9.层次详解1
<html lang="en">
<head>
<style type="text/css">
/*
1 层级相同时，后写的标签连同子元素，会压在先写的标签连同子元素上面，同时父元素层级将决定
子元素的层级的高低。
2 当层级不同时，较大层级的标签，会压在较低层级的标签连同子元素的上面，同时父元素层级将决定
子元素的层级的高低。
3 当没有设置层级z-index时，后写的标签连同子元素，会压在先写的标签连同子元素上面，但是此时
子元素层级的高低将决定自身是否可以压在后面标签的上面。
*/
.box01 {
width: 200px;
height: 200px;
background: red;
position: relative;
z-index: 0;
}
.box01 span {
width: 50px;
height: 50px;
left: 190px;
top: 300px;
background: blue;
display: block;
position: absolute;
z-index: 1000;
}
.box02 {
width: 200px;
height: 200px;
background: orange;
position: relative;
z-index: 0;
top: 20px;
}
.box02 span {
width: 50px;
height: 50px;
left: 5px;
top: 5px;
background: gray;
display: block;
position: absolute;
}
</style>
</head>
<body>
<div class="box01">
<span>1</span>
</div>
<div class="box02">
<span></span>
</div>
</body>
</html>
10.层次详解2
<html lang="en">
<head>
<style type="text/css">
/*
1 当没有设置层级z-index时，后写的标签连同子元素，会压在先写的标签连同子元素上面，但是此时
子元素层级的高低将决定自身是否可以压在后面标签的上面。
*/
.box01 {
width: 200px;
height: 200px;
background: red;
position: relative;
}
.box01 span {
width: 50px;
height: 50px;
left: 190px;
top: 300px;
background: blue;
display: block;
position: absolute;
z-index: 1000;
}
.box02 {
width: 200px;
height: 200px;
background: orange;
position: relative;
top: 20px;
}
.box02 span {
width: 50px;
height: 50px;
left: 5px;
top: 5px;
background: gray;
display: block;
position: absolute;
}
</style>
</head>
<body>
<div class="box01">
<span>1</span>
</div>
<div class="box02">
<span></span>
</div>
</body>
</html>
11.交集选择器
<html lang="en">
<head>
<style type="text/css">
span.current {
border: 1px solid red;
}
.one.two {
border: 1px solid blue;
}
/* 伪类选择器的权重是10，所以.box ul li:hover的权重是10+1+1+10=22 */
.box ul li:hover {
background: orange;
}
/* 交集选择可以提交权重。 */
/*
没有写交集选择器.box ul .color的权重是10+1+10；
使用交集选择器后.box ul li.color的权重是10+1+1+10=22，而.box ul li.color是后写的，
所以会层叠伪类选择器.box ul li:hover。
*/
.box ul li.color {
background: pink;
}
</style>
</head>
<body>
<div class="box">
<span class="current">span</span>
<p class="current">p</p>
<span class="one">one</span>
<span class="one two">one two</span>
<ul>
<li class="color">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
12.固定定位
<html lang="en">
<head>
<style type="text/css">
/*
1 固定定位的参考点永远是浏览器窗口。
2 固定定位可以将元素设置到浏览器窗口的一个具体坐标位置。
*/
.header {
width: 100px;
height: 50px;
background: gray;
position: fixed;
left: 10px;
top: 10px;
}
.main {
width: 500px;
height: 1000px;
background: blue;
margin: 10px auto 0;
}
</style>
</head>
<body>
<div class="header">导航</div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
</body>
</html>
13.练习-版心外广告
<html lang="en">
<head>
<style type="text/css">
body {
/*
版心外广告超出了body，所以出现横向滚动条。
overflow-x: hidden，隐藏水平方向的滚动条。
overflow-y: hidden，隐藏垂直方向的滚动条。
*/
overflow-x: hidden;
}
.box {
width: 1360px;
height: 5000px;
background: gray;
margin: 50px auto 0;
position: relative;
}
/*
第一种版心外广告：使用绝对定位；但是不能以body为准进行绝对定位，
需要以.box为准进行绝对定位，这样才能保证浏览器在放大或者缩
小之后，版心外广告紧贴.box。
*/
.left {
width: 360px;
height: 800px;
background: url("./img/man.png") no-repeat 0 0;
position: absolute;
left: -360px;
top: 0;
}
.right {
width: 360px;
height: 800px;
background: url("./img/woman.png") no-repeat 0 0;
position: absolute;
left: 1360px;
top: 0;
}
/*
第二种版心外广告：
使用固定定位，即以浏览器窗口为参照物。
同时设置left: 50%;margin-left: -1040px;，保证浏览器在放大或者缩小后，和.box紧贴。
设置z-index: -1;，保证当在浏览器顶端时，在.left和.right广告的下面。
*/
.leftBottom {
width: 360px;
height: 800px;
background: url("./img/qiuLeft.png") no-repeat 0 0;
position: fixed;
left: 50%;
top: 0;
margin-left: -1040px;
z-index: -1;
}
.rightBottom {
width: 360px;
height: 800px;
background: url("./img/qiuRight.png") no-repeat 0 0;
position: fixed;
left: 50%;
top: 0;
margin-left: 680px;
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
</div>
</body>
</html>
14.CSS精灵
<html lang="en">
<head>
<style type="text/css">
/*
1 CSS精灵，也叫CSS Sprite，是背景图的技术。
2 如今下载网速很快，下载一张大图和一张小图的时间差不多，但是服务器的连接资源是有限的，将一张一张小图合成
一张大图，一次下载，只需要连接一次服务器，减少服务器的压力，提高网站的访问效率。
*/
.bg {
background: url("./img/abcd.jpg") no-repeat;
}
/* */
.one {
width: 108px;
height: 108px;
background: url("./img/abcd.jpg") no-repeat -372px -277px;
}
/*
3 CSS精灵的使用，将背景图定义到.bg中，使得图片只会被加载一次；
然后利用CSS的层叠性，使用background-position重新定义位置。
*/
.two {
width: 108px;
height: 108px;
background-position: -372px -277px;
}
.three {
width: 108px;
height: 108px;
background-position: -254px -562px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two bg"></div>
<div class="three bg"></div>
</body>
</html>
15.图标字体-unicode
-
图标字体也是一种字段，和微软雅黑、宋体等字体相同。
-
图标字段是UI设计师通过AI软件设计的。
-
图标字体-unicode方式图标字体使用。
<html lang="en">
<head>
<style type="text/css">
/*
1 新建font文件夹，font中存放字体。
2 使用@font-face定义字体。
3 定义属性。
*/
/* 定义一种字体。 */
@font-face {
font-family: 'fontDemo';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff2') format('woff2'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
/* 定义字体属性。 */
.fontDemo {
font-family: "fontDemo" !important;
font-size: 16px;
font-style: normal;
/* 对字体进行抗锯齿渲染，让使字体看起来会更清晰舒服。 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.one {
color: red;
font-size: 100px;
}
</style>
</head>
<body>
<span class="fontDemo one"></span>
<span class="fontDemo"></span>
</body>
</html>
15.图标字体-fontClass方式图标字体使用
<html lang="en">
<head>
<link rel="stylesheet" href="font/iconfont.css">
<style type="text/css">
/*
fontClass方式图标字体使用，这种方式使用的较多。
1 先引入iconfont.css文件。
2 直接通过iconfont icon-xxx引入具体的图标。
*/
.one {
color: red;
font-size: 5em;
}
</style>
</head>
<body>
<span class="iconfont icon-chishucai"></span>
<span class="iconfont icon-weixin one"></span>
</body>
</html>
浙公网安备 33010602011771号