天天看点
返回

WEB标准布局（DIV+CSS）学习笔记（二）-- DIV的布局基础

DIV??甯?灞????哄?虹?锛?涔??洪??瑕????ヨ??锛?????涓??抽??瀛?锛?width??height??margin??float锛??ㄥ??涓?渚?瀛?杩?琛???绠?????璇存??锛?

姣?涓?DIV????涓?琛???甯?灞?锛?

????涓?涓?寰?甯歌???渚?瀛?锛?璁捐?＄?椤垫?讹?寰?寰???浠ュ?椤甸?㈠????top??center??bottom涓?涓??哄??

<!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=gb2312" />
<title>????棰???妗?lt;/title>
<style type="text/css">
#top {
    background-color: #666666;
    height: 50px;
    width: 480px;
    margin: 5px auto;
}

#center {
    background-color: #CCCCCC;
    height: 200px;
    width: 480px;
    margin: 5px auto;
}

#bottom {
    background-color: #666666;
    height: 50px;
    width: 480px;
    margin: 5px auto;
}
</style>
</head>
<body>
  <div id="top">?</div>
  <div id="center">?</div>
  <div id="bottom">?</div>
</body>
</html>

璇存?????癸??跺??????涓?IE涓??ц???????锛?

1??姣?涓?div??绱? 榛?璁ゅ????涓?琛?

2??#top??#center??#bottom涓?涓?css?峰?涓???margin灞??э??藉??涔?????margin: 5px auto??锛??朵腑锛?5px??涓轰???iv涔??翠骇??涓?涓?灏?灏???????锛??瑰??璇存?????? 灏?margin璁剧疆浜?auto锛???E6浠ヤ???娴?瑙????杩??借?╁??绱?灞?涓?锛?瑕?璁颁??ャ??

3??div??绱??达?????浜?涓?涓???&nbsp;??锛?杩?????涓猴?濡???浣? 涓???浠讳???瀹瑰?ㄩ?????娴?瑙??ㄤ?蹇界??iv?????帮?????E??Chrom涓??藉?璇?杩??????跨┖?间?褰???瀹广??

WEB标准布局（DIV+CSS）学习笔记（二）-- DIV的布局基础

澶?涓?DIV????绔???甯?灞?锛?

?变?榛?璁ゆ???典?锛?姣?涓?div??绱?????涓?琛?锛???甯歌???涓?绉?甯?灞???涓や釜??澶?涓?div骞跺??????绔?锛?姣?濡?宸?晶??瀵艰???哄?????充晶????瀹瑰?哄??骞跺???剧ず锛?杩??跺氨??瑕???杩?css???峰?瀹?涔??ヨ揪?拌?涓????????朵腑????瑕?????瀵?loat灞??х??璁剧疆锛???ss娴??ㄧ??姒?蹇点??

娴??ㄧ??div濂芥??婕?娴??ㄦ按?㈢??涓???绾革???浠ヨ???辩????宸??????崇Щ????村?板?跺?杈规?纰板?板??寮?div???朵翰div锛??冲?????剁??div锛???澶?杈规?涓烘???? 瑕??瑰??娉ㄦ??????锛?娴??ㄧ??div涓???????妗ｇ??????娴????ユ???????灏辨??璇达??朵?涓?娴??ㄧ??div锛?濂藉??涓??ラ??杩?涓?div??瀛??ㄣ???ㄤ袱涓??剧?磋???璇存??涓?涓?锛??剧???ヨ??w3school锛?锛?

WEB标准布局（DIV+CSS）学习笔记（二）-- DIV的布局基础

娌℃??璁剧疆娴??ㄦ?峰???涓?涓?妗????稿?逛?缃?濡?宸??炬??绀猴?????????涓?琛???涓???iv1璁剧疆?????虫诞???float:right锛?锛?瀹??ㄦ??妗ｆ????娴?涓???浣?缃?灏卞ソ??娑?澶变?锛?div2??div3???ㄤ?绉伙???div1??婕??颁??宠竟锛??村?板?杈规?纰板?扮?朵翰妗???涓轰??寸?磋???璇存??娴??ㄥ??э???涓??㈢??浠ｇ??锛?

<!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=gb2312" />
<title>????棰???妗?lt;/title>
<style type="text/css">
#top {
    background-color: #666666;
    height: 50px;
    width: 480px;
    margin: 5px auto;
}
 
