CSS3从入门到精通
文章平均质量分 92
CSS3从入门到精通系列教程,从入门到实战!
我是波哩个波
千行代码,Bug何处藏。纵使上线又怎样,朝令改,夕断肠。
展开
-
【前端系列教程之CSS3】08_Flex布局和媒体查询
CSS3从入门到精通视频直通车:CSS3从入门到精通,超多案例实践,轻松上手,通俗易懂!一、Flex 布局(核心)Flex 布局是什么Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: in...原创 2021-11-30 13:28:36 · 729 阅读 · 0 评论 -
【前端系列教程之CSS3】09_CSS样式应用案例
样式应用实例CSS 图片使用 CSS 来布局图片。圆角图片img { border-radius: 8px; height: 300px; width: 400px;}<img src="paris.jpg" alt="Paris" >椭圆形图片img { border-radius: 50%;}普通缩略图我们使用 `border` 属性来创建缩略图。img { bor...原创 2021-11-30 13:40:23 · 521 阅读 · 0 评论 -
【前端系列教程之CSS3】07_CSS3 2D转换、过渡、关键帧动画
CSS3从入门到精通视频直通车:CSS3从入门到精通,超多案例实践,轻松上手,通俗易懂!一、CSS3 2D和3D转换CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。它是如何工作?转换的效果是让某个元素改变形状,大小和位置。您可以使用 2D 或 3D 转换来转换您的元素。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- ...原创 2021-11-30 13:09:03 · 568 阅读 · 0 评论 -
【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一、CSS3边框(重要)用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。CSS3边框圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中,很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角:使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。如果你在 bor...原创 2021-11-29 17:35:23 · 964 阅读 · 0 评论 -
【前端系列教程之CSS3】05_CSS3高级选择器和颜色表示方法
CSS3从入门到精通视频直通车:CSS3从入门到精通,超多案例实践,轻松上手,通俗易懂!一、CSS3新增选择器CSS3属性选择器选择器 示例 示例说明 attribute^=value a[src^="https"] 选择每一个src属性的值以"https"开头的元素 attribute$=value a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 attribute*=value a[sr...原创 2021-11-29 17:15:42 · 440 阅读 · 0 评论 -
【前端系列教程之CSS3】04_CSS定位和浮动详解
CSS3从入门到精通视频直通车:CSS3从入门到精通,超多案例实践,轻松上手,通俗易懂!一、CSS 定位(重点)CSS 定位属性position 属性指定了元素的定位类型。position 属性的五个值:static 静态定位,无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。relative 相对定位,对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档...原创 2021-11-29 13:32:36 · 1340 阅读 · 1 评论 -
【前端系列教程之CSS3】03_CSS高级选择器和元素显示类型
一、CSS高级选择器(重点)CSS 链接选择器 (UI伪类选择器)CSS伪类是用来添加一些选择器的特殊效果。伪类的语法:/*选择器:伪类选择器{}*/selector:pseudo-class {property:value;}CSS类也可以使用伪类:selector.class:pseudo-class {property:value;}链接样式不同的链接可以有不同的样式。链接的样式,...原创 2021-11-25 12:38:29 · 597 阅读 · 0 评论 -
【前端系列教程之CSS3】02_CSS基础选择器和基础常用样式
一、CSS基础选择器选择器表示结构。该结构可以用作条件(例如,在CSS规则中),其确定选择器在文档树中匹配哪些元素,或者作为对应于该结构的HTML或XML片段的平面描述。CSS的选择器分为两大类:基本选择器和扩展选择器。基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的标签使用 类选择器:针对你想要的所有标签使用 通用选择器(通配符):针对所有的标签都适用(不建议单独使用) 标签选择器...原创 2021-11-24 13:42:20 · 793 阅读 · 0 评论 -
【前端系列教程之CSS3】01_CSS概述、引入规则和三大机制
CSS3从入门到精通视频直通车:CSS3从入门到精通,超多案例实践,轻松上手,通俗易懂!前言最准确的网页设计思路是把网页分成三个层次,即:结构层、表示层、行为层。HTML:结构层,Hyper Text Markup Language,超文本标记语言CSS:表现层,Cascading Style Sheets,层叠样式表JS:行为层,JavaScript,客户端脚本语言网页的结构层...原创 2021-11-24 12:45:25 · 1398 阅读 · 1 评论