__x__(28)0907第四天__固定布局
布局
- 固定布局，需要计算单位
- 自适应响应布局
固定布局 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第四天__固定布局的更多相关文章
- __x__(23)0907第四天__浏览器默认样式
浏览器默认样式: 为了美观,浏览器为了在页面没有样式时,也可以有一个较好的显示效果,默认设置若干 margin,padding. 作为开发人员,在CSS编写最初,一般都会清除默认样式, ...
- __x__(19)0907第四天__ HTML5 文本标签 及 样式
strong 表语义上的强调, em 表示语气上的强调: <strong>警告:离僵尸远点!</strong> 世界末日了,因为僵尸是<em>有毒的</em& ...
- __x__(20)0907第四天__列表ul，ol，dl
列表分为: 有序列表 ul: <ul type="disc"> <li>张三</li> <li>李四</li> < ...
- __x__(21)0907第四天__ css 盒模型 (框模型)
CSS 处理元素,把每个元素都包含在一个盒子里. 对网页的布局,其实就是对盒子的摆放及设置. 边框border,会使盒子变大: .box{ border: 10px 20px 30px 40px r ...
- __x__(22)0907第四天__ 垂直外边距重叠
外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...
- __x__(25)0907第四天__ overflow 父元素对溢出内容的处理
overflow 父元素对于溢出内容的处理 visible; 默认值,对于溢出内容,在父元素之外显示. hidden; 对于溢出内容,进行隐藏,不显示. scroll; 对于溢 ...
- __x__(26)0907第四天__文档流_网页最底层
文档流 处在网页的最底层,表示的是一个页面中的位置. 创建的元素,默认都处于文档流中. 元素在文档流中的特点 块元素 在文档流中独占一行. 自上而下排列. 宽度默认占父元素的 100%,width=& ...
- __x__(27)0907第四天__ float 浮动
float 浮动 块元素脱离文档流,水平排列. 浮动元素 会尽量往左上(left),或者右上(right)浮动,直到遇到 块元素 或者 其他浮动元素. 可选值: none; 默认值,不脱离文档流 ...
- __x__(24)0907第四天__ display 和 visibility
<a>百度</a> 也是内联元素,无法设置width和height <img>可以设置width和height,但是不会占用一行,所以是典型的行内块元素inl ...
随机推荐
- 分布式监控系统开发【day37】:表结构设计（二）
一.表结构关系图 二.表结构需求讨论 1.主机表(Host) 1.解决了什么问题? 1.如果我不想让它监控了,就有一个开关的东西给它禁掉2.主机存活状态检测间隔 2.代码 class Host(mod ...
- SpringBoot系列: JdbcTemplate 事务控制
============================Spring JdbcTemplate 事务控制============================之前使用 JDBC API 操作, 经常 ...
- 使用SO_REVTIMEO套接字选项为recvfrom设置超时
void dg_cli(FILE *fp, int sockfd, const SA *pservaddr, socklen_t servlen) { int n; ]; struct timeval ...
- MySQL学习10 - 多表查询
一.多表连接查询 1.交叉连接 2.内连接 3.外连接之左连接 4.外连接之右连接 5.全外连接 二.符合条件连接查询 三.子查询 1.带in关键字的子查询 2.带比较运算符的子查询 3.带EXIST ...
- CDH5.16.1启动报错:Invalid value set for db.setupType, the valid values are EMBEDDED or EXTERNAL
1 自己的配置文件已经添加了配置,但是还是报错,由于是自建数据库 com.cloudera.cmf.db.setupType=EXTERNAL 2,索性注释掉这个参数,启动就ok了
- String.intern() 方法__jdk1.6与jdk1.7/jdk1.8的不同
1.为什么要使用intern()方法 intern方法设计的初衷是为了重用string对象,节省内存 用代码实例验证下 public class StringInternTest { static f ...
- 【原创】大叔问题定位分享（16）spark写数据到hive外部表报错ClassCastException: org.apache.hadoop.hive.hbase.HiveHBaseTableOutputFormat cannot be cast to org.apache.hadoop.hive.ql.io.HiveOutputFormat
spark 2.1.1 spark在写数据到hive外部表(底层数据在hbase中)时会报错 Caused by: java.lang.ClassCastException: org.apache.h ...
- 【原创】大叔问题定位分享（13）HBase Region频繁下线
问题现象:hive执行sql报错 select count(*) from test_hive_table; 报错 Error: java.io.IOException: org.apache.had ...
- 解决前后端分离后的Cookie跨域问题
一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...
- LuoGu P4996 咕咕咕
题目描述 小 F 是一个能鸽善鹉的同学,他经常把事情拖到最后一天才去做,导致他的某些日子总是非常匆忙. 比如,时间回溯到了 2018 年 11 月 3 日.小 F 望着自己的任务清单: 看 iG 夺冠 ...