网页美化

字体

font复合属性：属性简写方式，各值之间用空格隔开。
顺序：是否倾斜style，是否加粗weight，字号size（必写），字体类型family（必写）（需要按顺序）。

1

font: oblique blod 12px "楷体"

文字样式

*行高 line-height 和盒子高度 height 相同时，文字会垂直居中。

背景

background复合属性：属性简写方式，各值之间用空格隔开。
顺序：背景色，背景图，平铺方式，位置/缩放（用/连接），背景图固定（不需要按顺序）。

平面转换 transform

平面转换（transform 属性）改变盒子在平面内的形态，包括旋转、倾斜、缩放以及位移。

补充：

• translate只写一个数表示x轴移动，单独设置x或y轴移动可用 translateX() 或 translateY()。

• rotate改变旋转原点：默认情况下旋转原点是盒子中心点，使用transform-origin: 水平原点位置 垂直原点位置修改。

空间转换 transform

较平面转换多一条z轴，其他类似。旋转时左手握住旋转轴，拇指指向正值方向，四指弯曲方向为旋转正值方向。

透视效果

使用 perspective: 数值+px 实现透视效果（加给直接父级元素），实现近大远小、近实远虚的视觉效果。

立体呈现

transform-style: flat|preserve-3d; 加给父级元素，设置元素的子元素是位于 3D 空间中还是平面中。

• flat：设置元素的子元素位于该元素的平面中（子元素不设置3D空间）

• preserve-3d：设置元素的子元素应用于3D空间中

动画 animation

1. 定义方法

1
2
3
4
5
6
7
8
9
10
11

@keyframes 动画名称 {
  0% {}
  10% {}
  ...
  100% {}
}
/* 或者 */
@keyframes 动画名称 {
   from {}
   to {}
}

2. 使用动画animation：动画名称（必写），动画时长（必写），速度曲线，延迟时间，重复次数，动画方向 执行结束状态（取值不分先后）

渐变

两种渐变类型：

• 线性渐变（向下/向上/向左/向右/对角线）：to+方位名词 或角度

• 径向渐变（由其中心定义）

1. 线性渐变

1
2
3
4
5

background-image: linear-gradient(
   direction, 
   color-stop1 终点位置(%),
   color-stop2, ...
);

2. 径向渐变

1
2
3
4
5
6

background-image: radial-gradient(
   半径 at 圆心位置, 
   color1 终点位置, 
   color2 终点位置, 
   ..., 
);

*半径写两条则为椭圆渐变

浮动

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处盒子的边界，或者碰到另外一个浮动的元素。浮动可以让块元素水平排列。父元素需确保足以容纳其中的浮动子元素。

属性名 float：左对齐 left，右对齐 right。

清除浮动

如果不想让其他元素受到浮动元素的影响，需要清除浮动。

属性名 clear：

• left 元素被向下移动以清除左浮动。

• right 元素被向下移动以清除右浮动。

• both 元素被向下移动以清除左右浮动（最常用）。

清除浮动方法：

1. 额外标签法在父元素内容的最后添加一个块级元素（一般把类名命名为 clearfix），设置CSS属性 clear 为 both。

2. 单伪元素法

   1 2 3 4 5

   .clearfix::after { content: ""; display: block; clear: both; }

3. 双伪元素法（推荐）

   1 2 3 4 5 6 7 8

   .clearfix::after, .clearfix::before { content: ""; display: table; } .clearfix::after { clear: both; }

4. overflow法：父元素添加CSS属性 overflow:hidden

Flex

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

术语：

• 弹性容器：包含弹性项目的父元素。

• 弹性盒子，即flex项（flex item）。

• 主轴 (main axis)：弹性项目排列的主要轴，默认水平方向，通过 flex-direction 更改。

• 主轴起点（main-start） | 主轴终点（main-end）：弹性项目从主轴起点开始排列，直到主轴终点。

• 主轴尺寸（main size）：弹性项目的宽度或高度，取决于主轴的方向。弹性项目的主尺寸属性是主维度上的 width 或 height 属性。

• 侧轴/交叉轴 (cross axis)：与主轴垂直的轴。其方向取决于主轴的方向。默认垂直方向。

• 交叉轴起点（cross-start） | 交叉轴终点（cross-end）：弹性行（flex line）填充项目并放置在容器中，从交叉轴起点开始，向终点方向排列。

• 交叉轴尺寸（cross size）：弹性项目的宽度或高度，取决于交叉轴的方向，是项目的横尺寸。横尺寸属性是横向维度上的 width 或 height 属性。

父元素属性

1. 给父元素设置 display:flex ，子元素可以自动挤压或拉伸。

2. 主轴对齐方式：justify-content

3. 行对齐方式 align-content （对单行不生效）

4. 侧轴对齐方式：align-items

5. 主轴方向：flex-direction

6. 弹性盒子换行 flex-wrap：nowrap（默认）：所有弹性项目都在一行上。wrap：弹性项目将换行到多行，从上到下。

*默认情况下，子元素主轴方向尺寸靠内容撑开（可以用flex给子元素单独设置），侧轴为拉伸

子元素属性

1. align-self 单独控制某个弹性盒子侧轴对齐方式

2. flex：弹性伸缩比（控制在主轴方向的尺寸）的属性，数值表示占剩余空间的几份。

网页开发示例

logo

功能：点击跳转首页，提升搜索排名

实现方法：

1. 标签结构：h1 > a > 网页名

2. CSS样式示例：

   1 2 3 4 5 6 7 8

   .logo { display: block; width: 190px; height: 40px; background-image: url; /* 隐藏文字 */ font-size: 0; }

导航（nav）

功能：点击跳转页面

实现方法：

1. 标签结构：ul > 多个li > a

2. CSS样式示例：

   1 2 3 4 5 6 7 8

   .logo { display: block; width: 190px; height: 40px; background-image: url; /* 隐藏文字 */ font-size: 0; }

3. 布局思路示例：li 设置右侧 margin，a 设置左右 padding

搜索

1. 标签结构：.search > input+a/bottom

• ← Previous Post
• Next Post →