搜索
Html+css学习经验总结第一章DIV布局了解HTML的发展历史，搜索XHTML与HTML的区别，搜索doctype有几种，做网页要先布局，从大处着眼。Container,控制整个页面，一般分为header、main、footer，定义div用#+名字、定义class用.Float：浮动，分为左浮动、右浮动，定义成id为#lside(左浮)#rside(右浮)注意：id命名时不能用数字，不加doctype，会导致低版本IE解析效果不一样。在列表中去掉·的方法：listyle=“list-style-type:none”/li第二章盒模型边框border设置，说明border的（颜色、宽度、形状（实现、虚线、立体））四个方向上如何设置border的宽度，border:20pxsolidred;solid:实线dashed:虚线dotted:点线outset:立体border-top、只定义上边框，同理border-leftborder-bottomborder-right作业：用css控制div的边框画一个三角形，提示：上下左右让边框透明，画个圣诞树。Css中的注释方式：/**/html中的注释方式!----margin属性：控制盒子与边界的距离margin-top/left/bottom/right;例：margin:30px;padding属性这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。注释：不允许使用负值小盒子与大盒子之间的距离就是所设置的padding值padding-top/lest/bottom/right例：padding：4px;如果布局已经完成，且像素正好相容，突然加了padding值可能导致什么情况发生？如图所示，加了pading之后，实际上盒子变大了（实战请看首页布局3网页）思考：利用marginauto完成首页居中，并自行研究，在竖直方向上用marginauto是什么效果？内敛元素，span/span考虑哪些元素是内敛类(span)哪些元素是块状类（div）padding:文字与“纸张”的距离，控制内部文字。盒子与盒子的距离用margin,盒子与文字的距离用padding。思考：盒子的宽高各是100px,同时盒子有30px的padding值，再设置背景为灰色，灰色的面积是多少?display(内敛与块状的转化)分为block、inline.例如：display:name第三章CSS背景设置：background-image:(在这会有两个字“浏览”点击“浏览”就可以选择图片插入）图片的格式我目前还不会调，可以在body里写上这样一段代码，图片的大小可以调，在css里设置界面整体的背景，也可以在css里在设置完背景之后，在添加backgrond-image:url(图片名字)；backgruond-repeat:no-repeat;使背景图片呈现一张。Background-attachment:fixed;使背景图片固定，不随横条的拉动而变动，永远固定在屏幕的某个角落。1、为什么有些网页既设背景图又设背景色？考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。不光是网页如此，页面里的div、表格有了背景图依然应该设置一个背景色（跟背景图颜色差不多，至少跟文字颜色明显不同）。毕竟有时会出现背景图无法打开的情况，这种情况下如果文字是白色而背景色是默认的白色的话，文字就看不出了。完成一个网页的制作之后，尝试把存放图片的文件夹改名让网页呈现无图状态，看看光文字是否可读。针对css文件，也应该做一次同样的测试，看看css文件没有被调用的情况下的状态。由于网速或代码冗余而导致网站打开速度慢的时候，图片加载不出来即可先显示背景色。倘若你是一个以黑色为主调的网站，默认背景色是白色，那背景图未加载完成时不就先白一下了，导致感觉闪了一下，视觉部友好，根据网站的主色调定义一个背景色，利于减少视觉疲劳（一般是先定义背景色，再定义背景图片，色彩优先）2、css学习用css控制段落文本，用p/p控制段落。在css中，段落缩进test-intent:20px;段落居中test-align上/下划线,删除线test-decoration：underline/overline/linethrough字间隔：letter-spacing:5px(字与字之间的距离是5像素)本节课主要掌握：段落缩进、文本方向、字间距、文字装饰线（上下划线，删除线）在控制文本方面，在p标签里也可以。例如font/fontem/emstrong/strongbr/hr/等等，都可以对文字进行编辑字体控制精讲，字体的排列顺序：font-family:最好看、次好看、一般、默认，即从不常用到常用，防止用户的浏览器不识别。有衬线：serif:西方字无衬线：sans-seriffont-styly:italic斜体weight:bdd加粗size：5px;字体大小行间距：line-height:30px;可以下载css参考手册，常查常看常练习。css优先级标签选择器使用范围最广，类选择器次之，再次是派生，id选择器更精细。css的初始化#container{margin:0px;padding:0px;border:0px;list-style:none;background:#F9F9F9;}就是让这些基本的标签都为0Link标签：将css样式中的代码单独新建一个文件保存，然后再用link标签链接到HTML代码中。目的是用户用浏览器访问时这个网页时，如果网速不好时，当没有单独保存css的话，打开的网页只显示文本跟图片进行单一的罗列，不会显示css样式。当单独保存了css代码后，浏览器后台碰到link标签后会自动下载css样式，这样即使网页很大，完整的网页也会显示出来。新建一个sublime文件时，取一个英文名字，例如：xiaobai.html然后保存，然后！+tab就可以了。庄宿正：“不然咋弄，得靠这个赚钱啊，不然怎么赚钱？”第四章HTML语义标签表格的做法：tabletr//行td/td//列/tr/table练习：做个课程表超链接：用a/a标签本节课讲a标签的用法。例子：ahref=“网站地址（直接复制粘贴或者写上）”target-blank(当打开网页时，会弹出新标签)/title=“注明”（当鼠标放上去时显示的内容）网站名字/a锚点：（用a标签）起到定位功能aname=“名字”/a例如：aherf=“我给自己做的网页取得名字#p1”伪类：链接的状态有四种，按照顺序写（1）普通状态下：a:link{color:颜色;}（2）浏览过的a:visited{color:颜色;}（3）当鼠标放上去时a:hover{color:颜色;}(4)点击的那一瞬间（还没松手）a:active{color:颜色;}pre/pre标签代码设计成什么样，运行出来就是什么样三原色（rgb）了解[0-255]/[00,FF]em:相对大小是指父元素中的一个“m”的大小，简单理解为父元素的font-size就是一个em单位例：父：20px；子：em;(20px)思考：除了px,%,em,还有没有其他尺寸的定义方式。IE：（1）双marginbug(左浮元素，左margin是定义的2倍，右浮，右margin是定义的2倍。)解决方法：在左浮那里加_display:inline;(内敛)第五章公司网页开发实战第六章附录