Web技术开发(二)

15 Sep 2015 - Kumming

基本样式

<a href="Web技术开发二.html">YNU</a>
link:让浏览器解析加载，典型如样式表文件CSS，统一风格
<style>
     <!--声明一个样式表-->
     ul {list-style-type:none;}
     li {float:left}
</style>

block:块标记，宽度＝父元素，如ul；inline:内联/行内标记，宽度＝内容，如a

盒子

大小、位置－>盒子模型，任何一个标记为盒子
盒子＝内容+边框(border)+padding(内边际)
元素高:height，宽:width
盒子与盒子之间：margin

长度单位：

px 像素，相对量，如1080p，指水平方向可显示1080像素
em 定义字体多大，1em=16px
pt 类如word磅，绝对大小，根据dpi指定，dot per inch
公式：px = pt * dpi / 72

<padding>
     left
     right
     top 
    bottom

	top	right	bottom	left
padding	10px	2opx	30px	40px(带单位)
	上下	左右
padding	10px	20px
	全部
padding	10px

行内标记只有左右边际

浏览器渲染模式：

正常流
浮动流float(相对位置，绝对位置)

颜色表示：

li {float:left; background-color:#fff;} 颜色RGB，自发光；CMYK,反光，用于印刷
表示颜色以#号开始，#**；一个的表示0-FF,两个一样简写为一个；
可用一些单词，如red,yellow…
函数rgb(十进制，十进制，十进制）

透明度：

opacity:0-1

前景色：

a {color:white; text-decoration:none;}去掉下划线

状态定义：

是伪类，优先正常定义

li:hover {background-color:...} 鼠标悬停
li:first-child {border-radius:8px 0 0 8px} 圆角
   last-child
border即边框，默认为零

案例：

<style>
    ul {list-style-type:none;}
    li {float:left; background-color:#699; padding:10px 20px;}
    li:hover {background-color: #569;}
    li:first-child {border-radius:8px 0 0 8px}
    li:last-child {border-radius:0 8px 8px 0}
    a {color:white; text-decoration: none;}
</style>