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. 必须在文档流中处于最高级位置: ...
随机推荐
- TTradmin v2.1 【2019年12月12日更新】简单好用的临时远程协助软件
TTradmin 是一款免端口映射可直接穿透任何内网,基于VNC核心的即时远程协助软件.在使用的时候只需要保证“协助端”和“被协助端”使用同一个验证码即可实现安全便捷的远程控制,不需要进入路由 ...
- 【内推】2020微软苏州Office365众多核心团队热招150+研发精英!欢迎推荐
2020微软苏州Office365众多核心团队热招150+研发精英!欢迎推荐 大家好,目前微软Office365核心团队在美丽宜居的苏州有150多的社招职位虚位以待,欢迎大家自荐,推荐,转发!除以下列 ...
- js 字符串中"\"
var a = '\a' console.log(a) // a ???? js 字符串中"\" 有特殊功能,反斜杠是一个转义字符 js 中 遇到字符串中有'\'时候需要注意 '\ ...
- 心理学实验程序编程（python）
任务一:实现简单的屏幕的颜色之间的切换 import pygame from pygame.locals import * pygame.init() win = pygame.display.set ...
- 安装Flink集群
1.Windows安装 https://blog.csdn.net/clj198606061111/article/details/99694033 2.Linux安装 https://blog.cs ...
- BurpSuite 汉化版（含注册机）安装教程
1.注册机使用方法 首先需要完成java安装及环境变量配置. 打开burp-loader-keygen.jar(注册机)--点击run--license text (随意写)--然后将生成的lic ...
- C#中删除目录以及目录下文件的方法
场景 C#中根据文件夹路径,将文件夹以及文件夹下文件删除. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电 ...
- yii2 插件使用
GridView插件 行内文本编辑 后端 if (Yii::$app->request->post('hasEditable')) { $id = Yii::$app->reques ...
- Mac 多版本 JDK 管理
Mac 多版本 JDK 管理 1. 准备 ZSH Homebrew Oracle JDK 1.8 安装包(Homebrew 官方源和第三方源不再提供老版本的 Oracle JDK) 2. 安装 JDK ...
- 洛谷P1551 亲戚 （并查集模板题）
链接 https://www.luogu.org/problemnew/show/P1551 代码 #include<bits/stdc++.h> using namespace std; ...