Web前端从入门到放弃 第四周学习笔记
声明：本学习内容来自于 千锋教育_Web前端最全教程从入门到精通（HTML+CSS全套） ！
四十、position定位
position特性
css position属性用于指定一个元素在文档中的定位方式。top、right.bottom、left属性则决定了该元素的最终位置。
position取值
static（默认)
relative
absolute
fixed
sticky
-
relative相对定位
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的 -
absolute绝对定位
使元素完全脱离文档流
使内联元素支持宽高(让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定) -
fixed固定定位
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响 -
sticky黏性定位
在指定的位置，进行黏性操作。 -
z-index定位层级
默认层级为0
嵌套时候的层级问题（A整体其中若有层级比B整体其一层级低，则会B层级高于A层级）
position定位练习
<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>
定位实现元素居中
<style>
#box1{ width:300px; height:300px; border:1px black solid; position: relative;}
#box2{ width:100px; height:100px; background:red; position: absolute; left:50%; top:50%; margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
定位实现列表装饰点
<style>
*{ margin : 0; padding: 0;}
ul{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color:#666666;}
h1,h2,h3,h4,h5,h6{ font-size:16px; font-weight: normal;}
#main{ margin:20px auto; width:238px; border:1px solid #d9e0ee; border-top:3px #ff8400 solid;}
#main h2{ height:35px; border-bottom:1px solid #d9e0ee; line-height: 35px; padding-left:11px;}
#main h2 a{ color:black;}
#main h2 a:hover{ color:#ff8400;}
#main div img{ margin:8px auto 3px auto;}
#main ul{ font-size:12px; line-height: 24px; margin-bottom: 8px;}
#main ul li{ padding-left:18px; position: relative;}
#main ul li:before{ content: ""; display: block; width:3px; height:3px; background:red; position: absolute; left:8px; top:50%; margin-top:-2px;} //此处实现
#main ul li.first-line{ border-bottom:1px solid #d9e0ee; padding-bottom:3px; margin-bottom:8px;}
#main ul a{}
#main ul a:hover{ color:#ff8400; text-decoration: underline;}
</style>
</head>
<body>
<div id="main">
<h2>
<a href="#">探索趣图</a>
</h2>
<div>
<a href="#">
<img src="./img/img.png" alt="">
</a>
</div>
<ul>
<li class="first-line">
<a href="#">测试文字测试文字测试文字</a>
</li>
<li>
<a href="#">测试文字测试文字测试文字</a>
</li>
<li>
<a href="#">测试文字测试文字测试文字</a>
</li>
</ul>
</div>
四十一、添加省略号
- width
必须有一个固定的宽white-space : - nowrap
不让内容折行 - overflow : hidden
隐藏溢出的内容 - text-overflow : ellipsis
添加省略号
#content{ width:200px; border:1px black solid; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
四十二、CSS圆角
border-radius
给标签添加圆角（取值根据圆或椭圆的半径大小）
半圆：
#box{ width:300px; height:150px; background: red; border-radius: 150px 150px 0 0; }
四十三、PC端的布局
通栏:自适应浏览器的宽度。
版心:固定一个宽度,并且让容器居中.
博文尚美整页制作
<!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>
<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; le
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; border-radius: 50%; box-sizing: border-box; margin:0 6px; 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: url(./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:0 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;}
#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_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.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</p>
</div>
<ul class="case_list clear">
<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 class="case_btn">
<a href="#">VIEW MORE</a>
</div>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>TEH 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><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></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>
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
