整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          十天學(xué)會(huì)html+css第九天 懸浮窗口固定定位 #網(wǎng)站

          天學(xué)會(huì)html+css,第九天固定定位。

          Redmi手機(jī)電視筆記本。

          今天的學(xué)習(xí)目標(biāo)是右側(cè)懸浮工具欄用固定定位實(shí)現(xiàn),它是相對(duì)于瀏覽器窗口的定位方式。

          ·盒子里的內(nèi)容用a標(biāo)簽,一個(gè)圖片加一行文字,此時(shí)它的位置在最底部。

          ·然后給它寫上固定定位樣式,右側(cè)距離0,下面距離70像素,加上背景顏色,看下效果。

          ·開始給a標(biāo)簽寫樣式,固定寬高,text-renderin默認(rèn)下劃線去掉,里面內(nèi)容居中,看下效果。

          ·圖片寫樣式之前也要加上這行代碼,然后讓它的尺寸變小一點(diǎn),并且左右居中,看下效果。

          ·文字的顏色、大小也調(diào)整一下。

          ·最后給a標(biāo)簽加上邊框、內(nèi)邊距,讓里面內(nèi)容往下挪一挪。

          到此,今天的學(xué)習(xí)完成。

          篇文章主要給大家介紹一下使用html+css來模仿制作小米官方網(wǎng)站右側(cè)的浮動(dòng)框。我們來看下邊的這個(gè)浮動(dòng)框,位于小米官網(wǎng)的右側(cè)并且隨著頁面的滾動(dòng),一直浮動(dòng)在右側(cè)不變;

          我們通過上邊的圖片可以看出圖片有5個(gè)單獨(dú)的塊元素組成,每個(gè)塊元素鼠標(biāo)經(jīng)過都有一個(gè)單獨(dú)的顏色變?yōu)辄S色的效果,然后第一個(gè)塊元素鼠標(biāo)經(jīng)過還會(huì)在左側(cè)彈出更多內(nèi)容。接下來我們簡單說一下制作所用到的核心知識(shí)。

          1)制作頁面所需知識(shí)點(diǎn)

          1、列表標(biāo)簽(dl dd dt)的使用,使用dl和dd來完成前邊5個(gè)相同模塊的制作

          2、鼠標(biāo)經(jīng)過(hover)的使用,第一個(gè)元素鼠標(biāo)經(jīng)過左側(cè)顯示,這個(gè)跟我們之前將的導(dǎo)航菜單類似,還有鼠標(biāo)經(jīng)過文字以及圖片改變顏色,這里可以使用hover之后改變背景圖片來實(shí)現(xiàn);

          3、浮動(dòng)(fixed)的使用,該內(nèi)容一直浮動(dòng)在網(wǎng)頁右側(cè),跟隨頁面一起滾動(dòng),我們可以使用position:fixed來實(shí)現(xiàn);

          2)代碼實(shí)操演練

          大體了解了我們所要使用的知識(shí)點(diǎn)之后,我們就可以開始根據(jù)圖片上的內(nèi)容來制作我們所需要的頁面了,具體的實(shí)現(xiàn)代碼就如下方所示:(首先寫一個(gè)div盒子,看到列表形式,直接使用dl和dd,然后每個(gè)元素內(nèi)部有文字和圖片,使用h4標(biāo)簽和span標(biāo)簽來存放圖片和文字內(nèi)容,就這么搞定了哈哈),來看代碼吧。

          html代碼挺簡單的,我們啪啪敲完之后呢,剩下的就是書寫css代碼,來完成圖片所示的布局樣式的制作了。那么我們的css代碼就如下圖所示:(最外層box直接來個(gè)fixed和right、bottom配合,讓其浮動(dòng)在右側(cè),然后寫寫dl和dd的寬高,控制控制span的背景,隨便寫寫hover事件,ok完成了)。不多說了,看代碼吧。

          好了,本篇文章就給大家說到這里,大家自己動(dòng)手寫一下看能不能寫出一樣的頁面效果出來,也可以找一些類似的頁面自己練習(xí)一下,有需要源碼的可以直接私信【網(wǎng)站源碼】即可。

          每日金句:只有知道別人心里在想什么,你才能得到你想要的。喜歡我的文章的小伙伴記得關(guān)注一下哦,每天將為你更新最新知識(shí)。

          一篇文章我們把「Web前端開發(fā)進(jìn)階篇」CSS框模型講解完了,接著我們來講解下一篇文章,關(guān)于CSS定位的內(nèi)容知識(shí),小伙伴們跟上我的節(jié)奏,動(dòng)起來,Let's go!

          【引言】

          CSS定位思想很簡單,就是讓你定義的元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置,相對(duì)于父元素、另一個(gè)元素甚至是瀏覽器窗口的位置。浮動(dòng)不是完全定位,不過,它也不是正常流布局。在我們切頁面的過程中,定位和浮動(dòng)是經(jīng)常用,用不好,就會(huì)出現(xiàn)頁面在不同瀏覽器的兼容性問題。我會(huì)在下面的文章中詳細(xì)說明。

          CSS定位

          CSS定位機(jī)制

          CSS有三種定位機(jī)制:普通流、浮動(dòng)和絕對(duì)定位。

          除非專門指定,否則所有框都在普通流中定位。也就是說,普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

          塊級(jí)框從上到下一個(gè)接一個(gè)地排列,框之間的垂直距離是由框的垂直外邊距計(jì)算出來。

          行內(nèi)框在一行中水平布置。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是,垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內(nèi)框。不過,設(shè)置行高可以增加這個(gè)框的高度。

          CSS position屬性

          通過position屬性我們可以選擇4中不同類型的定位。

          1、position:static

          元素框正常生成。塊級(jí)元素生成一個(gè)矩形框,作為文檔流的一部分,行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框,置于其父元素中。

          2、position:relative

          元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。

          3、position:absolute

          元素框從文檔流完全刪除,并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉,就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框,而不論原來它在正常流中生成何種類型的框。

          4、position:fixed

          元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute,不過其包含塊是視窗本身。

          提示:相對(duì)定位實(shí)際上被看作普通流定位模型的一部分,因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

          CSS定位屬性

          CSS 定位屬性允許你對(duì)元素進(jìn)行定位。

          position:把元素放置到一個(gè)靜態(tài)的、相對(duì)的、絕對(duì)的、或固定的位置中。

          top:定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

          right:定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

          bottom:定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

          left:定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

          overflow:設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。

          clip:設(shè)置元素的形狀。元素被剪入這個(gè)形狀之中,然后顯示出來。

          vertical-align:設(shè)置元素的垂直對(duì)齊方式。

          z-index:設(shè)置元素的堆疊順序。

          了解了這些屬性后,下面我們詳細(xì)的說說相對(duì)定位和絕對(duì)定位。

          CSS相對(duì)定位

          相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位,它將出現(xiàn)在它所在的位置上。然后,可以通過設(shè)置垂直或水平位置,讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。

          如果將 top 設(shè)置為 20px,那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素,那么會(huì)在元素左邊創(chuàng)建 30 像素的空間,也就是將元素向右移動(dòng)。

          #box_relative {
           position: relative;
           left: 30px;
           top: 20px;
          }

          如下圖所示:

          相對(duì)定位

          注意,在使用相對(duì)定位時(shí),無論是否進(jìn)行移動(dòng),元素仍然占據(jù)原來的空間。因此,移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。

          CSS絕對(duì)定位

          絕對(duì)定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同,相對(duì)定位實(shí)際上被看作普通流定位模型的一部分,因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

          普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣:

          #box_relative {
           position: absolute;
           left: 30px;
           top: 20px;
          }

          如下圖所示:

          絕對(duì)定位

          絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那么它的位置相對(duì)于最初的包含塊

          對(duì)于定位的主要問題是要記住每種定位的意義。所以,現(xiàn)在讓我們復(fù)習(xí)一下學(xué)過的知識(shí)吧:相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置,而絕對(duì)定位是“相對(duì)于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相對(duì)于”最初的包含塊。

          注釋:根據(jù)用戶代理的不同,最初的包含塊可能是畫布或 HTML 元素。

          提示:因?yàn)榻^對(duì)定位的框與文檔流無關(guān),所以它們可以覆蓋頁面上的其它元素。可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序。

          CSS浮動(dòng)

          浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/strong>

          由于浮動(dòng)框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

          請看下圖,當(dāng)把框 1 向右浮動(dòng)時(shí),它脫離文檔流并且向右移動(dòng),直到它的右邊緣碰到包含框的右邊緣:

          右浮動(dòng)

          再請看下圖,當(dāng)框 1 向左浮動(dòng)時(shí),它脫離文檔流并且向左移動(dòng),直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中,所以它不占據(jù)空間,實(shí)際上覆蓋住了框 2,使框 2 從視圖中消失。

          如果把所有三個(gè)框都向左移動(dòng),那么框 1 向左浮動(dòng)直到碰到包含框,另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。

          左浮動(dòng)

          如下圖所示,如果包含框太窄,無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊向下移動(dòng),直到有足夠的空間。如果浮動(dòng)元素的高度不同,那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“擋住”:

          左浮動(dòng)

          CSS float 屬性

          通過 float 屬性實(shí)現(xiàn)元素的浮動(dòng)。因此,我們可以創(chuàng)建浮動(dòng)框可以使文本圍繞圖像:

          文本圍繞圖像

          要想阻止行框圍繞浮動(dòng)框,需要對(duì)該框應(yīng)用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none,它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

          為了實(shí)現(xiàn)這種效果,在被清理的元素的上外邊距上添加足夠的空間,使元素的頂邊緣垂直下降到浮動(dòng)框下面:

          清除浮動(dòng)

          這是一個(gè)有用的工具,它讓周圍的元素為浮動(dòng)元素留出空間。

          讓我們更詳細(xì)地看看浮動(dòng)和清理。假設(shè)希望讓一個(gè)圖片浮動(dòng)到文本塊的左邊,并且希望這幅圖片和文本包含在另一個(gè)具有背景顏色和邊框的元素中。您可能編寫下面的代碼:

          .news {
           background-color: gray;
           border: solid 1px black;
           }
          
          .news img {
           float: left;
           }
          
          .news p {
           float: right;
           }
          
          <div class="news">
          <img src="news-pic.jpg" />
          <p>some text</p>
          </div>

          這種情況下,出現(xiàn)了一個(gè)問題。因?yàn)楦?dòng)元素脫離了文檔流,所以包圍圖片和文本的 div 不占據(jù)空間。

          如何讓包圍元素在視覺上包圍浮動(dòng)元素呢?需要在這個(gè)元素中的某個(gè)地方應(yīng)用 clear:

          不幸的是出現(xiàn)了一個(gè)新的問題,由于沒有現(xiàn)有的元素可以應(yīng)用清理,所以我們只能添加一個(gè)空元素并且清理它。

          .news {
           background-color: gray;
           border: solid 1px black;
           }
          
          .news img {
           float: left;
           }
          
          .news p {
           float: right;
           }
          
          .clear {
           clear: both;
           }
          
          <div class="news">
          <img src="news-pic.jpg" />
          <p>some text</p>
          <div class="clear"></div>
          </div>

          這樣可以實(shí)現(xiàn)我們希望的效果,但是需要添加多余的代碼。常常有元素可以應(yīng)用 clear,但是有時(shí)候不得不為了進(jìn)行布局而添加無意義的標(biāo)記。

          不過我們還有另一種辦法,那就是對(duì)容器 div 進(jìn)行浮動(dòng):

          .news {
           background-color: gray;
           border: solid 1px black;
           float: left;
           }
          
          .news img {
           float: left;
           }
          
          .news p {
           float: right;
           }
          
          <div class="news">
          <img src="news-pic.jpg" />
          <p>some text</p>
          </div>

          這樣會(huì)得到我們希望的效果。不幸的是,下一個(gè)元素會(huì)受到這個(gè)浮動(dòng)元素的影響。為了解決這個(gè)問題,有些人選擇對(duì)布局中的所有東西進(jìn)行浮動(dòng),然后使用適當(dāng)?shù)挠幸饬x的元素(常常是站點(diǎn)的頁腳)對(duì)這些浮動(dòng)進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。


          CSS定位今天就講解到這里了,下一篇講解CSS選擇器,希望大家不要放棄學(xué)習(xí)哦!

          PS:

          本文為‘Web前端進(jìn)階指南’原創(chuàng),手動(dòng)碼字不易,小伙伴們別忘了順手點(diǎn)個(gè)贊加個(gè)關(guān)注哈,有什么不懂的下方留言評(píng)論或私信。謝謝大家哈!


          主站蜘蛛池模板: 精品熟人妻一区二区三区四区不卡| 一区二区三区视频网站| 无码国产精品一区二区免费| 成人免费一区二区三区在线观看| 激情内射日本一区二区三区| 精品人妻少妇一区二区三区不卡| 久久99精品一区二区三区| 免费在线观看一区| 毛片无码一区二区三区a片视频| 日本成人一区二区| 一区二区乱子伦在线播放| 视频一区二区中文字幕| 精品国产AV无码一区二区三区| 亚洲国产日韩一区高清在线| 插我一区二区在线观看| 日本一区视频在线播放| 精品国产一区二区三区久久狼| 人妻互换精品一区二区| 久久无码AV一区二区三区| 国产一区二区三区露脸| 成人区人妻精品一区二区三区| 国产成人AV一区二区三区无码 | 亚洲乱色熟女一区二区三区蜜臀| 成人一区专区在线观看| 国产亚洲3p无码一区二区| 国产精品亚洲综合一区在线观看| 亚洲一区二区三区免费在线观看 | 日韩在线不卡免费视频一区| 一区二区高清视频在线观看| 在线观看一区二区三区视频| 老熟妇仑乱一区二区视頻| 亚洲一区二区三区偷拍女厕| 人妻无码一区二区三区四区| 国产未成女一区二区三区| 无码播放一区二区三区| 精品一区二区三区东京热| 中文字幕av无码一区二区三区电影| 搜日本一区二区三区免费高清视频| 日韩视频在线一区| 日本一道高清一区二区三区| 精品国产乱码一区二区三区|