一.建站流程
平面设计 ---- 制作 ---- 程序
1.平面设计:ps
2.制作:div+css
3.程序:asp: asp.net; php; jsp。
jQuery:制作和程序中常用
二.简介
html:超文本标记语言 (最新版本html 5.0)
xml:可扩展标记语言
xhtml:相当于html 4.0版本
html标签:<html></html> <head></head> <div></div> <p></p> <br /> ……
常用标签:<div></div> <ul><li></li></ul> <dl><dt></dt><dd></dd><dl>
CSS:(Cascading Style sheet)层叠样式表
命名:一般以英文命名 (首字母不能为数字)
三.css 调用方法
外联:在<head></head>之间调用 <link type="text/css" rel="stylesheet" href="css/css.css"/>
内联:写在<head></head>之间 <style rel="stylesheet" type="text/css"></style>
内嵌:嵌在标签里style=" "
四.属性
1. class (.) id (#)
2.属性写在花括符里,每条用逗号隔开 (内嵌 style=" ")
3.常用:weight:宽 height:高 border:边线 margin:边距(margin:0 auto;居中) padding:填充 color:颜色 font-size:字号 font-family:字体 float:浮动(使两个div在同一行上) background:背景
4.边线
border:1px solid #ccc;
border-top:1px solid #ccc;
border-left:
border-right:
border-bottom:
solid:实线 dashed:虚线 dotted:点线 double:双线
5.边距
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
简写
margin:10px;
margin:10px 20px 30px 40px; (由上面开始 顺时针方向)
margin:10px 20px; (上下10px 左右20px)
边距还可以是负数
6.填充
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
简写
padding:10px;
padding:10px 20px 30px 40px; (由上面开始 顺时针方向)
padding:10px 20px; (上下10px 左右20px)
7.文字
font-family:"黑体", Arial;
font-size:12px; 文字大小
color:#555;文字颜色
font-weight:bold;
line-height:22px; 行高
text-indent:2em; 首行缩进(单位em首行缩进)
text-align:center; 水平对齐
word-spacing;英文单词
letter-spacing:1px;汉字或字母间距
font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜)
简写 font:italic bold 12px/22px arial, "宋体";
文字两端对齐最后一行左对齐
text-align:justify;
text-justify:inter-ideograph;
文字超出显示省略号
text-overflow:ellipsis;
white-space:nowrap;
*white-space:nowrap;
overflow:hidden;
8.背景
background-color:#fff;背景颜色
background-image:url(../images/index2_01.png); 背景图片
background-repeat:no-repeat; 背景不重复 值:repeat-x:x轴重复 repeat-y:y轴重复
background-position:10px 20px;(离左边10像素 上边20像素) 它的值可以是:lef right center top bottom
background-attachment:fixed; 背景浮动 scroll(默认值)背景滚动
简写:
background: #fff url(../images/index2_01.png) no-repeat 10px 20px fixed;
9.大小
weight: 宽
height: 高
值可以的 auto (自动搞) %;
例如:weight:20px; weight:auto; weight:80%;
min 最小值
max 最大值
例如:min-height:最小高度
10.内隐藏属性overflow
visible:默认值。内容不会被修剪,会呈现在元素框之外。
hidden:内容会被修剪,并且其余内容是不可见的。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。
11.显示属性 display
常用值
none:此元素不会被显示。
block:此元素将显示为块级元素,此元素前后会带有换行符。
12.单位
常用单位:px em(1em等于1个字大) %
13.颜色
颜色名称:(例如 red)
RGB值:(例如 rgb(255,0,0))
RGB百分比值:(例如 rgb(100%,0%,0%))
十六进制数:(例如 #ff0000)
简写:#ff9900 #f90
14.超链接
a:link:选择所有未被访问的链接。
a:visited:选择所有已被访问的链接。
a:active: 选择活动链接。
a:hover:选择鼠标指针位于其上的链接。
text-decoration:none; 去掉下划线
15.圆角
border-radius: 5px; 所有角都使用半径为5px的圆角,此属性为CSS3标准属性
-moz-border-radius: 5px; Mozilla浏览器的私有属性
-webkit-border-radius: 5px; Webkit浏览器的私有属性
border-radius: 5px 4px 3px 2px; 四个半径值分别是左上角、右上角、右下角和左下角
16.透明度
(1)第一种
filter:alpha();
background:#000;
opacity:0.5;
(2)第二种
background:rgb(0,0,0);
filter:alpha();
background: rgba(0,0,0,0.6);
opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
filter:alpha(); 这个是为老的IE设的,可取值在0-100,其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
17.固定宽高自动,或者固定高宽自动
max-width:300px;
_width:expression(this.width > 300 ? "300px" : this.width);
18.选择器
类选择器:.box{ color:#f00; }
Id选择器:#box{ color:#f00; }
标签选择器:body{ color:#f00; } div{ color:#f00; } img{ height:10px; }
分组选择器:.box1,.box2{ color:#f00; }
子选择器:.box>div{ color:#f00; }
后代选择器:.box .box_01{ color:#f00; }
:first-child(首个子对象)
19.表格
.box table{
border-collapse:collapse;
}
.box td{
border: 1px solid black;
line-height:20px;
}
20.定位
position: relative;
relative 相对的(相对于其正常位置进行定位top left)
absolute 绝对的(相对于 static 定位以外的第一个父元素进行定位 top left right bottom)
fixed 漂浮 (相对于浏览器绝对定位top left right bottom)
static 默认值 没有定位
21. 优先级:
后面的 > 前面的
id > class
内嵌 > 内联 > 外联
z-index:9999; 数字越大优先级越大,默认为零
22.兼容
-ms-:IE
-webkit-:Safari 和 Chrome
-moz-:Firefox
-o-:Opera
IE、FF 共用 height: 100px !important(优先级)
.box{
width: 100px!important;
width: 80px;
}
clear:both; 清除浮动
display:inline; 此元素会被显示为内联元素,元素前后没有换行符。