<!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. 【Discuz】云平台服务：出了点小错，由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常

    提示信息 出了点小错,由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常 版本X3.2.20160601 解决方案 Step1.修改云平台开通状态为未开通状态 Step2.访问 ...

  2. uva oj 567 - Risk(Floyd算法)

    /* 一张有20个顶点的图上. 依次输入每个点与哪些点直接相连. 并且多次询问两点间,最短需要经过几条路才能从一点到达另一点. bfs 水过 */ #include<iostream> # ...

  3. nodejs生成多层目录和生成文件的通用方法

    /** *生成多层目录 * @param dir 多层目录 * @param split 分隔符,ex:'/' 对应的目录地址:'2015/10/10' * @param mode 目录权限(读写权限 ...

  4. kqueue用法简介

    1.什么是kqueue和IO复用 kueue是在UNIX上比较高效的IO复用技术. 所谓的IO复用,就是同时等待多个文件描述符就绪,以系统调用的形式提供.如果所有文件描述符都没有就绪的话,该系统调用阻 ...

  5. 简单登录实例Login

    本人菜鸟~~学习过程中~~请求老大们指导!!谢谢!!! 从基础学习,坚持下去,每天进步一点点!! 1.首先要实现登录,通俗点总得有个登陆的样子吧,也就是人要有个脸面嘛!说做就做!自己属于菜鸟级别的,所 ...

  6. 使用git提交中删除idea

    https://segmentfault.com/q/1010000000720031 http://www.tuicool.com/articles/a6Nf63F 先有项目,然后分享至github ...

  7. 绘制SVG内容到Canvas的HTML5应用

    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

  8. C#基础02

    学习"传智播客视频基础"做的课堂笔记,您有幸读到,若其中有错误部分,请您务必指明.另外请给出您的宝贵建议,谢谢. **************基础知识************ 1: ...

  9. 解决MVC EF Code First错误:Model compatibility cannot be checked because the EdmMetadata type was not included in the model.

    Model compatibility cannot be checked because the EdmMetadata type was not included in the model. En ...

  10. Mysql高并发优化

    一.数据库结构的设计 1.数据行的长度不要超过8020字节,如果超过这个长度的话在物理页中这条数据会占用两行从而造成存储碎片,降低查询效率. 2.能够用数字类型的字段尽量选择数字类型而不用字符串类型的 ...