-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局編程挑戰</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff;text-align:center;}
.top{height:50px;background:#ccc}
.main{height:500px;background:red}
.left{ height:500px;width:39%;background:blue;}
.right{height:500px;width:60%;background:green;float:right;}
.foot{height:50px;background:#f63}
</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>
查看全部 -
混合布局 <style>body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold}div{?text-align:center;?line-height:50px}.top{?height:100px;background:#9CF}.head,.main{?width:960px;?margin:0?auto;}.head{?height:100px;?background:#F90}.left{?width:220px;?height:600px;?background:#ccc;?float:left;}.right{?width:740px;?height:600px;background:#FCC;?float:right}.r_sub_left{?width:540px;?height:600px;?background:#9C3;?float:left}.r_sub_right{?width:200px;?height:600px;?background:#9FC;?float:right;}.footer{?height:50px;?background:#9F9;clear:both;?}</style>查看全部 -
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html?xmlns="http://www.w3.org/1999/xhtml"><head><meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/><title>混合布局</title><style>body{?margin:0;?padding:0;?font-size:30px;?font-weight:bold}div{?text-align:center;?line-height:50px}.top{?height:100px;background:#9CF}.head,.main{?width:960px;?margin:0?auto;}.head{?height:100px;?background:#F90}.left{?width:220px;?height:600px;?background:#ccc;?float:left;}.right{?width:740px;?height:600px;background:#FCC;?float:right}.r_sub_left{?width:540px;?height:600px;?background:#9C3;?float:left}.r_sub_right{?width:200px;?height:600px;?background:#9FC;?float:right;}.footer{?height:50px;?background:#9F9;clear:both;?}</style></head><body><div?class="top">????<div?class="head">head</div></div><div?class="main">????<div?class="left">left</div>????<div?class="right">???? <div?class="r_sub_left">sub_left????????</div>????????<div?class="?r_sub_right">sub_right????????</div>????</div></div><div?class="footer">footer</div></body></html>查看全部 -
絕對 position:absolute
查看全部 -
以前總是弄不清絕對定位，今天看了老師的實操，終于知道了。之前弄不清定位，只清楚浮動，以為模塊都靠浮，并排一起，但是自己實操做網頁總是樣式亂七八糟，找不出個所以然來，目前明白了，謝謝老師。
查看全部 -
自適應：拖動瀏覽器窗口時自動調整
width:%? 用px控制更精確
一般為固定寬度的
查看全部 -
margin: 0 auto;
可以實現定寬元素居中
查看全部 -
布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合
網頁設計的特點：
網頁可以自適應寬度
網頁的長度理論上沒有限制
分欄又稱為分列，常見的布局分為：一列布局，二列布局，三列布局，混合布局（多）
前端工程師就是將藝術與技術融合的關鍵崗位
CSS------>UI
查看全部 -
三列布局，讓左右兩邊的div定寬，中間的div自適應（讓左右兩個div絕對定位到左右，給中間div增加左右邊距）：
<div class="left">left</div>
<div class="main"></div>
<div class="right">right</div>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.left {
width: 200px;
height: 600px;
background: #ccc;
position: absolute;
left: 0;
top: 0;
}
.main {
height: 600px;
margin: 0 310px 0 210px;
background: #9CF;
}
.right {
height: 600px;
width: 300px;
position: absolute;
right: 0;
top: 0;
background: #FCC;
}
</style>
查看全部 -
沒懂查看全部
-
在三列布局中，如果左右兩邊固定寬度，中間自適應寬度，用浮動float不能讓它們并排，要用到position：absolute;left:0;top:0;? position:absolute:right:0;top:0; (左右兩邊的屬性設置)。margin:0 300px 0200px(中間部分的設置)
查看全部 -
用clear:both;清除浮動
查看全部 -
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF}（上右下左，順時針） .right{ width:300px; height:600px; position:absolute; right:0; top:0; background:#FCC;}
查看全部 -
一列布局：設置<div class="main">; body清除默認樣式｛margin:0;padding:0｝;. main設置寬 ,高,背景色,｛width:800px;height:300px;background:#ccc;（水平居中）margin:0 auto;｝
查看全部 -
clear:both 清楚函數
margin:0 auto 水平居中
左浮動 float:left
右浮動 float:right
高 height
寬 widht
背景顏色 background?
絕對定位：absolute 和 fixed 統稱為絕對定位 (absolute==
相對定位：relative
默認值：static
查看全部
舉報