wx64671f05572e2的博客_Web前端CSS

CSS之基础选择器

标签选择器HTML标签名{属性：值；…}作用为页面中某一类标签设置统一的样式注意代码中遇到特殊符号，都必须是英文输入法状态

选择器

类名

自定义

原创 2023-05-19 15:21:08 57 阅读

CSS之复合选择器

复合选择器标签指定式选择器由两个选择器构成，其中第一个为标签选择器，第二个: &n...

选择器

html

css

原创 2023-05-19 15:20:42 42 阅读

HTML标签的分类以及各类型之间的转换以及伪元素的介绍

块级元素代表：<h1>~<h6>,<p>,<div>,<ol>,<li>,<ul>,<dl>,<dt>,<dd>特点：1.如果块级元素不设

行内元素

块级元素

伪元素

原创 2023-05-19 15:20:38 54 阅读

关于CSS中placeholder样式的设置以及鼠标样式的设置

placeholder样式的设置伪类选择器，兼容谷歌浏览器input::-webkit-input-placeholder{ color:red;}兼容火狐浏览器input::

选择器

火狐浏览器

谷歌浏览器

原创 2023-05-19 15:20:38 75 阅读

CSS文本属性(font)及其他补充属性

补充属性单位px：像素em：1em==一个文字的大小一个文字的大小不同浏览器有不同的默认值，也可以自己设置font-

ci

默认值

html

原创 2023-05-19 15:20:36 63 阅读

CSS的特性(继承性，层叠性，优先级)

CSS的层叠性1.在同一个标签中，如果优先级相同，如果定义的样式发生冲突，那么最后一次定义的样式

选择器

权重

html

原创 2023-05-19 15:20:34 77 阅读

CSS的书写方式及基础知识

