Html+css学习经验总结
第一章 DIV布局
了解HTML的发展历史，搜索XHTML与HTML的区别，搜索doctype有几种，做网页要先布局，从大处着眼。
Container,控制整个页面，一般分为header、main、footer，定义div用#+名字、定义class用.
Float：浮动，分为左浮动、右浮动，定义成id为#lside(左浮)#rside(右浮)    注意：id命名时不能用数字，不加doctype，会导致低版本IE解析效果不一样。
在列表中去掉·的方法：<li style=“list-style-type:none”></li>
第二章  盒模型
边框border设置，说明border的（颜、宽度、形状（实现、虚线、立体））四个方向上如何设置border的宽度，border:20px solid red;
solid:实线 dashed:虚线 dotted:点线 outset:立体
border-top、只定义上边框，  同理border-left  border-bottom border-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网页）
思考：利用margin auto完成首页居中，并自行研究，在竖直方向上用margin auto是什么效果？ 内敛元素，<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、表格有了背景图依然应该设置一个背景（跟背景图颜
差不多，至少跟文字颜明显不同）。vb程序设计语言是什么语言
毕竟有时会出现背景图无法打开的情况，这种情况下如果文字是白而背景是默认的白的话，文字就看不出了。
完成一个网页的制作之后，尝试把存放图片的文件夹改名让网页呈现无图状态，看看光文字是否可读。
针对css文件，也应该做一次同样的测试，看看css文件没有被调用的情况下的状态。
由于网速或代码冗余而导致网站打开速度慢的时候，图片加载不出来 即可先显示背景。
倘若你是一个以黑为主调的网站，默认背景是白，那背景图未加载完成时不就先白一下了，导致感觉闪了一下，视觉部友好，根据网站的主调定义一个背景，利于减少视觉疲劳（一般是先定义背景，再定义背景图片，彩优先）
2、css学习
available的反义词
    用css控制段落文本，用<p></p>控制段落。在css中，段落缩进test-intent:20px;段落居
中test-align
上/下划线,删除线test-decoration：underline/overline/linethrough
html个人网页完整代码顺序    字间隔：letter-spacing:5px(字与字之间的距离是5像素)本节课主要掌握：段落缩进、文本方向、字间距、文字装饰线（上下划线，删除线）
在控制文本方面，在p标签里也可以。例如<font></font><em></em><strong></strong><br/><hr/>等等，都可以对文字进行编辑
字体控制精讲，字体的排列顺序：font-family:最好看、次好看、一般、默认，即从不常用到常用，防止用户的浏览器不识别。有衬线：serif:西方字  无衬线：sans-serif
font-styly:italic斜体 weight:bdd 加粗 size：5px; 字体大小    行间距：line-height:30px;可以下载css参考手册，常查常看常练习。
css优先级  标签选择器使用范围最广，类选择器次之，再次是派生，id选择器更精细。
css的初始化      #container{ margin:0px;padding:0px; border:0px; list-style:none;ba
ckground:#F9F9F9;}
就是让这些基本的标签都为0
partnered翻译
Link标签：将css样式中的代码单独新建一个文件保存，然后再用link标签链接到HTML代码中。目的是用户用浏览器访问时这个网页时，如果网速不好时，当没有单独保存css的话，打开的网页只显示文本跟图片进行单一的罗列，不会显示css样式。当单独保存了css代码后，浏览器后台碰到link标签后会自动下载css样式，这样即使网页很大，完整的网页也会显示出来。
新建一个sublime文件时，取一个英文名字，例如：xiaobai.html 然后保存，然后！+tab就可以了。
庄宿正：“不然咋弄，得靠这个赚钱啊，不然怎么赚钱？”
第四章 HTML语义标签
表格的做法：
汉字转英文在线翻译<table>       
    <tr>  //行
        <td></td>  //列
    </tr>
</table>  练习：做个课程表
超链接：用<a></a>标签  本节课讲<a>标签的用法。
例子：<a href=“网站地址（直接复制粘贴或者写上）”target-blank(当打开网页时，会弹出新标签)/title=“注明”（当鼠标放上去时显示的内容）>网站名字</a>
锚点：（用a标签）起到定位功能
  <a name=“名字”></a>  例如：<a herf=“我给自己做的网页取得名字#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）双margin bug (左浮元素，左margin是定义的2倍，右浮，右margin是定义的2倍。)
    解决方法：在左浮那里加_display:inline;(内敛)
第五章 公司网页开发实战
第六章 附录

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。