HTML

网页设计有许多应用场景和日常使用案例，以下是一些常见的：

  1. 企业官网：企业可以通过网页官网展示公司的信息、产品、服务等内容，提高知名度和品牌形象。
  2. 电子商务平台：在线商店或电商平台可以通过网页设计来展示商品、促销活动、购物车和结账等功能，方便用户浏览和购买商品。
  3. 社交媒体平台：社交媒体如Facebook、Twitter、Instagram等需要提供一个易于使用、吸引人的界面，以便用户分享内容、与朋友互动。
  4. 博客和新闻网站：博客网站和新闻网站需要具备良好的读取性能、排版和页面设计，以便读者更好地阅读文章和获取信息。
  5. 教育和培训网站：教育和培训机构通过网页设计来呈现课程、学习资源、教师介绍等内容，在线辅导和互动等功能也需要进行良好的设计。
  6. 政府和公共服务机构：政府和公共服务机构利用网页设计来提供公共服务、政策法规、信息发布等功能，方便民众获取所需的信息和服务。
  7. 游戏和娱乐网站：游戏和娱乐网站需要吸引用户的注意力，提供游戏、视频、音乐等娱乐内容，同时也需要良好的用户体验和易用性。

这些只是一小部分网页设计的应用场景和日常使用案例。随着技术的不断发展和创新，新的应用场景和使用方式将不断涌现。

外部样式表

1
2
HTML
<style rel="stylesheet" href="###"></style>

基础样式

text

test-align(文本对齐)

1
2
3
4
5
div {
	###:left;	//左对齐
	###：right;	//右对齐
	###：center;	//居中对齐
}

text-decoration（文本装饰）

1
2
3
4
5
6
div {
	###：none	//默认，，没有装饰线
	###：underline	//下划线，链接a自带下划线
	###：overline	//上划线
	###：line-through //删除线
}

text-indent（文本缩进）

1
2
3
4
5
6
7
div {
	###：20px；	//首行缩进2格
}	

div {
	###：2em;	
}

em是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

line-height（行间距）

flex：1（比例布局）

1
2
3
4
5
6
7
8
9
.container{
	display:flex
}
.box1{
	flex:1
}
.box2{
	flex:1
}

长这样🔜

transition(动画过渡)

1
2
3
4
5
6
7
8
9
10
11
.img{
	width:200px		//宽度
	height:200px	//高度
	transition:all 2s	//所有角动画过渡
}
.img:hover{			//鼠标接触时
	border-radius:50%	//圆角
	//过度面罩
	-webkit-mask-image:linear-gradient(rgb(227,227,227),90%,transparent)
	opacity:0.2		//保留角边，逐渐透明
}

transition + ease-in ease-out

慢进 慢出

CSS快速改变原生颜色

1
2
3
4
5
6
7
8
input[type=checkbox]{	//单选框
	accent-color:red	//修改为红色
}

//统一颜色
:root{
accent-color:deeppink	//深粉
}

background（图片）

1
2
3
4
5
6
7
8
9
10
11
12
CSS
.box{
	width:200px;		//box宽
	height:200px;		//box高
	background:url('/img');
	background-size: 100px 100px;	//调整图片大小
	background-repeat: repeat-x;	//水平重复图像
	background-repeat: repeat-y;	//纵向重复图像
	background-position: center bottom	//底部居中
	background-position: right bottom	//底部右对齐
	background-position: 0 0 		//调整坐标
}

calc（动态计算）

1
2
3
4
5
.box{
	width :calc(100% - 50px);	//假设初值为500px，得450px
    width :calc(100% - 100px * 4);	//100px
    width :calc(100% / 3);		
}

::before & ::after(伪元素)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content::before{			//在头部插入文本
	content:"《西江月·平山堂》";		
	color:red;					//字体颜色
	font-weight:600;			//调整字体粗细
	background:rgb(255,192,0);	//背景颜色
	display:block;			//转为块元素，独占一行
	width:50%				//调整块宽度
	padding:10px 0			//调整块高度
	margin:10px 0			//设置外边距
}

.content::after{		//在尾部插入文本
	content:"--苏轼"；		
	padding-left:20px;	//设置元素左内边距
}

image-20230505000416933

Emmet语法

