简单的CSS网页布局一二列布局_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

简单的CSS网页布局一二列布局_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

1.一列布局

　　(一)一列自适应

　　自适应浏览器，随着浏览器的拉伸而变化，一般宽度采用百分比的写法，很简

<html><head lang="en">    <meta charset="UTF-8">    <title>一列布局自适应</title>    <style type="text/css"> body{ margin: 0;      /*清除浏览器默认样式*/ padding: 0;        } div{ text-align: center;  /*字体居中*/ font-size: 30px; font-weight: bold;        } .head,.middle,.foot{ width: 50%;          /*百分比宽度*/ margin: 0 auto;      /* 典型的设置居中*/        } .head{ height: 200px; background: #F0B6CF;        } .middle{ height: 500px; background: tan;        } .foot{ height: 200px; background-color: #57A9D1;        }    </style></head><body>        <div class="head">head</div>        <div class="middle">middle</div>         <div class="foot">foot</div></body></html>

登录后复制

　　(二)一列固定

　　顾名思义，固定布局的宽度，设置固定的PX值。

　　只需要在上面一列自适应的HTML代码中，把width:50% 修改成 width:960px即可，当然，各部分如果要求设置的宽度不同，在每个部分的类选择器上进行适当修改即可。

2.二列布局

　　(一)二列自适应

　　　二列的自适应，这时候要用到float属性。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>二列自适应</title>    <style type="text/css">        body{            margin: 0;      /*清除浏览器默认样式*/            padding: 0;        }        div{            text-align: center;  /*字体居中*/            font-size: 30px;            font-weight: bold;        }        .left{            width: 30%;                             background-color: #CCFF00;            height: 500px;            float: left;         /*先左浮动，使之靠浏览器左侧*/        }        .right{            width: 70%;            height: 500px;            background-color: bisque;            float: right;       /*先右浮动，使之靠浏览器右侧*/        }    </style></head><body>        <div class="left">left</div>        <div class="right">right</div></body></html>

登录后复制

注意：以上百分比30%和70%加起来刚好是100%，宽度会充满整个浏览器页面，如果加起来没有100%，则他们中间会空出一栏的空间出来。

　　(二)二列居中自适应

　　在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为：80%；则子代标签的宽度会基于80%的浏览器宽度来定。

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4     <meta charset="UTF-8"> 5     <title>二列居中自适应</title> 6     <style type="text/css"> 7         body{ 8             margin: 0;      /*清除浏览器默认样式*/ 9             padding: 0;10         }11         div{12             text-align: center;  /*字体居中*/13             font-size: 30px;14             font-weight: bold;15         }16         .main{17             width:80%;18             height: 500px;19             margin: 0 auto;      /*居中*/20         }21         .left{22             width: 30%;23             background-color: #CCFF00;24             height: 500px;25             float: left;         /*先左浮动，使之靠浏览器左侧*/26         }27         .right{28             width: 70%;29             height: 500px;30             background-color: bisque;31             float: right;       /*先右浮动，使之靠浏览器右侧*/32         }33     </style>34 </head>35 <body>36     <div class="main">37         <div class="left">left</div>38         <div class="right">right</div>39     </div>40 </body>41 </html>

登录后复制

　　(三)二列居中固定

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4     <meta charset="UTF-8"> 5     <title>二列居中固定宽度</title> 6     <style type="text/css"> 7         body{ 8             margin: 0;      /*清除浏览器默认样式*/ 9             padding: 0;10         }11         div{12             text-align: center;  /*字体居中*/13             font-size: 30px;14             font-weight: bold;15         }16         .main{17             width:960px;18             height: 500px;19             margin: 0 auto;20         }21         .left{22             width: 360px;23             background-color: #CCFF00;24             height: 500px;25             float: left;         /*先左浮动，使之靠浏览器左侧*/26         }27         .right{28             width: 600px;29             height: 500px;30             background-color: bisque;31             float: right;       /*先右浮动，使之靠浏览器右侧*/32         }33     </style>34 </head>35 <body>36     <div class="main">37         <div class="left">left</div>38         <div class="right">right</div>39     </div>40 </body>41 </html>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7349

Java教程

1627

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，