1、网页开发流程(整体——>局部)
- 1)分析各个模块,切图
- 2)了解代码书写规范
- 3)整体布局
- 4)详细布局
- 5)样式处理
- 6)网页的优化和细节方面的处理
2、如何开发网页
1)div
- 没有语义性,主要用于布局,独占一行显示
- h标题标签; 列表:ul、ol、dl,里面的列:li; 段落:p;
2)CSS
- 层叠样式表,是一组格式设置规则,主要用于控制WEB页面的外观;
CSS引入方式:
- i:标签内书写——>直接在标签里面加style样式:
<div style="border:1px solid red">
ii: head头部写入:在head里面加入style标签,然后在style标签里写入样式;
iii:外部引入:在里面加入,引入外部CSS文件;
- i:标签内书写——>直接在标签里面加style样式:
3)路径
- ../ 返回当前文件上一级
- ./ 当前文件所在目录(很少用)
- / 根目录
4)CSS的3种引入方式的使用
1. 标签内书写
- 优点:优先级最高。
- 缺点:代码冗余,维护性差,仅个别特殊情况下使用。
2. 头部写入
- 应用:应用于大型互联网首页;
- 优点:
- 相对于单页,代码量少;
- 相对于标签书写,维护性好;
- 没有服务器请求压力。
3. 外部引入
优点:
- 相对整个网站,代码量少;
- 一个CSS文件可以控制多个页面;
- 有利于改版和维护;
- 有效的利用缓存机制,加快页面的访问速度。
缺点:
- 对于单个页面,会有多余的代码;
- 有可能会给服务器造成请求压力;
5)CSS重置
reset文件,每次写页面都要把reset加载进去,避免不同的浏览器的显示问题。
6)CSS基础语法
- 选择器 { 属性: 值; 属性: 值; }
- 选择器通常是需要改变的HTML元素
7)CSS自身属性:盒模型
属性值:
- width——宽
- border——边框
- margin——外边距
- padding——内边距
属性值的设置方式:
- margin-left / margin-right / margin-top / margin-bottom
不同方向值的合并书写情况:
margin/padding:
- 1个值 4个方向
- 2个值 上下 左右
- 3个值 上 左右 下
- 4个值 上 右 下 左
border: 10px solid red; //四个方向全是红色
- border-left: 5px solid green //左边框绿色
- border-right: 5px solid blue //右边框蓝色
- border-top: 5px solid green //上边框绿色
- border-bottom: 5px solid blue //下边框蓝色
盒模型大小的计算:
- 盒模型宽度:横向margin+横向padding+横向border+width;
- 盒模型高度:纵向margin+纵向padding+向border+height;
8)CSS选择器:
CSS基本选择器:3种——>优先级:id选择器>类选择器>标签选择器
- id选择器: 同一个id名字在页面只允许出现一个, 主要用于JS中;
<div id="wrap">乐享</div>
<style>
#wrap {
border: 10px solid red;
}
</style>
- 类选择器:同一个类名允许在同一个页面多次出现 (类名小写)
<div class="test">乐享</div>
<style>
.test {
border: 5px solid blue;
}
</style>
- 标签选择器:HTML中的各个标签
<p>乐享</p>
<style>
p {
border: 5px solid blue;
}
</style>
9)显示属性float
- 属性值——float: none / lefe / right
- float ——先浮后动(水槽原理)
- 所有的元素都可以浮动
- 具有float属性的元素在父标签中是不占空间的
10)背景色
- background-color:颜色值(英文单词);
- background-colorr:rgb(255,120,133) ;
- background-colorr:#ffeedd (6位16进制数); 特例:#ccff33也可写成#cf3
11)附录
- 关于选择器的使用案例
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<title>网页布局与样式入门</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<style>
#wrap {
float: left;
height: 300px;
border: 10px solid red;
}
.test {
float: left;
height: 300px;
border: 10px solid green;
}
p {
float: right;
height: 300px;
border: 10px solid purple;
}
</style>
</head>
<body>
<div id="wrap">乐享</div>
<div class="test">乐享</div>
<p>乐享</p>
</body>
</html>