1.1快速生成HTML结构语法

  1. 生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成

  2. 如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div`

  3. 如果有父子级关系的标签，可以用>比如u>就可以了

  4. 如果有兄弟关系的标签，用+就可以了比如div+p

  5. 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了

  6. 如果生成的div类名是有顺序的，可以用自增符号$

1
2
3
4
5
6
<div> + tab ==> <div></div>
div*3
li>lu
div+p ==> <div>
<p></p></div>
.demo ==> <div class="demo"></div>

CSS的复合选择器

1.1后代选择器

后代选择器 又称为包含选择器，可以选择元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

image-20230521194859083

1
2
3
4
5
6
7
/*-HTML*/
<ol>
	<li></li>
</ol>

/*CSS*/
ol li {}

1.2 子元素选择器

子元素选择器（子选择器）,只能选择作为某元素的最近一级子元素

image-20230521195335551

1
2
3
4
5
6
7
/*HTML*/
<ol class="nav">
	<li></li>
</ol>

/*CSS*/
.nav>li {}

1.3 并集选择器

image-20230521200930891

1
2
3
4
5
6
7
/*-HTML*/
<ol class="nav">
	<li></li>
</ol>
/*CSS*/
div,
p{}

1.4 链接伪类选择器

1
2
3
4
a:link		/*选择所有未被访问的链接*/
a:visited	/*选择所有已被访问的链接*/
a:hover		/*选择鼠标箭头指针位于其上的链接*/
a:active	/*选择活动链接（鼠标按下未弹起的链接）*/

==注意：==

为确保生效，请按照LVHA顺序声明：link --> :visited --> :hover --> :active

1.5 focus伪类选择器

1
2
3
4
5
6
CSS
/*把获得光标的input表单元素选取出来*/
/*-HTML*/
<input type="text">
/*CSS*/
input:focus {}

元素显示模式

HTML元素一般分为块元素和行内元素两种类型.

1.块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<i>等，其中<div>标签是==最典型的块元素==。
块级元素的特点：

  1. 比较霸道，自己独占一行。
  2. 高度，宽度、外边距级内边距都可以控制
  3. 宽度默认是容器（父级宽度）的100%。
  4. 是一个容器及盒子，里面可以放行内或者块级元素

注意：

  • 文字类的元素内不能使用块级元素

  • 标签主要用于存放文字，因此

    里面不能放块级元素，特别是不能放

  • 同理，

    ~

    等都是文字类块级标签，里面也不能放其他块级元素

2.行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：

  1. 相邻行内元素在一行上，一行可以显示多个。
  2. 高、宽直接设置是无效的。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或其他行内元素。

注意：

  1. 链接里面不能再放链接。
  2. 特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全。

3.行内块元素

在行内元素中有几个特殊的标签一img、、,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
  2. 默认宽度就是它本身内容的宽度（行内元素特点）。
  3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
1
2
3
4
5
6
7
/*显示模式的转换：
  行内 转 块元素*/
display：block；
/*反之*/
display: inline;
/*行内块*/
display: inline-block;

⭐盒子模型⭐

网页布局的本质

网页布局的过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子box
  2. 利用CSS设置好盒子的样式，然后摆放到相应位置
  3. 往盒子里面装内容

核心本质:就是利用CSS摆盒子

组成部分

所谓盒子模型：就是把HTML页面中的布局元索看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容

边框

1
border:border-width	||	border-style	||	border-color
属性 作用
border-width 定义边框粗细
border-style 边框的样式
border-color 边框颜色 
1
2
3
4
5
6
7
8
div{
    width: 1200px;
    height: 500px;
    border-width: 20px;
    border-color: blue;
    border-style: solid;
    /* solid实线边框 */
}
border-style 作用
solid 实线
dashed 虚线
dotted 点线
double 双线 
1
2
3
4
5
边框简写:
CSS
border:1px soild red;	没有顺序
CSS
border-top:1px solid red;	只设置上边框

文字垂直居中

CSS没有给我们提供文字垂直居中的代码.这里我们可以使用一个小技巧来实现
解决方案：让==文字的行高等于盒子的高度==就可以让文字在当前盒子内垂直居中

1
2
height: 40px;
line-height: 40px;

内边距

padding属性用于设置内边距，即边框与内容之间的距离

属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

复合写法

image-20230630184721337

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

块元素水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：👍

  1. 盒子必须指定了宽度(width)。
  2. 盒子左右的外边距都设置为auto。
1
2
CSS
margin: 0 auto;

外边距合并

1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

image-20230701163821796

嵌套块元素垂直外边距的塌陷

当父子元素同时设置相同外边距

背景

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置(精灵图也是一种运用场景)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
background-image:;

//背景平铺
background-repeat:repeat;
background-repeat:no-repeat ;
background-repeat:repeat-x;
background-repeat:repeat-y;

//方位名词
//background-position: x y;
background-position: center left;
background-position: 50px	50px;

//背景附着
background-attachment:fixed;	//固定

简写顺序:

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

上 中 下 左 右
top center bottom left right

背景颜色

透明度由0~1.

1
background-color:rgba(0,0,0,透明度);

CSS三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层雪性原侧：

  • 样式冲突，遵循的原则是就近原测，哪个样式离结构近，就执行哪个样式
  • 样式不冲突，不会层叠

继承性

image-20230625232619757

优先级

选择器 选择器权重
继承 或 * 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内选择器 1,0,0,0
!important ∞

image-20230625234049636