html
codingWeb
知行合一
展开
-
挖掘css背景模糊的三种表现形式(背景整体模糊,背景局部模糊,背景局部清晰)
深挖一下背景模糊效果的三种表现形式:背景整体模糊背景局部模糊背景局部清晰背景整体模糊:最近频繁出现一个需求,实现类似于这种效果,背景是商品图模糊后的样子,商品图出现在前面,我第一反应是通过定位position和滤镜filter实现,来看看吧先定结构,有坑点: <div class="bg"> <div class="content">我是内容</div> </div>分析:,如果我们把background和fi.原创 2020-07-18 18:56:13 · 2460 阅读 · 0 评论 -
总结20个面试常见的HTML&CSS知识点
可以和前面的javascript常见面试题一起看哦还是老样子,选择性的给出答案1.行内元素/块级元素 非替换元素/替换元素⭐⭐⭐行内元素/块级元素2.img的title和alt属性 ⭐⭐•title是全局属性img的title和alt属性HTML全局属性3.meta标签⭐⭐Meta标签用法大全4.DOCTYPE 标签⭐⭐⭐ •标准模式 兼容模式5.script标签的defer和async⭐script标签的defer和async6.W3C盒模型和怪异盒模型 ⭐⭐⭐原创 2020-06-25 15:31:26 · 235 阅读 · 0 评论 -
table 》 tr 设置样式无效? table tr 这样设置才行,why?
今天碰到的一个问题,之前一直没有注意到,虽然很快找到问题所在了,但感觉有必要记录一下,希望有同样遇到这个问题的小伙伴,但没找到原因的,能看到这篇文章先来看问题:html如下: 想让 tr变成红色背景<style type="text/css"> table > tr { background-color: red; }</style><body> <table border cellspacing="0" cellpaddi原创 2020-06-18 00:24:56 · 5026 阅读 · 1 评论 -
原生js造轮子之----仿ElementUI消息提示组件,含生命周期钩子
先来看看ElementUI消息提示组件官网:https://element.eleme.cn/#/zh-CN/component/message我的效果:代码如下:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2020-05-25 22:44:54 · 731 阅读 · 1 评论 -
纯css实现简单瀑布流(flex 和 column-count 两种方式)
两种实现方式虽然都能实现瀑布流效果,但都有各自的缺点,会有介绍到方式一:column-count实现直接复制可预览,可以不做任何修改这种实现方式的缺点是:图片是先从上到下排列,再从左到右排列的<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><...原创 2020-05-01 02:18:48 · 3534 阅读 · 0 评论 -
html的一个小总结
到底啥是HTML,HTML翻译过来就是超文本标记语言,是一种创建网页的标准标记语言而非编程语言,说白了就是用来创建网站,通过浏览器解析运行的语言。一个html文档中,必须存在的是(1)声明,通过声明说明是html文档,html5的声明变得更简单,只需要即可;(2)标签,用来包裹整个页面;(3)标签,用来包裹文档的元数据信息(meta信息,后面会单独出一期总结meta标签)、title、...原创 2019-06-17 23:17:21 · 95 阅读 · 0 评论 -
组合使用css选择器
一、用法介绍在css中.classA.classB指的是一个元素,同时满足classA和classB,即(class=“classA classB”)<style>.classA.classB{ border:1px solid red;}.classa .classb{ border:1px solid blue;}</style>--------...原创 2019-07-16 14:09:04 · 1161 阅读 · 0 评论 -
用html,css,js模拟飞机大战
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ...原创 2019-09-06 11:36:10 · 1082 阅读 · 0 评论 -
块状元素、内联元素、和内联块状元素的概念与区别
块状元素block:该元素前后会有换行符,可以设置margin和padding内联元素inline:元素前后没有换行符,和其他元素在一行上,水平方向可以设置margin和padding,竖直方向不可以而内联元素inline-block:既有块状元素的性质又有内联元素的性质,即:1、和其他元素都在一行上;2、元素的高度、宽度、行高以及顶和底边距都可设置。 ...原创 2019-07-05 14:05:58 · 1348 阅读 · 2 评论 -
css伪元素:before和:after用法详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。如下图,是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查。标题一、伪元素:before和:after用法这...原创 2019-07-24 16:11:23 · 309 阅读 · 0 评论 -
css解决display:inline-block;产生的缝隙(间隙)
display:inline-block的缝隙<style type="text/css"> *{ border: 0; padding: 0; margin: 0; } ul li{ display: inline-block; border: 1px solid #000000; }</style...原创 2019-07-13 16:17:14 · 4782 阅读 · 1 评论 -
css中4种居中div的方法
方法1:Flex layout在父容器内添加以下样式:display: flex;justify-content: center;align-item: center;方法2:Margin auto在子容器内添加以下样式:margin: 0 auto;方法3:Text-align和Inline-block在父容器内添加以下样式:text-align: center;在子...原创 2019-06-15 14:15:03 · 198 阅读 · 0 评论