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. 必须在文档流中处于最高级位置: ...
随机推荐
- Jquery基础（动画效果的轮播图特效）
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- py 二级习题（重新输出文本-----每行一句话）
#需要的一小段文本 txt = "人生得意须尽欢,莫使金樽空对月.天生我才必有用,千金散尽还复来." #对文本进行分割,转换成列表形式 def txt_split(txt): li ...
- PTA 1004 Counting Leaves
题目描述: A family hierarchy is usually presented by a pedigree tree. Your job is to count those family ...
- 指数函数在c语言实现
指数很重要,比如有一些欧拉公式 #include "common.h" #include <stdio.h> #include <stdlib.h> #in ...
- 论文阅读笔记（八）【IEEEAccess2019】：High-Resolution and Low-Resolution Video Person Re-Identification: A Benchmark
Introduction (1)Motivation: 监控视频中的行人,有的比较清晰,有的因为距离较远非常模糊. 在高低分辨率方面的行人重识别缺乏数据集和研究. (2)Contribution: ① ...
- 【E20200105-1】Centos 7.x 下vsftpd配置文件常用配置详解
centos 7 下vsftp的安装和配置可以参见<[E20200102-1]centos 7 下vsftp的安装和配置> ########匿名用户(anonymous)设置####### ...
- Date工具类中CompareTo()
A<B 结果是-1 A>B 结果是1 A==B 结果是0
- 如何处理pom文件中没有找到HUB检查到高危漏洞的依赖包
最近使用HUB工具检查到maven工程中存在高危险漏洞,虽然定位到具体的引用包了,但是在pom文件中却没有发现该依赖包.此时,我们就需要用到这条命令mvn dependency:tree,该命令会将m ...
- [CQOI2015] 网络吞吐量 - 最大流,最短路
在第i个点只能选A[i]次的情况下,能选出多少条1-n的最短路 Solution 我们造出最短路DAG,然后对每个点拆点限流,跑最大流即可 双向边警告!(有悖直觉 #include <bits/ ...
- 手动运行jar包，指定配置文件
打包程序 mvn package cd target 指定参数运行 java -jar spring-boot-demo-0.0.1-SNAPSHOT.jar --spring.profile.act ...