25.position定位
position特性：css position属性用于指定一个元素在文档中的定位方式。
top、right、bottom、left属性决定了该元素的最终位置
position取值：static（默认值）、relative(相对)、absolute（绝对）、fixed（固定）、sticky
relative：如果没有定位偏移，对元素本身没有影响
不使元素脱离文档流
不影响其他元素布局
left/top/right/bottom是相对于当前元素自身进行偏移的
<style>
div{width: 50px;height: 50px;}
.text1{background: red;position: relative;}
.text2{background: greenyellow;position: relative;left: 50px;}
.text3{background: blue;position: relative;bottom: 50px;}
.text4{background: rgb(249, 40, 190);}</style>
absolute
使得元素完全脱离文档流
使得内联元素支持宽高（让内联具备块的特性）
使得块元素默认宽高根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
/*使得元素完全脱离文档流，类似于浮动*/
<style>
.text1{background: red;position: absolute;width: 100px;height: 100px;}
.text2{background: greenyellow;width: 200px;height: 200px;}
</style>
/*使得内联元素支持宽高（让内联具备块的特性）*/
span{width: 100px;height: 100px;background: red;position: absolute;}
(https://img-blog.csdnimg.cn/8b196caf61384e47955522e0c79c9c7a.png)
/*使得块元素默认宽高根据内容决定（让块具备内联的特性）*/
div{background: red;position: absolute;}
/*如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）*/
/*text1无变化*/
.text1{width: 100px;height: 100px;border: 1px black solid;margin: 200px;}
.text2{background: rgb(228, 54, 72);width: 20px;height: 20px;position: absolute;left: 0;}
/*text1加了相对定位*/
.text1{width: 100px;height: 100px;border: 1px black solid;margin: 200px;position: relative;}
.text2{background: rgb(228, 54, 72);width: 20px;height: 20px;position: absolute;left: 0;}
-
fixed固定定位使元素完全脱离文档流
使得内联元素支持宽高（让内联具备块的特性）
使得块元素默认宽高根据内容决定（让块具备内联的特性）
相对于元素默认浏览器窗口进行偏移，不受浏览器滚动条的影响
-
stiky黏性定位在指定的位置，进行黏性操作
z-index定位层级
默认层级为0
嵌套时候层级问题:
#div1{width: 100px;height: 100px;background: red;position: absolute;z-index:1;}
#div2{width: 100px;height: 100px;background: blue;
position: absolute;left: 50px;top: 50px;}
定位实现下拉菜单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0%;padding: 0%;}
ul{list-style: none;}
p{text-align: center;}
.menu{width: 100px;height: 28px;background: rgb(159, 159, 230);
margin: 20px auto;border: 1px solid black;position: relative;}/*absolute如果父容器没有定位，会导致下面的以body来偏移*/
.menu ul{width: 100px;margin-top: 8px;background: white;
border: 1px solid black;position: absolute;left: -1px;top: 20px;display: none;}/*display:none;使ul消失*/
.menu:hover ul{display:block;}/*当鼠标移入menu，ul会恢复块的形式*/
.menu ul li:hover{background: grey;}/*当鼠标移入li，会显示灰色背景*/
</style>
</head>
<body>
<div class="menu">
卖家中心
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</div>
<p>测试文本测试文本测试文本测试文本</p>
</body>
</html>
定位实现元素居中和装饰点
/*居中*/
<style>
#box1{width: 200px;height: 200px;border: solid black 1px;position: relative;}
#box2{width: 50px;height: 50px;background: lightcoral;
position: absolute;left: 100px;top: 100px;margin: -25px 0 0 -25px;}
</style>
/*装饰点*/
<style>
ul li{list-style: none;line-height: 38px;position: relative;}
ul li a:before{content: "";display: block;width: 5px;height: 5px;background: orange;
position: absolute;left: -20px;top: 1px;}
</style>
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 300px;height: 200px;background: url(./QQ图片20221114210503.png);position: relative;}
div::after{content: "哭唧唧";position: absolute;left: 244px;top: 174px;}
div::before{content: "哈哈哈";position: absolute;left: 244px;top: 5px;background:lightpink;
display: block;}
</style>
</head>
<body>
<div></div>
</body>
</html>
26.css添加省略号
width 必须有一个固定的宽
white-space：nowrap 不让内容折行
overflow：hidden 隐藏溢出内容
text-overflow：ellipsis 添加省略号
<style>
div{width: 100px;border: 1px black solid;white-space: nowrap;overflow: hidden;
text-overflow: ellipsis;}
</style>
27.css雪碧图（css雪精灵）
不用剪切，直接定位图片中小图片的位置就可以直接应用
一、图片整合技术（CSS-Sprite）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度
二、雪碧图使用步骤
先确定要使用的图标
测量图标的大小
根据测量结果创建一个元素
将雪碧图设置为元素的背景
设置一个偏移量以显示正确的图片
<style>
div{width: 60px;height: 50px;
background: url(./css雪碧图.png) no-repeat left -580px;}
</style>
/*left确定图片在左边*/
/*width,height规定小图片的大小*/
/*-580px确定小图片相对于大图片的站位高度*/
28.css圆角
border-radius： 100px（左上和右下） 100px（右上和左下）；
border-radius：1px 2px 3px 4px（左上 右上 左下 右下）；
`border-radius： 100px（左上和右下） 100px（右上和左下）；`
`border-radius：1px 2px 3px 4px（左上 右上 左下 右下）；`
div{width: 200px;height: 200px;background: lightpink;
border-radius: 80px 80px;}
/*圆*/
div{width: 200px;height: 200px;background: lightpink;
border-radius: 50%;}
div{width: 200px;height: 200px;background: lightpink;
border-radius: 100px 100px;}
29.PC端的布局
通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让容器居中
/* 清除所格式 */
*{margin: 0%;padding: 0%;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #646464;}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial, Helvetica, sans-serif;}
/* 定义一些可能会做的事情 */
.l{float: left;}
.r{float: right;}
.clear::after{content: "";display: block;clear: both;}
.container{width: 1080px;margin: 0% auto;position: relative;}
.container-fulid{width: 100%;}
/* 对头部栏目设置 */
#head{height: 80px;}
#head .head-logo{width: 162px;height: 44px;margin-top: 19px;}
#head .head-menu{font-size: 14px;line-height: 80px;}
#head .head-menu li{float: left;margin-left: 20px;}
/* 第二部分 */
#banner{position: relative;}
#banner .banner-list{
width: 100%;height: 469px;
position: relative;}
#banner .banner-list li{
width: 100%;height: 100%;
background: center 0 no-repeat;
position: absolute;left: 0%;top: 0%;
opacity: 0;
z-index: 1;}
#banner .banner-list li.active{
opacity: 1;
z-index: 10;}
#banner .banner-list a{
display: block;
width: 100%;height: 100%;}
#banner .banner-bth{
width: 100%;
position: absolute;bottom: 19px;
z-index: 20;
font-size: 0;
text-align: center;}
#banner .banner-bth li{
display: inline-block;
width: 12px;height: 12px;
border: 2px solid rgb(255, 255, 255);
border-radius: 50%;
box-sizing: border-box;
margin: 0% 6px;
cursor: pointer;}
#banner .banner-bth li.active{
background: white;
}
/* 第三部分*/
#serve{
overflow: hidden;
min-height: 407px;}
.area-title{
margin-top: 60px;
text-align: center;}
.area-title h2{
height: 20px;
line-height: 20px;
font-size: 20px;
color: #646464;
background: url(./title_bg.png) no-repeat center 7px;
}
.area-title p{
color: #9f9f9f;
font-size: 14px;
line-height: 34px;
}
#serve .serve-list{text-align: center;margin-top: 34px;margin-left: 220px;}
#serve .serve-list li{float: left;width: 250px; margin: 0 auto;margin-left: 50px;}
#serve .serve-list div{width: 102px;height: 102px;margin: 0% auto;}
#serve .serve-list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}
#serve .serve-list p{font-size: 14px;color: #6d6d6d;line-height: 22px;}
#case{background: white;}
#case .container{min-height: 460px;overflow: hidden;}
#case .area-title{margin-top: 55px;}
#case .area-title h2{color: #66c584;}
#case .case-list{margin-top: 28px;}
#case .case-list li{float: left;width: 340px; margin-left: 10px;}
#case .case-btn{width: 176px;height: 37px;background: #66c584;
margin: 0 auto;border-radius: 25px;line-height: 37px;text-align: center;font-size: 14px;
margin-top: -150px;}
#case .case-btn a{display: block;width: 100%;height: 100%;color: aliceblue;}
#news{min-height: 450px;overflow: hidden;}
#news .area-title{margin-top: 65px;}
#news dl{margin-top: 48px;}
#news dt{width: 234px;}
#news dd{width: 846px;}
#news .news-text{width: 310px;margin-left: 20px;}
#news .news-text h3{font-size: 14px;color: #3f3f3f;}
#news .news-text p{color: #a4a4a4;font-size: 12px;line-height: 21px;margin-top: 17px;}
/* #news .news-text h3 a{} */
#news .news-date{width: 71px;height: 70px;border-right: 1px solid white;text-align: center;}
#news .news-date i{color: #66c584;font-size: 39px;font-weight: bold ;display: block;}
#news .news-date span{color: #999999;font-size: 20px;line-height:36px;}
#news .news-list{width: 100%;}
#news .news-list li{width: 50%;float: left;margin-bottom: 48px;}
#foot{background: #66c5b4;}
#foot .container{height: 50px;line-height: 54px;font-size: 12px;color: white;}
#foot div a{margin: 0 10px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css">
</head>
<body>
<!-- 头部栏目设置 -->
<div id="head" class="container">
<div class="head-logo l">
<a href="#">
<img src="./image/logo.png" alt="博文尚美">
</a>
</div>
<div class="head-menu r">
<ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">POTOSHOP</a>
</li>
<li>
<a href="#">DEROINB</a>
</li>
<li>
<a href="#">SSSNJL</a>
</li>
<li><a href="#">BOBOHSD</a>
</li>
</ul>
</div>
</div>
<!-- 内容1 -->
<div id="banner" class="container-fulid">
<ul class="banner-list">
<li class="active" style="background-image:url(./image/banner.png)">
<a href="#"></a>
</li>
<li style="background-image:url(./image/e-bussiness1.png)">
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
<ol class="banner-bth">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 内容2 -->
<div id="serve" class="container-fulid">
<div class="area-title">
<h2>服务范围</h2>
<p>OUR SEVICE</p>
</div>
<ul class="serve-list">
<li>
<div><img src="./image/graphic1.png" alt=""></div>
<h3>WIIODNUCNSJS</h3>
<P>企业平拍网站设计/手机网站制作
<br>
uhsubsubjkahishiisuusji
</P>
</li>
<li>
<div><img src="./image/e-bussiness1.png" alt=""></div>
<h3>WIIODNUCNSJS</h3>
<P>企业平拍网站设计/手机网站制作
<br>
uhsubsubjkahishiisuusji
</P>
</li>
<li>
<div><img src="./image/mail1.png" alt=""></div>
<h3>WIIODNUCNSJS</h3>
<P>企业平拍网站设计/手机网站制作
<br>
uhsubsubjkahishiisuusji
</P>
</li>
<li>
<div><img src="./image/web1.png" alt=""></div>
<h3>WIIODNUCNSJS</h3>
<P>企业平拍网站设计/手机网站制作
<br>
uhsubsubjkahishiisuusji
</P>
</li>
</ul>
</div>
<!-- 内容3 -->
<div>
<div id="case" class="container-fulid">
<div class="area-title">
<h2>客户案例</h2>
<p>OUR SEVICEUMSJIXNSNN</p>
</div>
<div class="container">
<ul class="case-list clear">
<li>
<a href="#"><img src="./image/20141121095216750.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./image/20141121095528549.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./image/20141121105856226.png" alt=""></a>
</li>
</ul>
</div>
<div id="case" class="case-btn">
<a href="#">HHSJDIXNJS</a>
</div>
</div>
<!-- 内容4 -->
<div id="news" class="container">
<div class="area-title">
<h2>最新资讯</h2>
<p>OUR SEVICEUMSJIXNSNN</p>
</div>
<div>
<dl>
<dt class="l">
<img src="./image/xs1.png" alt="">
</dt>
<dd class="l">
<ul class="news-list l">
<li>
<div class="news-date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news-text l">
<h3>排名前三</h3>
<p>实现就手机就素娿娿哎可是开心少女系数据线奖学金上班吗经销商你不都不好看</p>
</div>
</li>
<li>
<div class="news-date l">
<i>01</i>
<span>Jan</span>
</div>
<div class="news-text l">
<h3>排名前三</h3>
<p>实现就手机就素娿娿哎可是开心少女系数据线奖学金上班吗经销商你不都不好看</p>
</div>
</li>
<li>
<div class="news-date l">
<i>04</i>
<span>Jan</span>
</div>
<div class="news-text l">
<h3>排名前三</h3>
<p>实现就手机就素娿娿哎可是开心少女系数据线奖学金上班吗经销商你不都不好看</p>
</div>
</li>
<li>
<div class="news-date l">
<i>08</i>
<span>Jan</span>
</div>
<div class="news-text l">
<h3>排名前三</h3>
<p>实现就手机就素娿娿哎可是开心少女系数据线奖学金上班吗经销商你不都不好看</p>
</div>
</li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="foot" class="container-fulid">
<div class="container">
<p class="l">HSKXNSSNNCINIOEN</p>
<div class="r">
<a href="#">HOME</a>|<a href="#">lokk</a>|<a href="#">kllll</a>|<a href="#">weee</a>
</div>
</div>
</div>
</body>
</html>
扫一扫
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
