<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

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

     <title>网页布局练习</title>

     <link href="../EX_Asp_Net/css/div.css" rel="stylesheet" />

 </head>

 <body>

     <h1 align="center">利用div和css对页面的布局进行调整</h1><hr />

     <div class="d1">

         <h3>窗口1</h3>

     </div>

     <div class="d2"><h3>窗口2</h3></div>

     <div class="d3"><h3>窗口3</h3></div>

 </body>

 </html>

css代码：

 bod {

     margin:100%;

     padding:100%;

 }

 .d1{

     width:200px;

     height:600px;

     background-color:red;

     margin-left:20px;

     margin-top:20px;

     position:absolute;

 }

 .d2{

     width:800px;

     height:150px;

     background-color:greenyellow;

     position:absolute;

     left:235px;

     margin-top:20px;

 }

 .d3{

     width:800px;

     height:420px;

     position:absolute;

     left:235px;

     background-color:#19a1f8 ;

     margin-top:200px;

 }

用div和css样式控制页面布局的更多相关文章

  1. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  2. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

  3. php部分：网页中报表的打印，并用CSS样式控制打印的部分；

    网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...

  4. css 样式控制文本过长实现省略号

    css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...

  5. css书写规范 & 页面布局规范 &常用案例经验总结

    CSS 属性书写顺序(重点) 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 displa ...

  6. css样式控制元素固定在底部

    回复固定在底部:css样式用到了 box-sizing属性 box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webk ...

  7. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【html+css】关于页面布局中遇到的问题记录

    关于行内元素: 行内元素设置width无效, height无效(可以设置line-height), margin上下无效,padding上下无效,margin和padding可设置左右.   text ...

  9. css样式控制 字符个数，多余的字用省略号代替

    大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多多指教 <div class="show">大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多 ...

随机推荐

  1. ssh(sturts2_spring_hibernate) 框架搭建之JPA代替hibernate

    一.JPA用来替代hibernate ⒈JPA的全称是JAVA Persistence API.指的是JPA通过注解或者是XML描述对象—关系表的映射关系,并且将运行的实体对象持久化数据库中. ⒉JP ...

  2. javascript中数组的22种方法

    × 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结 前面的话 数组总共有22种方法 ...

  3. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  4. IP，路由，交换基础培训记录

    IP 掩码  子网划分 vlan划分(有助于减少广播压力) vlan之间互通通过交换机打通. 路由,静态路由,动态路由(学习到的),路由表,下一跳,网络位长的优先级高. 交换机,hub集线器. hub ...

  5. Elasticsearch嵌套聚合

    Elasticserch在新版本中支持聚合操作,而聚合操作也可以嵌套使用,方法如下: curl -XGET 10.4.44.19:9200/test/test/_search?pretty -d ' ...

  6. iOS Swift编程语言

    Swift,苹果于2014年WWDC(苹果开发者大会)发布的新开发语言,可与Objective-C*共同运行于Mac OS和iOS平台,用于搭建基于苹果平台的应用程序. Swift是一款易学易用的编程 ...

  7. 转[开发环境配置]在Ubuntu下配置舒服的Python开发环境

    在Ubuntu下配置舒服的Python开发环境 Ubuntu 提供了一个良好的 Python 开发环境,但如果想使我们的开发效率最大化,还需要进行很多定制化的安装和配置.下面的是我们团队开发人员推荐的 ...

  8. 使用Python将HTML转成PDF

    主要使用的是wkhtmltopdf的Python封装--pdfkit 安装 1. Install python-pdfkit: $ pip install pdfkit 2. Install wkht ...

  9. WPF系列:样式

    一般简单的样式我们可以直接写在控件中 <Button Canvas.Left="20" Canvas.Top="30" Width="100&q ...

  10. setTimeout，setInterval，process.nextTick，setImmediate in Nodejs

    Nodejs的特点是事件驱动,异步I/O产生的高并发,产生此特点的引擎是事件循环,事件被分门别类地归到对应的事件观察者上,比如idle观察者,定时器观察者,I/O观察者等等,事件循环每次循环称为Tic ...