第一章 div布局
前几课内容
.htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。
shtml是服务器先处理然后再交给浏览器处理
#HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本。XHTML目标是取代HTML。更详细的介绍 XHTML 教程 http://t.cn/h94BV
#HTML小知识#之#<!DOCTYPE>声明#位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。更详细的介绍http://t.cn/h59taG
做网页先布局。
先大处布局,在细节点缀。
container的高度可以不用设定height,子元素有高度会把父元素撑开的
1.ID命名可根据C语言变量命名规则
2.HTML文件本身charset采用的编码必须与文件保存时的编码方式一样,否则出现乱码显现
<!DOCTYPE html> <html> <head> <title>页面布局</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="NewFile.css">
</head>
<body> <div id="container"> <div id="header"></div> <div id="main"> <div id="left"></div> <div id="right"></div> </div> <div id="bottom"></div> </div> </body> </html>
|
@CHARSET "UTF-8";
#container { width: 1000px; background-color: gray; }
#header { height: 120px; background-color: red; }
#main { height: 600px; background-color: yellow; }
#bottom{ height:120px; background-color: blue; }
#left { width: 700px; height: 600px; float: left; background: green; }
#right { width: 300px; height: 600px; float: right; background-color: pink; } |
第二章 盒模型
margin 外边框
border 边框
padding 内边框
第12课 首页布局实战之margin设置
外边距
<!DOCTYPE html> <html> <head> <title>页面布局</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="NewFile.css">
</head>
<body> <div id="container"> <div id="header"></div> <div id="main"> <div id="left"> <div class="four"></div> <div class="four"></div> <div class="four"></div> <div class="four"></div> </div> <div id="right"></div> </div> <div id="bottom"></div> </div> </body> </html>
|
@CHARSET "UTF-8";
#container { width: 1000px; background-color: gray; }
#header { height: 120px; background-color: red; }
#main { height: 600px; background-color: yellow; }
#left { width: 700px; height: 600px; float: left; background: green; }
.four { width: 330px; height: 280px; background: black; margin:10px; float: left; }
#right { width: 300px; height: 600px; float: right; background-color: pink; }
#bottom{ height:120px; background-color: blue; }
|
第13课 盒模型之border设置
border的3要素:宽,形状(实现虚线),颜色
<!DOCTYPE html> <html> <head> <title>study13.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> div { width: 300px; height:300px; background: blue; border: 50px outset green; } </style> </head>
<body> <div>
</div> </body> </html>
|
第14课 用css控制border画三角形
边框透明(transparent)
border实现三角形具体原理可参考:border实现三角形的原理
画一棵圣诞树
<!DOCTYPE html> <html> <head> <title>study14.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> #parent_div{ width: 600px; height: 500px; background: silver; } #tri1 { width:0px; height: 0px; border-right: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 100px solid green; } #tri2 { width:0px; height: 0px; border-right: 120px solid transparent; border-left: 120px solid transparent; border-bottom: 120px solid green; } #tri3 { width:0px; height: 0px; border-right: 150px solid transparent; border-left: 150px solid transparent; border-bottom: 150px solid green; } #tri4 { width: 50px; height: 130px; background-color: saddlebrown;
} </style> </head>
<body> <div id="parent_div" align="center"> <div id="tri1" ></div> <div id="tri2" ></div> <div id="tri3" ></div> <div id="tri4" ></div> </div>
</body> </html>
|
改进版:
<!DOCTYPE html> <html> <head> <title>study14.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#parent_div{ width: 400px; height: 360px; background: silver; margin: 0px auto; } #tri1 { width:0px; height: 0px; border-right: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 100px solid green; margin-bottom: -50px; } #tri2 { width:0px; height: 0px; border-right: 120px solid transparent; border-left: 120px solid transparent; border-bottom: 120px solid green; margin-bottom: -60px; } #tri3 { width:0px; height: 0px; border-right: 150px solid transparent; border-left: 150px solid transparent; border-bottom: 150px solid green; } #tri4 { width: 50px; height: 100px; background-color: saddlebrown;
} </style> </head>
<body> <div id="parent_div" align="center"> <div id="tri1" ></div> <div id="tri2" ></div> <div id="tri3" ></div> <div id="tri4" ></div> </div>
</body> </html>
|
第15课 padding详解
内边距
2.盒子的宽高各是100px,同时padding: 30px,背景为灰色,请问灰色面积是多少?160px*160px,所以padding也是铺的背景色,即背景色铺到border,但文字输入面积只有100px*100px。
<!DOCTYPE html> <html> <head> <title>study15.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> #a{ width: 100px; height:100px; padding: 30px; background-color: gray; } </style>
</head>
<body> <div id="a"> 打一些乱七八糟的字测试一下 </div> </body> </html>
|
第16课 padding与背景
第17课 padding美化首页
增加padding后 要减少原来width和height的值
<!DOCTYPE html> <html> <head> <title>页面布局</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="NewFile.css">
</head>
<body> <div id="container"> <div id="header"></div> <div id="main"> <div id="left"> <div class="four"> 2014.09.09(星期二) 腾讯2015校园招聘 就业中心一楼信息发布厅 19:00- 21:00 2014.09.10(星期三) 中国舰船研究设计中心(武汉) 就业中心一楼信息发布厅 10:00- 12:00 陕西海泰电子有限责任公司 教2-100(德育基地) 10:00- 12:00 核工业西南物理研究院 主楼A-403 16:30- 18:30 </div> <div class="four"> 2014.09.11(星期四) 中国航天科技集团公司第一研究院第十二研究所 就业中心204室 10:00- 12:00 航天恒星科技有限公司 就业中心一楼信息发布厅 14:30- 16:30 北京数码视讯科技股份有限公司 就业中心一楼信息发布厅 16:30- 18:30 百度 就业中心一楼信息发布厅 19:00- 21:00 香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1 </div> <div class="four"> 2014.09.11(星期四) 中国航天科技集团公司第一研究院第十二研究所 就业中心204室 10:00- 12:00 航天恒星科技有限公司 就业中心一楼信息发布厅 14:30- 16:30 北京数码视讯科技股份有限公司 就业中心一楼信息发布厅 16:30- 18:30 百度 就业中心一楼信息发布厅 19:00- 21:00 香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1 </div> <div class="four"> 2014.09.11(星期四) 中国航天科技集团公司第一研究院第十二研究所 就业中心204室 10:00- 12:00 航天恒星科技有限公司 就业中心一楼信息发布厅 14:30- 16:30 北京数码视讯科技股份有限公司 就业中心一楼信息发布厅 16:30- 18:30 百度 就业中心一楼信息发布厅 19:00- 21:00 香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1 </div> </div> <div id="right"></div> </div> <div id="bottom"></div> </div> </body> </html>
|
@CHARSET "UTF-8";
#container { width: 1000px; background-color: gray; }
#header { height: 120px; background-color: red; }
#main { height: 600px; background-color: yellow; }
#left { width: 700px; height: 600px; float: left; background: green; }
.four { width: 310px; height: 260px; background: white; margin:10px; padding:10px; float: left; }
#right { width: 300px; height: 600px; float: right; background-color: pink; }
#bottom{ height:120px; background-color: blue; } |
第18课 盒子模型的总结
一个盒子,有margin,border,padding,实占多少空间?
<!DOCTYPE html> <html> <head> <title>study15.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> #a{ width: 300px; height:300px; border: 50px solid blue; padding:50px; margin:50px;
background-color: silver; } </style>
</head>
<body> <div id="a"> 一个盒子,有margin,border,padding,实占多少空间?<br/> 竖直方向:height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom<br/> 水平方向:width + padding-left + padding-right + border-left + border-right + margin-left + margin-right<br/> </div> </body> </html>
|
<!DOCTYPE html> <html> <head> <title>study19.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> #a{ width: 300px; height:200px; background-color: silver; margin: 0px auto; } </style> </head>
<body> <div id="a"></div> </body> </html>
|
<!DOCTYPE html> <html> <head> <title>页面布局</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="NewFile.css">
</head>
<body> <div id="container"> <div id="header"></div> <div id="main"> <div id="left"> <div class="four"> 2014.09.09(星期二) 腾讯2015校园招聘 就业中心一楼信息发布厅 19:00- 21:00 2014.09.10(星期三) 中国舰船研究设计中心(武汉) 就业中心一楼信息发布厅 10:00- 12:00 陕西海泰电子有限责任公司 教2-100(德育基地) 10:00- 12:00 核工业西南物理研究院 主楼A-403 16:30- 18:30 </div> <div class="four"> 2014.09.11(星期四) 中国航天科技集团公司第一研究院第十二研究所 就业中心204室 10:00- 12:00 航天恒星科技有限公司 就业中心一楼信息发布厅 14:30- 16:30 北京数码视讯科技股份有限公司 就业中心一楼信息发布厅 16:30- 18:30 百度 就业中心一楼信息发布厅 19:00- 21:00 香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1 </div> <div class="four"> 2014.09.11(星期四) 中国航天科技集团公司第一研究院第十二研究所 就业中心204室 10:00- 12:00 航天恒星科技有限公司 就业中心一楼信息发布厅 14:30- 16:30 北京数码视讯科技股份有限公司 就业中心一楼信息发布厅 16:30- 18:30 百度 就业中心一楼信息发布厅 19:00- 21:00 香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1 </div> <div class="four"> 2014.09.11(星期四) 中国航天科技集团公司第一研究院第十二研究所 就业中心204室 10:00- 12:00 航天恒星科技有限公司 就业中心一楼信息发布厅 14:30- 16:30 北京数码视讯科技股份有限公司 就业中心一楼信息发布厅 16:30- 18:30 百度 就业中心一楼信息发布厅 19:00- 21:00 香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1 </div> </div> <div id="right"></div> </div> <div id="bottom"></div> </div> </body> </html>
|
@CHARSET "UTF-8";
#container { width: 1000px; background-color: gray; margin: 0px auto; }
#header { height: 120px; background-color: red; }
#main { height: 600px; background-color: yellow; }
#left { width: 700px; height: 600px; float: left; background: green; }
.four { width: 310px; height: 260px; background: white; margin:10px; padding:10px; float: left; }
#right { width: 300px; height: 600px; float: right; background-color: pink; }
#bottom{ height:120px; background-color: blue; }
|
第20课 margin重叠现象
上下相邻普通元素margin重叠取大的值
float不同
<!DOCTYPE html> <html> <head> <title>study20.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> #test1 { height: 200px; background: silver; margin-bottom: 100px; } #test2 { height: 200px; background: red; margin-top: 100px; } </style>
</head>
<body> <div id="test1"> 相邻的普通元素,上下边距,并非简单地的相加<br> 而是取其中较大的边距值<br> 这种现象叫做margin重叠<br> </div> <div id="test2"></div> </body> </html>
|
学过这课后重新修改了圣诞树。