css进行网站布局

一、一列布局（例如百度首页）

　　通常用　　{margin:0 auto;}　　控制。

复制代码
<!DOCTYPE>
<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}
    div{ text-align:center; font-weight:bold}
    .main,.footer{ width:960px; }
    .head{ width:100%; height:100px; background:#ccc}
    .main{ height:600px; background:#FCC;margin:0 auto;}
    .footer{ height:50px; background:#9CF;margin:0 auto;}
</style>
</head>

<body>
    <div class="head">head</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
</html>
复制代码

 

二、两列布局

　　通常用　　{float:left/right}　　控制。

复制代码
<!DOCTYPE >
<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; font-weight:bold}
    div{ text-align:center; line-height:50px}
    .main{ width:960px; height:600px; margin:0 auto}
    .left{ width:300px; height:600px; background:#ccc; float:left;}/*左浮动样式*/
    .right{ width:660px; height:600px; background:#FCC; float:right;}/*右浮动样式*/
</style>
</head>

<body>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>
复制代码

 

三、三列布局

　　使用　　{position:absolute;}　　控制。

　　1.通常设置宽度为%即可；如：

复制代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin</title>
<style type="text/css">
    body{margin:0;padding: 0;}
    .main{width: 100%;margin: 0 auto;}
    .left{width: 33.33% ;height: 500px;background-color: #ccc; float: left;}
    .middle{height: 33.33%;background-color: #999;float: left;}
    .right{width: 33.33%;height: 500px;background-color: #ddd;float: left;}
</style>
</head>
<body>
<div class="main">
    <div class="left">200px</div>
    <div class="middle">银杏（学名：Ginkgo biloba L.），为银杏科、银杏属落叶乔木。银杏为落叶大乔木，胸径可达4米，幼树树皮**滑，浅灰色，大树之皮灰褐色，不规则纵裂，粗糙；有长枝与生长缓慢的距状短枝。幼年及壮年树冠圆锥形，老则广卵形；枝*轮生，斜上伸展（雌株的大枝常较雄株开展）。叶互生，在长枝上辐射状散生，有细长的叶柄，扇形，两面淡绿色，无毛。在长枝上散生，在短枝上簇生。它的叶脉形式为“二歧状分叉叶脉”。在长枝上常2裂，基部宽楔形。球花雌雄异株，单性，生于短枝顶端的鳞片状叶的腋内，呈簇生状。4月开花，10月成熟，种子具长梗，下垂，常为椭圆形、长倒卵形、卵圆形或*圆球形。种皮肉质，被白粉，外种皮肉质，熟时黄色或橙黄色。</div>
    <div class="right">300px</div>
</div>
</body>
复制代码

　　2.特殊情况，左右两列宽度固定，中间一列宽度自适应，代码如下：

复制代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin</title>
<style type="text/css">
    body{margin:0;padding: 0;}
    .main{width: 100%;margin: 0 auto;}
    .left{width: 200px ;height: 500px;background-color: #ccc;position: absolute;left: 0;top: 0;}
    .middle{height: 500px;background-color: #999;margin: 0 300px 0 200px;}
    .right{width: 300px;height: 500px;background-color: #ddd;position: absolute;right: 0;top: 0;}
</style>
</head>
<body>
<div class="main">
    <div class="left">200px</div>
    <div class="middle">银杏（学名：Ginkgo biloba L.），为银杏科、银杏属落叶乔木。银杏为落叶大乔木，胸径可达4米，幼树树皮**滑，浅灰色，大树之皮灰褐色，不规则纵裂，粗糙；有长枝与生长缓慢的距状短枝。幼年及壮年树冠圆锥形，老则广卵形；枝*轮生，斜上伸展（雌株的大枝常较雄株开展）。叶互生，在长枝上辐射状散生，有细长的叶柄，扇形，两面淡绿色，无毛。在长枝上散生，在短枝上簇生。它的叶脉形式为“二歧状分叉叶脉”。在长枝上常2裂，基部宽楔形。球花雌雄异株，单性，生于短枝顶端的鳞片状叶的腋内，呈簇生状。4月开花，10月成熟，种子具长梗，下垂，常为椭圆形、长倒卵形、卵圆形或*圆球形。种皮肉质，被白粉，外种皮肉质，熟时黄色或橙黄色。</div>
    <div class="right">300px</div>
</div>
</body>
复制代码

 

四、混合布局

　　在上面三种布局的基础上进行分割即可；

复制代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
<style type="text/css">
    body{margin:0;padding: 0;}
    .top{height: 100px;background-color: blue;}
    .header{width: 800px ;height: 100px;background-color:#f60;margin: 0 auto;}
    .main{width: 800px;height:600px;background_color:#ccc;margin: 0 auto;}
    .left{width: 200px ;height: 600px;background-color:yellow;float: left;}
    .right{width: 600px;height: 600px;background-color: #369;float: right;}
    .sub_left{width:400px;height: 600px;background-color:green;float: left;}
    .sub_right{width:200px;height: 600px;background-color:#09f;float: right;}
    .footer{width: 800px;height:100px;background-color: #900;margin: 0 auto;}
</style>
</head>
<body>
<div class="top">
    <div class="header">header</div>
</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
        <div class="sub_left">sub_left</div>
        <div class="sub_right">sub_right</div>
    </div>
</div>
<div class="footer">footer</div>
</body>
复制代码

 

 　　

posted @   shiweiqianju  阅读(327)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
点击右上角即可分享
微信分享提示
AI IDE Trae