![](https://img-blog.csdnimg.cn/6a884c6d0f6444ca86df16734cd64ca3.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML和CSS
文章平均质量分 51
此专栏主要介绍HTML和CSS如何使用
cloudOnSkyline
这个作者很懒,什么都没留下…
展开
-
Sass的基本使用
文章主要介绍sass的基本使用原创 2022-08-11 18:59:05 · 192 阅读 · 0 评论 -
HTML+CSS之背景图片的设置
本文主要介绍如何在网页布局中使用背景图片。先逐个介绍基本的样式,最后介绍样式该如何简写。原创 2022-07-21 19:32:45 · 5102 阅读 · 0 评论 -
HTML+CSS之弹性布局
本文主要介绍网页布局中弹性布局的使用。使用该布局,核心在于把握其中各个属性的含义及用法。各属性如下所示:flex-direction设置主轴的方向,默认为x轴方向flex-wrap设置元素排列是否换行:设置为nowrap时,元素不换行,通过justify-content排列主轴的元素,通过align-items排列次轴的元素。设置为wrap时,元素换行,通过justify-content排列主轴的元素,通过align-content排列次轴的元素。属性取值如下:center:居中对齐flex-start:取原创 2022-07-05 18:57:51 · 1038 阅读 · 0 评论 -
HTML+CSS之三角形和扇形的制作
本文主要介绍如何利用CSS制作扇形和三角形。 扇形的制作(这里仅限半圆和四分之一圆),核心在于设置四个角的圆角半径大小。效果如图:三角形的制作,核心在于设置四条边框的样式,需要结合透明属性的使用。切记:元素宽高须设置为0. 效果如图:...原创 2022-07-04 19:39:46 · 1103 阅读 · 1 评论 -
HTML+CSS之CSS实体的使用
本文主要介绍CSS中实体的使用,用来表示一些特殊的字符。可参看以下网址:CSS 实体https://www.w3school.com.cn/cssref/css_entities.asp使用方法如下所示:效果如图:原创 2022-07-04 18:53:27 · 154 阅读 · 0 评论 -
HTML+CSS之设置元素的水平垂直居中
本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中。justify-content:center:水平居中align-items:center:垂直居中2.弹性布局(换行)justify-content:水平居中align-content:center:垂直居中3.定位(2D变化)利用定位的top及left初步进行居中定位,发现会多偏移宽高的二分子一,通过translate向左和向上移动元素自身宽高的一半,即可实现垂直居中效果。4.定位(过度约束)利用网页布局的过度约原创 2022-07-04 17:21:15 · 908 阅读 · 0 评论 -
CSS3之渐变(2)
之前讲解了线性渐变的使用,现介绍渐变的第二种类型:径向渐变。源代码如下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini原创 2022-05-15 23:08:25 · 50 阅读 · 0 评论 -
CSS3之渐变(1)
所谓渐变,实际是设置两种或两种以上颜色的平滑过度效果。本文介绍如何利用CSS进行元素渐变颜色的设置。CSS设置的渐变效果主要分两种类型,分别线性渐变和径向渐变。本文主要介绍线性渐变。源代码如图,以此进行演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2022-05-11 23:29:18 · 1685 阅读 · 0 评论 -
HTML5+CSS3之父子元素外边距塌陷问题解决
问题描述:一般情况下,如下图代码所示,当给子元素设置上外边距时,该外边距会传递给其父元素,这就是所谓的父子外边距塌陷。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="原创 2022-05-10 15:40:07 · 255 阅读 · 0 评论 -
HTML5+CSS3之字体的下载使用
本文主要介绍如何在网站中下载字体并将其应用于网页之上,以以下网址为例进行相关操作的说明。Google Fonts | 谷歌字体中文版 | GoogleFontsGoogle字体·中国,提供Google字体调试工具、Google字体在线预览功能,国内可以使用.Google字体解封,Google字体CDN,Google字体镜像,GoogleFonts,谷歌字体http://www.googlefonts.net/1.进入网址后,选择所需字体,点击下载即可2.解压文件至项目目录之中,文件名....原创 2022-05-09 16:32:03 · 2754 阅读 · 0 评论 -
HTML5+CSS3之字体图标的使用
本文以阿里巴巴矢量图标库为例,介绍前端开发中字体图标的使用。网址为iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具https://www.iconfont.cn/1.进入网站,选择所需要的图标,点击类似购物车的图标将所选图标添加入库2.点击网站右上方的购物车图标,将所选图标添加至自定义项目中3.跳转至个人页面后,点击“下载至本地”按钮进行..原创 2022-05-08 20:08:47 · 888 阅读 · 0 评论 -
HTML5+CSS3之透明效果设置
介绍三种设置元素透明效果的方法:1.设置opacity属性2.设置rgba属性值3.设置transparent为属性值(设置元素全透明)代码及效果展示如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2022-05-07 21:32:57 · 2118 阅读 · 0 评论 -
HTML5之过度约束
过度约束是网页布局中的一个概念,指的是子元素在水平方向或竖直方向上的内外边距、边框及内容等之和必须等于父元素的宽度或高度,若不满足等式,浏览器会自动进行相应调整。主要分为两种情形:未设定位时和设置定位时。以下通过代码进行实际展示。1.未设定位时的过度约束源代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi原创 2022-05-06 15:20:49 · 704 阅读 · 0 评论 -
HTML5之图片3像素问题解决
一、图片标签简介img标签是HTML5的图片标签1.作用:向页面引入一个外部的图片2.自结束标签3.img标签兼具块元素与行内元素的特点4.属性:(1)src:设置外部图片的路径(2)alt:设置图片不能加载的时候所显示的文本。搜索引擎是通过对alt属性进行检索,然后反馈出来的(3)width:设置图片的宽度(4)height:设置图片的高度(5)title:设置鼠标移至图片时所显示的文本注: 实际开发过程,宽高一般只设置一个,另一个会等比例缩放二、图片3像素原创 2022-05-05 20:13:59 · 949 阅读 · 1 评论 -
HTML5之高度塌陷问题的解决
所谓的高度塌陷,意即当给子元素设置浮动时,其父元素高度会丢失的情况。通过实际代码进行演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2022-05-03 16:36:42 · 1026 阅读 · 0 评论