页面布局:
<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节的更多相关文章
-
如何在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 ...
-
无废话ExtJs 入门教程十六[页面布局:Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
-
.Net程序猿乐Android开发---(4)注册页面布局
接下来我们介绍的登陆页面布局,在本节中,我们看一下注册页面布局,页面布局大同小异,来一起熟悉下基本控件的使用方法. 效果图: 1.加入注冊页面 右键选中layout目录,加入注冊页面.例如以下图 点击 ...
-
Redesign Your App for iOS 7 之 页面布局【转】
前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...
-
HTML5/CSS3 第三章页面布局
页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...
-
前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
-
Xamarin+Prism开发详解五:页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
-
CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
-
CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
随机推荐
-
Learning the standard of C++11
It's a very useful website of en.cppreference.com. It lists a huge number of information about the l ...
-
Hadoop NameNode is not formatted.
2014-08-26 20:27:22,712 WARN org.apache.hadoop.hdfs.server.namenode.FSNamesystem: Encountered except ...
-
ios 基础数据类型
1:NSString http://blog.csdn.net/likendsl/article/details/7417878 http://xys289187120.blog.51cto.com/ ...
-
Jquery Mobile笔记之一
jQuery Mobile 在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中: 从 CDN 中加载 jQuery Mobile (推荐) ...
-
python 环境安装和卸载1
同事换了新机器,系统从win7变为了win10,因此需要重新安装python环境啦!不废话,直奔主题. A 安装 一.进入python官网 www.python.org 进入downloads-&g ...
-
围绕Buganizer的产品流程
做技术的一定知道缺陷跟踪系统(bug系统),更不用说做测试的了,不过普遍都认为这系统是用来记录bug的,其实在google内部,这套系统是产品/项目围绕的核心.Google Buganizer扩展了类 ...
-
Codeforces 950 D. A Leapfrog in the Array
http://codeforces.com/contest/950/problem/D 前n/2个格子的奇数下标的数没有参与移动 候n/2个格子的奇数下标的数一定是一路移向偶数下标移 所以还原数的初始 ...
-
java Future模式的使用
一.Future模式的使用. Future模式简述 传统单线程环境下,调用函数是同步的,必须等待程序返回结果后,才可进行其他处理. Futrue模式下,调用方式改为异步. Futrue模式的核心在于: ...
-
day8--socket网络编程进阶
socket:socket就是实现服务器和客户端数据的交换,服务器端接收并发送数据,客户端发送并接收数据,并且需要注意的是,在python3中,socket值接收字节.因为客户端在发送连接给服务器的时 ...
-
Apache commons(Java常用工具包)简介
Apache Commons是一个非常有用的工具包,解决各种实际的通用问题,下面是一个简述表,详细信息访问http://jakarta.apache.org/commons/index.html Be ...