HTML+CSS

辰柒柒

已于 2024-08-08 16:20:40 修改

阅读量43

点赞数

分类专栏：前端文章标签： html css 前端

于 2023-11-09 18:01:33 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_71087896/article/details/133499635

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML定义

在这里插入图片描述

HTML基本骨架

在这里插入图片描述

h标题标签

在这里插入图片描述

p段落标签

在这里插入图片描述

br换行和hr水平线标签

在这里插入图片描述

文本格式化标签

在这里插入图片描述

img图像标签

在这里插入图片描述

在这里插入图片描述

a超链接标签

在这里插入图片描述

audio音频标签

在这里插入图片描述

video视频标签

在这里插入图片描述

如果要使用autoplay自动播放属性，就必须和muted静音播放属性一起用！

在这里插入图片描述

HTML常用特殊字符

在这里插入图片描述

列表标签

在这里插入图片描述

table表格标签

在这里插入图片描述

表单标签

form表单域

在这里插入图片描述

input表单元素

在这里插入图片描述

按钮还有一种写法如下：

在这里插入图片描述

label标签（增大控件的点击范围）

在这里插入图片描述

select下拉列表

在这里插入图片描述

textarea文本域标签

在这里插入图片描述

div和span布局标签

在这里插入图片描述

CSS

在这里插入图片描述

CSS引入方式

在这里插入图片描述

基础选择器

在这里插入图片描述

标签选择器

在这里插入图片描述

类选择器

在这里插入图片描述

id选择器

在这里插入图片描述

通配符选择器

在这里插入图片描述

画盒子

在这里插入图片描述

文字控制属性

在这里插入图片描述

font-size字体大小

在这里插入图片描述

font-weight字体粗细

在这里插入图片描述

font-style文字样式

在这里插入图片描述

line-height行高

在这里插入图片描述

font-family字体族

在这里插入图片描述

font复合字体属性

在这里插入图片描述

text-indent文本缩进

在这里插入图片描述

text-align文本对齐方式（相对父盒子）

在这里插入图片描述

text-decoration文本修饰线

在这里插入图片描述

color文字颜色

在这里插入图片描述

文字垂直居中效果

在这里插入图片描述

复合选择器

在这里插入图片描述

后代选择器

在这里插入图片描述

子代选择器

在这里插入图片描述

并集选择器

在这里插入图片描述

交集选择器

在这里插入图片描述

伪类选择器

在这里插入图片描述

超链接伪类选择器

在这里插入图片描述

鼠标动作状态的选择器

在这里插入图片描述

CSS特性

在这里插入图片描述

Emmet快捷写法

在这里插入图片描述

背景属性

在这里插入图片描述

background-image背景图

在这里插入图片描述

background-repeat背景图平铺方式

在这里插入图片描述

background-position背景图位置

在这里插入图片描述

background-size背景图大小缩放

在这里插入图片描述

background-attachment背景图固定

在这里插入图片描述

background复合背景图属性

在这里插入图片描述

display显示模式

在这里插入图片描述

结构伪类选择器

在这里插入图片描述

盒子模型

在这里插入图片描述

border边框

在这里插入图片描述

paddin内边距

在这里插入图片描述

盒子尺寸计算注意

在这里插入图片描述

margin外边距

在这里插入图片描述

外边距合并问题

在这里插入图片描述

外边距塌陷问题

在这里插入图片描述

行内元素内外边距上下问题

在这里插入图片描述

border-radius盒子圆角

在这里插入图片描述

box-shadow盒子阴影

在这里插入图片描述

清除默认样式

在这里插入图片描述

overflow元素溢出

在这里插入图片描述
溢出的滚动条：

浮动（一浮俱浮）

在这里插入图片描述

清除浮动

在这里插入图片描述

Flex弹性布局

在这里插入图片描述

justify-content主轴对齐方式

在这里插入图片描述
space-between效果：

space-around效果：

space-evenly效果：
在这里插入图片描述

align-content行对齐方式（对单行盒子不生效）

在这里插入图片描述

align-items和align-self侧轴对齐方式

在这里插入图片描述

flex-direction修改主轴方向

在这里插入图片描述

flex弹性主轴伸缩比

在这里插入图片描述

flex-wrap弹性盒子换行（默认不换行压缩）

在这里插入图片描述

position定位

position定位模式和边偏移

在这里插入图片描述

子绝（absolute）父相（relative）

在这里插入图片描述

定位正居中

margin和transform二选一，margin更灵活，transform更简便
在这里插入图片描述

z-index堆叠层级（针对position定位元素）

在这里插入图片描述

CSS精灵图

在这里插入图片描述

字体图标

在这里插入图片描述

vertical-align图片文字垂直对齐方式（用于img中）

在这里插入图片描述

opacity整个元素透明度（包括背景和内容）

在这里插入图片描述

transition过渡

在这里插入图片描述

