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. 必须在文档流中处于最高级位置: ...
随机推荐
- IntelliJ IDEA搭建一个简单的springboot项目
一.IDEA 安装包 百度网盘链接:https://pan.baidu.com/s/1MYgZaBVWXgy64KxnoeJSyg 提取码:7dh2 IDEA注册码获取:http://idea.lan ...
- E11000 duplicate key error index: test.collection.$a.b_1 dup key: { : null } 报错记录
这个一般分为两种情况,第一新增数据出现约束.而你在orm里面写了唯一约束.这种情况就比较简单,添加数据时保证数据字段唯一性就好了. 第二种情况比较难找,因为你发现你在orm里面并没有写约束,但是还是插 ...
- 作业day2
问题一: Java类中只能有一个公有类吗?用Eclipse检测以下程序是否正确.是否在接口中同样适用. 因为公共类名必须和这个java源程序文件名相同,所以只能有一个公共类,相应的,main方法作为程 ...
- AMC Problems and Solutions
AMC Problems and Solutions:https://artofproblemsolving.com/wiki/index.php/AMC_Problems_and_Solutions ...
- 常用的一些git命令整合
一.创建一个版本库 1.mkdir xxx 2.git init 使用git init命令将这个目录变成Git可以管理的仓库 这个版本仓库创建好了,xxx目录下有一个隐藏的.git目录(里面有暂存区( ...
- 0级搭建类013-CentOS 8.x 安装
CentOS 8 操作系统安装
- 自己的系统重装之后，怎么去重新的装官方的office办公软件，详细教程
1 访问官网地址--微软,并通过自己的微软账号进行登录,转到下面的界面 2 点击上图的菜单栏的offce菜单项,跳转到下图 3 点击 菜单栏的产品 之后选择 查看office的全部的历史 ...
- 深入浅出Mybatis系列八-mapper映射文件配置之select、resultMap
注:本文转载自南轲梦 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 上篇<深入浅出Mybatis系列(七)---mapper映射文件配置之inse ...
- set类型的应用场景 —— Redis实战经验
set类型是string类型的集合,其特点是集合元素无序且不重复,每个集合最多可以存储 232 - 1 个元素(40多亿),set类型主要有以下应用场景. 1. 好友/关注/粉丝/感兴趣的人集合 se ...
- JS 动态改变浏览器title标题
onfocus 和 onblur 事件,监听离开页面和进入页面 <script> window.onfocus = function () { document.title = '要走的人 ...