真么搞成窗口自適應，現在大小是固定的，窗口小了就會有看不到的板塊了
<!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; width: 100%; background: darkslategrey;top: 0px}
? ? ? ? .main{height: 800px; width: 100%; background: darkred}
? ? ? ? .left{height: 800px; width: 20%; background: blue;float: left}
? ? ? ? .right{height: 800px; width: 70%; background:chartreuse;float: right}
? ? ? ? .foot{height: 50px;width: 100%;background: chocolate; clear: both;bottom:0px }
</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>
2019-05-03
右邊的<div>元素變成中間的<div>元素了，再參考老師最開始講的一個混合布局做。
2019-05-03
<!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{background:gray;}
.main{background:red;position:relative;}
.left{ background:blue; width:200px;position:absolute;height:600px;top:0;left:0;}
.right{background:green;height:600px;margin:0 0 0 210px;}
.foot{background:orange;}
.sui{position:absolute;top:0;right:0;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
? ? <div class="right">right</div>
? ? <div class="left">left</div>
? ? <div class="sui"></div>
</div>
<div class="foot">foot</div>
</body>
</html>
2018-09-14
要不是怎樣的話，建議你去了解一下媒體查詢
2018-09-14
<!doctype?html> <html> ????<head> ????????<meta?charset="UTF-8"> ????????<meta?name="viewport"?content="width=device-width"> ????????<title>web?experience</title> ????????<link?rel="stylesheet"?href="web-expreience.css"> ????????<style> ????????????*{ ????????????????margin:?0; ????????????????padding:0; ????????????} ????????????.top?{ ????????????????height:?100px; ????????????????background:?#ccc; ????????????} ????????????.main?{ ????????????????background:?pink; ????????????} ????????????.main-common-h?{ ????????????????height:?500px; ????????????} ????????????.left?{ ????????????????margin-left:?20%; ????????????????background:?green; ????????????} ????????????.right?{ ????????????????float:?left; ????????????????width:?20%; ????????????????background:?yellow; ????????????} ????????????.foot?{ ????????????????height:50px; ????????????????background:?red; ????????????} ????????</style> ????</head> ????<body> ????<div?class="top">top</div> ????<div?class="main?main-common-h"> ????????<div?class="right?main-common-h">right</div> ????????<div?class="left?main-common-h">left</div> ????</div> ????<div?class="foot">foot</div> ????</body> </html>是這樣嗎？ 我不確定。