简单的css布局

来源：互联网发布：mac系统使用教程视频编辑：程序博客网时间：2024/05/22 12:21

对于初学者来说css的布局是至关重要的，这关系到整个网页的外观。一个网页的好坏其基础就起源于此。以下是本人的随文练习，较为粗糙，大神莫拍。

 html><html><head><meta charset="utf-8"/><title>CSS布局练习</title><meta name="keywords" content=""/><meta name="description" content=""/><meta name="viewport" content="width=device-width"/><link rel="stylesheet" href="css/style.css"/><link rel="shortcut icon" href="img/favicon.ico"/><link rel="apple-touch-icon" href="img/touchicon.png"/><style type="text/css">.g-hd,.g-cd{border: 1px solid red;border-color:#ccc; }.g-hd{position: relative;float:left;margin-right: -200px;width: 200px}.g-cd{float:left;width: 100%}.g-bd{margin: 0 0 0 210px}</style></head><body><div class="g-doc">    <div class="g-hd">          左边定宽200px    </div>    <div class="g-bd">        <div class="g-cd">        右边自适应        </div>    </div>   </div></body></html>

着是一个很简单的两列布局，左侧定值，右侧自适应。虽然看起来很简单，但是其中涉及到margin的空间位移，譬如左侧是将其先定宽为200px，然后将之用float：left固定在了左边，而marin-right：-200px则是将这个div搬移到了页面之外。从而给右边的width：100%达到必要的条件，右边的margin又将右边区域向右空出了200px从而使左边能够达到定宽200px的条件，虽然是很简单的几条代码，但是要兼顾左右方能做出好的布局。

接下去是左右定宽，中间自适应的练习

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>NEC：更好的CSS方案</title><meta name="keywords" content=""/><meta name="description" content=""/><meta name="viewport" content="width=device-width"/><link rel="stylesheet" href="css/style.css"/><link rel="shortcut icon" href="img/favicon.ico"/><link rel="apple-touch-icon" href="img/touchicon.png"/><style type="text/css">.g-hd,.g-mn,.g-ft{background-color: red}.g-hd{position:relative;float: left;margin-right: -200px;width: 200px}.g-ft{float: right;margin-left: -200px;width: 200px}.g-bd{margin: 0 210px 0 210px }.g-mn{float: left;width: 100%}</style></head><body><div class="g-doc">    <div class="g-hd">          左侧定宽200px    </div>    <div class="g-bd">        <div class="g-mn">              中间自适应        </div>            </div>    <div class="g-ft">          右边定宽200px    </div></div></body></html>