布局

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

 固定布局 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. Java使用DOM4J对XML文件进行增删改查操作

    Java进行XML文件操作,代码如下: package com.founder.mrp.util; import java.io.File; import java.util.ArrayList; i ...

  2. 利用 /proc/sys/kernel/core_pattern隐藏系统后门

    ref:https://xz.aliyun.com/t/1098/ 这里所说的core_pattern 指的是:/proc/sys/kernel/core_pattern. 我们知道在Linux系统中 ...

  3. 清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

    清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...

  4. 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式

    一. 背景 说起EF的增删改操作,相信很多人都会说,有两种方式:① 通过方法操作  和  ② 通过状态控制. 相信你在使用EF进行删除或修改操作的时候,可能会遇到以下错误:“ The object c ...

  5. [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.1 变形梯度张量

    $$\bex \rd{\bf y}={\bf F}\rd {\bf x}, \eex$$ 其中 ${\bf F}=\n_x{\bf y}=\sex{\cfrac{\p y_i}{\p x_j}}$ 为 ...

  6. Jasmine

    Jasmine https://www.npmjs.com/package/jasmine The Jasmine Module The jasmine module is a package of ...

  7. redux知识点

    1.关于传参 点击跳转 两种 动态路由 url 但是取值需要自己处理 关于动态跳转(js执行跳转) 关于异步加载组件 创建loadable app.js中 在 要加载的异步组件中   (这样接收参数不 ...

  8. 忘记mysql的登陆密码该怎么办？

    1.如果忘记了其他用户的密码,可以使用root账户进入mysql,修改mysql.user表中的用户密码 2.如果忘记了root的mysql密码,可以使用如下方式: 确认服务器处于安全的状态,也就是没 ...

  9. 动态代理和CGlib

    静态代理:静态代理的类也需要实现接口interface1,还要创建一个实现接口interface1的其他类class1,并且在静态代理类重写的方法中调用class1重写的方法.操作太多冗余.不好 动态 ...

  10. 【原创】Linux基础之查看linux发行版以及内核版本

    redhat查看发行版 # cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 查看内核版本 # uname -aLinux $h ...