布局

  • 固定布局,需要计算单位
  • 自适应响应布局

 固定布局 html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>湖南城市学院</title> <link rel="stylesheet" type="text/css" href="css/hncu.css" />
</head> <body>
<div id="hncu_header"> </div> <div id="hncu_content">
<div id="hncu_left"></div>
<div id="hncu_center"></div>
<div id="hncu_right"></div>
</div> <div id="hncu_footer"> </div>
</body>
</html>

固定布局 css代码

@charset "utf-8";

*{
margin: 0px;
padding: 0px;
} #hncu_header{
width: 1000px;
height: 200px;
background-color: skyblue; margin:0px auto;
} #hncu_content{
width: 1000px;
height: 600px;
background-color: yellow; margin:0px auto;
} #hncu_left{
width: 200px;
height: 500px;
background-color: green; margin-top:50px;
float:left;
} #hncu_center{
width: 580px;
height: 500px;
background-color: #bfc; margin-top:50px;
margin-right: 10px;
margin-left: 10px;
float:left;
} #hncu_right{
width: 200px;
height: 500px;
background-color: pink; margin-top:50px;
float:left;
} #hncu_footer{
width:1000px;
height:200px;
background-color:skyblue; margin:0px auto;
}

效果图:

__x__(28)0907第四天__固定布局的更多相关文章

  1. __x__(23)0907第四天__浏览器默认样式

    浏览器默认样式:         为了美观,浏览器为了在页面没有样式时,也可以有一个较好的显示效果,默认设置若干 margin,padding. 作为开发人员,在CSS编写最初,一般都会清除默认样式, ...

  2. __x__(19)0907第四天__ HTML5 文本标签 及 样式

    strong 表语义上的强调, em 表示语气上的强调: <strong>警告:离僵尸远点!</strong> 世界末日了,因为僵尸是<em>有毒的</em& ...

  3. __x__(20)0907第四天__列表ul,ol,dl

    列表分为: 有序列表 ul: <ul type="disc"> <li>张三</li> <li>李四</li> < ...

  4. __x__(21)0907第四天__ css 盒模型 (框模型)

    CSS 处理元素,把每个元素都包含在一个盒子里. 对网页的布局,其实就是对盒子的摆放及设置.  边框border,会使盒子变大: .box{ border: 10px 20px 30px 40px r ...

  5. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...

  6. __x__(25)0907第四天__ overflow 父元素对溢出内容的处理

    overflow    父元素对于溢出内容的处理 visible;    默认值,对于溢出内容,在父元素之外显示. hidden;    对于溢出内容,进行隐藏,不显示. scroll;    对于溢 ...

  7. __x__(26)0907第四天__文档流_网页最底层

    文档流 处在网页的最底层,表示的是一个页面中的位置. 创建的元素,默认都处于文档流中. 元素在文档流中的特点 块元素 在文档流中独占一行. 自上而下排列. 宽度默认占父元素的 100%,width=& ...

  8. __x__(27)0907第四天__ float 浮动

     float 浮动 块元素脱离文档流,水平排列. 浮动元素 会尽量往左上(left),或者右上(right)浮动,直到遇到 块元素 或者 其他浮动元素. 可选值: none;   默认值,不脱离文档流 ...

  9. __x__(24)0907第四天__ display 和 visibility

    <a>百度</a>    也是内联元素,无法设置width和height <img>可以设置width和height,但是不会占用一行,所以是典型的行内块元素inl ...

随机推荐

  1. 使用Maven插件构建Spring Boot应用程序镜像

    使用Maven插件构建Spring Boot应用程序的Docker镜像. 环境准备 1.Linux系统 2.安装JDK,Maven 3.安装Docker 应用实践 1.在应用程序根目录下添加Docke ...

  2. SpringBoot系列: url重定向和转发

    Web UI项目中, 很多 Spring controller 视图函数直接返回 html 页面, 还有一些视图函数是要重定向或转发到其他的 url 上. redirect 和 forward的区别: ...

  3. (三)微信小程序首页的分类功能和搜索功能的实现笔记

    就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...

  4. iTOP-4412开发板-串口转接小板的使用文档

    本文档介绍如何使用 迅为iTOP-4412 精英版如何使用串口转接板,串口小板如下所示.和串口转接板模块相关的资料如下:“iTOP-4412-Android-串口测试文档(升级版)_V2.X.zip” ...

  5. spring事务源码分析结合mybatis源码(二)

    让我们继续上篇,分析下如果有第二个调用进入的过程. 代码部分主要是下面这个: if (isExistingTransaction(transaction)) { return handleExisti ...

  6. Visual Studio Code(VSCODE)语言设置

    Visual Studio Code(VSCODE)语言设置 语言设置 1.快捷键 Windows.Linux 快捷键是:ctrl+shift+p macOS 快捷键是:command + shift ...

  7. .Net IOC框架入门之三 Autofac

    一.简介   Autofac是.NET领域最为流行的IOC框架之一,传说是速度最快的一个 目的 1.依赖注入的目的是为了解耦. 2.不依赖于具体类,而依赖抽象类或者接口,这叫依赖倒置. 3.控制反转即 ...

  8. 在右键菜单中加入BitLocker重新上锁功能

    当使用BitLocker给磁盘上锁后,可以通过命令:manage-bde -lock d: -forcedismount 将已经解锁的磁盘重新上锁,如果觉得每次都通过命令行写命令很麻烦,那可以通过修改 ...

  9. tarjan 题目汇总(含解析)

    下面容许我偷个懒,洛谷上写过的blog我就不来再抄一遍了 洛谷P3436 [[POI2006]PRO-Professor Szu](别称:作死的老教授) 洛谷P4306 [[JSOI2010]连通数] ...

  10. sed 正则 ! 取反

    !符号表示取反,x,y!表示匹配不在x和y行号范围内的行,利用sed命令用于的阿银不在2-7之间的行 [111 sed]$ cat input [111 sed]$ sed -n '2,7!p' in ...