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