Html+css学习总结

《Html+css学习总结》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Html+css学习经验总结第一章DIV布局了解HTML的发展历史，搜索XHTML与HTML的区别，搜索doctype有几种，做网页要先布局，从大处着眼。Container,控制整个页面，一般分为header、main、footer，定义div用#+名字、定义class用.Float：浮动，分为左浮动、右浮动，定义成id为#lside(左浮)#rside(右浮)注意：id命名时不能用数字，不加doctype，会导致低版本IE解析效果不一样。在列表中去掉·的方法：第二章盒模

2、型边框border设置，说明border的（颜色、宽度、形状（实现、虚线、立体））四个方向上如何设置border的宽度，border:20pxsolidred;solid:实线dashed:虚线dotted:点线outset:立体border-top、只定义上边框，同理border-leftborder-bottomborder-right作业：用css控制div的边框画一个三角形，提示：上下左右让边框透明，画个圣诞树。Css中的注释方式：html中的注释方式margin属性：控制盒子与边界的距离margin-top/

3、left/bottom/right;例：margin:30px;padding属性这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。注释：不允许使用负值小盒子与大盒子之间的距离就是所设置的padding值padding-top/lest/bottom/right例：padding：4px;如果布局已经完成，且像素正好相容，突然加了padding

4、值可能导致什么情况发生？如图所示，加了pading之后，实际上盒子变大了（实战请看首页布局3网页）思考：利用marginauto完成首页居中，并自行研究，在竖直方向上用marginauto是什么效果？内敛元素，考虑哪些元素是内敛类(span)哪些元素是块状类（div）padding:文字与“纸张”的距离，控制内部文字。盒子与盒子的距离用margin,盒子与文字的距离用padding。思考：盒子的宽高各是100px,同时盒子有30px的padding值，再设置背景为灰色，灰色的面积是多少?display(内敛与块状的转化

5、)分为block、inline.例如：display:name第三章CSS背景设置：background-image:(在这会有两个字“浏览”点击“浏览”就可以选择图片插入）图片的格式我目前还不会调，可以在body里写上这样一段代码，图片的大小可以调，在css里设置界面整体的背景，也可以在css里在设置完背景之后，在添加backgrond-image:url(图片名字)；backgruond-repeat:no-repeat;使背景图片呈现一张。Background-attachment:fixed;使背景图片固定，不随横条的拉动而变动，永远固

6、定在屏幕的某个角落。1、为什么有些网页既设背景图又设背景色？考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。不光是网页如此，页面里的div、表格有了背景图依然应该设置一个背景色（跟背景图颜色差不多，至少跟文字颜色明显不同）。毕竟有时会出现背景图无法打开的情况，这种情况下如果文字是白色而背景色是默认的白色的话，文字就看不出了。完成一个网页的制作之后，尝试把存放图片的文件夹改名让网页呈现无图状态，看看光文字是否可读。

7、针对css文件，也应该做一次同样的测试，看看css文件没有被调用的情况下的状态。由于网速或代码冗余而导致网站打开速度慢的时候，图片加载不出来即可先显示背景色。倘若你是一个以黑色为主调的网站，默认背景色是白色，那背景图未加载完成时不就先白一下了，导致感觉闪了一下，视觉部友好，根据网站的主色调定义一个背景色，利于减少视觉疲劳（一般是先定义背景色，再定义背景图片，色彩优先）1、css学习用css控制段落文本，用

8、ration：underline/overline/linethrough字间隔：letter-spacing:5px(字与字之间的距离是5像素)本节