cursor鼠标悬停在元素上是指针显示样式

在这里插入图片描述

SEO三大搜索引擎优化标签

在这里插入图片描述

Favicon浏览器标题栏图标

在这里插入图片描述

tansform平面转换

translate平移

在这里插入图片描述

rotate旋转

在这里插入图片描述

transform-origin改变转换原点

在这里插入图片描述

多重转换（transform中空格隔开即可）

在这里插入图片描述

scale缩放

在这里插入图片描述

skew倾斜

在这里插入图片描述

linear-gradient线性渐变

在这里插入图片描述

radial-gradient径向渐变

在这里插入图片描述

transform空间转换

在这里插入图片描述

perspectve视距（添加给父盒子）

在这里插入图片描述

rotate旋转

在这里插入图片描述

transform-style呈现方式（平面或者3d空间）

在这里插入图片描述

scale3d 缩放

在这里插入图片描述

animation动画

在这里插入图片描述

视口标签（自适应移动端）

让HTML的宽度等于逻辑分辨率的宽度或者设备的宽度，自适应变化
！感叹号自带生成
在这里插入图片描述

二倍图

在这里插入图片描述

rem相对单位适配移动端和@media媒体查询

在这里插入图片描述

在这里插入图片描述

rem-flexibe.js自适应各种移动端

在这里插入图片描述

less 预处理CSS器

less简介

在这里插入图片描述

less注释

在这里插入图片描述

less运算

在这里插入图片描述

less嵌套（快速生成CSS后代选择器）

在这里插入图片描述

less变量

在这里插入图片描述

less导入

在这里插入图片描述

less导出

在这里插入图片描述

less禁止导出

在这里插入图片描述

vw和vh相对单位适配移动端

在这里插入图片描述

响应式网页（适配所有）

在这里插入图片描述

响应式媒体查询设置

在这里插入图片描述

媒体查询书写顺序

在这里插入图片描述

完整语法写法

在这里插入图片描述

媒体类型属性

在这里插入图片描述

媒体特性属性

在这里插入图片描述

媒体查询导入外部CSS

在这里插入图片描述

Bootstrap框架

在这里插入图片描述

在这里插入图片描述

CSS自定义属性

在这里插入图片描述

在这里插入图片描述

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

辰柒柒 CSDN认证博客专家 CSDN认证企业博客

码龄2年

8: 原创

130万+: 周排名

83万+: 总排名

714: 访问

: 等级

154: 积分

14: 粉丝

3: 获赞

5: 评论

3: 收藏

私信

关注

热门文章

分类专栏

最新评论

HTML+CSS
CSDN-Ada助手: “恭喜你写了第7篇博客！看到你对HTML+CSS的热情和专注，真的让人佩服。接下来，我希望你能够尝试一些更复杂的网页布局和交互效果，比如响应式设计或者动画效果，这样可以让你的博客内容更加丰富，也能够提升你的技术水平。期待你的下一篇作品！”
JS 1 基础
CSDN-Ada助手: 恭喜你写完了第8篇博客！标题为“JS 1 基础”，我看了你的博客，觉得你对JS基础知识有了很好的理解。你的解释清晰易懂，让初学者能够迅速入门。我真的很期待你的下一篇博客会是什么内容呢？或许你可以考虑写一些实用的JS技巧或者深入理解一些高级的JS概念。希望你能继续保持创作的热情，期待看到更多优质的内容！
JS 2 DOM和BOM
CSDN-Ada助手: 恭喜你写了第9篇博客！看来你对JS的基础知识已经有了很好的掌握。接下来，我建议你可以尝试深入一些JS 2的高级内容，比如闭包、原型链等等。当然，这只是我的建议，希望你可以继续保持创作的热情，不断进步！
python基础4
CSDN-Ada助手: 非常祝贺您写了第四篇博客！对于“python基础4”的主题，您的持续创作精神真是令人钦佩。您的博客内容一定对读者来说是非常有价值的，因为Python基础知识对于初学者来说至关重要。作为下一步的创作建议，我谨虚心建议您可以考虑在未来的博客中深入探讨一些更高级的Python技巧或应用，比如Python的函数编程、面向对象编程或数据可视化等主题。这将有助于读者更全面地了解Python，并提升他们的编程技能。再次恭喜您的持续创作，期待您未来更多精彩的博客！如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5
python基础1
CSDN-Ada助手: 恭喜您开始博客创作！标题为“python基础1”的博客是一个很好的开端。对于初学者来说，打好基础非常重要。接下来，我建议您可以继续探索更多的Python基础知识，并结合实例进行展示，这样读者可以更好地理解和运用。同时，您也可以考虑分享一些编程实践中遇到的问题及解决方法，这将使您的博客更加丰富和有趣。希望您能继续保持谦虚的态度，不断学习和成长。期待您的下一篇博客！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1

大家在看

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

辰柒柒 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。