整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
題一：
在html5、CSS3語言中，在一個div區域內劃分4列div區域。
樣例代碼：
可以使用CSS的flexbox布局來實現在一個div區域內劃分4列div區域的效果。以下是一個樣例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.column {
width: 25%;
padding: 10px;
box-sizing: border-box;
}
.column:nth-child(odd) {
background-color: #f2f2f2;
}
.column:nth-child(even) {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<p>This is the content of column 1.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>This is the content of column 2.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>This is the content of column 3.</p>
</div>
<div class="column">
<h2>Column 4</h2>
<p>This is the content of column 4.</p>
</div>
</div>
</body>
</html>在上面的代碼中，我們使用了display: flex;來將容器設置為flex布局，通過flex-wrap: wrap;使得內容在行不夠的情況下自動換行。然后，每個列的寬度設置為25%，通過padding: 10px;設置列的內邊距。通過box-sizing: border-box;設置盒子模型為border-box以保證內邊距不會撐開列的寬度。最后，使用:nth-child選擇器分別給奇數列和偶數列設置不同的背景顏色，以便區分列的樣式。
問題二：
在html5、CSS3語言中，我想把頁面分為4個區域，上面第一區域div為頁面全寬、高度100px；中間分為左右兩個區域div，高度600px；最下面區域div為頁面全寬、高度100px。
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header, #content, #footer {
width: 100%;
position: relative;
}
#header {
height: 100px;
background-color: #ccc;
}
#content {
height: 600px;
background-color: #ddd;
}
#left, #right {
width: 50%;
height: 100%;
float: left;
}
#left {
background-color: #eee;
}
#right {
background-color: #fff;
}
#footer {
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>說明:
最近個人項目需要實現一個左右分欄且左右寬度可以手工拖動調節的web頁面，這里記錄下實現過程，效果如下圖，整個web頁面包含左右兩個分欄，中間是個4px像素的拖動條，鼠標移動到上面可以左右拖動改變左右分欄的寬度。
<!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">
<link rel="stylesheet" href="./style.css">
<title>web分欄寬度可調節示例</title>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="resize"></div>
<div id="right">right</div>
</div>
<script src="resize.js"></script>
</body>
</html>body {
margin: 0;
overflow-y: hidden;
}
#container {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
#left {
width: calc(30% - 4px);
background-color:indianred;
}
#resize {
width: 4px;
height: 100vh;
cursor: ew-resize;
}
#resize:hover {
background-color: blue;
}
#right {
width: 70%;
/* height: 100vh; */
background-color:green;
}家好，我是三木。
這篇文章，替大家匯總了css的布局方式，在每個布局的結尾附上了我認為比較好的文章鏈接，不僅僅可以當作學習資料，也可以當作方法的查詢手冊，以后開發的時候忘記了某個屬性就來查查。
看完推薦的文章保準解決你 99% 的css布局問題
每篇文章不僅僅包含介紹，還有代碼案例，以及如w3c網站的在線代碼編輯，可以自己修改屬性嘗試。
使用方法——display: block/inline/inline-block
根據CSS規范的規定，每一個網頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它的默認display屬性值為“block”，成為“塊級”元素(block-level)；而span元素的默認display屬性值為“inline”，稱為“行內”元素。
w3c：https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_display
w3c：https://www.w3school.com.cn/css/css_inline-block.asp
用法：https://zhuanlan.zhihu.com/p/65353887
使用方法：float:left/right
指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。
float屬性用于定位和格式化內容，例如讓圖像向左浮動到容器中的文本。
float的值有：
w3c：https://www.w3schools.com/css/css_float.asp
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/float
CSS深入理解之float浮動：https://segmentfault.com/a/1190000014554601
使用方法——display：flex/inline-flex
Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
容器有以下屬性：
w3c：https://www.w3schools.com/css/css3_flexbox_container.asp
Flex 布局教程：語法篇：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
深度解析 CSS Flexbox 布局：https://juejin.cn/post/6844904116141948936
48張小圖帶你領略flex布局之美：https://juejin.cn/post/6866914148387651592
使用方法——position：absolute/relative...
給元素設置postion屬性后，就可以定義該元素的top,bottom,left,right四個屬性。當然postion的值不同，對應的top,bottom,left,right這四個屬性的值代表的含義也不相同
position屬性用來指定一個元素在網頁上的位置，一共有5種定位方式：
w3c: https://www.w3schools.com/css/css_positioning.asp
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
CSS 定位詳解：https://www.ruanyifeng.com/blog/2019/11/css-position.html
使用方法——display:table/table-row/table-cell....
有兩種方式使用表格布局 -HTML Table（<table>標簽）和CSS Table（display:table 等相關屬性）。
HTML Table是指使用原生的<table>標簽，而CSS Table是指用CSS屬性模仿HTML 表格的模型。
table布局的display總共包含如下值
display:table的幾個用法：https://blog.51cto.com/u_4048786/3205160
css table布局大法：https://segmentfault.com/a/1190000007007885
display:table的用法：https://www.jianshu.com/p/037a706ba9e9
使用方法 ——display：grid
網格布局將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。
w3c：https://www.w3schools.com/css/css_grid.asp
CSS Grid 網格布局教程：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
Grid 布局：https://juejin.cn/post/6854573220306255880
A Complete Guide to Grid：https://css-tricks.com/snippets/css/complete-guide-grid/
使用方法——column-count
column-count： length ｜ auto
column-width：interger ｜ auto
淺談CSS3多列布局：https://juejin.cn/post/6844903450623524872
CSS columns分欄布局教程：https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
