html DIV+CSS 页面布局

最新推荐文章于 2023-03-25 17:26:45 发布
最新推荐文章于 2023-03-25 17:26:45 发布
阅读量761 收藏 2
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangge360/article/details/11310057
版权

<!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{ font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
   margin:16px;
   text-align:left;
 }
.header {
 height: 80px;
 width: 800px;
 padding:5px;
 background-color: #6699FF;
 margin:8px 0;
}
.navigation{
 height: 40px;
 width:  800px;
 padding:5px;
 background-color:#F00;
 margin:8px 0;
}
.content {
 height: 400px;
 width: 800px;
 padding:5px;
 background-color:#FF9900;
 margin:8px 0;
}
.Scrolling
{
 height:40px;
 width:800px;
 padding:5px;
 background-color:#0F0;
 margin:8px 0;
}
.footer {
 width: 800px;
 height: 80px;
 padding:5px;
 background-color: #6699FF; 
 margin:8px 0;                              
}

.left{
 height: 400px;
    width:200px;
    background-color:#FF0000;
    float:left;
 }
.center{
  height: 400px;
  width:380px;
  background-color:#ffff00;
  float:left;
  margin:0 10px;
  }
.right{
  height: 400px;
  width:200px;
  background-color:#0FF;
  float:left;
  } 
</style> 
   
</head>

<body>
<div class="header" >头部 </div>
<div class="navigation">导航</div>
<div class="content">
<div class="left">左侧栏</div>
<div class="center">中间内容</div>
<div class="right">右侧内容</div>
</div>
<div class="Scrolling" >滚动信息栏</div>
<div class="footer" >尾部 </div>
</body>
</html>

