页面布局：

<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. 微软Build2014大会干货总结-2

    继昨天微软在Build2014大会上宣布一系列重磅举措后,第二天的主题是微软云(Microsoft Azure)及开发者战略,CSDN记者继续从旧金山现场给您发来一线报道. 第二天的主角是新上任的微软 ...

  2. Python安装、配置

    1.Python简介:Python在Linux.windows.Mac os等操作系统下都有相应的版本,不管在什么操作系统下,它都能够正常工作.除非使用平台相关功能,或特定平台的程序库,否则可以跨平台 ...

  3. xp系统下网络打印机怎么设置

    亲测,可行 打印机共享可以有效节约办公资源,提高办公效率.可是还有很多朋友不知道怎么设置,我们这里讲一下网络打印机的设置方法. 1.我们点开桌面左下角的开始菜单,选择“打印机和传真” 2.我们右击某个 ...

  4. VellCar（barracuda buggy）

    这是我的新目标,不过是外国人设计的,youtube上好多相关视频,只是在中国被墙了,FQ能看到一个不一样的世界,附:FQ教程.国外好多玩车的都是选择这辆车,因为它结构紧凑,制作相对简单,但越野性能强悍 ...

  5. Nyoj42 一笔画问题 （欧拉道路）

    http://acm.nyist.net/JudgeOnline/problem.php?pid=42题目链接 #include <cstdio> #include <cstring ...

  6. Excel中VBA 连接 数据库 方法- 摘自网络

    Sub GetData() Dim strConn As String, strSQL As String Dim conn As ADODB.Connection Dim ds As ADODB.R ...

  7. 【荐】Redis学习资料汇总

    Redis学习手册(目录) - Stephen_Liu - 博客园 Redis 命令参考 — Redis 命令参考 Redis_php 学习 - 简单--生活 - 博客园

  8. C++/C#/java开发支持求解

    本人大一学C语言,大二学VB,大三学VC,毕业后工作前两年用C++,接着两年用C#,最近几个月Android开发用Java. 以下本人总结以下,有些疑惑希望大师帮忙解答. 1. C语言,精简,灵活,适 ...

  9. struts总结

    struts总结 1.为什么学习Struts框架 a.Struts框架好处 struts2是主流的开发技术,大多数公司在使用,struts把相关的servlet组件的各种操作都进行了相应的封装,这样就 ...

  10. Dom4j写XML

    package com; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.I ...