HTML+CSS
自己学习HTML+CSS的一些心得体会
A是曾同学呀
never say never
展开
-
画一条0.5px的线
采用transform: scale()的方式,该方法用来定义元素的2D 缩放转换: transform: scale(0.5,0.5); 采用meta viewport的方式 <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>这样就能缩放到原来的0.5倍,如果是1px那么就会变成0.5px。vi..原创 2022-04-24 21:09:41 · 255 阅读 · 0 评论 -
如何实现单行/多行文本溢出的省略样式?
一、前言在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号对于文本的溢出,我们可以分成两种形式:单行文本溢出 多行文本溢出二、实现方式单行文本溢出省略理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现实现方式也很简单,涉及的css属性有:text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本 white-space:设置文字在一行显示,不能换原创 2022-03-24 19:52:58 · 946 阅读 · 0 评论 -
CSS画普通三角形的方法
<style> .m { width: 0px; height: 0px; border-bottom: 100px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 100px solid transparent; margi.原创 2022-02-25 11:26:00 · 354 阅读 · 0 评论 -
CSS3 sticky 粘性布局
在 CSS 中位置属性position大家对relative、fixed、absolute已经用的非常熟悉了,在 CSS3 中出现了sticky这个特殊的定位方式。功能描述在 W3C 标准中sticky功能描述:元素的位置基于用户滚动位置定位,sticky定位的元素位置在relative和fixed之间切换,具体取决于滚动位置。它会被相对定位,直到浏览器可是区域中满足给定的偏移位置,否则会被粘住到固定的位置。(W3C Positon)如何理解它的定位方式呢,我们直接上 ...原创 2022-02-24 18:33:20 · 693 阅读 · 0 评论 -
三种隐藏 HTML 元素的方式
在网页应用中,显示/隐藏某个元素或组件是一件经常要做的事情,尤其是在目前比较流行的单页应用中。总体而言,有 3 种方式来实现CSS 的 display: none; CSS 的 visibility: hidden; HTML5 的 hidden 属性(boolean)它们之间有相同点和不同点。相同点很简单,都能使添加了这个属性的元素及其子元素『不被看见』。这篇文章着重来比较一下它们之间的差异。display: none;添加了这个属性的元素:不占据页面空间(不影响布局),因为这个原创 2022-02-12 19:42:32 · 7128 阅读 · 0 评论 -
figure标签的使用
figure标签官方给出的定义是规定独立的流内容(图像、图表、照片、代码等等)。figure元素是一种元素的组合,可带有标题(可选)。figure标签用来表示网站制作页面上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。figure用友一个子标签——figcaption标签。注意:一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。案例1:不带有标题的figure元素:<!DO...原创 2022-01-28 15:08:50 · 5960 阅读 · 0 评论 -
用CSS清除HTML默认样式
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {margin: 0;padding: 0;}*{box-sizing: border-box;}html, body {min-height: 100%;}body {font-family: "Microsoft YaHei";font-size:14px;color:.原创 2022-01-27 16:58:48 · 393 阅读 · 0 评论 -
知道也没啥用的前端知识小讲座
1、工具提示<body><p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p><p title="Free Web tutorials">W3Schools</p></body>向 HTML 元素添加简单的工具提示不需要 CSS 或 JavaScript。使用 title 属性,您可以轻松添加工具提原创 2021-12-10 13:36:18 · 531 阅读 · 0 评论 -
在任何条件下使元素在页面居中
<!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, initial-scale=1.0"> <title>Do.原创 2021-11-08 19:19:04 · 53 阅读 · 0 评论 -
如何规范 CSS 的命名和书写?
作者:知乎用户链接:https://www.zhihu.com/question/19586885/answer/48933504来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spa.转载 2021-10-26 23:50:36 · 111 阅读 · 0 评论 -
HTML+CSS 基础知识点总结(纯文字)
HTML一、概述1、什么是 HTML:超文本标记语言,使用一对尖括号括起来,实现特殊的效果定义,用于编写网页(后缀为.html、.htm的文件)2、编辑:文本编辑工具,都可以编写 HTML页面记事本、editplus、ultraedit、DW、webstorm、apanta...运行:浏览器IE、firefox、chrome、opera、safari3、HTML是一种解释性的语言:代码错误,试图解释,造成不可预料的奇怪效果编译性的语言:后台代码解释性的语言:不检查错误 -----使用浏览器原创 2021-10-24 22:01:39 · 2576 阅读 · 1 评论 -
Flex 布局教程:语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html转载 2021-10-14 08:53:08 · 48 阅读 · 0 评论 -
css实现背景模糊案例
通过filter属性实现,具体如下<!DOCTYPE HTML><html lang="en-US"> <head> <meta charset="UTF-8"> <title>高斯背景模糊效果(毛玻璃)</title> <style> .box { background: url('./img/timg.jpg') no-repeat 100% 100%; width:.原创 2021-10-16 15:59:56 · 505 阅读 · 0 评论 -
仅用 3 个属性制作响应式 CSS 网格布局
如果我告诉你,你只需要知道 3 个 css 属性就可以制作一个完全响应式的 css 网格,如下所示:让我们从html布局开始。只是一个容器和对应于文章和页眉+页脚的div:<div> <div>Header</div> <div>Article 1</div> <div>Article 2</div> <div>Article 3</div> <div>Foot..原创 2021-10-24 21:48:48 · 137 阅读 · 4 评论 -
伪类与伪元素的区别
一、什么是伪类和伪元素提到“伪”字,你想到了什么?“假的”,“汪精卫伪政府”,“不存在的”······伪类:用于已有元素处于某种状态时(滑动、点击等)为其添加对应的样式,这个状态是根据用户行为而动态变化的。我的理解就是:本身不存在,只有在特定的情况(滑动、点击)下才会被触发的状态,可以用css去修饰这个状态下的对象。例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为原创 2021-10-16 17:04:57 · 2057 阅读 · 1 评论 -
html P标签为什么不能嵌套div?还有关于html P标签的css样式的实例介绍
html P标签为什么不能嵌套div?还有关于html P标签的css样式的实例介绍-html教程-PHP中文网转载 2021-10-02 22:19:09 · 113 阅读 · 0 评论 -
CSS特效按钮
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> --></head><body> <a href="#">...原创 2021-08-30 11:50:16 · 147 阅读 · 0 评论 -
精灵图为什么叫雪碧图(精灵图的历史)
精灵图(英语:Sprite),又被称为雪碧图或拼合图。在计算机图形学中,当一张二维图像集成进场景中,成为整个显示图像的一部分时,这张图就称为精灵图[1]。常见碳酸饮料雪碧的英文名也是Sprite,因此也有人会使用雪碧图的非正式译名。历史精灵图源于1974年左右街机的兴起,其中的只读存储器使得精灵图被广泛使用。Taito当时发售了最早使用精灵图的电子游戏。二十世纪七十年代中期,Signetics设计出第一款支持生成精灵图形的视频/图形处理器。1977年发售的Atari 2600以其硬件精.原创 2021-10-10 21:22:59 · 2539 阅读 · 0 评论 -
CSS常用基础知识点整理
CSS常用基础知识点整理 - 掘金 (juejin.cn)转载 2021-10-16 14:40:03 · 62 阅读 · 0 评论 -
在HTML中快速生成随机文本(lorem的使用完整版)
在写HTML的时候想快速生成随机文本的话,可以使用lorem然后按下Tab键就可以了。详细使用方法如下:1:lorem 然后按下Tab,生成一个30个词语的句子2:loremN然后按下Tab(N代表数字),生成有N个词语的句子3:lorem*N 然后按下Tab(N代表数字),生成N个句子4:loremN*M 然后按下Tab(N,M代表数字),生成M行有N个单词的句子5:HtmlNode.class#id*N>leremN,HtmlNode 是节点名称(div、...原创 2021-10-02 21:30:16 · 9960 阅读 · 2 评论 -
超链接的5种表现形式(用法)
表现形式一:页面交互、跳转<a href="http://baidu.com">百度</a>表现形式二:发邮件<a href="mailto:xxxxx@qq.com">发邮件</a>表现形式三:执行js<a href="javascript:alert('js弹框');">执行js</a>表现形式四:锚点链接<a href="#">回到顶部</a>表现形式五:下载链接原创 2021-10-01 22:23:07 · 1498 阅读 · 0 评论 -
为什么“overflow:hidden“能清除浮动的影响
https://www.jianshu.com/p/7e04ed3f4bea转载 2021-10-10 21:35:34 · 247 阅读 · 0 评论