84position定位1
- position特性
CSS position属性用于指定一个元素在文档中的定位方式。 top、 right.bottom、left 属性则决定了该元素的最终位置。 - position取值
static (默认)
relative
absolute
fixed
sticky
- relative相对定位：
- 如果没有定位偏移量,对元素本身没有任何影响
- 不使元素脱离文档流
- 不影响其他元素布局
- left、top、 right、 bottom是相对于 当前元素自身进行偏移的
<style>
#box1{ width: 100px; height : 100px; background: red;}
#box2{ width: 100px; height :100px; background: blue; 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" >R/div8
</body>
如下显示：
85position定位2
- absolute绝对定位
- 使元素完全脱离文档流
- 使内联元素支持宽高(让内联具备块特性)
- 使块元素默认宽根据内容决定(让块具备内联的特性)
- 如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
<style>
#box1{ width: 300px; height: 300px; border:1px D black solid; margin: 200px; position: relative;}
#box2{ width: 100px; height: 100px; background:red; position: absolute; right:0; bottom: 0;}
</style>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
box1必须含有 position: relative
否则嵌套的情况下box2会以整个文档发生偏移。
86position定位
- fixed固定定位
- 使元素完全脱离文档流
- 使内联元素支持宽高( 让内联具备块特性)
- 使块元素默认宽根据内容决定(让块具备内联的特性)
- 相对于整个浏览器窗进行偏移,不受浏览器滚动条的影响
sticky黏性定位
在指定的位置,进行黏性操作。
body{ height:2000px;}
div{ background:red; position:sticky;top:0 }
显示：
z-index定位层级
默认层级为0
嵌套时候的层级问题
<style>
#box1{ width:100px; height:100px; background:red; position:absolute; z-index:1;}
#box2{ width:100px; he ight:100px; background: blue;
position:absolute; left:50px; top:50px; z-index:2;}
</style>
显示：
87
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<meta http- equiv=”X-UA- Compatible" content=" ie=edge" >
<title>Document</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style: none;}
#menu { width: 100px; height: 30px; margin: 20px auto; border:1px Oblack solid; position: relative;}
#menu ul{ width:100px; border:1px Oblack 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>
kdiv id="menu">
卖家中心
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
<p>测试段落测试段落测试段落测试段落</p>
</body>
</html>
效果如下：
88定位练习
<style>
#box1{ width: 300px; height : 300px; border:1px C black solid; position: relative;}
#box2{ width: 100px; height : 100px; background: red; position: absolute; left:50%; top:50%; margin: -50px 0 0
-50px;}
</style>
89CSS添加省略号
- width
必须有一个固定的宽 - white- space : nowrap
不让内容折行 - overflow : hidden
隐藏溢出的内容 - text-overflow : ellipsis
添加省略号
<style>
#content{ width: 200px; border:1px D 1 black solid; white-space: nowrap; overflow: hi dden;
text- overflow: ellipsis ;
}
</style>
</head>
<body>
<div id="content" >测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
90CSS Sprite
特性
CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式。它允许你将个页面涉及到的所有零星图片都包含到一张大图中去加载。
91CSS圆角
border-radius
给标签添加圆角。
<style>
#box1{ width: 300px; height : 300px; background:red; border-radius: 10px 20px 30px 40px;}
#box2{ width : 300px; height : 300px; background:red; border-radius: 20px / 40px;}
</style>
box1中border-radius：顺时针显示角
box2中 20px / 40px表示椭圆
92PC端的布局
- 通栏:自适应浏览器的宽度。
- 版心:固定一个宽度，并且让容器居中。
上面的红色框是版心
下方的红色框是通栏
网页大作业
<!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: 100%; background:center 0 no-repeat;position: absolute; left: 0; top: 0; opacity: 0;}
#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;border-radius:50%; box-sizing: border-box; margin:0 60px; 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-of-type(1) div{ background-image: ur1(./images/web1.png);}
#service .service_list li:nth-of-type(2) div{ background-image: url(./images/mail1.png);}
#service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);}
#service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.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:e auto; border-radius: 25px;
line-height: 37px; text-align: center; font-size:14px; margin-top: 36px ;}
#case .case_btn a{ display: block; width:100%; height:100%; color: white;}
</style>
</head>
<body>
<div id= "head" class=" container">
<div class= "head logo">
<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="contaner-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>
</1i>
<li>
<div></div>
<h3>4. mailboxagents</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 professional technology, to design the best innovative web site</
</div>
<ul class="case_ list">
<li>
<a href="#"><img src=" ./images/ 20141121095216750.png" alt=""></a>
</li>
<li >
<a href=" #"><img src=" ./ images/20141121095528549.png" alt=""></a>
</li>
<li >
<a href=" #"><img src=" ./images/ 20141121105856226.png" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
COMMON
*{ 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;}
#foot{ background :#66c5b4;}
#foot .container{ height :54px; line-height: 54px; font-size:12px; color: white;}
#foot div a{ color: white; margin:0 10px; }
.area_title{ margin-top:60px; text-align: center;}
.area_title h2{ height:20px; line-height: 20px; font-size:20px; color: #363636; background:url(../images/title_bg.png) no-repeat center 7px;font-weight: normal;}
.area_title p{ color: #9F9F9F; font-size:14px; line-height: 34px;}
QQ飞车的
<!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>
#main{ background:url(./images/bg20190104.jpg) no-repeat center 0;}
#nav{; background:url( ./images/nav_down_re.png) repeat-x, url( ./images/nav.png) no-repeat
center 0;}
#nav .container{ min-height: 236px;overflow: hidden;}
#nav .nav_logo{width:138px;height:112px;margin: 15px auto;}
#nav dl{ position: absolute; top: 0;}
#nav dt{ height:66px;}
#nav dt a{ width:100%; height:100%; display: block; text-indent:-9999px; overflow: hidden; }
#nav dd{ line-height: 27px; font-size:12px; text-align: center; }
#nav dd a{ color: white; position: relative;}
#nav dd a:hover{ color:red; text-decoration: underline; }
#nav dd a.hot :after{ content:""; display: block; width: 12px; height :12px; background: url(./images/nav_tips.png) no-repeat 0 -12px; position: absolute; right:-15px; top:0;}
#nav dd a.new :after{content:""; display: block; width:12px; height:12px; background: url(./images/nav_tips.png) no-repeat 0 0;position: absolute; right:-15px; top: 0;}
#nav .nav_index{ width:65px; left:0;}
#nav .nav_zl{ width:69px; left:98px; }
#nav .nav_ss{ width:74px; left:203px;}
#nav .nav_hd{ width:68px; left:325px;}
#link{ height :175px;}
#link a{ width:463px; height:100%; display: block; margin: 0 auto;}
#banner{ height :276px; background:url(./images/top.png) no-repeat; margin-top: 20px;}
#banner .banner_left{ width: 240px; height : 310px; background :url(./images/down_user_spr.png) no-repeat;margin: -20px 0 0 7px;}
#banner .banner_download p{ width:91px; height :25px; background:url( ./images/down_user_spr.png) no repeat;
margin:0 auto; text-indent: -9999px; overflow: hidden; }
#banner .banner_download p:first-child{ background-position:-253px 0; margin-top :44px; }
#banner .banner_download p:last-child{ background-position: -253px -25px;}
/* CSS3简单的动画*/
#banner .banner.download:hover p:first-child{ animation:1s upMove;}
@keyframes upMove{
0%{ transform : translateY(-40px); opacity: 0; }
100%{ transform : translateY(0); opacity: 1; }
}
#banner .banner_download :hover p:last-child{ animation: 1S downMove;}
@keyframes downMove{
0%{ transform : translateY(40px); opacity: 0; }
100%{ transform : translateY(0); opacity: 1; }
}
/* CSS3简单的动画*/
#banner .banner_user div{ width:56px; height:56px; border-radius: 50%; margin:80px auto 0 auto; border :4px
#283257 solid; box-sizing: border-box; overflow: hidden; }
#banner .banner.user p{ text-align: center; font-size:12px; color: white; margin-top: 25px; }
#banner .banner_user a{ color: #34f1d0;}
#banner .banner_list{ width:497px; height :253px; overflow: hidden; margin:13px 0 0 4px; position: relative;}
#banner .banner_list_ ul{ width: 2000px;}
#banner .banner_list ul li{ width:497px; height:253px; float:left;}
#banner .banner_bottomline{ width: 100%; height :37px; background: rgba(0,0,0,.5); border-top:1px #514b55 soli; position: absolute; bottom: 0; left:0;}
#banner .banner_bottomline_ ul{ text-align: center; margin-top: 11px;}
#banner .banner_bottomline ul li{ display: inline-block; width:15px; height:15px; background:url( ./images/top.png) no-repeat - 603px - 299px;cursor: pointer;}
#banner .banner_bottomline_ ul li.active{ background-position: 581px -299px;}
</style>
</head>
<body>
<div id="head" class="container-fluid">
<div class=" container">
<div class="head logo 1">
<a href="#">腾讯游戏</a>
</div>
<div class="head_ ad 1">
<a href="#">
<ing src="./images/ad.jpg" alt="">
</a>
</div>
<div class="head menu r">
<div class="head_menu_czsh 1">
<a href="#">成长守护平台</a>
</div>
<div class="head_menu_top 1">
<a href="#">腾讯游戏排行榜</a>
</div>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div id="nav" class="container-fluit">
<div class="nav_logo">
<a href="#">
<img src="./ images/inside logo.png" alt="QQ飞车"title="QQ飞车">
</a>
</div>
<dl class="nav index">
<dt>
<a href="#">首页</a>
</dt>
</dl>
<dl class="nav_zl" >
<dt></dt>
<dd><a href="#">新手指引</a></dd>
<dd><a class="hot" href="#">官方漫画</a></dd>
<dd><a class="new" href="#">飞车手游</a></dd>
<dd><a href="#">精美壁纸</a></dd>
<dd><a href="#">游戏下载</a></dd>
</dl>
<dl class="nav_ss">
<dt></dt>
<dd><a class="hot" href="#">SSC</a></dd>
<dd><a href="#">谁是车王</a></dd>
<dd><a href="#">全民争霸赛</a></dd>
</dl>
<dl class="nav_hd">
<dt></dt>
<dd><a class="hot" href="#">版本专区</a></dd>
<dd><a href="#">合作专区</a></dd>
<dd><a href="#">CDK兑换</a></dd>
</dl>
</div>
<div id="link" class=" container">
<a href-="#"></a>
</div>
<div id="banner" C lass="container">
<div class="banner left 1">
<div class= "banner download" >
<p>下载游戏</p>
<p>DOWNLOAD</p>
</div>
<div class="banner_ user">
<div>
<img src=" ./ images/56x56. jpg" alt="">
</div>
<p>欢迎<a href="#">登录</a>。进入飞车世界</p>
</div>
</div>
<div class="banner_center 1">
<div class= "banner list">
<ul class="banner list ul"> ...
</ul>
<div class="banner bottomline">
<ul class="banner bottomline ul">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="banner_right 1"></div>
</div>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</body>
</html>
common
{ margin:0; padding:0; }
ul,ol{ list-style: none; }
img{ display: block;}
a{ text-decoration:none; color:#464646;}
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:980px; margin:0 auto; position: relative; }
.container-fluid{ width: 100% ;}
#head{ background:url(' ../images/head bg.png') repeat-x;}
#head .container{ height :41px; }
#head .head_logo{ width: 220px; height :41px; background:url( ../images/ost-bg.png) no-repeat 0 -38px;}
#head .head_logo a{ display: block; width:100%; height :100%; text-indent: -9999px; overflow: hidden;}
#head .head_ad{ margin-left: 8px;}
#head .head_menu{ font-size: 12px; }
#head .head_menu div{ height:18px; margin-top :13px; background :url(../images/ost-bg.png) no-repeat;}
#head .head_menu .head_menu_czsh{ margin-right: 26px; padding-left:20px; background-position:left -91px; }
#head .head_menu .head_menu_top{ padding-right :17px; background-position:right -89px; }
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
