页面布局：

<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. Java笔记(二十六)……IO流上 字节流与字符流

    概述 IO流用来处理设备之间的数据传输 Java对数据的操作时通过流的方式 Java用于操作流的对象都在IO包中 流按操作的数据分为:字节流和字符流 流按流向不同分为:输入流和输出流 IO流常用基类 ...

  2. 关于Spring的Controller及Struts的Action的多线程的注意

    struts是线程安全,并不是指多线程,而是指单态,当多个用户访问一个请求的时候,服务器内存中只有一个与之对应的action类对象,execute方法加上了同步关键字,如果你在action里加上一个全 ...

  3. editpuls查找替换通配符

    1  \t    Tab character.         tab符号 2  \n    New line.              新的一行(换行符) 3  .     Matches any ...

  4. linux下编译安卓ffmpeg

    本次编译属于2013年6月项目的一部分,重新修改使用. 为统一工程版本 ffmpeg版本为1.2.1 本次的目录结构为 工程目录/jni/Android.mk 工程目录/jni/Application ...

  5. 开始使用storm

     开始使用storm 本章将讲述如何安装.部署.启动和停止 Storm 集群. Storm 的安装比较简单,但在安装 Storm 之前需要做好充足的准备,本章将介绍安装的整个流程.在官网上可以下载到S ...

  6. [置顶] 斗地主算法的设计与实现--项目介绍&如何定义和构造一张牌

    大学期间,我在别人的基础上,写了一个简易的斗地主程序. 主要实现了面向对象设计,洗牌.发牌.判断牌型.比较牌的大小.游戏规则等算法. 通过这个斗地主小项目的练习,提高了我的面向对象设计能力,加深了对算 ...

  7. solrj6.2异常--Expected mime type application/octet-stream but got text/html.

    org.apache.solr.client.solrj.impl.HttpSolrClient$RemoteSolrException: Error from server at http://19 ...

  8. 算法 - 求和为n的连续正整数序列（C++）

    //************************************************************************************************** ...

  9. 【Linq递归查找系列】

    Linq递归查找: public IEnumerable<MenuInfo> GetTree(int id, IEnumerable<MenuInfo> lst) { var ...

  10. apache配置directoryindex

    为了让程序自动执行目录下的某个文件,可以配置虚拟主机中的directoryindex 如: <VirtualHost *:80>    DocumentRoot "D:/var/ ...