css div布局示例1（head-main-footer）
很简单的文档流布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
}
/*头部开始*/
#head{
height:200px;
background-color: pink;
}
#top{
height:50px;
background-color: blue; }
#logo{
height:100px;
background-color: green;
}
#menu{
height:50px;
background-color: yellow;
}
#top_content_left{
width:100px;
height:100%;
float:left;
background-color: red;
}
#top_content_right{
width:100px;
height:100%;
float:right;
background-color: red;
}
#logo_content_left{
height:100%;
background-color: pink;
width:250px;
float:left;
}
#logo_content_right{
height:100%;
background-color: pink;
width:400px;
margin-left: 300px;
}
/*头部结束*/ /* 内容开始 */
#main{
height:700px;
background-color: gray;
}
#main_content_flash{
height:200px;
width:100%;
background-color: green;
}
#main_content_iframe{
height:500px;
width:100%;
background-color: yellow;
}
/* 内容结束 */ /* 脚部开始 */
#footer{
height:100px;
background-color: black;
}
#footer_content_link{
height:20px;
width:100px;
background-color: red;
}
#footer_content_links{
height:30px;
width:800px;
background-color: blue;
}
#footer_content_powered{
height:50px;
width:100px;
margin: 0 auto;
background-color: pink;
} /* 脚部结束 */
.auto{
width:1000px;
margin:0 auto;
height:100%;
} </style>
</head>
<body>
<!--头部-->
<div id="head">
<div id="top">
<div id="top_content" class="auto"> <div id="top_content_left">网站简要说明</div>
<div id="top_content_right">微信微博关注</div> </div>
</div>
<div id="logo">
<div id="logo_content" class="auto">
<div id="logo_content_left">网站logo</div>
<div id="logo_content_right">搜索框</div>
</div> </div>
<div id="menu">
<div id="menu_content" class="auto"></div>
</div>
</div>
<!--头部--> <!--内容区-->
<div id="main">
<div id="main_content" class="auto">
<div id="main_content_flash">flash或轮番图</div>
<div id="main_content_iframe">商品iframe窗口，图片库的方式来完成剩余的工作即可</div>
</div>
</div>
<!--内容区--> <!--脚部-->
<div id="footer">
<div id="footer_content" class="auto">
<div id="footer_content_link">友情链接</div>
<div id="footer_content_links">友情链接们</div>
<div id="footer_content_powered" >版权+ICP 备案</div> </div>
</div>
<!--脚部-->
</body>
</html>
css div布局示例1（head-main-footer）的更多相关文章
- css div布局示例2（head-main-footer
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- CSS+DIV布局初练—DIV元素必须成对出现？
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- 网站实战 从效果图开始CSS+DIV 布局华为网站
经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. ...
- CSS：CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
- 关于css+div布局的疑问 2017-03-19
第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...
- 回答： 2017-03-19的关于css+div布局的疑问 2017-04-05
原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...
- 十天学会DIV+CSS(DIV布局)
一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...
- CSS+DIV布局应用（2015年06月10日）
Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...
随机推荐
- 客户端负载均衡框架：Spring Cloud Ribbon
最近在学习Spring Cloud的知识,现将客户端负载均衡框架 Spring Cloud Ribbon 的相关知识笔记整理如下.[采用 oneNote格式排版]
- 嵊州D2T4 十七个中毒的英国人 poisoning
嵊州D2T4 十七个中毒的英国人 poisoning 利内罗女士准备来到意大利进行修行. 意大利由 n 个城市和 m 条道路构成,道路是双向的. 到达第 i 个城市时,她可以取得该城市的全部信仰,并获 ...
- 集合使用 Iterator 删除元素
针对常见的数据集合,比如 ArrayList 列表,对其进行遍历,删除其中符合条件的某个元素,使用 iterator 迭代器进行迭代,代码如下: public class PracticeContro ...
- 5G PDCCH 协议
For downlink, a maximum of 16 HARQ processes per cell is supported by the UE. The number of processe ...
- 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记（6.5-加-8.2-加-8.3）End-to-end_Data_Protection
6.5 End-to-end Protection Information 端到端保护信息 包含数据转存的命令可以使用端到端数据保护.在这些命令内部[位于Command Dword 12 的 [29: ...
- 使用javacv 截取视频指定帧节
个人博客 地址:https://www.wenhaofan.com/article/20190407105818 引入依赖 <dependency> <groupId>org. ...
- 0级搭建类001-RedHat Enterprise Linux 8 安装(RHEL 8) 公开
项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...
- C# LINQ学习笔记一：走进LINQ的世界
本笔记摘抄自:https://www.cnblogs.com/liqingwen/p/5832322.html,记录一下学习过程以备后续查用. LINQ 简介: 语言集成查询(LINQ)是Vi ...
- Bootstrap资料
Bootstrap手册 : https://www.jqhtml.com/bootstraps-syntaxhigh/index.html 中文文档 :https://v3.bootcss.com/ ...
- 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记（5.21.1.10-加-6.4）Atomic_Operations
5.21.1.10 Write Atomicity Normal 这个特性控制AWUN和NAWUN参数的操作.设置的属性值在set Feature命令的Dword 11中表明. 如果提交Get Fea ...