页面布局：

<html>

    <head>

        <title>页面布局</title>

        <style type="text/css">

            body{

                margin:0px;

                padding:0px;

                text-align:center;

            }

            .content{

                background-color:pink;

                width:85%;

                height:100%;

            }

            .top{

                width:99%;

                height:100px;

                font-size:25px;

                font-weight:bold;

                color:white;

                background-color:#CCFF66;

            }

            .left{

                width:30%;

                height:450px;

                font-size:25px;

                font-weight:bold;

                color:white;

                background-color:#FFFF99;

                float:left;

            }

            .middle{

                width:40%;

                height:450px;

                font-size:25px;

                font-weight:bold;

                color:white;

                backgrount-color:#00FFFF;

                float:left;

            }

            .right{

                width:29%;

                height:450px;

                font-size:25px;

                font-weight:bold;

                color:white;

                background-color:#CCCC99;

                float:left;

            }

            .foot{

                width:99%;

                height:40px;

                font-size:25px;

                font-weight:bold;

                color:white;

                background-color:#7CFC00;

                float:left;

            }

        </style>

    <body>

    <div class= "content">

        <div class="top">top<img src="#"><a href="www.baidu.com">baidu</a></div>

        <div class="left">left</div>

        <div class="middle">middle</div>

        <div class="right">right</div>

        <div class="foot">foot</div>

    </div>

    </body>

</html>

结果显示：

html页面布局 第8节的更多相关文章

  1. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  2. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  3. .Net程序猿乐Android开发---(4)注册页面布局

    接下来我们介绍的登陆页面布局,在本节中,我们看一下注册页面布局,页面布局大同小异,来一起熟悉下基本控件的使用方法. 效果图: 1.加入注冊页面 右键选中layout目录,加入注冊页面.例如以下图 点击 ...

  4. Redesign Your App for iOS 7 之 页面布局【转】

    前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...

  5. HTML5/CSS3 第三章页面布局

    页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...

  6. CSS入门指南-4：页面布局

    这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...

  7. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  8. Xamarin+Prism开发详解五：页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  9. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

随机推荐

  1. 待修改 nyoj 412 又是一个遗留问题

    测试的数据都正确啊,跟别人正确代码也对比了一下,一直wrong ans,这道题是搞不定了,思路是这样的,一个int 的数, 例如 一个数的二进制是1001100,那么大于这个数的最小的有相同个数1的数 ...

  2. gridview合并单元格

    记录用,以前写过,忘记了转自:http://marss.co.ua/MergingCellsInGridView.aspx public class GridDecorator { public st ...

  3. weekend110（Hadoop）的 第一天笔记

    (2015年1月10日) 课程目录 01-hadoop职位需求状况 02-hadoop课程安排 03-hadoop应用场景 04-hadoop对海量数据处理的解决思路 05-hadoop版本选择和伪分 ...

  4. Redis以及Redis的php扩展安装无错版

    安装Redis 下载最新的 官网:http://redis.io/  或者  http://code.google.com/p/redis/downloads/list 第一步:下载安装编译 #wge ...

  5. url 编码方法

    这个方法用于把 字符串转换成url 的编码 第一个参数是 字符串,第二个参数是 指定的编码(UTF-8 ,GBK, gbk2312...) private string UrlEncode(strin ...

  6. poj3101

    不难,结果: 程序: import java.math.*; import java.util.*; public class Main { public static void main(Strin ...

  7. [一]java环境变量的配置

    1.JAVA_HOME(新建):D:\jdk1.6 2.classpath(新建): .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar; 3.path(新增):% ...

  8. 仿写thinkphp的I方法

    自己定义一个方法仿写thinkphp的I 方法 <?php function I($key="",$default='',$function="") { ...

  9. android 控件花屏问题

    发现自己的手机上某个界面出现了花屏,某些控件背景被拉伸过多遮住了其他控件,很难看.这种现象高概率出现,分析了下发现:一旦发生这种现象,必然 会打印下面这种log,google了下,这种log应该是硬件 ...

  10. 自己动手写缓存Version1

    实现一个最简单最主要的缓存系统. using System; using System.Data; using System.Configuration; using System.Web; usin ...