单行一列

以下是引用片段:

body { margin: 0px; padding: 0px; text-align: center; }

#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

两行一列

以下是引用片段:

body { margin: 0px; padding: 0px; text-align: center;}

#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

三行一列

以下是引用片段:

body { margin: 0px; padding: 0px; text-align: center; }

#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

单行两列

以下是引用片段:

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }

#bodycenter #dv1 {float: left;width: 280px;}

#bodycenter #dv2 {float: right;width: 410px;}

两行两列

以下是引用片段:

#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}

#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

#bodycenter #dv1 { float: left; width: 280px;}

#bodycenter #dv2 { float: right;width: 410px;}

三行两列

以下是引用片段:

#header{ width: 700px;margin-right: auto; margin-left: auto; }

#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }

#bodycenter #dv1 { float: left;width: 280px;}

#bodycenter #dv2 { float: right; width: 410px;}

#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

单行三列

绝对定位

以下是引用片段:

#left { position: absolute; top: 0px; left: 0px; width: 120px; }

#middle {margin: 20px 190px 20px 190px; }

#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位一

xhtml:

以下是引用片段:

这里是第一列
这里是第二列

这里是第三列

CSS:

以下是引用片段:

#wrap{ width:100%; height:auto;}

#column{ float:left; width:60%;}

#column1{ float:left; width:30%;}

#column2{ float:right; width:30%;}

#column3{ float:right; width:40%;}

.clear{ clear:both;}

float定位二

xhtml:

以下是引用片段:

This is the main content.

This is the left sidebar.

This is the right sidebar.

CSS:

以下是引用片段:

body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}

.column {position: relative;float: left;}

#center {width: 100%;}

#left {width: 180px; right: 240px;margin-left: -100%;}

#right {width: 130px;margin-right: -100%;}

两行三列

xhtml:以下是引用片段:

这里是顶行
这里是第一列
这里是第二列

这里是第三列

CSS:

以下是引用片段:

#header{width:100%; height:auto;}

#wrap{ width:100%; height:auto;}

#column{ float:left; width:60%;}

#column1{ float:left; width:30%;}

#column2{ float:right; width:30%;}

#column3{ float:right; width:40%;}

.clear{ clear:both;}

三行三列

xhtml:

以下是引用片段:

这里是顶行
这里是第一列
这里是第二列

这里是第三列

这里是底部一行

CSS:

以下是引用片段:

#header{width:100%; height:auto;}

#wrap{ width:100%; height:auto;}

#column{ float:left; width:60%;}

#column1{ float:left; width:30%;}

#column2{ float:right; width:30%;}

#column3{ float:right; width:40%;}

.clear{ clear:both;}

#footer{width:100%; height:auto;}

css div 段落,一些常用的DIV+CSS的网页布局所用的代码段相关推荐

  1. HTML+CSS第十课:常见的3种网页布局方式:表格布局、DIV+CSS布局、框架布局

    知识点:网页布局的方式 1.网页布局 常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...

  2. Html5 css文本属性,html5常用文本标签、CSS文本外观属性,你了解多少?

    一.HTML5中常用的文本标签 1.标题标签 (1)定义及用法: HTML中,定义了6级标题,分别为h1. h2.h3.h4. h5. h6,每级标题的字体大小依次递减,1级标题字号最大,6级标题字号 ...

  3. css --- 使用scss生成常用的基本css样式

    "工具样式"的概念和 SASS(SCSS) 在webpack中使用sass 安装sass和sass-loader $ npm i sass sass-loader 由于使用了脚手架 ...

  4. java css网页布局实例_java代码例子

    JAVA 类名.方法名(这里面写的是什么)能不能写个代要是类名直接调用的方法,那这个方法就是静态的(static)方法,是不用new出新对象实例就可以直接调用的方法.看下面例子: class A{ p ...

  5. html中的分离式布局,DIV+CSS技术在网页布局中的应用

    摘 要 信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...

  6. CSS设置段落的垂直对齐

    CSS设置段落的垂直对齐 CSS设置段落的垂直对齐方式 CSS中通过属性vertical-align来设置段落的垂直对齐方式. 注意,对于文字本身而言,该属性对于块级元素并不起作用,例如<p&g ...

  7. 前端学习笔记之CSS网页布局

    CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...

  8. Web(七)CSS页面布局-网页布局页面的制作

    第1关:网页布局的结构设计 编程要求 根据下面的结构草图,在右侧编辑器的Begin--End区域补充标签及对应的属性值代码. 具体要求 为布局草图中的红色区域添加div标签,并按图中要求设置其id属性 ...

  9. DIV+CSS网页布局常用的一些基础知识

    CSS命名规范 一.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二.常 ...

最新文章

  1. [js]可折叠的框架效果
  2. 如何扩大控件的触控响应区域
  3. StringBuffer
  4. 未定义标识符 stringc/c++(20)_Python 标识符命名规则
  5. 读写锁的由奢入俭“易”
  6. 音视频技术开发周刊 | 193
  7. SAP UI渲染模式:客户端渲染 VS 服务器端渲染
  8. tda7294参数引脚功能_电容在电路中的几种功能
  9. Codeforces 1091E New Year and the Acquaintance Estimation Erdős–Gallai定理
  10. 又找到一个免费的ASP.net2.0免费空间,支持MS Sql Server Express2005 及Ftp
  11. PLSQL自动输入select * from|附件在cnblogs文件|
  12. 单片机数码管动态显示时钟C语言,如何利用单片机数码管程序模拟是时钟显示时间?...
  13. 浙江大学竺可桢学院计算机专业好就业吗,浙大竺可桢学院有多厉害?看了这些数据你就知道了...
  14. 【程序人生】“阶段总结“-幕天席地
  15. 盛世昊通董车长2.0“后“积薄发,点爆汽车后市场
  16. 绘制cox生存分析结果的森林图
  17. Windows 11 内置原生壁纸下载!
  18. 下载-MS SQL Server 2005(大全版)含开发人员版、企业版、标准版
  19. 提升GraphicsMagick图片压缩软件性能使用心得
  20. uva 714 Copying Books(二分法求最大值最小化)

热门文章

  1. html5e插件,前端vscode必备插件,给你更好的编程体验!
  2. java教程分支_Java小白入门教程(5)——分支语句
  3. 文化传媒有限公司谈中小企业是否需要VI设计
  4. windows服务器java项目cpu占用较高原因分析
  5. 基于TFIDF的文档表示法
  6. 主板常见故障处理全攻略
  7. 计算机的发展历程目前为止共经历了四代,计算机的主要元件发展经历了哪四代变化?...
  8. ctfshow吃瓜杯之web(除魔女)详解
  9. png图片在unity中Default模式下透明区域显示白底的问题
  10. CPU 缓存用途及原理详细介绍