<!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. MemCached add命令的用法详解

    增加: add 往内存增加一条数据 命令格式: add key flag expiretime bytes\r\n data\r\n //跨行所加的一些数据 1)key: 给这个值起一个固定的名字 / ...

  2. Topology and Geometry in OpenCascade-Vertex

    Topology and Geometry in OpenCascade-Vertex eryar@163.com 摘要Abstract:本文简要介绍了几何造型中的边界表示法(BRep),并结合程序说 ...

  3. Android入门(三)Activity-生命周期与启动模式

    原文链接:http://www.orlion.ga/432/ 一.活动的生命周期 1.返回栈 Android中的活动是可以重叠的,我们每启动一个新的活动,就会覆盖在原活动之上,然后点击Back键会销毁 ...

  4. XML序列化的时候如何支持Namespace

    我曾经不止一次(当然不仅仅是我意识到这个问题)说到过,XML标准中的Namespace的设计其实是一个较为失败的设计,它有它的优点,但缺点更多. http://zzk.cnblogs.com/s?w= ...

  5. Dagger2 生成代码学习

    接上一篇文章介绍了Dagger2的初步使用,相信刚接触的人会觉得很奇怪,怎么会有很多自己没有定义的代码出现,为什么Component的创建方式是那样的.为了搞清楚这些东西,我们需要查看一下Dagger ...

  6. Cordova webapp实战开发：（6）如何写一个iOS下获取APP版本号的插件？

    上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的 学习如何获取 ...

  7. MySQL修改默认字符集

    今天朋友在做某个程序项目时,需要修改MySQL修改默认字符集,搞不好找我帮忙.百度了试了好几篇博文中的方法,最后终于成功了.但是感觉那些博文思路有点乱,所以自己总结下,希望可以帮到遇到同样问题的人. ...

  8. Struts2 源码分析——项目分析

    项目知识点分析 从上一章中我们知道了接下来我们要去了解源码的项目(struts2-showcase).而这一章将讲述我三年后在次接触struts2-showcase项目是一个什么样子的情况.我有一个工 ...

  9. 解决 DotNetCore.1.0.1-VS2015Tools.Preview2.0.3.exe 在VS2015 Update3 安装失败的问题

    今天抽空升级VS2015 Update3. 在安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.3.exe 时报错了,看了错误日志 显示: 看到我标红的两个地方,那么 ...

  10. JavaScript星形评分

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...