-
很懷念· ·················
查看全部 -
這個面試的時候問我，我連這個都不會說明可能我對這個還是沒有實踐經驗的，只能說我自己確實沒有太大努力查看全部
-
一列布局：通常作為網頁的首頁。
<!DOCTYPE> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"/> <title>布局</title> <style?type="text/css"> body{margin:0;padding:0} .top{height:100px;background:blue} .main{width:800px;height:300px;background:#cc;margin:0?auto} .foot{width:800px;height:100px;background:#900} </style> </head> <body> <div?class="top"></div> <div?class="main"></div> <div?class="foot"></div> </body> </html>查看全部 -
布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機地排列組合。
網頁設計的特點：網頁的寬度可以自適應；網頁的長度理論可以無限延長。
常見的網頁布局：頭部、尾部、分成兩欄或者三欄。
分欄又稱為分列，常見的布局分為：一列布局、兩列布局、三列布局和混合布局。
前端工程師:如何利用CSS中浮動定位手段，完成UI設計中的布局要求。前端工程師就是將技術和藝術相融合的崗位。
查看全部 -
絕對定位：position:absolute
居中：margin：0 ........
查看全部 -
<!DOCTYPE?html>
<html?lang="en">
???<head>
??????<meta?charset="UTF-8">
??????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
??????<title>Document</title>
??????<style?type="text/css">
?????????body{?margin:0;?padding:0;?font-size:30px;?color:#fff;text-align:center;}
?????????.top{background:gray;width:100%;height:100px;}
?????????.main{width:100%;}
?????????.right{height:600px;background:green;position:absolute;left:210px;right:0;}
?????????.left{width:200px;height:600px;background:blue;}
?????????
?????????.foot{background:red;width:100%;height:50px;position:absolute;bottom:0;}
?????????</style>
?????????
?????????</head>
?????????
?????????<body>
?????????<div?class="top">top</div>
?????????<div?class="main">
??????????????
???????????????<div?class="right">right</div>
???????????????<div?class="left">left</div>
?????????????
?????????</div>
?????????<div?class="foot">foot</div>
?????????
?????????</body>
</html>
查看全部 -
完查看全部
-
?清除函數 clear:both
水平居中 margin:0 auto?
左浮動 float:left
右浮動 float:right
高 height
寬 widht
查看全部 -
main的布局思路
1.兩列都是自適應
第一步將左右兩個模塊的高度顏色確定下（方便觀察），不用設置寬度（默認即自適應）
第二步將左右兩個元素用float進行左右浮動（因為沒有數值要求所以可以不用position：absolute絕對定位）
2.中間寬度固定
第一步將main部分該固定的寬度固定下來
第二步也是利用float將子元素左右浮動，并設置其大小，用比例百分比固定可以，用固定像素設置也可以
3.左邊做固定寬度 右邊做自適應
第一步先把左邊模塊固定好大小，這時用可用float或絕對定位將模塊定位或浮動左邊
第二步不設置右邊模塊的寬度（即默認自適應），定位要用position：absolute絕對定位 并設置left的大小以和左邊元素對齊。
查看全部 -
我們利用margin:0 auto;屬性將定寬塊狀元素進行居中
查看全部 -
中間main模塊的思路
left按要求設置寬度，利用絕對定位將模塊定位左邊
right寬度自適應的話不要設置其寬度，利用絕對定位將模塊定位在距離左邊200px的位置
注意float與position的區別：
float僅僅只是將元素浮動到左邊或者右邊，沒有任何數值要求
但是當有數值要求時，用絕對定位position更加精確。
查看全部 -
塊挨著塊
塊嵌套塊
塊疊壓著塊
查看全部 -
布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合
網頁設計的特點：
? 網頁可以自適應寬度。
網頁的長度理論上沒有限制
常見的網頁布局一般分為三部分：頭部、內容主體、底部。
分欄有稱為分列，常見的布局有：
一列布局
兩列布局
三列布局
混合布局
查看全部 -
可以讓元素脫離文檔流：浮動float和絕對定位absloute
查看全部 -
布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合
網頁設計的特點：
網頁可以自適應寬度
網頁的長度理論上沒有限制
分欄又稱為分列，常見的布局分為：一列布局，二列布局，三列布局，混合布局（多）
查看全部
舉報