Html+css学习总结

Html+css学习总结

ID:47055229

大小:29.07 KB

页数:5页

时间:2019-07-10

Html+css学习总结_第1页
Html+css学习总结_第2页
Html+css学习总结_第3页
Html+css学习总结_第4页
Html+css学习总结_第5页
资源描述:

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

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

2、r的(颜色、宽度、形状(实现、虚线、立体))四个方向上如何设置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;paddin

3、g属性这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。注释:不允许使用负值小盒子与大盒子之间的距离就是所设置的padding值padding-top/lest/bottom/right例:padding:4px;如果布局已经完成,且像素正好相容,突然加了padding值可能导致什么情况发生?如图所示,加了pading之后,实际上盒子变大了(实战请看首页布局3网页)思考:利用mar

4、ginauto完成首页居中,并自行研究,在竖直方向上用marginauto是什么效果?内敛元素,考虑哪些元素是内敛类(span)哪些元素是块状类(div)padding:文字与“纸张”的距离,控制内部文字。盒子与盒子的距离用margin,盒子与文字的距离用padding。思考:盒子的宽高各是100px,同时盒子有30px的padding值,再设置背景为灰色,灰色的面积是多少?display(内敛与块状的转化)分为block、inline.例如:display:name第三章CSS背景设置:background-image:(在这会有两个字“浏览”点击“浏览

5、”就可以选择图片插入)图片的格式我目前还不会调,可以在body里写上这样一段代码,图片的大小可以调,在css里设置界面整体的背景,也可以在css里在设置完背景之后,在添加backgrond-image:url(图片名字);backgruond-repeat:no-repeat;使背景图片呈现一张。Background-attachment:fixed;使背景图片固定,不随横条的拉动而变动,永远固定在屏幕的某个角落。1、为什么有些网页既设背景图又设背景色?考虑到大屏下(如1920*1080或者更大)网站背景图不足以撑满整个显示区域,所以背景图以外的部分要显示背景色,并且背景图边缘部分

6、必须处理妥当保证平滑过渡到背景色,不会有突兀的感觉。不光是网页如此,页面里的div、表格有了背景图依然应该设置一个背景色(跟背景图颜色差不多,至少跟文字颜色明显不同)。毕竟有时会出现背景图无法打开的情况,这种情况下如果文字是白色而背景色是默认的白色的话,文字就看不出了。完成一个网页的制作之后,尝试把存放图片的文件夹改名让网页呈现无图状态,看看光文字是否可读。针对css文件,也应该做一次同样的测试,看看css文件没有被调用的情况下的状态。由于网速或代码冗余而导致网站打开速度慢的时候,图片加载不出来即可先显示背景色。倘若你是一个以黑色为主调的网站,默认背景色是白色,那背景图未加载完成时

7、不就先白一下了,导致感觉闪了一下,视觉部友好,根据网站的主色调定义一个背景色,利于减少视觉疲劳(一般是先定义背景色,再定义背景图片,色彩优先)1、css学习用css控制段落文本,用

控制段落。在css中,段落缩进test-intent:20px;段落居中test-align上/下划线,删除线test-decoration:underline/overline/linethrough字间隔:letter-spacing:5px(字与字之间的距离是5像素)本节

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。