生活随笔
收集整理的這篇文章主要介紹了
Web前端学习第四周
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Web前端學習第四周
position定位
- 指定一個元素在文檔中的定位方式
- top,right,left,bottom屬性決定最終位置
position取值
static（默認）
relative
absolute
fixed
sticky
1. relative相對定位
不會影響其他元素的布局
如果沒有定位偏移量對元素本身無影響
例：
<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"></div>
</body>
效果：
<style>#box1{width:100px;height: 100px;background:red ;}#box2{width:100px;height: 100px;background: blue;margin-top:100px ;margin-left: 100px; ;}#box3{width:100px;height: 100px;background:yellow ;}</style>
效果：
（ 黃色方塊被影響）
2. absolute絕對定位
使元素完全脫離文檔流
例：
正常情況
<style>#box1{width:100px;height: 100px;background:red ;}#box3{width:200px;height: 200px;background:yellow ;}</style>
效果
加入屬性absolute之后：
<style>#box1{width:100px;height: 100px;background:red ;position: absolute;}#box3{width:200px;height: 200px;background:yellow ;}</style>
效果
使內聯元素支持寬高（使內聯具備塊特性）
例：
正常情況：
<style>span{width: 100px;height: 100px;background: red;}</style>
</head>
<body><span>這是一個內聯的
</span>
效果：
加入absolute屬性后：
<style>span{width: 100px;height: 100px;background: red;position:absolute}</style>
效果：
使塊元素默認寬根據內容決定（讓塊具備內聯的特性）
正常情況
<style>div{background: red;}</style>
</head>
<body><div>這是一個塊
</div>
加入absolute屬性后：
div{background: red;position: absolute;}
效果：
4.如果定位祖先元素相對于定位祖先元素發生偏移，沒有定位祖先元素相對于整個文檔發生偏移（絕對、相對、固定）
例：
默認情況：
<style>#box1{width: 300px;height: 300px;border:1px black solid;margin: 200px;} #box2{width: 100px;height: 100px;background: red;} </style>
</head>
<body><div id="box1"><div id="box2"></div></div>
<style>#box1{width: 300px;height: 300px;border:1px black solid;margin: 200px;} #box2{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;} </style>
</head>
<body><div id="box1"><div id="box2"></div></div>
如果加入相對定位：
<style>#box1{width: 300px;height: 300px;border:1px black solid;margin: 200px;position:relaive} #box2{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;} </style>
</head>
<body><div id="box1"><div id="box2"></div></div>
則會回到邊框里
3.fixed固定定位
使元素完全脫離文檔流使內聯元素支持寬高（使內聯具備塊特性）使塊元素默認寬根據內容決定（讓塊具備內聯的特性）相對于整個瀏覽器窗口進行偏移，不受瀏覽器滾動條影響
4.sticky粘性定位
例：
<style>
body{height: 20000px;}
div{background: yellow;position: sticky;top:0}</style>
</head>
<body>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
<div>這是一個塊
</div>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
</body>
效果：當黃色字條走到頂端時便會固定不動
5. z-index定位層級
（可以寫負數）
默認情況：
<style>
#box1{width: 100px;height: 100px;background:red ;position: absolute;}
#box2{width: 100px;height: 100px;background: black;position: absolute;left:50px;top:50px}</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
（后寫的默認層級高）
改變后
#box1{width: 100px;height: 100px;background:red ;position: absolute;z-index:1}
#box2{width: 100px;height: 100px;background: black;position: absolute;left:50px;top:50px}
小細節：嵌套結構時外層總是大于里層
CSS添加省略號
width（必須有一個固定的寬）white-space:nowrap(不讓內容折行）overflow:hidden（隱藏溢出內容）text-overflow:ellipsis（添加省略號）
例：
<style>#content{width:200px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body>
<div id="content">測試文字草草草草草草草草草草草草草草草草草草草草
</div>
效果：
CSS Sprite
網頁圖片處理方式
好處：
1.減少圖片質量，網頁加載速度更快
2.減少圖片的請求次數，加快網頁的打開
例：
#box{width: 20px;height: 50px;background: url(.sprite_icon.png)no-repeat left -596px;}
CSS圓角
border-radius(給標簽添加圓角）
例：
#box{width: 200px;height: 200px;background: yellow;border-radius: 20px;}
效果
PC端布局
通欄：自適應瀏覽器的寬度
版心：固定一個寬度，讓容器居中
<!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="./commen.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;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: 6px;}#banner .banner_btn li.active{background-color: 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;}#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/web2.png);}#service .service_list li:nth-of-type(3) div{background-image: url(./images/web3.png);}#service .service_list li:nth-of-type(4) div{background-image: url(./images/web4.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{counter-reset: #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: 14;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{float: left;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;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="imges/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="banne" 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="comtainer"><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="comtainer"><div class="area_title"></div><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 id="news" class="container"><div class="area_title"><h2>最新資訊
</h2><p>THE LATEST NEWS
</p></div><dl><dt><img src="images/xs1.png" alt=""></dt><dd><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></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>
效果
總結
以上是生活随笔為你收集整理的Web前端学习第四周的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
