使用CSS进行对页面布局

最新推荐文章于 2024-09-04 13:37:44 发布
最新推荐文章于 2024-09-04 13:37:44 发布
阅读量682 收藏 1
点赞数
分类专栏： Web程序设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JEYMING/article/details/81283303
版权

一列布局

<!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=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; 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>
</html>

两列布局

<!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=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>

三列布局


<!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=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 300px 0 200px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; position:absolute; right:0; background:#FCC;}
</style>
</head>

<body>

    <div class="left">left</div>
    <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
    <div class="right">right</div>
</body>
</html>

混合布局

<!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=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ height:50px; background:#9F9; clear:both;}
</style>
</head>

<body>
<div class="top">
    <div class="head">head</div>
</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
        <div class="r_sub_left">sub_left
        </div>
        <div class=" r_sub_right">sub_right
        </div>
    </div>
</div>
<div class="footer">footer</div>
</body>
</html>
JEYMING
关注
专栏目录
CSS设计指南---页面布局
weixin_40794404的博客
06-29 1881
CSS设计指南—页面布局 教材：CSS设计指南 实现多栏布局 三种方案： 固定宽度：固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到1100像素宽。 流动： 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。 弹性：弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了
如何用css进行网页布局,用CSS进行网页布局的教程
weixin_42423817的博客
08-04 2395
如果你是一个初学者那么学习css.html" target="_blank">css的第一步就是布局，但是实现网页布局的方法很多，很多初学者都不知道如何应用，那么现在就跟爱站小编去看看用CSS进行网页布局的教程。一、基础概念W3C标准：由万维网联盟制定的一系列标准：包括：结构化标准语言(HTML和XML)；表现标准语言(CSS)；行为标准语言(DOM和ECMAScript)。??倡导结构，样...
如何使用CSS进行网页布局（HTML/CSS）
weixin_30457065的博客
12-29 136
什么叫做布局？ 又称为版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。 题目：假设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应 1、浮动布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
【Web前端】深入CSS 布局
最新发布
一条晒干的咸鱼的博客
09-04 2139
CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
CSS页面布局（超详解）
热门推荐
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
CSS的使用（四）——网页布局方式
L_sheep_的博客
07-08 1952
网页的布局也就是如何对网页的元素进行排版。
css页面布局
qq_15901351的博客
01-18 647
参考博客：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格式化页面布局示例(附图)
12-13
源代码： 复制代码代码如下:<!... <head> <title> New Document </title>...meta name=”Generator” content=”EditPlus”>...meta name=”Author” content=””>...meta name=”
CSS网页布局使用表格可以吗？
09-27
首先，我们需要明确CSS网页布局的目的。CSS布局的目的是为了创建清晰、结构良好的文档，通过使用诸如`<div>`、`<header>`、`<footer>`、`<section>`等语义化的HTML标签，将内容和样式分开管理。这样可以提高代码的...
形考任务五 使用 元素以及CSS样式表对下面的内容进行的布局设计.zip
11-24
通过给`<div>`添加类名或ID，我们可以对其进行针对性的样式设置。 2. **CSS样式表简介** CSS（Cascading Style Sheets）是用于控制网页外观和布局的样式语言。它可以改变字体、颜色、间距、布局和更多视觉效果。在...
CSS教程:使用ul进行网页的多列布局
12-09
我们在布局导航时经常会使用到一个方法，那就是使用列表来进行布局，而导航可以形容为多列式的布局，既然如此，那么我们也就可以使用来进行页面的多列布局。 这是一个固定宽度的布局，也就是说流动性不强，流动性的...
如何利用css进行网页布局
dgf5765的博客
01-23 179
一、单列布局（类似于搜狐网站） 如： 代码为： 二、两列布局 1.固定宽度 代码为： 2.自适应 代码为： 三、三列布局 代码为： 四、混合布局 就是在前面的基础上，在进行划分块 如： 代码为： 转载于:https://www.cnblogs.com/pmlyc/p/6344684.html...
如何用CSS进行网页布局
sarycai的博客
12-21 454
网页布局 一列布局 用法 清除默认样式 二列布局 三列布局 混合布局网页布局1：网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 3：页面为：头部，主体部分，底部。 分栏又称为分列：一
CSS网页布局
weixin_45774350的博客
10-26 244
本文作为个人笔记，内容大多从网上查阅 标准文档流 提到布局就不得不提一提标准文档流了： 文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 标准流的微观现像： 1.空白折叠现象 多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。 2.高矮不齐，底边对齐 文字还有图片大小
【CSS页面布局】
tyemqx005的博客
01-28 432
表格作用：给一堆数据添加表格语义 table标签代表整个表格 tr标签代表表格中的一行 td标签代表一行中的一个单元格 th用在表头居多，内部文本居中粗体 注意：表格标签有一个border属性，决定边框宽度，默认为0，所以看不到。 组合标签，一起出现或都不出现 宽度高度属性 table和 td标签可以使用 给td标签设置宽高属性，会修改当前单元格的宽高，不会影响整个表格的宽高，不建议使用 水平对齐和垂直对齐属性 水平可以给三个标签都使用 垂直不能给table使用 水平方向al...
css 的页面布局
健康平安的活着的专栏
05-23 1545
一 页面布局 1.1 页面布局 1 <div>块元素在没有任何布局属性作用时，默认排列方式是换行排列。 2.<span>: 内联元素的默认排列：在没有任何布局属性作用时，默认排列方式是在同行排列。 3.浮动元素：即float取3个值： auto、left、right，使用浮动之后，原本需要换行显示的块元素，实现了并排列的效果。 4.在css中，可以用text-decoration属性来控制文字的修饰样式。 5.在css中，定义页面中内容显示方式，display属性和vis
使用Div+CSS进行网页布局设计入门
在这篇DivCSS布局入门教程中，我们将探讨如何使用Div和CSS来创建有效的网页布局。首先，了解网页制作中的基本术语至关重要，如CSS（层叠样式表）、HTML（超文本标记语言）、DHTML（动态HTML）和XHTML（可扩展超文本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值