前段基础:
以下为我们需要了解的三个方面:
html 超文本标记语言 (页面结构)
css 层叠样式表 (页面样式) 通过 html+css 能设置静态页面
js javaScript (页面行为)
常用的集中软件开发工具:
subline 、webStorm、 DreamWeave;
基本样式:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
一个网页有head(主体)与body(内容)部分
<!DOCTYPE HTML> 声明文档类型
! 声明 注意
document 文档
type 类型
<meta charset = "utf-8">
代码编码格式
utf-8 国际标准
gb2312 中文简体标准
不同标准下,同一个字符 对应的编码是不同的!
<div>块</div>
内部样式表:将样式从标签里面分离开,写在head部分;
html里面注释格式:<!-- Content -->
css内的注释样式
/*
*Content
*/
一般用外部样式表,方便网页的维护;内部样式与行间样式 不利于维护
行间样式:将样式写在标签行里面
</div style = "background:red; width:200px;height:400px;">
#box{
width:400px;
}
XX:??;
属性:属性值;
/属性有: width 宽度; height 高度;
background 背景(可以是颜色可以是图片)
repeat 重复 no-repeat 不重复 repeat-x 横向重复 repeat-y纵向重复
;
例子:backgtound:blue url(图片名) no-repeat 10px(横向位置可以用百分数 cent er等) 50 px(纵向位置)fixed(固定);
复合属性:一个属性有多个属性值 叫复合属性
fixed 固定 固定在页面的上,不随着页面上下发生改变
!!!前端是一个解释性语言,需要游览器进行解读,因此写代码尽量精简!
常见样式:
边框(border):
border-width:边框宽度
borde-style:边框样式
border-color 边框颜色
边框样式:
solid 实线
dashed 虚线
dotted 点线
border复合属性:上线左右边框粗细,样式和颜色;
内边距:(padding)
注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小
有上下左右边距;
如有padding-top等
也可以上下 如 padding:10px 10px;
复合 必须要按 top right bottom left;
外边距:(margin)
上下外边距会叠加;
父子级包含的时候子级的margin-top会传递给父级(内边距替代外边距)可以用内边距(padding 来实现)
margin-left:auto;此代码会自动计算右边的距离,全部给左边;无论怎么调都会使在右边。
margin-left:auto;与margin-right:auto;
会是边框始终处于中间
外边距的复合:
margin:top right bottom left;
盒子的大小=border+padding+wudth/height;
盒子的宽度=border-left+padding-left+width+padding-right+border-ringt;
盒子的高度=border-top+padding-top+width+padding-bottom+border-bottom;
页面中结构外的内容样式称为文本样式:
font-size文字大小:偶数;默认12px
font-family文字字体:默认宋体;可以跟多个字体用逗号隔开。表示如果没有这个字体,显示后面字体;
文字颜色color:(可以用ps吸管取颜色并转为16进制,16进制前要跟“#”例:color:#?????;)
line-height行高:文字在行高的居中;
text-align:文字对齐方式(center等)
text-indent:首行缩进();em单位;缩进几个字;
font-weight:文字着重;
font-style:文字样式(斜体等样式);
text-decoration:(overline downline line-through none)文本修饰;
letter-spacing:字间距;
word-spacing:英文单词间距;
!!!总结:
常见的复合属性:
background
border
padding
margin
font:font-size|font-weight|font-size/line-height|font-family;
(font了解)
游览器建议多装几个IETester
标准游览器:firebox(firebug 1.12.4)经常用于调试
、chrome、safara、oprea。等