HTML与CSS
张小益达
谁愿人生暗淡无光,谁愿做绿叶不争芬芳。
美团 | 到店前端开发
展开
-
当hover父元素如何修改子元素样式
背景概述当鼠标作用于outer时,修改inner的背景 <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>原创 2020-08-19 17:27:33 · 5603 阅读 · 1 评论 -
link的rel属性的属性值小结
该文章本来是想总结写一些可以提升浏览器优化的rel属性标签,后来发现总结全部rel属性基本在一些主流浏览器没有找到,但是在总结整理资料的过程中发现张鑫旭大大已经总结过了,接下来我就挑了几个我认为面试中可能会提及用来优化浏览器性能的几个标签和一些unbelievable标签,我觉得大家可能也找不到张鑫旭大大的那篇文章,这里我贴一个链接HTML rel属性值释义大全(后来我试了谷歌,发现就在排名在...原创 2020-01-22 23:06:43 · 3343 阅读 · 1 评论 -
清除浮动的几种方法
前提清除浮动都会带来一定的影响,没有那种方法是完美的第一种:添加额外的标签<div> <p>添加额外标签</p> <div style="float: left;">左</div> <div style="float: right;">右</div> <div style="clear: b...原创 2019-02-28 20:58:25 · 629 阅读 · 0 评论 -
label与for进行绑定实现文字点击选择按钮功能
我们在写按钮的时候,有时候会碰到只可以点击那个小圆圈才能对按钮进行选择,如何实现对文字进行点击的时候也可以实现对按钮的选择呢?其实只要加一个for属性就可以了<input type="radio" name="radio1" id="radio1-1" /><label>选项一</label><input type="radio" name="r...原创 2019-02-28 21:20:16 · 457 阅读 · 0 评论 -
inline-block布局消除盒子中间的空隙
在使用inline-block对元素进行布局的时候,发现会有空隙出现<div style="background-color: blue"> <div style="display: inline-block; background-color: red; height: 200px;width: 200px"></div> <div sty...原创 2019-02-28 21:35:27 · 2199 阅读 · 1 评论 -
使用CSS伪元素控制连续几个元素的样式
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变。使用伪元素去控制(以:hover为例),当鼠标停留在A时,BCD.....样式的改变A与BCD....是相邻同级关系,要求A在BCD的最上面<div class="A"></div><di...原创 2019-03-23 10:28:56 · 1675 阅读 · 0 评论 -
做一个盒子跳动的加载动画
经常可以在网上看到一些有趣的加载动画,其实并不需要JS控制,只需要CSS去进行调节,需要用到的知识主要是CSS3的2D转换。首先得生成四个小盒子,可以自己调喜欢的样式类似于这个样子,为了后面好区分我就加了不同的颜色其次再看需求是什么,我这里写的是第一个盒子左右滑动,如果遇到了盒子就跳动到滑动盒子的位置,然后不断循环第一个盒子的animation样式.scroll{ a...原创 2019-03-23 10:56:13 · 838 阅读 · 0 评论 -
input框整理
(整理的类型是按照本人写代码过程中遇到感觉常用不常用)input常用类型(type):button:按钮 checkbox:复选框 file:让用户选择文件,使用accept可以控制可选文件的文件类型 hidden:不显示在页面,但是会提交 password:一个值会被掩盖的单行文本框,maxlength可以指定输入最大长度 radio:单选按钮 reset:表单重置 sub...原创 2019-05-27 10:51:32 · 169 阅读 · 0 评论 -
HTML5与CSS3权威指南2019-7-15晚学习笔记
HTML新增加的结构区块article:代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。section:对网站或应用程序中页面上的内容进行分块两者的区别:article元素可以看成是一种特殊种类的section元素,它比section元素更强调独立性。section元素强调分段或分块,而article强调独立性,具体来说,如果一块内容相对来说比较独立、完整的时候,应该...原创 2019-07-15 22:20:35 · 131 阅读 · 0 评论 -
2019-7-17下午学习笔记
第四章——表单及其他新增和改良的元素新增元素与属性表单内元素的form属性:优点:在需要时可以更方便地向页面中地元素添加样式,因为他们不是被分散在各表单之内的 <form action="" id="formInfo"> <input type="text"> </form> <textarea form="formIn...原创 2019-07-18 00:15:19 · 162 阅读 · 0 评论