第四周笔记
CSS定位
position定位
position特性
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置
position取值
static(默认)
relative相对定位
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
top、right、bottom、left是相对于当前元素自身进行偏移的
这里给出一个示例来说明relative的作用:
<!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>
#box1{width: 100px;height: 100px;background: gray;}
#box2{width: 100px;height: 100px;background: black;position: relative;left:100px;top: 100px;}
#box3{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
运行效果:
这里如果不用相对定位，想通过外填充marging也能实现相同的效果，但由于没有浮动，会进行margin传递，所以需要二次修改黄色区域的marging-bottom来实现效果，比相对定位麻烦点
absolute绝对定位
1、使元素完全脱离文档流(相当于浮动)
示例代码:
<!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>
#box1{width: 100px;height: 100px;background: gray;position: absolute;}
#box2{width: 200px;height: 200px;background: black;}
#box3{width: 100px;height: 100px;background: yellow;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
运行效果:
2、使内联元素支持宽高(让内联具备块特性)
3、使块元素默认宽根据内容决定(让块具备内联的特性)
4、如果有定位祖先元素(嵌套该元素的元素)相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
用法:position:absolute;left:0;top:0;
示例代码:
<!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>
#box1{width: 300px;height: 300px;border: 1px black solid;margin: 300px;}
#box2{width: 100px;height: 100px;background: gray;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
运行效果:
当在box2选择器中写入position: absolute;left: 0;top: 0;后运行效果就变了
如果再给box1选择器后面写入相对定位或者绝对定位或者绝对定位那么此时的效果就会与上一张图片相同了
fixed固定定位
1、使元素完全脱离文档流
2、使内联元素支持宽高(让内联具备块特性)
3、使块元素默认宽根据内容决定(让块具备内联的特性)
4、相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响(无论如何拖动滚动条，它永远在同一个位置)
sticky黏性定位
在指定位置进行黏性操作，也就是在拖动滚动条时，它会跟着滚动条移动，当它移动到指定位置时，就会固定在这个指定位置，除非将滚动条拖拽回前一个位置
用法:position:sticky;top:0;
这里给出一个代码，直接复制在VS Code里面运行
<!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>
body{height: 2000px;}
div{background: gray;position: sticky;top: 0;}
</style>
</head>
<body>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
<p>第4个</p>
<p>第5个</p>
<p>第6个</p>
<div>黏性操作块</div>
<p>第7个</p>
<p>第8个</p>
<p>第9个</p>
<p>第10个</p>
<p>第11个</p>
<p>第12个</p>
</body>
</html>
z-index定位层级
1、默认层级为0
2、嵌套时候的层级问题:
当父标签写了层级时，子标签的层级将不会被用于与其他跟父标签同级的标签的层级进行比较，只有父标签没有写层级时，才会用子标签的层级与其他跟父标签同级的标签的层级进行比较
3、层级高的会遮住层级低的
定位实现下拉菜单
<!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;}
#menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}
#menu ul{width: 100px;border: 1px black solid;position: absolute;left: -1px;top: 30px;background: white;
display: none;}
#menu:hover ul{display: block;}
#menu ul li:hover{background: gray;}
p{text-align: center;}
</style>
</head>
<body>
<div id="menu">
卖家中心
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
<p>这是一非常非常非常非常非常非常长的段落</p>
</body>
</html>
运行效果:
此时的鼠标已经移入了卖家中心而且停留在了列表项1中，使得列表项1234能在选中时显示的主要操作是#menu:hover ul{display: block;}使得列表项1234在鼠标移入时显示灰色背景的主要操作是#menu ul li:hover{background: gray;}。ul{list-style: none;}的作用是去除无序列表的圆点
定位实现居中
代码：
<!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>
#box1{width: 300px;height: 300px;border: 1px black solid;position: relative;}
#box2{width: 100px;height: 100px;background: gray;position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
运行效果:
定位实现列表装饰点
代码:
<!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>
ul{list-style: none;}
#menu ul li{padding-left: 18px;position: relative;}
#menu ul li:before{content: "";display: block;width: 3px;height: 3px;background: red;position: absolute;left: 8px;top: 50%;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
</body>
</html>
运行效果:
CSS添加省略号
width
必须有一个固定的宽
white-space:nowrap
不让内容折行
overflow:hidden
隐藏溢出的内容
text-overflow:ellipsis
添加省略号
CSS Sprite
特性：CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处：
可以减少图片的质量，网页的图片加载速度快
减少图片的请求次数，加快网页打开
写法:
选择器{background:url(雪碧图地址) no-repeat left/right(取决于图标在雪碧图的左侧还是右侧) -高度像素;}
CSS圆角
border-radius
给标签添加圆角
圆形角用法:
border-radius:像素;
可以分别添加一个值、两个值、四个值
一个值代表了四个角的像素
两个值的话，第一个值代表左上和右下的像素，第二个值代表右上和左下的像素
四个值的时候，从第一个到第四个分别代表左上，右上，右下，左下的值
椭圆形角用法:
border-radius:x轴像素/y轴像素;
PC端布局
通栏
自适应浏览器的宽度
版心
固定一个宽度，并且让容器居中
CSS绝对定位与浮动的区别
绝对定位与浮动都会使元素脱离文档流，但是在文档流中的其他元素会忽略绝对定位元素的存在而直接穿过绝对定位元素，而文档流中的其他元素并不会忽略浮动元素的存在，会绕开浮动元素
示例代码:
<!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>
</head>
<style>
#box1{width: 100px;height: 100px;background: gray;position: relative;left: 20px;top: 20px;}
#box1-1{width: 50px;height: 50px;background: black;position:absolute; left: 10px;top: 10px;}
#box2{width: 200px;height: 200px;background: yellow;}
#box3{width: 100px;height: 100px;background: rebeccapurple;position: relative;}
#box3-1{width: 20px;height: 20px;background: salmon;float: left;}
#box3-2{width: 20px;height: 20px;background: sandybrown;float: left;}
#box4{height: 100px;width: 500px;background: burlywood;position: absolute;}
#box4-1{background-color: red;display:inline;}
</style>
<body>
<div id="box1">
<div id="box1-1"></div>
</div>
<div id="box2"></div>
<div id="box3">
<div id="box3-1"></div>
<div id="box3-2"></div>
<div id="box3-3">文本内容会绕开浮动元素</div>
</div>
<div id="box4">
<div id="box4-1">文本内容非常非常非常非常非常非常非常非常非常非常长</div>
</div>
<div id="box5">文本内容非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长</div>
</body>
</html>
运行效果:
分析:
box1与box2重叠且box1将box2部分地方覆盖，其实只是因为box1的相对定位导致它的位置进行了偏移而不影响其他元素。而在box3中，这里对它的嵌套元素box3-1、box3-2全部设置了浮动，很明显的可以看见他们直接没有发生相互覆盖，而且box3-3中的文本内容也没有被覆盖说明浮动是实体，无法被其他元素忽略它的位置。在box4和box5中可以看见，box5的文本内容，部分被box4所覆盖，可见绝对定位的元素是虚体，它的位置是会被其他元素所忽略，从而使其他元素被绝对元素所覆盖。
博文尚美首页练习
HTML
<!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">
<style>
#banner{position: relative;}
#banner .banner_list{width: 100%;height:469px;position: relative;}
#banner .banner_list li{width: 100%;height:469px;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_btn{width: 100%; position: absolute;bottom: 19px;z-index: 20;font-size: 0;text-align: center;}
#banner .banner_btn li{display: inline-block;width: 12px;height: 12px;border: 2px solid white;margin: 0 6px;
border-radius: 50%;box-sizing: border-box;cursor: pointer;}
#banner .banner_btn li.active{background: white;}
#service{overflow: hidden;min-height: 407px;}
#service .service_list{text-align: center;margin-top: 34px;}
#service .service_list li{float: left; width: 250px;margin: 0 10px;}
#service .service_list div{width: 102px;height: 102px;margin: 0 auto;}
#service .service_list li:nth-last-of-type(1) div{background-image:url(./images/web1.png)}
#service .service_list li:nth-last-of-type(2) div{background-image: url(./images/graphic1.png);}
#service .service_list li:nth-last-of-type(3) div{background-image: url(./images/e-bussiness1.png);}
#service .service_list li:nth-last-of-type(4) div{background-image: url(./images/mail1.png);}
#service .service_list h3{font-size: 18px;color: #434343;line-height: 36PX;margin-top: 25px;}
#service .service_list p{font-size: 14px;color: #6D6D6D;line-height: 22PX;}
#case{background: #f8f8f8;}
#case .container{min-height: 460px;overflow: hidden;}
#case .area_title{margin-top: 55px;}
#case .area_title h2{color:#66C5B4;}
#case .case_list{margin-top: 28px;}
#case .case_list li{float: left;width: 340px;margin: 0 10px;}
#case .case_btn{width: 176px;height: 37px;background: #66C5B4;margin: 0 auto;border-radius: 25px;line-height: 37px;text-align: center;color: white;font-size: 14px;margin-top: 36px;}
#case .case_btn a{display: block;width: 100%;height: 100%;}
#news{min-height: 450px;overflow: hidden;}
#news .area_list{margin-top: 65px;}
#news dl{margin-top: 48px;}
#news.dt{width: 234px;}
#news dd{width: 846px;}
#news .news_list{width: 100%;}
#news .news_list li{width: 50%;float: left;margin-bottom: 48px;}
#news .news_date{width: 71px;height: 70px; border-right: 1px solid #DCDCDC;text-align: center;}
#news .news_date i{color: #66C5B4;font-size: 39px;display: block;font-weight: bold;}
#news .news_date span{color: #999999;font-size: 20px;line-height: 36px;}
#news .news_text{width: 310px;margin-left: 20px;}
#news .news_text h3{font-size: 14px;}
#news .news_text h3 a{color: #3F3F3F;}
#news .news_text p{color: #A4A4A4;font-size: 12px;line-height: 21px;margin-top: 17px;}
</style>
</head>
<body>
<div id="head" class="container">
<div class="head_logo l">
<a href="#">
<img src="./images/logo.png" alt="博文尚美" title="博文尚美">
</a>
</div>
<ul class="head_menu r">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">PROTFOLIO</a>
</li>
<li>
<a href="#">SERVICE</a>
</li>
<li>
<a href="#">NEWS</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
</ul>
</div>
<div id="banner" class="container-fluid">
<ul class="banner_list">
<li class="active" style="background-image:url(./images/banner.png)">
<a href=""></a>
</li>
<li style="background-image:url(./images/banner.png)">
<a href=""></a>
</li>
<li style="background-image:url(./images/banner.png)">
<a href=""></a>
</li>
<li style="background-image:url(./images/banner.png)">
<a href=""></a>
</li>
</ul>
<ol class="banner_btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div id="service" class="container">
<div class="area_title">
<h2>服务范围</h2>
<p>OUR SERVICES</p>
</div>
<ul class="service_list">
<li>
<div></div>
<h3>1.WEB DESIGN</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div></div>
<h3>2.GRAPHIC DESIGN</h3>
<p>
标志LOGO设计/产品宣传册设计
<br>
企业广告/海报设计
</p>
</li>
<li>
<div></div>
<h3>3.E-BUSINESS PLAN</h3>
<p>
淘宝/天猫装修设计及运营推广
<br>
企业微博、微信营销
</p>
</li>
<li>
<div></div>
<h3>4.MALBOXAGENTS</h3>
<p>
腾讯/网易企业邮箱品牌代理
<br>
个性化邮箱定制开发
</p>
</li>
</ul>
</div>
<div id="case" class="container-fluid">
<div class="container">
<div class="area_title">
<h2>{客户案例}</h2>
<p>With the best prolessional technology, to design the best innovative web site</p>
</div>
<ul class="case_list clear">
<li>
<a href="#"><img src="./images/20141121095528549.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/20141121095216750.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/20141121105856226.png" alt=""></a>
</li>
</ul>
<div class="case_btn">
<a href="#">VIEW MORE</a>
</div>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>THE LATEST NEWS</p>
</div>
<dl>
<dt class="l">
<img src="./images/xs1.png" alt="">
</dt>
<dd class="l">
<ul class="news_list">
<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>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3>网站排名进入前三的技巧</h3>
<p>很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优化...</p>
</div>
</li>
<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>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3>网站排名进入前三的技巧</h3>
<p>很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优化...</p>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div id="foot" class="container-fluid">
<div class="container">
<p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
<div class="r">
<a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a>
</div>
</div>
</div>
</body>
</html>
CSS
*{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;}
.l{float: left;}
.r{float: right;}
.clear:after{content: "";display: block;clear: both;}
.container{width: 1080px;margin:0 auto;position: relative;}
.container-fluid{width: 100%;}
#head{height: 81px;}
#head .head_logo{width: 162px;height: 44px;margin-top: 19px;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{float: left;margin-left: 58px;}
.area_title{margin-top: 60px;text-align: center;}
.area_title h2{background:url(../images/title_bg.png) no-repeat center 7px;height: 20px;line-height: 20px;font-size: 20px;color: #363636;font-weight: normal;}
.area_title p{color: #9F9F9F;font-size: 14px;line-height: 34px;}
#foot{background: #66c5b4;}
#foot .container{height:54px;line-height: 54px;font-size: 12px;color: white;}
#foot div a{color: white;margin:0 10px;}
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