CSS基础css的整体1.选择器2.盒子模型3.浮动4.定位5.动画，伸缩布局(CSS3部分)CSS概念作用：1.美化网页(通过CSS控制

选择器

css

CSS

原创 2023-05-19 15:20:32 31 阅读

CSS之伪类

伪类a:link{属性:值;}与a{属性:值;}或者a:-webkit-any-link一样作用：1.设置a标签的默认样式2.推荐直接

html

a标签

css

原创 2023-05-19 15:20:31 49 阅读

CSS之background背景的设置

background-color设置背景颜色默认值：transparent(透明色)background-image设置背景图片backgr

背景图片

默认值

小图标

原创 2023-05-19 15:20:24 116 阅读

CSS之多背景的设置以及线性渐变与径向渐变

多背景可以给一个容器同时设置多张背景图片<!DOCTYPE html><html lang="en"><head> <met

html

线性渐变

css

原创 2023-05-19 15:20:22 99 阅读

CSS之行高(line-height)详解

行高(line-height) 1.浏览器中默认文字大小为16px; 2.浏览器中默认文字行高为18px；行高=文

基线

垂直居中

属性值

原创 2023-05-19 15:20:16 474 阅读

伸缩布局详解【弹性布局】(flex)以及用flex写一个伸缩导航

伸缩布局1.首先给子元素的直接父元素设置伸缩盒子display:flex;2.当父元素为伸缩盒子时，默认子元素在一行上显示 3.伸缩盒子的特点： ◆如果一个盒子变成为伸缩盒子，那么该盒子就具有了两条轴，一条是主轴，一条是侧轴。主轴的默认方向是水平从左向右，侧轴始终要垂直于主轴。 ◆子元素是按照主轴的方向显示的。设置主轴的方向/*设置主轴的方向。默认为水平从左向右row*/

html

css

取值

原创 2023-05-19 15:17:59 116 阅读

margin负值的使用详解(用负值实现压线效果)

margin负值基本应用1.同级标签应用下margin负值对同级标签应用下margin负值时，会出现标签重叠的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <sty...

html

css

鼠标悬停

原创 2023-05-19 15:17:41 74 阅读

网页布局中图片垂直对齐方式详解(四种)

方式一参照文字的中线对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ m...

html

css

空标签

原创 2023-05-19 15:17:35 402 阅读

动画(animation)属性详解

定义动画： 1.通过@keyframas+自定义动画名称{} 2.在动画集中通过from和to设置动画的开始和结束状态 @keyframes move{ from{ opacity:0; } to{ opacity:1; } } 也可以用0%代替from，100%代替to 注意： ◆动画集要单独定义，不能放到类样式中animation-name属性：用于定义@key

html

sed

动画效果

原创 2023-05-19 15:17:13 190 阅读

CSS之三角形的制作

用

html

css

宽高

原创 2023-05-19 15:17:06 88 阅读

3D转换(3D转换实现一个正方体)

pers

html

坐标轴

css

原创 2023-05-19 15:16:55 58 阅读

logo内容的移除以及精灵图的使用详解

html

背景图片

css

原创 2023-05-19 15:16:49 61 阅读

CSS之2D转换(transform)

平移t代表当前元素是沿着水平方向移动，如果是正数则向右移...

html

css

缩放

原创 2023-05-19 15:16:47 48 阅读

滑动门导航以及微信导航案例

滑动门导航制作导航(使用背景图片制作)核心：1.使用背景图片。2.导航的内容区域不能设置固定宽度，一定要使用内容将导航撑开。效果如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</titl...

html

css

背景图片

原创 2023-05-19 15:16:46 73 阅读

小米案例之伪元素的使用

官网上的图片我们就只写出大概框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>

html

css

竖线

原创 2023-05-19 15:16:42 28 阅读

过渡属性transition详解

一般transition属性设置在默认状态中。☞

过渡效果

html

css

原创 2023-05-19 15:16:39 119 阅读

定位层级关系(Z-index标签层叠)详解以及标签包含规范

定位层级关系(Z-index标签层叠)当对多个标签设置定位时，定位标签之间有可能会发生重叠，要想改变重叠的顺序，可以对定位标签应用z-in

html

取值

行内元素

原创 2023-05-19 15:16:39 51 阅读

网页布局规避脱标流的方法以及图片垂直居中对齐的方式外加元素的隐藏方式

网页布局规避脱标流1.优先考虑标准流进行网页布局。2.然后考虑使用浮动(块级元素在一行上显示)3.最后考虑现模式转换，必须使用display...

块元素

html

垂直居中

原创 2023-05-19 15:16:34 53 阅读

定位(position)详解以及其应用情况(可以取负值)【小米案例】

静态定位1.静态定位是标签的默认定位方式，即各个标签在HTML文档流中的默认位置。2.在静态定

绝对定位

ide

相对定位

原创 2023-05-19 15:16:32 51 阅读

CSS初始化以及overflow属性详解

CSS初始化1.将页面中标签默认的样式(内外边距，文字大小，文字颜色，文字字体...)恢复到原始的状态2.将页面中标签的样式设置为统一的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&...

html

初始化

css

原创 2023-05-19 15:16:24 50 阅读

用CSS制作一个导航(利用float)

鼠标悬停时会有显示效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ pad...

html

css

鼠标悬停

原创 2023-05-19 15:16:19 7 阅读

浮动(float)以及清除浮动详解

浮动(float)网页标准文档流标准文档流是指内容元素排版布局过程中，会自动从左往右，从上往下进行流式排版(即独占一行，在一行，占元素位置)浮动：float:left | right;特点：1.浮动的元素不占位置(脱离标准文档流)2.块级元素在一行上显示的时候就使用浮动(脱标)3.浮动可以实现模式转换(脱标)总结：1.在网页布局中，块级元素在一行显示就使用浮动。2.如果只...

html

清除浮动

css

原创 2023-05-19 15:16:17 52 阅读

iconfont图标字体的介绍与使用

font-class引用先去iconfont.cn网站下载你所需要的图标，然后看demo说明<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" hr

ico

html

css

原创 2023-05-19 15:16:15 70 阅读

CSS之box-sizing属性以及box-shadow属性的灵活运用

box-sizing属性作用：用于定义盒子的宽度值和高度值是否包含内边距和边框box-sizing:content-box | border-box;content-

html

内边距

css

原创 2023-05-19 15:16:13 21 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx64671f05572e2的博客