生活随笔
收集整理的這篇文章主要介紹了
Web前端学习第四周
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Web前端學(xué)習(xí)第四周
position定位
- 指定一個(gè)元素在文檔中的定位方式
- top,right,left,bottom屬性決定最終位置
position取值
static（默認(rèn)）
relative
absolute
fixed
sticky
1. relative相對(duì)定位
不會(huì)影響其他元素的布局
如果沒有定位偏移量對(duì)元素本身無影響
例：
<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>
效果：
- 只移動(dòng)了藍(lán)方塊
對(duì)比margin
<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絕對(duì)定位
使元素完全脫離文檔流
例：
正常情況
<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>
效果
使內(nèi)聯(lián)元素支持寬高（使內(nèi)聯(lián)具備塊特性）
例：
正常情況：
<style>span{width: 100px;height: 100px;background: red;}</style>
</head>
<body><span>這是一個(gè)內(nèi)聯(lián)的
</span>
效果：
加入absolute屬性后：
<style>span{width: 100px;height: 100px;background: red;position:absolute}</style>
效果：
使塊元素默認(rèn)寬根據(jù)內(nèi)容決定（讓塊具備內(nèi)聯(lián)的特性）
正常情況
<style>div{background: red;}</style>
</head>
<body><div>這是一個(gè)塊
</div>
加入absolute屬性后：
div{background: red;position: absolute;}
效果：
4.如果定位祖先元素相對(duì)于定位祖先元素發(fā)生偏移，沒有定位祖先元素相對(duì)于整個(gè)文檔發(fā)生偏移（絕對(duì)、相對(duì)、固定）
例：
默認(rèn)情況：
<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>
如果加入相對(duì)定位：
<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>
則會(huì)回到邊框里
3.fixed固定定位
使元素完全脫離文檔流使內(nèi)聯(lián)元素支持寬高（使內(nèi)聯(lián)具備塊特性）使塊元素默認(rèn)寬根據(jù)內(nèi)容決定（讓塊具備內(nèi)聯(lián)的特性）相對(duì)于整個(gè)瀏覽器窗口進(jìn)行偏移，不受瀏覽器滾動(dòng)條影響
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>這是一個(gè)塊
</div>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
<p>aaaa
</p>
</body>
效果：當(dāng)黃色字條走到頂端時(shí)便會(huì)固定不動(dòng)
5. z-index定位層級(jí)
（可以寫負(fù)數(shù)）
默認(rèn)情況：
<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>
（后寫的默認(rèn)層級(jí)高）
改變后
#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}
小細(xì)節(jié)：嵌套結(jié)構(gòu)時(shí)外層總是大于里層
CSS添加省略號(hào)
width（必須有一個(gè)固定的寬）white-space:nowrap(不讓內(nèi)容折行）overflow:hidden（隱藏溢出內(nèi)容）text-overflow:ellipsis（添加省略號(hào)）
例：
<style>#content{width:200px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body>
<div id="content">測(cè)試文字草草草草草草草草草草草草草草草草草草草草
</div>
效果：
CSS Sprite
網(wǎng)頁圖片處理方式
好處：
1.減少圖片質(zhì)量，網(wǎng)頁加載速度更快
2.減少圖片的請(qǐng)求次數(shù)，加快網(wǎng)頁的打開
例：
#box{width: 20px;height: 50px;background: url(.sprite_icon.png)no-repeat left -596px;}
CSS圓角
border-radius(給標(biāo)簽添加圓角）
例：
#box{width: 200px;height: 200px;background: yellow;border-radius: 20px;}
效果
PC端布局
通欄：自適應(yīng)瀏覽器的寬度
版心：固定一個(gè)寬度，讓容器居中
<!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>服務(wù)范圍
</h2><p>OUR SERVICES
</p></div><ul class="service_list"><li><div></div><h3>1.web design
</h3><p>企業(yè)品牌網(wǎng)站設(shè)計(jì)/手機(jī)網(wǎng)站制作
<br>動(dòng)畫網(wǎng)站創(chuàng)意設(shè)計(jì)
</p></li><li><div></div><h3>2.graphic design
</h3><p>標(biāo)志logo設(shè)計(jì)/產(chǎn)品宣傳冊(cè)設(shè)計(jì)
<br>企業(yè)廣告/海報(bào)設(shè)計(jì)
</p></li><li><div></div><h3>3.e-business plan
</h3><p>淘寶/天貓裝修設(shè)計(jì)及運(yùn)營推廣
<br>企業(yè)微博、微信營銷
</p></li><li><div></div><h3>4.mailboxagents
</h3><p>騰訊/網(wǎng)易企業(yè)郵箱品牌代理
<br>個(gè)性化郵箱定制開發(fā)
</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="#">網(wǎng)站排名進(jìn)入前三的技巧說明
</a></h3><p>有很多客戶都會(huì)納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎首頁，更不用說進(jìn)首頁前三了，那么網(wǎng)站優(yōu)...
</p></div></li><li><div class="news_date" l><i>09
</i><span>Jan
</span></div><div class="news_text" l><h3><a href="#">網(wǎng)站排名進(jìn)入前三的技巧說明
</a></h3><p>有很多客戶都會(huì)納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎首頁，更不用說進(jìn)首頁前三了，那么網(wǎng)站優(yōu)...
</p></div></li><li><div class="news_date" l><i>09
</i><span>Jan
</span></div><div class="news_text" l><h3><a href="#">網(wǎng)站排名進(jìn)入前三的技巧說明
</a></h3><p>有很多客戶都會(huì)納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎首頁，更不用說進(jìn)首頁前三了，那么網(wǎng)站優(yōu)...
</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>
效果
總結(jié)
以上是生活随笔為你收集整理的Web前端学习第四周的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
