0901静态网页制作DIV+CSS

一、块元素和内联元素
1、块元素
独占一行
可以定义宽度和高度
常用div、p、ul、li
2、内联元素
一行排列显示
不能定义宽度和高度
常用span、a、label
3、div和span标签
最大优点：没有任何的默认样式渲染
最大区别：div标签是块元素，span标签是内联元素
作用：
1、结构化HTML元素
2、DIV+CSS网页布局
3、提高网页加载速度
经验：
div和span标签可以相互转换（display属性）
规范角度而言，span标签中不能内嵌div标签

CSS
1、什么是CSS
Cascading Style Sheet级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对文字、颜色、边距、高度、宽度、背景图片、网页定位等设定
2、CSS的作用
能控制页面的样式和分布
网页文件与样式文件相分离，提高开发效率
CSS语法
style标签

<html><head> <style type="text/css" > h1 { font-size:12px; color:#F00; } </style>
</head> ….

注意：
1、应写在head标签之间；
2、加上type="text/css"属性
语法2

选择器 {声明1; 声明2; …… }

例：
h1 {font-size : 12px; color : red; }

1、CSS的最后一条声明后的“;”可写可不写，建议都要写上；
2、CSS的多条声明可写在同一行，但开发时便于阅读建议分行写并缩进；
CSS选择器
1、标签选择器
HTML标签作为标签选择器的名称

p { font- size:16px;}

2、类选择器

<标签名 class= "类名称">标签内容</标签名>

注意：网页中可以给不同标签相同的class

.class { font-size : 16px; }

3、ID选择器

<标签名 id= "id名称">标签内容</标签名>

注意：网页中标签的ID不能重复，唯一存在

#id { font- size:16px;}

CSS复合选择器
1、并集选择器

p , #id , .class { font-size : 14px; color : green; }

多个选择器之间可以是多个不同或相同类型；
多个选择器之间必须用英文半角输入法逗号“,”隔开；
2、交集选择器

h3.second{ font-size : 14px; color : green; }

格式为：标签 + 类选择器或标签 + ID选择器
选择器之间不能有空格；

3、后代选择器

p a {font-size : 14px; color : green;
}

选择器之间可以是多个不同或相同类型并有层级关系的；
选择器之间用空格隔开；

总结
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
灵活运用并集、交集、后代选择器

二、CSS的引入方式
1、行内样式：使用style属性引入CSS样式

<h1 style="color:red; " >style属性的应用</h1>
<p style="font-size:14px; color:green; " >直接在HTML标签中设置的样式 </p>

2、内部样式表：style标签中书写CSS代码

<head> <style type="text/css"> h3{ color: red; } </style>
</head>

3、外部样式表：
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式和导入式
链接式：

<link type="text/css" rel="styleSheet" href="CSS文件路径 " />

导入式：

<style type ="text/css"> @import url("css文件路径" );
</style>

链接式与导入式的区别
link：
1、属于XHTML
2、优先加载CSS文件到页面
@import：
1、属于CSS2.1
2、先加载HTML结构再加载CSS文件
CSS中的优先级
行内样式 > 内部样式表 > 外部样式表
ID选择器 > 类选择器 > 标签选择器
总结
CSS选择器分标签选择器、类选择器和ID选择器
CSS的复合选择器：交集选择器、并集选择器和后代选择器
在HTML中引入CSS样式的三种方式：行内样式、内部样式表和外部样式表
注意CSS的优先级
三、CSS的属性
文字、文本属性
背景属性
列表属性
盒子模型
浮动属性
定位属性

字体属性

文本属性

背景属性

列表属性

超链接伪类

a:link {color: red} /* 未访问的链接 */
a:visited {color: blue} /* 已访问的链接*/
a:hover {color: green} /* 当有鼠标悬停在链接上 */
a:active {color: yellow} /* 被选择的链接*/

经验：
1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的
3、记忆方法： love hate !
鼠标形状控制
cursor属性，其值：

盒子模型

外边距
margin:
margin-top
margin-right
margin-bottom
margin-left
margin
实例：

margin-top: 3 px margin-right : 5 px margin-bottom : 7 px
margin-left : 4 px
margin :3px 5px 7px 4px;
margin :3px 5px 7px (5px);
margin :3px 5px (3px 5px);
margin :8px (8px 8px 8px);

注意：margin：上右下左（顺时针方向）
边框
borde

内边距
padding
padding-left
padding-right
padding-top
padding-bottom
padding
实例：

padding-left:10px;
padding- right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:30px 8px 10px (8px) ;
padding:10px5px;
padding:10px;

注意：
padding：上右下左（顺时针方向）
小结
盒子模型总尺度
盒子模型总尺度 = border + padding +margin + 内容尺寸（宽/高）
外边距可用于网页居中显示
margin-left: auto;
margin-right:auto;
块元素才能完全适用于盒子模型
使用display属性来相互转化
none（元素隐藏，不可见）
block（转为块元素，独占一行）
inline（转为内联元素，不换行）
浮动属性
float属性
取值：
left：左浮动
right：右浮动
none：不浮动
作用：
块元素同行排列显示，一般用于排版、分栏显示
设置浮动属性后，脱离文档流向指定的左或右边对齐直到父元素的边界或浮动的元素
注意：
使用浮动后要及时清除，以免影响其后的网页元素
清除浮动
清除浮动必要性：
浮动后，脱离了文档流不占网页空间
浮动后的网页元素会影响同级元素
clear属性清除浮动：
取值：
left
right
both
none
表明容器框的哪边不挨着浮动框
overflow属性
作用：定义溢出元素内容区的内容会如何处理
取值：
visible（默认）
auto
hidden
scroll
定位属性
position属性
relative（相对定位）：
相对它原来的位置，通过指定偏移，到达新的位置。
仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响
absolute（绝对定位）：
相对已设定非static定位属性的父元素计算偏移量
fixed（相对浏览器固定定位，IE6不支持）
static（默认）：
偏移量设置
X轴(left、right 属性)与Y轴（top、bottom属性）
可取值：像素或百分比
定位图解
定位图解示例图：

0901静态网页制作DIV+CSS相关推荐

html美食网页制作 dw静态网页制作 div+css美食网页实现与制作
网页效果共10个页面代码实现 <!doctype html> <html> <head> <meta charset="utf-8"& ...
宠物狗站点html,宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)
宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)(论文11000字,网页代码) 摘要本设计将对宠物狗个性化服务网站前端设计开发与实现进行研究和探讨.借助网页设计与制作语 ...
HTML网页制作 Div+CSS
@HTML网页制作 Div+CSS PC端和安卓Web端实现效果 PC段安卓Web端 form表单定义和用法标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段 ...
html简单个人网页制作 div+css静态网页设计——我的家乡-金堂(9页) HTML+CSS+JavaScript 关于家乡的HTML网页设计-----金堂
HTML5期末大作业:老家网站设计--我的家乡-金堂(9页) HTML+CSS+JavaScript 关于家乡的HTML网页设计-----金堂常见网页设计作业题材有个人. 美食. 公司. 学校. ...
大学生动漫网页设计模板机动战士高达静态网页制作成品下载 HTML漫画网页作业带JS轮播图
机动战士高达静态网页制作应用知识点作品介绍首页部分代码页面最终效果网页源地址应用知识点 DIV CSS布局.网页背景图.JS图片轮播.在线视频作品介绍机动战士高达动漫网页使用DIV C ...
静态网页制作教程（转载）
方法/步骤新建一个txt文本文档,先不要急着修改文件后缀名,有基础的朋友手动输入HTML代码,不会也没有关系,百度搜索"网页HTML代码". 代码: <!Doctype h ...
【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...
炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
分析静态网页客户服务器工作过程,(静态网页制作课程标准.doc
静态网页制作课程标准课程编码: 02345 课程类别:专业基础必修课适用专业:计算机应用授课系(部):电子与信息系学分学时: 4 编写执笔人:宋昌统教研室主任审核签字: 审核日期: 系主任审 ...

0901静态网页制作DIV+CSS

0901静态网页制作DIV+CSS相关推荐

最新文章

热门文章