CSS进行简单网页布局（基础知识）

最新推荐文章于 2024-08-09 16:30:00 发布
最新推荐文章于 2024-08-09 16:30:00 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： 前端 文章标签： css 布局 css基础知识 css样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyp520520/article/details/78438817
版权
本文介绍了CSS进行网页布局的基本技巧，包括一列布局、自适应宽度和高度、两列布局、三列布局以及混合布局的实现方法。通过示例代码展示了如何利用浮动布局、绝对定位和标准文档流进行网页元素的定位，帮助读者掌握网页布局的核心概念。
摘要由CSDN通过智能技术生成

CSS页面布局

 

制作布局

一列布局

 例子：

<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:blue}

.main{width:800px;height:300px;background:#ccc;margin:0 auto}

.foot{width:800px;height:100px;background:#900;margin:0 auto}

div{text-align:center}

</style>

</head>

<body>

<div class="top">top</div>

<div class="main">main</div>

<div class="foot">foot</div>

</body>

怎样去获得屏幕的自适应宽度、高度

例子：

<head>

<meta http="Content-Type" content="text/html;charset=utf-8" />

<title>一列布局</title>

<style type="text/css">

body{margin:0;padding:0;font-szie:30px}

div{text-align:center;font-weight:bold}

.main,.footer{width:960px;margin:0 auto}

.head{width:100%;height:100px;background:#ccc}

.main{height:600px;background:#fcc}

.footer{height:50px;background:#9cf}

</style>

</head>

<body>

<div class="head">head</div>

<div class="main">main</div>

<div class="footer">footer</div>

</body>

 

 

两列布局

例子：自适应

<head>

<meta http=equiv="Content-Type" content="text/html; charset=utf-8" />

<title>两列布局</title>

<style>

body{margin:0;padding:0}

.left{width:20%;height:500px;float:left;background:#ccc}

.right{width:80%;height:500px;float:right;background:#ddd}

div{text-align:center}

</style>

</head>

<body>

<div class="left">left</div>

<div class="right">right</div>

</body>

 

例子：

<head>

<meta http=equiv="Content-Type" content="text/html; charset=utf-8" />

<title>两列布局</title>

<style>

body{margin:0;padding:0}

.main{width:800px;margin:0 auto;background:blue}

.left{width:20%;height:518px;float:left;background:#ccc}

.right{width:80%;height:500px;float:right;background:#ddd}

div{text-align:center}

</style>

</head>

<body>

<div class="main">main</div>

<div class="left">left</div>

<div class="right">right</div>

</body>

 

例子：

<head>

<meta http-equiv="Content-Type"content="text/html;charset=utf-8" />

<title>两列布局</title>

<style type="text/css">

body{margin:10;padding:5;font-size:30px;font-weight:bold}

div{text-align:center;line-height:50px}

.main{width:960px;height:200px;margin:0 auto}

.left{width:300px;height:600px;background:#ccc;float:left}

.right{width:600px;height:600px;background:#FCC;float:right}

</style>

</head>

<body>

<div class="main">main</div>

<div class="left">left</div>

<div class="right">right</div>

</body>

 

例子：三列布局

<head>

<meta http-equiv="Content-Type"content="text/html;charset=utf-8" />

<title>三列布局</title>

<style type="text/css">

body{margin:0;padding:0}

.left{width:33.33%;height:500px;float:left;background:#ccc}

.middle{width:33.33%;height:500px;float:left;background:#999}

.right{width:33.33%;height:500px;float:right;background:#ddd}

</style>

</head>

<body>

<div class="left">left</div>

<div class="middle">middle</div>

<div class="right">right</div>

</body>

需要的是自适应屏幕的高度及宽度

 

例子：

<head>

<meta http-equiv="Content-Type"content="text/html;charset=utf-8" />

<title>三列布局</title>

<style type="text/css">

body{margin:0;padding:0}

.left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0}

.middle{height:500px;background:#999;margin:0 310px 0 210px}

.right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0}

</style>

</head>

<body>

<div class="left">left200px</div>

<div class="middle">midwwwgwewghwefgwf8ywge8w过完户发改委发个好玩感悟if各位if误会误会共分为复古味顾问覅故事覅覆盖物if物管费公司公司附属国或覅㐎 和覅我和我以复合物if文化覅各位以符号位u和覅为hi乌尔禾为维护华盛顿覅剺 和覅为会务儿无就护卫富五为划分委会UI符号位复合物而UI毫无hi符号位复合物而UI

最低0.47元/天 解锁文章
hyp520520
关注
专栏目录
CSS 布局基础
kuyoru's blog
10-11 286
盒子模型 基础知识 页面布局的三大核心：盒子模型、浮动、定位 看透网页布局的本质：每个网页都是由许许多多的盒子组成的，网页元素都可以看作box，然后我们把内容装进盒子里面，再对盒子进行包装，设置它的摆放位置就可以了 盒子具有的基本属性：内外边距、content内容、边框boder 注意点 给盒子添加边框时，会额外的根据边框的大小增加实际盒子的大小 padding 可以理解为为盒子添加内边距 margin 可以理解为元素间的-间距- 和边框一样，padding也会影响盒子的实际大小，它并不会对内容造
DIV CSS网页布局的基础知识整理
09-27
webjx.com的CSS教程栏目中汇集了大量的CSS知识，这些知识已经非常全面了，但很多CSSer新手初来本站，依然云里雾里，现整理一些DIVCSS网页布局常用的一些基础知识，供大家学习，欢迎补充及提一些建议。CSS命名规范一...
css网页布局基础
houlala1的博客
03-06 247
一、行布局 1.行布局自适应 width：100% 2.行布局自适应限制最大宽 max-width:1000px 3.居中 3.1 margin:0 auto 3.2 posiition:absolute top:50% left:50% margin-top:-自身高度像素的一半 margin-left: -自身宽度像素的一半 4.行布局固定宽 5.行布局某部位自适应 6.行布局导航随屏幕滚动 7.两列布局固定 8.两列布局自适应 9.三列布局固定 10.三列布局自适应 ...
CSS——布局
最新发布
Fan_web的博客
08-09 1215
本文详细介绍了CSS中的布局，包括文档流、盒子模型和大小、浏览器的默认样式介绍以及补充一些轮廓和圆角的一些知识点。
网页布局基础
weixin_30339457的博客
09-18 134
1、盒子模型的第一层到第五层： border、padding+content、background-image、background-color、margin 2、清除浮动。对受到浮动影响的标签作以下操作： 1、clear: both; 2、clear: right; clear: left; 3、设置宽度width: 100%(或者固定宽度)...
CSS网页布局基础
moluchase的专栏
08-27 530
1.居中显示：margin:0 auto; .main,.footer{ width:200px; margin:0 auto} 2.限定宽度的布局 body{margin:0;padding:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:rig
CSS页面布局基础
大刀王五走江湖
10-09 608
CSS盒模型 CSS
DIV+CSS_网页布局常用基础知识.pdf
10-02
本资料主要讲解了`DIV+CSS`在网页布局中的基础知识，包括常见元素的命名规范、CSS书写规范和方法。 首先，网页的组成部分通常包括页眉（header）、主要内容（content）、容器（container）、页脚（footer）、版权...
DIV+CSS 网页布局常用基础知识DIV+CSS 网页布局常用基础知识
05-19
本资料包聚焦于`DIV+CSS`网页布局的常用基础知识，旨在帮助初学者或开发者掌握这一核心技术。 首先，我们需要了解`<div>`元素。`<div>`是HTML中的一个块级元素，它用于组织和分隔页面内容。`<div>`本身没有特定的...
DIV+CSS 网页布局常用基础知识
11-12
本教程将深入探讨`DIV+CSS`网页布局的基础知识，帮助你理解这一核心技能。 首先，我们要了解什么是`DIV`。`DIV`（Division）是HTML中的一个块级元素，它主要用于组织和分隔网页内容。通过设置不同的`CSS`样式，`DIV...
20180617-CSS-网页布局基础
cutebright00的博客
06-17 174
学习此案例需要具备的基础：1.HTML基础（div、ul、li、dl、dt、dd、img……）2.CSS基础（字体、背景、图片……）3.CSS定位、浮动（position、盒子模型、float） 板块分割原则：开发习惯；难易程度；可维护性；开发的顺序：从整体到部分；从左到右；从上到下；...
CSS 网页布局基础
wgchen
09-29 1859
CSS 网页布局基础
css基础知识(布局)
weixin_48435165的博客
07-31 151
1、元素分类 a、块级元素：标签独占行，可以设置宽度 div p h1-h6 table form b、行级（内联）元素：标签在一行内，宽高由内容决定 a span i em lable strong c、行块级元素：同时具备行级 块级元素特征，标签在一行内，可以设置宽高 img input 2、显示（display） display: none/block/inline/inline-block; /* 块元素 内联元素 行内元素 */ 居中导航 li{ /* 去掉样式前面的小圆点 */ lis
CSS网页布局
zhxzrd的博客
05-06 523
目录 头部区域 菜单导航区域 内容区域 底部区域 CSS网页布局区域有头部区域，菜单导航区域，内容区域和底部区域 头部区域 头部区域位于整个网页的顶部，一般用于设置网页的 logo和标题等等。 .header { background-color: #f28f16; padding: 40px; text-align: center; } 菜单导航区域 菜单导航区域包含一些链接，以引导用户浏览其他页面。 .topnav { overflow: hidden;
css页面布局
qq_15901351的博客
01-18 633
参考博客：https://blog.csdn.net/Ranchonono/article/details/68187642 https://www.cnblogs.com/tugenhua0707/p/5180841.html https://blog.csdn.net/qq_33834489/article/details/79111172 https://blog.csdn.net/l...
CSS简单的页面布局实例
Dash
08-03 4059
不错 很简单的例子.新手入门用： index.html DIV+CSS简单的页面布局示例 LOGO BANNER1 BANNER2 水平导航条 栏目（一） 栏目（二） 栏目（三） 栏目（
DIV+CSS网页标准布局基础知识详解
本教程旨在教授DIV+CSS网页标准布局的基础知识，帮助读者从传统的表格布局转变为网页标准布局。通过本教程，读者将学习到XHTML和CSS基础知识，包括文档类型、语言编码、HTML标签、CSS样式、CSS优先级、CSS盒模型组成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值