整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開發程序時，會經常用到框架，比如說常見的考試管理系統就涉及了浮動框架。今天給大家展示一個簡單的例子如何運用浮動框架（獨立功能的頁面）重新組成一個完整的頁面（A頁面），在瀏覽器顯示。要實現如下的效果：
把要實現的頁面分為兩大部分，一部分是左側主要是系統管理選項（B頁面），另一部分是右側的查詢結果顯示（C頁面），最后再用用浮動框架把他們嵌入到最后顯示頁面，便于表達我們就叫它A頁面。A頁面代碼如下：
上圖標紅框的位置是框架嵌入的頁面，它們分別是A頁面左側（B頁面）和A頁面的右側（C頁面）。B頁面和C頁面代碼如下：
B頁面代碼
C頁面部分代碼
技術要點
浮動框架常見屬性
浮動框架iframe是一種特殊的框架頁面，可以在瀏覽器窗口嵌套子窗口，在其中顯示子頁面的內容。語法格式是：
文件時其他框架文件的文件名或者鏈接，name是框架的名字，align是指對齊方式（left、right、center、justify），scrolling是框架的滾動條顯示有三個值（yes、no、auto），frameborder是浮動框架的邊框屬性。
靜態網站使用框架注意事項
1、在seo中應用了大量的框架結構，會導致搜索引擎的“蜘蛛”程序無法抓取頁面，不利于網站seo，所以不建議大規模在靜態網頁上應用框架結構。
2、要處理好框架頁面出現的滾動條，滾動條太多會影響用戶體驗，最后得不償失。
3、框架不適合復雜效果頁面布局（比如說專題頁），靜態網站還是建議使用div+css布局頁面。
關于“關于HTML中浮動框架的應用”先聊到這。圖中是源碼一部分，源碼私信。每天學習一個知識點，每日寄語”你所有的努力，都有跡可循。”如轉載清標明出處，
SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發者更好地理解和運用它們來構建響應式和精確的網頁布局。
浮動是CSS中用于實現元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位屬性允許你控制元素的位置，它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。
.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中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁面上。
.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;
}
在這個例子中，我們創建了一個包含頭部、側邊欄、主要內容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導航，以及創建一個側邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。
浮動、定位和顯示屬性是CSS中構建復雜布局的強大工具。通過深入理解和正確應用這些屬性，前端工程師可以創建出既美觀又功能強大的網頁。隨著Web標準的不斷發展，我們也需要不斷學習和適應新的CSS特性，以保持我們技能的前沿性。
本章目標：
標準文檔流：指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素默認的排列方式
標準文檔流組成
display屬性
在這里插入圖片描述
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
