燕十八_divcss教学笔记.docVIP

第一天 Html 三部分 1：文档声明 文档声明很重要，直接影响浏览器的渲染效果。 不属于html文档的一部分，不用闭合。 2：head区域 title/title 网页的标题 meta http-equiv=Content-Type content=text/html; charset=utf-8 / 3: body区域 Body区域放各种标签和内容 而内容不能够直接写在body里面。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=/1999/xhtml lang=zh-CN head title这真的是标题？/title meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=description content= / meta name=keywords content= / /head body Hello world /body /html 3.5:meta ---- head里面的meta 代表 元信息,用来说明网页自身的信息, 一般是给浏览器,搜索引擎看的 比如: meta http-equiv=Content-Type content=text/html; charset=utf-8 / ---告诉浏览器,这是一篇utf-8编码的文档 meta name=description content= / --这是告诉搜索引擎本页面的主要内容 meta name=keywords content= / --这是告诉搜索引擎,本页面体现的关键字 3.6:在网页源码里写的换行,在网页效果上不会体现出来  3.7: html标记:分为双标签和单标签 例: b加粗效果,文字会变粗/b 接下来会换行br / 共同点: 无论是单双标签,都要求 闭合 单标签也要自身闭合 br 3.8: 标签可以嵌套,但是, 不能相互嵌套 例如: bi一岁一枯荣./b/i 不合法 页面布局 当拿到一张图片或者准备做一个页面的时候, 首先,不要去看文字,颜色等细节, 而是总整体上,看页面该如何划分,划分成块 按从上到下,从左到右,从大到小 Div布局, Css控制显示效果 标签体现语义 Div块状元素的一个重要特点: 无论宽度如何,在浏览上的显示效果都是---独占一行  盒模型: 一个div是一个矩形,为了方便控制div的效果, 我们推荐把div理解成一个木头盒子 分析现实中的情况: 一个盒子: 有边框(边框有多厚? 用像素自定义) 盒子内部的内容,离边框内部有多远的距离,还是说可以贴着内边框放置? 内容离内边框的距离叫做-----内边距 盒子本身有一个大小 : 宽,和 ,高 盒子与盒子之间可以保持距离: 外边距 宽:Width 高:height 边框: border 内边距:padding 外边距:margin 第二天： 目标：掌握盒模型 浏览器对于div,p,li标签等元素，可能会对他们设置一个默认的margin值，border，padding值，而且不同的浏览器之间设的默认可能不同。 Css初始化，就是把所有的标签，margin,border,padding设为0，大家都在同一个起跑线上。 盒模型border学习 Border: 三要素，不可缺少。 边框样式， 边框宽度， 边框颜色 分别指定： Border-style Border-width Border-color 例：border-style:solid; border-width:10px; border-color:blue; 也可以通过 border属性一次性指定（注意：属性顺序为style width color） border:solid 10px blue; * 如果想单独指定某个边的边框效果(以右边框为例) Border-right-style: Border-right-width: Border-right-color: Padding: 定义4个方向的padding ，方向与赋值 ，和margin一样。 一个盒子本身有多大？ 水平:左边框+左内边距+内容宽度+右内边距+右边框 竖直:上边框+上内边距+高度+下内边距+下边框 －－－ 作业－－－－－ 通过div+css, 在页面上画一个盒子，要求： 有外边距，有边框，有内边距。 并且，要能通过盒子内部的子盒子对比看出内