-
<!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}
.top{height:100px;margin:0 auto;background:black;}
.main{height:600px;background:pink;}
.right{height:600px;background:green;position:absolute;left:210px;width:100%;}
.left{ height:600px;width:200px;background:blue;float:left;}
.foot{width:600px; height: 400px;margin:0 auto; background:#FFAA33; clear:both;}
</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>
查看全部 -
<!doctype html>
<html xmlns="http;//www.w3.org/1999/xhtml">
?<head>
? <meta http-equiv="Content=Type"conent="text/html;charset=utf-8">
? <title>布局</title>
? <style type="text/css">
? body{margin:0;padding:0}
? .top{height:100px;background:blue}
? .head{height:100px;height:600px;background:#f60;margin:0 auto}
? .main{width:200px;height:600px;background:#ccc;margin:0 auto}
? .left{width:200px;height:600px;background:yellow;float:left}
? .right{width:600px;height:600px;background:green;float:left}
? .sub_1{width:400px;height:600px;background:#09F;float:right}
? .sub_2{width:800px;height:100px;background:#900;margin:0 auto}
? </style>
?</head>
?<body>
?<div class="top">
? <div class="head">
? </div>
? </div>
<div class="main">
?<div class="left">
?</div>
?</div>
?<div class="right">
?<div class="sub_1">
?</div>
?<div class="sub_2">
?</div>
?</div>
?</body>
</html>
查看全部 -
<!doctype html>
<html xmlns="http;//www.w3.org/1999/xhtml">
?<head>
? <meta http-equiv="Content=Type"conent="text/html;charset=utf-8">
? <title>布局</title>
? <style type="text/css">
? body{margin:0;padding:0 auto}
? .left{width:33.33%;height:500px;float:left;background:#ccc}
? .middle{width;33.33%;height:500px;float:left;background:#999}
? .right{width:33.33%;height:500px;float:right;background:#ddd}
? </style>
?</head>
?<body>
?<div class="left"></div>
<div class="middle"></div>
?<div class="right"></div>
?</body>
</html>
<!doctype html>
<html xmlns="http;//www.w3.org/1999/xhtml">
?<head>
? <meta http-equiv="Content=Type"conent="text/html;charset=utf-8">
? <title>布局</title>
? <style type="text/css">
? body{margin:0;padding:0}
? .left{width:200px;height:500px;background:#ccc;position:absoulate;left:0;tpo:0}
? .middle{height:500px;float:left;background:#999;margin:0 300px 0 200px}
? .right{width:33.33%;height:500px;background:#ddd;position:absoulate;left:0;tpo:0}
? </style>
?</head>
?<body>
?<div class="left">200px</div>
<div class="middle">設計首頁的第一步就是設計版面布局，就像傳統的報刊雜志編輯一樣，我們將網頁看做一張報紙，進行排版布局。雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面試及基礎依然是必須的，他們的基本原理是共通的，你可以領會要點，舉一反三</div>
?<div class="right">300px</div>
?</body>
</html>
查看全部 -
<!doctype html>
<html xmlns="http;//www.w3.org/1999/xhtml">
?<head>
? <meta http-equiv="Content=Type"conent="text/html;charset=utf-8">
? <title>布局</title>
? <style type="text/css">
? body{margin:0;padding:0}
? .left{width:20%;height:500px;float:left;background:#ccc}
? .right{width:80%;height:500px;float:right;background:#ddd}
? </style>
?</head>
?<body>
?<div class="left"></div>
?<div class="right"></div>
?</body>
</html>
查看全部 -
<!doctype html>
<html>
?<head>
? <meta http-equiv="Content=Type"conent="text/html;charset=utf-8">
? <title>布局</title>
? <style type="text/css">
? body{margin:0;padding:0}
? .main{width:800px;height:300px;background:#cc;margin:0 auto}
? </style>
?</head>
?<body>
?<div class="main"></div>?
?</body>
</html>
<!doctype html>
<html xmlns="http;//www.w3.org/1999/xhtml">
?<head>
? <meta http-equiv="Content=Type"conent="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:gray;margin:0 auto}
? .foot{width:800px;height:100px;background:#900;margin:0 auto}
? </style>
?</head>
?<body>
?<div class="top"></div>
?<div class="main"></div>
?<div class="foot"></div>
?</body>
</html>
查看全部 -
以上是自我感覺第一節我所掌握的知識
查看全部 -
可以讓元素脫離文檔流的CSS設置是 float 和絕對定位：absolute
查看全部 -
<!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}
.top{height: 80px;background: #ccc;}
.main{height: 400px;width:860px;margin:0 auto;background:red;}
.left{width:200px;height:300px;background:blue;position:absolute;left:0;top:80px;}
.right{height: 400px;float: right;background: #F90;width:70%;}
.foot{height: 50px;background: green;}
</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>
查看全部 -
margin{0?auto}塊元素垂直居中
查看全部 -
前端工程師就是將藝術與技術完美融合的工作。
布局：一列布局、兩列布局、三列布局、混合布局
查看全部 -
margin:0 auto;表示居中對齊
查看全部 -
.top{height:100px;background:blue}
.main{width:800px;height:300px;background:blue;margin:0 auto}?
<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
查看全部 -
top,main(left,right),footer,當left,right都設置了浮動到左邊、右邊，在設置footer時，應該清除浮動，否則footer的內容會跑到top下面，占據了main的位置。也即是，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{ height:600px; width:300px; position:absolute; right:0;top:0; background:#FCC;}
查看全部 -
什么是脫離文檔流？什么是文檔流？
瀏覽器默認的排版方式就是文檔流(或者叫標準流)排版方式。脫離文檔流就是不按照文檔流的排版方式。
文檔流的排版方式是：塊級元素垂直排布，行內元素和行內塊級水平排布。不脫離就是按照這種方式排版,
例如給元素設置浮動或者絕對定位，這就是脫離文檔流布局
查看全部
舉報