利用浮動(dòng)元素布局,代碼中我的右中怎么顯示不出來
<!DOCTYPE HTML>
<html>
? ? <head>
? ? ? ? <meta http-equiv="content-type" content="text/html;charset=utf-8">
? ? ? ? <title>利用浮動(dòng)元素嘗試頁面布局</title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? /*清楚固有樣式*/
? ? ? ? ? ? * {
? ? ? ? ? ? ? ? padding:0;
? ? ? ? ? ? ? ? margin:0;
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置頭部div*/
? ? ? ? ? ? .header{
? ? ? ? ? ? ? ? margin-top:200px;
? ? ? ? ? ? ? ? width:1000px;
? ? ? ? ? ? ? ? height:100px;
? ? ? ? ? ? ? ? background-color:yellow;
? ? ? ? ? ? ? ? /*設(shè)置居中*/
? ? ? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置content div*/
? ? ? ? ? ? .content{
? ? ? ? ? ? ? ? width:1000px;
? ? ? ? ? ? ? ? height:400px;
? ? ? ? ? ? ? ? background-color:orange;
? ? ? ? ? ? ? ? /*設(shè)置居中*/
? ? ? ? ? ? ? ? margin:10px auto;
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置左中div*/
? ? ? ? ? ? .left{
? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? height:400px;
? ? ? ? ? ? ? ? background-color:skyblue;
? ? ? ? ? ? ? ? /*設(shè)置左浮動(dòng)*/
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? }
? ? ? ? ? ? /*/*設(shè)置center div/*/
? ? ? ? ? ? .center{
? ? ? ? ? ? ? ? width:580px;
? ? ? ? ? ? ? ? height:400px;
? ? ? ? ? ? ? ? background-color:green;
? ? ? ? ? ? ? ? /*設(shè)置中間邊距*/
? ? ? ? ? ? ? ? margin-left:10px;
? ? ? ? ? ? ? ? margin-right:10px;
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置右中div*/
? ? ? ? ? ? .right{
? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? height:400px;
? ? ? ? ? ? ? ? background-color:skyblue;
? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? }
? ? ? ? ? ? /*設(shè)置footer div*/
? ? ? ? ? ? .footer{
? ? ? ? ? ? ? ? width:1000px;
? ? ? ? ? ? ? ? height:100px;
? ? ? ? ? ? ? ? background-color:black;
? ? ? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <div class="header"></div>
? ? ? ? ? ??
? ? ? ? <div class="content">
? ? ? ? ? ? <div class="left"></div>
? ? ? ? ? ? <div class="center"></div>
? ? ? ? ? ? <div calss="right"></div>
? ? ? ? </div>
? ? ? ? <div class="footer"></div>
? ? </body>
</html>
2017-05-18
因?yàn)槟阍趯懘a是class="right"時(shí),class寫成了calss,所以沒引用到樣式
2017-05-18
代碼寫錯(cuò)了?? <div calss="right"></div> 這樣能出來才有鬼了 ?class 看看錯(cuò)哪了
2017-05-18
沒有使用text-align?