整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
天這篇文章我們來(lái)說(shuō)一下css的浮動(dòng)屬性（float），給塊狀元素添加float屬性可以使其轉(zhuǎn)變?yōu)樾袃?nèi)元素，也就是我們所說(shuō)標(biāo)簽對(duì)象浮動(dòng)居左靠左（float:left）和浮動(dòng)居右靠右(float:right)。
css的float主要有3個(gè)屬性值none、left、right，默認(rèn)為none；具體的使用如下所示：
float:none; （不使用浮動(dòng)）
float:left; （靠左浮動(dòng)）
float:right; （靠右浮動(dòng)）
我們通過(guò)案例來(lái)實(shí)際演練一下float元素的使用技巧。
1、float:left的使用練習(xí)
我們這里創(chuàng)建一個(gè)導(dǎo)航條，導(dǎo)航條包含首頁(yè)、關(guān)于我們、新聞中心、案例展示等欄目名稱(chēng)。具體的網(wǎng)頁(yè)代碼以及顯示效果就如下圖所示：
由上圖可以看出默認(rèn)的樣式是豎排顯示的，但是我們常見(jiàn)的網(wǎng)頁(yè)導(dǎo)航條都是橫排顯示的，這時(shí)候我們就可以使用float屬性來(lái)使塊狀元素轉(zhuǎn)變?yōu)樾袃?nèi)元素，并讓居左顯示。
這里我們創(chuàng)建一個(gè)寬度為980px的導(dǎo)航條，給子元素（li）添加float的屬性并對(duì)齊進(jìn)行填充（padding）以及外間距（margin）的潤(rùn)色。具體的網(wǎng)頁(yè)代碼以及顯示效果就如下圖所示：
網(wǎng)頁(yè)中的顯示效果：
2、float:right的使用練習(xí)
float:right顧名思義用于元素靠右對(duì)齊，我們來(lái)看下面的一個(gè)例子，我們隨意寫(xiě)一篇文字，然后文字中插入一張圖片并使圖片右對(duì)齊。
我們?cè)倬W(wǎng)頁(yè)中可以看到圖片已經(jīng)浮動(dòng)到網(wǎng)頁(yè)的右側(cè)中去了。
好了，本篇文章就給大家說(shuō)到這里，大家可以注意看下我們使用float之后會(huì)出現(xiàn)什么問(wèn)題，下邊文章我們會(huì)給大家講解如何清除float帶來(lái)的負(fù)面影響。
每日金句：你不能拼爹的時(shí)候，你就只能去拼命！喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
篇文章主要給大家介紹一下使用html+css來(lái)模仿制作小米官方網(wǎng)站右側(cè)的浮動(dòng)框。我們來(lái)看下邊的這個(gè)浮動(dòng)框，位于小米官網(wǎng)的右側(cè)并且隨著頁(yè)面的滾動(dòng)，一直浮動(dòng)在右側(cè)不變；
我們通過(guò)上邊的圖片可以看出圖片有5個(gè)單獨(dú)的塊元素組成，每個(gè)塊元素鼠標(biāo)經(jīng)過(guò)都有一個(gè)單獨(dú)的顏色變?yōu)辄S色的效果，然后第一個(gè)塊元素鼠標(biāo)經(jīng)過(guò)還會(huì)在左側(cè)彈出更多內(nèi)容。接下來(lái)我們簡(jiǎn)單說(shuō)一下制作所用到的核心知識(shí)。
1、列表標(biāo)簽（dl dd dt）的使用，使用dl和dd來(lái)完成前邊5個(gè)相同模塊的制作
2、鼠標(biāo)經(jīng)過(guò)（hover）的使用，第一個(gè)元素鼠標(biāo)經(jīng)過(guò)左側(cè)顯示，這個(gè)跟我們之前將的導(dǎo)航菜單類(lèi)似，還有鼠標(biāo)經(jīng)過(guò)文字以及圖片改變顏色，這里可以使用hover之后改變背景圖片來(lái)實(shí)現(xiàn)；
3、浮動(dòng)（fixed）的使用，該內(nèi)容一直浮動(dòng)在網(wǎng)頁(yè)右側(cè)，跟隨頁(yè)面一起滾動(dòng)，我們可以使用position:fixed來(lái)實(shí)現(xiàn)；
大體了解了我們所要使用的知識(shí)點(diǎn)之后，我們就可以開(kāi)始根據(jù)圖片上的內(nèi)容來(lái)制作我們所需要的頁(yè)面了，具體的實(shí)現(xiàn)代碼就如下方所示：（首先寫(xiě)一個(gè)div盒子，看到列表形式，直接使用dl和dd，然后每個(gè)元素內(nèi)部有文字和圖片，使用h4標(biāo)簽和span標(biāo)簽來(lái)存放圖片和文字內(nèi)容，就這么搞定了哈哈），來(lái)看代碼吧。
html代碼挺簡(jiǎn)單的，我們啪啪敲完之后呢，剩下的就是書(shū)寫(xiě)css代碼，來(lái)完成圖片所示的布局樣式的制作了。那么我們的css代碼就如下圖所示：（最外層box直接來(lái)個(gè)fixed和right、bottom配合，讓其浮動(dòng)在右側(cè)，然后寫(xiě)寫(xiě)dl和dd的寬高，控制控制span的背景，隨便寫(xiě)寫(xiě)hover事件，ok完成了）。不多說(shuō)了，看代碼吧。
好了，本篇文章就給大家說(shuō)到這里，大家自己動(dòng)手寫(xiě)一下看能不能寫(xiě)出一樣的頁(yè)面效果出來(lái)，也可以找一些類(lèi)似的頁(yè)面自己練習(xí)一下，有需要源碼的可以直接私信【網(wǎng)站源碼】即可。
每日金句：只有知道別人心里在想什么，你才能得到你想要的。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
SS中的浮動(dòng)（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁(yè)面布局的關(guān)鍵。本文將深入探討這些屬性的工作原理和使用場(chǎng)景，幫助開(kāi)發(fā)者更好地理解和運(yùn)用它們來(lái)構(gòu)建響應(yīng)式和精確的網(wǎng)頁(yè)布局。
浮動(dòng)是CSS中用于實(shí)現(xiàn)元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)元素的邊緣。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位屬性允許你控制元素的位置，它可以是相對(duì)于它的正常位置、相對(duì)于最近的已定位祖先元素、相對(duì)于視口或絕對(duì)位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁(yè)面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在這個(gè)例子中，我們創(chuàng)建了一個(gè)包含頭部、側(cè)邊欄、主要內(nèi)容和頁(yè)腳的基本布局。我們使用浮動(dòng)來(lái)對(duì)齊頭部的Logo和導(dǎo)航，以及創(chuàng)建一個(gè)側(cè)邊欄。我們還使用了相對(duì)定位來(lái)稍微下移頁(yè)腳，并使用固定定位為頁(yè)面添加了一個(gè)始終可見(jiàn)的固定元素。最后，我們使用了overflow: hidden;來(lái)清除頭部中浮動(dòng)元素的影響。
浮動(dòng)、定位和顯示屬性是CSS中構(gòu)建復(fù)雜布局的強(qiáng)大工具。通過(guò)深入理解和正確應(yīng)用這些屬性，前端工程師可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁(yè)。隨著Web標(biāo)準(zhǔn)的不斷發(fā)展，我們也需要不斷學(xué)習(xí)和適應(yīng)新的CSS特性，以保持我們技能的前沿性。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
