html页面布局 第8节

时间：2021-08-21 03:28:35

页面布局：

<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节

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

  1. 如何在ASP&period;NET Web站点中统一页面布局&lbrack;Creating a Consistent Layout in ASP&period;NET Web Pages&lpar;Razor&rpar; Sites&rsqb;

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

  2. 无废话ExtJs 入门教程十六&lbrack;页面布局：Layout&rsqb;

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

  3. &period;Net程序猿乐Android开发---&lpar;4&rpar;注册页面布局

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

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

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

  5. HTML5&sol;CSS3 第三章页面布局

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

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

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

  7. Xamarin&plus;Prism开发详解五：页面布局基础知识

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

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

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

  9. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

随机推荐

  1. Learning the standard of C&plus;&plus;11

    It's a very useful website of en.cppreference.com. It lists a huge number of information about the l ...

  2. Hadoop NameNode is not formatted&period;

    2014-08-26 20:27:22,712 WARN org.apache.hadoop.hdfs.server.namenode.FSNamesystem: Encountered except ...

  3. ios 基础数据类型

    1:NSString http://blog.csdn.net/likendsl/article/details/7417878 http://xys289187120.blog.51cto.com/ ...

  4. Jquery Mobile笔记之一

    jQuery Mobile 在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中: 从 CDN 中加载 jQuery Mobile (推荐) ...

  5. python 环境安装和卸载1

    同事换了新机器,系统从win7变为了win10,因此需要重新安装python环境啦!不废话,直奔主题. A 安装 一.进入python官网  www.python.org 进入downloads-&g ...

  6. 围绕Buganizer的产品流程

    做技术的一定知道缺陷跟踪系统(bug系统),更不用说做测试的了,不过普遍都认为这系统是用来记录bug的,其实在google内部,这套系统是产品/项目围绕的核心.Google Buganizer扩展了类 ...

  7. Codeforces 950 D&period; A Leapfrog in the Array

    http://codeforces.com/contest/950/problem/D 前n/2个格子的奇数下标的数没有参与移动 候n/2个格子的奇数下标的数一定是一路移向偶数下标移 所以还原数的初始 ...

  8. java Future模式的使用

    一.Future模式的使用. Future模式简述 传统单线程环境下,调用函数是同步的,必须等待程序返回结果后,才可进行其他处理. Futrue模式下,调用方式改为异步. Futrue模式的核心在于: ...

  9. day8--socket网络编程进阶

    socket:socket就是实现服务器和客户端数据的交换,服务器端接收并发送数据,客户端发送并接收数据,并且需要注意的是,在python3中,socket值接收字节.因为客户端在发送连接给服务器的时 ...

  10. Apache commons（Java常用工具包）简介

    Apache Commons是一个非常有用的工具包,解决各种实际的通用问题,下面是一个简述表,详细信息访问http://jakarta.apache.org/commons/index.html Be ...

相关文章