整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
最近個人項目需要實現一個左右分欄且左右寬度可以手工拖動調節的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;
}站制作中主要包括上下、左右以及混合分欄的排版模式，分欄式頁面現在是網站設計中常見的一種，它可以將網站展現的更美觀，內容看上去井然有序。在今天的內容中，小編將詳細介紹下分欄式頁面設計的要求。
1.頁面設計時要將主次分清，不要一味的追求漂亮而違反了頁面設計的規則，特別要注意的是不要影響用戶的瀏覽體驗。
2.用心創意設計，一般來說左右分欄的網站看上去板塊會很少，如果我們通過創新設計，將頁面更為豐富，這樣用戶在瀏覽網站時就不會覺得死板了。
3.除了在內容上左右分欄可以大幅度交替變換，整體的格調也不能區分得過于明顯，否則會顯得格格不入，最好讓整個頁面保持該有的視覺平衡感。
4.導航設計要求，不管采用是文字還是圖片的導航形式，都可以利用分欄充分體現，考慮到用戶對網站的視覺效應，小編認為在分欄中利用圖片導航指引效果會更好。
5.做到左右互補的形式，用戶在瀏覽網站時，由于頁面設計左右互補，那么瀏覽一側內容的同時就不會遺漏另一側的內容，甚至會引發用戶對網站內容的思考。
總結：分欄設計從內容和結構上來說比普通的設計都要自由得多，兩側既獨立又緊密相連，所以，盡量發揮出我們的想象和創意，將好的作品展現到用戶面前。
原創文章出自暢想網絡，轉載地址：http://www.e-wkj.cn/xw/2493.html
天來說說網頁中實現三欄布局要如何實現的問題，做法有好多，這里就總結4中常用的方法，感興趣的小伙伴可以看看。
若不是等分分欄的話，一般用得最多的應該是浮動方法，運用浮動做法時候要注意瀏覽器的兼容性！
展示代碼:
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