小嘎子闯天涯
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV+CSS页面布局
qq_48315043的博客
10-14 4504
一、页面布局 1.确定网页的主体内容，在页面中水平居中显示 2.分析页面中的模块，思考各个模块的排版 3.控制页面中的各个模块到指定位置，完成页面布局 二、CSS的定位机制 1.普通流方式：有元素在html文件中的位置决定(由标签在文件中的位置来决定) 2.浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框 3.绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标) 三、浮动属性 1.浮动：元素脱离原有的标...
DIV+CSS网页布局
DesertOrchid的博客
12-01 965
CSS盒子模型 Margin-right/left/top/bottom:当两个块级元素外边距都设置的时候，相邻的外边距不是叠加关系。而是采用谁大用谁，这种现象叫做“塌陷”。 标准流和div标记 标准流：网页默认的自然排列布局方式，即CSS规定的默认块级元素和行内元素排列方式。 网页元素=块级元素+行内元素 块级元素：h1-h6、p、div ①占据一定矩形区域； ②同级兄弟块依次...
HTML+DIV+CSS
09-12
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> </head> <style> h1{ color: white; /*文字颜色*/ background-color: #ff9933; /*背景颜色*/ font-size: 30px; /*文字字号*/ font-weight: bold; /*文字粗体*/ text-align: center; /*水平居中*/ } img{ float:left; /*左浮动*/ border: 1px #9999cc dashed;/*边框类型*/ margin: 5px; /*内间距*/ } p{ font-size: 12px; text-indent: 2em; /*首行缩进*/ line-height: 1.5; /*行高*/ padding: 5px; /*外间距*/ } body{ margin: 0px; background-color: #e6e6e6; } #p1{ border-right:6px #0088000 double; } #p2{ border-right:6px #0000ff double; } </style> <body> <h1>凉城夏笑*</h1> <img src="img/oo.png" /> <p id="p1">故人、往事、记忆、流年。，每当这一串串有关时间的词语不经意出现在眼前时，心便有种酥麻麻的感觉，说不出，道不明的伤感像一阵突如其来的寒风， 卷走心底仅存的温明，空荡的心房需要汲取过往的一丝温暖才能安详度日，我知道，在每个人的心里，都有一段美好而又已经逝去的光阴。</p> <p id="p2">如果我突然消失了，你会不会发疯一样的找我，因为找不到我而难过。你会不会无数次的点击我的空间，看看我留下的痕迹。你会不会一直等我，相信我会回到你身边。</p> </body> </html>
前端开发_HTML5_布局-div+css布局
u013185175的博客
12-20 2328
div + css布局 1.引入 我们之前学习了两种排版，分别是表格布局和流式布局，那么我们发现这俩中排版都有自己的局限性，那么下面呢，我们就一起来学习一个比较重要的布局css+div布局。这一种布局方式是基于盒子模型的一种布局方式，在实际的开发中使用的比较多。 2.div+css布局 css+div布局是一种重要的布局方式，可以按照不同的排版方式实现不同效果的页面布局。 3.div+css布局 (1).简单的上中下结构布局 <style type="text/css...
div+css页面布局-html代码
weixin_34217773的博客
11-24 342
<html> <head> <title>div+css页面布局</title> <meta http-equiv="content-type" content="text/html" > <link rel="stylesheet" type="text/css" href="css/layout.css" ...
十个DIV+CSS网页布局模板
08-07
十个DIV+CSS网页布局模板 外国人制作的.我个人修改一点
DIV+CSS精美布局模板
10-14
内含50套DIV+CSS 精美布局模板，简单修改便可以变成属于自己的网页，也可以作为布局设计的参考使用。
DIV+CSS 网页布局心得
09-27
在网页设计领域，DIV+CSS布局已经成为主流，因为它提供了更加灵活、可维护性更强的页面构建方式。相比于传统的TABLE布局，DIV+CSS更符合Web标准，有助于提升网页的性能和可访问性。下面将详细探讨DIV+CSS布局的核心...
Div+Css页面布局实战
06-16
本套"Div+Css页面布局实战"课程专注于教授如何使用Div和CSS进行高效的网页布局设计，帮助开发者掌握创建独特且响应式网页的技能。 Div（Division）是HTML中的一个元素，通常用于组合其他HTML元素，以便于对网页内容...
DIV+CSS网页布局教程DIV+CSS网页布局技巧如何实现DIV+CSS网页布局.pdf
10-08
DIV+CSS工具的使用非常广泛，能够优化网站的布局和标签、做出精美的页面，并且有助于搜索引擎抓取网页内容、提高网站排名。 在网页设计过程中，如何应用DIV+CSS布局是一个非常重要的问题。首先需要构思网页的布局，...
div+css页面布局.rar
06-06
《深入理解Div+CSS页面布局》 Div+CSS布局是现代网页设计中不可或缺的一部分，它以其灵活性、可维护性和易优化的特点，成为了构建响应式和动态网页的标准技术。本资料包"div+css页面布局.rar"包含了一篇教程文档...
div+css布局与盒子
萧十一郎博客
03-24 556
div+css布局与盒子
html+css span和div 布局
lengyuefengqing的博客
07-20 992
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> div> span style="display: inline-block;float: left">标题&nbspspan> p style="padding-left:48px;
简洁 DIV+CSS布局入门之四 ( DIV+CSS常用 常用CSS DIV+CSS实例 简单DIV+CSS DIV+CSS布局分析 DIV+CSS流程)
对象本无根，类型亦无形。本来无一物，何处惹尘埃
04-29 2163
                                                   简洁 DIV+CSS布局入门之四                                                                                作者：佚名    文章来源：蓝色理想简洁 DIV+CSS布局入门之四 ( DIV+CSS常用  常用C
Div+CSS布局居中
追
03-27 553
<br />.bbs_Main{width:1000px; position:absolute; left:50%; margin-left:-500px;}<br /> <br />这个非常有效。
DIV＋CSS布局
zg0601的博客
10-17 1万+
DIV+CSS布局
利用CSS+DIV进行网页布局
最新发布
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
利用div+css实现几种经典布局的详解，样式以及代码！
热门推荐
kongkongyou的博客
01-15 5万+
一、左右两侧，左侧固定宽度200px，右侧自适应占满 html代码 css代码 *{ margin: 0px; padding: 0px; } .divBox{ height: 500px; background: yellow; } .left{ float: left; width: 200px;
HTML 第六章 CSS + DIV实现整体布局
Java软件工程师之路
04-18 2761
HTML 第七章 CSS + DIV实现局部布局 HTML 第六章 CSS + DIV实现整体布局 1、技术目标： 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2、什么是W3C标准？     W3C：World Wide Web Consortium，万维网联盟 ...
DIV+CSS网页布局设计指南
DIV+CSS美工布局是前台美工在MVC模式的前台界面设计中非常重要的一部分，本文将介绍如何通过DIV和CSS布局页面样式，设计出独特的界面布局，而不需要使用表格。 **什么是DOCTYPE** 在网页设计中，DOCTYPE是文档类型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值