#center {
    background-color: #CCCCCC;
    height: 200px;
    width: 480px;
    margin: 5px auto;
}
 
#bottom {
    background-color: #666666;
    height: 50px;
    width: 480px;
    margin: 5px auto;
}
 
#center_left {
    background-color: #66FF66;
    width: 180px;
    height: 200px;
    float: left;
}
 
#center_right {
    background-color:#FFFF99;
    width: 300px;
    height: 200px;
    float: left;
}
 
</style>
</head>
<body>
  <div id="top">?</div>
  <div id="center">
      <div id="center_left">?</div>
      <div id="center_right">?</div>
  </div>
  <div id="bottom">?</div>
</body>
</html>

#center_left??#center_right涓??芥??娴??ㄧ??璁剧疆锛?float: left锛???id涓?enter_left??id涓?enter_right??涓や釜div浜?涓哄??寮?锛??卞??琚?id涓?enter??div??????锛??崇?朵翰??浜???宸?晶div??宸???婕?娴???锛??村?板乏杈规?纰板?扮?朵翰div??宸?竟妗?锛????充晶div???ㄥ??涓?琛???宸???婕?娴???锛?????锛?涓轰?????涓?琛?锛?锛?锛??村?板?跺乏杈规?纰板?板乏渚?iv???宠竟妗???澶?缁???????????锛?

WEB标准布局（DIV+CSS）学习笔记（二）-- DIV的布局基础

宸??充袱涓?div????绔?浜???涓轰?璇存??宸??虫诞?ㄧ??姒?蹇碉???绋?寰?淇??逛?涓?#center_right???峰?锛?灏?width??灏?20??绱?锛?骞跺?float璁剧疆???虫诞???

#center_right {
    background-color:#FFFF99;
    width: 280px;
    height: 200px;
    float: right;
}

??浠ョ???帮??变?宸??充袱涓?div??瀹藉害???ㄤ?璧蜂?瓒崇?朵翰div???诲?藉害锛???姝や腑?村?虹?颁?20px??绌洪????

WEB标准布局（DIV+CSS）学习笔记（二）-- DIV的布局基础

??娆㈠?ㄦ??????锛???绋?寰?淇??逛?涓?涓?#center_left??#center_right涓や釜?峰?锛?璇风?缁?瑙?瀵?锛?

#center_left {
    background-color: #66FF66;
    width: 180px;
    height: 200px;
    float: left;
}
 
#center_right {
    background-color:#FFFF99;
    width: 300px;
    height: 200px;
}

杩???璇存??娴??ㄤ???????妗ｆ???缁?浣充?瀛?锛??变?宸?晶div璁剧疆????宸?诞?ㄧ???峰?锛???姝ゅ?逛?娌℃??璁剧疆娴??ㄦ?峰????充晶div锛??虫??妗ｇ??涓?涓?????娴?锛?浼?榛?璁ら??宸??????ㄧ?朵翰div涓?锛?浜???渚胯?娴??ㄧ??宸?晶div???′?浜?180px

WEB标准布局（DIV+CSS）学习笔记（二）-- DIV的布局基础

??锛?涓??㈣?涓や釜灏?灏???绔???锛???div甯?灞???绠?????渚?瀛?锛??藉????猴?瀵瑰?灞??峰???绋?绋??????灏辫?戒骇???垫椿澶?????澶?瑙???浣?杩??????????虹???涓?瑗匡?澶?澶?瀹?楠?锛?浠?瀹???????涓?棰?浼???姣?濡?濡?浣?璁?iv????绐??ｇ??浼哥缉??杩?琛?娴????

绗?浜?绡?绗?璁板氨?拌???浜??????ユ???诲????浠?骞存????涓??鸿冻??璧?锛????戒???锛?韪㈢??涓?姝???

缁х画瀛??锛?缁х画绗?璁扳????/body>

div布局 css web 布局 浮动
上一篇: python，NFV项目开发--vimvim之所以流行，之所以被称为上古神器两个常用的插件：pyflakes vim插件实际效果PEP8不超过79个字符实时提示设置PEP8不超过79个字符实时提示效果PEP8格式化输出VIM显示tab键和不需要的多余空格
下一篇: VNFD模板参数化概要非参数化的VNFD模板参数化的VNFD模板在VNF部署时候需要提供的包含参数和值文件要点总结：

继续阅读