页面布局：

<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. 如何在编译Xcode-Plugin工程的时候增加Cocoapods依赖

    关于如何在编译Xcode-Plugin工程的时候增加Cocoapods依赖 以及在Mac App上使用Cocoapods的时候遇到Library not found for -lPods时的解决办法 ...

  2. 【Java基础】final关键字总结

    Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使 ...

  3. HW5.10

    public class Solution { public static void main(String[] args) { int count = 0; for(int i = 1; i < ...

  4. 为静态Checkbox动态地添加checked属性

    1.ASP.NET HTML Code: 嵌套在repeater中 " ? "checked" : "" %> /> *** 关键代码: ...

  5. puppet案例

    实例一.文件分发描述:通过puppet服务端可以向被管理机(客户端)上推送文件,方法是使用file类型的source属性 第一步:#vi /etc/puppet/fileserver.conf  1  ...

  6. 利用ACE 自己实现的线程池

    1: 线程池组件的配置文件: [log] ;DEBUG = 0 ;INFO = 1 ;WARN = 2 ;FAULT = 3 level=0 ;SCREENOUT = 0 ;FILEOUT = 1 ; ...

  7. Java- 类型转换

    有两个方法: Integer.valueOf 和 String.valueOf 注: 字串转成 Double, Float, Long 的方法大同小异.

  8. C#如何检测一个字符串是不是合法的URL

    C#如何检测一个字符串是不是合法的URL using System.Text.RegularExpressions;    /// <summary>         /// 检测串值是否 ...

  9. contentProvider模板

    package com.example.qunzheng.todolist.provider; import android.content.ContentProvider; import andro ...

  10. [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript

    ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache ...