网页制作案例教程笔记（HTML+CSS+JaVaScript）

时间：2023-10-04 13:30:01 | 来源：网站运营

时间：2023-10-04 13:30:01 来源：网站运营

网页制作案例教程笔记（HTML+CSS+JaVaScript）：

---

第三章使用CSS技术

（5）text-decoration:文本转换。

●none:不转换（默认值）。

●underline:首字母大写。

●overline:全部字母转换成大写。

●line-through:全部字母转换成小写。

（6）text-decoration:文本装饰。

●none:无装饰（默认值）。

●underline：下划线。

●overline：上划线。

●line-thorugh：删除线。

(7)text-align:水平对齐方式。

text-align:水平对齐方式，用以设置文本内容的谁平对齐方式。

●left:左对齐（默认值）。

●right:右对齐。

●center:剧中对齐。

（8）text-indent:首行缩进。——em(单位)

（9）white-space:空白符处理。

●normal:常规显示（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。

●pre:预格式化，保留空格，空行原样显示。

●nowrap:空格空行无效，强制文本不能换行，除遇到<br/>。内容超出元素边界也不会换行，若超出浏览器边界则会自动增加滚动条。

（10）text-dhadow:阴影效果。

text-dhadow:阴影效果，用于页面文本添加阴影效果。

text-dhadow:语法：

选择器{text-dhadow:

●h-shadow ；设置阴影水平偏移距离。

●v-shadow ；设置阴影垂直偏移距离。

●blur ；设置模糊半径。

●color；设置阴影颜色。

}

eg:选择器{text-dhadow:10px 10px 10px red color;}

(11)text-overflow:标示对象内溢出文本。

●clip:修剪溢出文本，不显示省略“...”。

●elliosis:用省略标签"..."代替被修剪文本，省略标签插入的位置是最后一个字符。

第四章运用盒子模型划分网页模块

backgroung-color设置背景颜色

backgroung-imagw：url(图像)设置背景图像

backgroung-repeat:设置背景图像平铺

●repeat:沿水平和竖直两个方向平铺。（默）

●no-repeat:不平铺。（图像位于左上角，只显示一次）

●repeat-x:只沿水平方向平铺。

●repeat-y:只沿垂直方向平铺。

backgroung-position设置背景图像的位置

●水平方向：left ,center, right

●垂直方向：top ,center ,bottom

backgroung-attachment设置背景图像固定

●scroll:图像随页面一起滚动。（默认）

●fixed:图像固定在屏幕上，不随页面滚动。

backgroung综合设置元素背景

顺序：url(图像)，平铺，定位，固定。

元素类型分为

（1）块元素：以区域的形势出现，常用于网页布局和网页结构的搭建。

eg:<div>/<h1>~<h6>/<p>/<ul>/<ol>/<li>

（2）行内元素：无独立区域，一般不可以设置宽度，高度，对齐等属性。

eg:<span>/<strong>加粗/<b>/<em>倾斜/<i>/<del>/<s>/<ins>/<u>/<s>/<a>

<span>容器标签：

作用：只能包含文字和各种行内标签的容器。

注意：<div>标签可以嵌套<span>标签，

<span>标签不能嵌套<div>标签。

display元素类型的转换：

●inline:此元素将显示为行内元素。

●block:此元素将显示为块元素。

●inline-block:此元素将显示为块元素，可以为其设置宽度，高度，和对齐方式等属性，但该元素不会占据一行。

●none:此元素将会被隐藏，不显示，不占据空间，相当于该元素不存在。

第七章运用浮动和定位布局

float浮动：

●left:标签向左浮动。

●right:标签向右浮动。

●none:标签不浮动（默认）。

clear清除浮动：

●left:不允许左侧有浮动标签。

●right:不允许右侧有浮动标签。

●both:同时清除左右两侧浮动影响。

（1）使用空标签清除浮动：

（2）使用overflow清除浮动：

{overflow:hidden}

（3）使用after清除浮动：

overflow规定溢出的显示状态：

visible:内容不会被修剪，会呈现在标签框之外（默认值）

hidden:溢出内容会被修剪，并且被修剪的内容是不可见的。

auto:在需要时产生滚动条，即自适应所要显示内容。

scroll:溢出内容会被修剪，且浏览器会始终显示滚动条。

position定位模式

static:自动定位（默认）

relative:相对定位，相对于其原文档的位置进行定位。

absolute:绝对定位，相对与其上一个已经定位的父标签进行定位。

fixed:固定定位，相对于浏览器窗口进行定位。

边偏移

top:顶端偏移

bottom:底部偏移

left:左侧偏移量

right:右侧偏移量

定位类型

静态定位

行对定位

绝对定位

固定定位




z-index层叠等级属性

默认值是0，取值越大，定位元素在层叠元素中越居上。

布局

（1）确定页面的版心宽度

（2）分析页面中的模板