网页设计知识点

最新推荐文章于 2024-06-13 18:31:56 发布

胡小图图图图图

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量464

点赞数 25

文章标签： html5 css javascript

本文链接：https://blog.csdn.net/m0_74843457/article/details/136521462

版权

第二章：HTML基础重点

HTML标签和标签的基本属性
页面格式化标签
<div>标签
图像标签以及相对地址和绝对地址

第三章：CSS基础知识的重点

CSS样式表的引入

行内式，内嵌式，外链式，引入式

CSS基础选择器

标签选择器，类选择器，id选择器，通配符选择器

CSS定义字体样式属性、CSS定义文本外观属性、CSS定义背景颜色
CSS复合选择器

标签指定式选择器，后代选择器，并集选择器

第四章：盒子模型

盒子模型的基础属性：

边框属性：border，内边距（padding），外边距（margin），高度（height），宽度（width），背景（background）

盒子模型的新增属性：

透明度：（rgba（红，蓝，绿，透明度），opacity）

圆角：border-radius

阴影：box-shadow

渐变

元素的类型：块元素，行内元素
元素类型的转换：display：属性值。
浮动：float:属性值（left，right，none）
清除浮动：

clear:属性值（left，right，both）
使用空标签清除浮动
使用overflow属性清除浮动

（overflow:hidden/auto）

使用伪类:after清除浮动

overflow属性（裁剪盒子溢出的内容）
定位模式：

position:属性值

（相对定位【relative】，绝对定位【absolute】，固定定位【fixed】）

边偏移

属性：left，right，top，bottom

子绝父相

含义：子绝（子元素绝对定位）父相（父元素相对定位）

元素的层叠关系

不同的布局元素的层级关系：

标准流 < 浮动 < 定位

不同的定位之间的层次关系：相对绝对固定层级相同（根据html标签书写先后顺序有关，后面的会覆盖前面的元素）

弹性布局（display：flex）

第五章：列表与超链接相关知识点

列表标签：

无序列表<ul>,有序列表<ol>,定义列表<dl>

CSS控制列表样式：list-style:none;
超链接标签：创建超链接，锚点链接，链接伪类控制超链接

第六章：表格和表单的相关知识点

表格的标签和属性

表格的标签<table>,<tr>,<td>,<th>

表单概述

表单<form action=”地址” name=”名称” method=”get｜post”>

基础表单控件 <input>,<select>,<textarea>
新增的表单控件和属性

第七章：视频和音频的嵌入，网页动画效果设置

嵌入音频

嵌入视频

控制视频的宽度和高度（width，height）
网页中添加过渡效果（transition）
网页中添加变形效果（transform）

（1）2D变形

平移：translate()

缩放：scale()

倾斜：skew()

旋转：rotate ()

（2）3D变形

网页中添加动画效果（animation）

创建动画规则@keyframes

一.新增知识点

一：label标签：

显式关联：label标签的for属性，与指定表单元素的id来实现表单联动。

label标签与特定的表单控件关联后，用户点击label标签中的文本，浏览器会自动聚焦到标签关联控件。

隐式关联：直接使用label标签包裹表单控件；

注1：label标签只能包含一个表单元素，包含多个只对第一个有效；

注2：此时label不能添加for属性，否则不做作用了！

二：重叠的元素--z-index属性

1.z-index只能在position属性值为relative或absolute或fixed的元素上有效。

2.基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

三：CSS样式

（1）需求描述

例如使列表中的第一项或者最后一项显示不同的样式、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。
我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。

（2）详细使用方法

1.first-child

first-child：选择列表中的第一个标签。

举例：第一行字体显示为红色，代码如下：

li:first-child{

    color: red;

}

2. last-child

last-child：选择列表中的最后一个标签。

举例，最后一行字体显示为绿色，代码如下：

li:last-child{

    color: green;

}

3.nth-child(n)

nth-child(n)：选择列表中的第 n 个标签。

举例：第三行字体显示为蓝色，代码如下：

li:nth-child(3){

    color: blue;

}

4.nth-child(odd)

nth-child(odd)：选择列表的奇数行。

举例，奇数行背景显示为灰色，代码如下：

li:nth-child(odd){

    background: #999;

}

5.nth-child(even)

nth-child(even)：选择列表的偶数行。

举例：偶数行背景显示为黄色，代码如下：

li:nth-child(even){

background: yellow;

}

四：【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解

1、>(大于号) 子元素选择器

>大于号：选择某元素后面的第一代子元素

案例：

<style type="text/css">

h1>strong {

color: red;

}

</style>

<body>

<h1>

<strong>一代子元素</strong>

</h1>

<h1>

<span>

<strong>二代子元素</strong>

</span>

</h1>

</body>

2、~（波浪号）

~波浪号：选取某个元素之后的所有相同元素

.box~h2 : 选取 .box 后面所有的 h2

这个选择器两种元素必须处于同一个父元素内，被选取的元素不必直接紧随。

<style type="text/css">

.box~h2{

background: aqua;

}

</style>

<body>

<div class="box"></div>

<h2>1</h2>

<em>2</em>

<h2>3</h2>

<h2>4</h2>

</body>

3、（空格）后代选择器

选择某元素后面的所有子元素

后代选择器允许你根据文档的上下文关系来确定某个标签的样式

4、,（逗号）并集选择器

可以对选择器进行分组，被分组的选择器就可以分享相同的声明

5、+（加号）相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素

<style type="text/css">

span+em{

color: red;

}

</style>

<body>

<h1>

<span>案例1</span>

<em>案例2</em>

</h1>

</body>

胡小图图图图图

关注

25
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
网页设计知识点

行内式，内嵌式，外链式，引入式标签选择器，类选择器，id选择器，通配符选择器标签指定式选择器，后代选择器，并集选择器边框属性：border，内边距（padding），外边距（margin），高度（height），宽度（width），背景（background）透明度：（rgba（红，蓝，绿，透明度），opacity）圆角：border-radius阴影：box-shadow渐变（overflow:hidden/auto）position:属性值（相对定位【relative】，绝对定位【absolute】
复制链接

扫一扫