![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML/CSS/LESS
文章平均质量分 74
F-ZERO-F
脚踏实地
展开
-
图片引用的两种方式background-image和img的区别
发现问题的地方: 在模拟百度首页进行制作的时候,在百度的搜索文本框中有一个小照相机,这个照相机是一个图片的一部分,在鼠标移动到这个地方的时候它自动换到图片的下半部分进行变色,而这个图片的引用就是使用的background-image引用的,但是使用img标签却没法达到这种效果。这是为什么呢?img 元素:定义为向网页中嵌入一幅图像。从技术上讲, 标签并不会在网页中插入图像,而是从网页...原创 2018-04-18 16:19:36 · 26727 阅读 · 2 评论 -
编译less的四种方式以及node.js的安装
背景:众所周知css只是一门描述性语言,语言内部没有编程思想,而且他的写法也相对有些笨重,所以就会造成css代码中有大量的低逻辑的代码,非常不利于维护和扩展造成复用性太差。CSS预处理器随之产生:CSS预处理器用一种专门的编程语言,进行样式设计,然后再编译成CSS文件,以供使用;目前使用普遍的css预处理器的编程语言有less sass等;(这些语言有了编程思想,有了逻辑就会提升复用性和可维护性...原创 2018-09-18 22:26:06 · 6198 阅读 · 1 评论 -
解决执行grunt命令报错【Cannot find module 'coffeescript/register'】
在使用grunt的插件执行grunt命令时报错:如图:报错信息为:Cannot find module 'coffeescript/register'解决办法:1:删除项目中的 node_modules包 这里面安装的是一些插件以及项目中的grunt文件;2:重新在项目中安装grunt(为了安装各种插件);3:重新安装要使用的插件;4:cmd中运行grunt命令即可;最后:...原创 2018-11-19 11:22:49 · 2084 阅读 · 0 评论 -
你知道strong和b;i和em的区别吗?
一:<b>W3school定义: <b>标签规定粗体文本。(实现加粗显示效果) H5的规范声明:1)使用<h1~6>来表示标题,2)使用<em>来表示强调的文本,3)使用<strong>来表示更重要的文本,4)使用<mark>标签来表示标注的或突出显示的文本。5)只有当 没有...原创 2018-04-22 21:43:08 · 2900 阅读 · 1 评论 -
HTML中a标签的几大作用
在学习行级标签的时候总结有三大最为重要的行级标签,分别为:a标签;span标签;img标签。现在主要总结一下a标签的几大应用场景。 一:外部页面链接 外部页面链接需要一个完整的网页的地址,看一下具体的例子:&lt;a href="http://www.baidu.com" target="_blank"&gt;百度&lt;/a&gt;这里的href规定的原创 2018-07-26 21:42:48 · 5358 阅读 · 0 评论 -
form表单基础知识,以及H5新属性总结
HTML中的表单用于搜集不同类型的用户输入;所有的HTML表单元素都可以划分成两类 1:输入类表单 2:非输入类表单 下边将总结每一个表单元素的使用一:form表单基础知识1:form标签&lt;form action="" method="get/post"&gt;&lt;/form&gt;form标签中有两个属性,分别是action和meth原创 2018-07-28 16:37:53 · 2641 阅读 · 1 评论 -
Canvas中的beginPath()和closePath()
在学习H5新元素的时候,了解到了画布canvas:可以在网页中绘制所需要的图形;其中在描绘扇形图时发现了关于beginPath()和closePath()的问题,在接下来将会进行分析和总结;第一步:提画笔,点江山&lt;!--html代码--&gt;&lt;canvas id="canvas4" width="400px" height="300px&quo原创 2018-10-03 16:14:27 · 1816 阅读 · 0 评论 -
@import和link的区别
使用媒体查询进行响应式布局,有三种实现方法:使用写在style中的@media;在style中使用@import关键字导入样式表;使用link标签导入样式表;问题:其中,在使用@import导入样式表会出现样式表中的样式完全没有产生效果的现象,由于水平有限,理解不深,下边就对这一现象进行简单的分析,以此来学习@import和link下面是正确的产生预期效果的代码&amp;lt;!-...原创 2018-08-21 15:02:22 · 377 阅读 · 1 评论 -
浮动带来的问题,以及清除浮动影响的方式
查阅多篇资料,最初使用浮动float是为了让文字环绕图片,这样显示的效果会更好一点;因为元素使用浮动之后元素就具有了块级元素和行级元素的特点,不仅可以设置宽高也能设置在水平方向上的排列布局;到现在由于浮动所带来的问题有两个:问题一:父元素高度坍塌 &lt;style&gt; #father{ border: 3px solid black; ...原创 2018-10-03 23:38:58 · 3636 阅读 · 0 评论 -
猜想:下拉菜单的颜色叠加!
使用height从0开始变化的方法去实现下拉列表时,并且对高度变化添加了一个过渡效果,会出现颜色变化叠加的效果。现在对这个现象进行分析和猜想,也算是进一步加深对下拉列表的理解。<!--html结构--><div id="navList"> <ul> <li>大学新闻</li> <li..原创 2018-08-11 14:09:38 · 309 阅读 · 0 评论 -
下拉菜单的四种实现方式
今日在做下拉菜单时思考实现下拉菜单的几种实现方式,现在对这几种实现方式进行总结。1:改变下拉菜单的display/*HTML结构*/&lt;div id="container"&gt; &lt;ul id="con_ul" class="cleanfix"&gt; &lt;li原创 2018-08-06 15:14:30 · 24835 阅读 · 4 评论 -
关于盒子模型中margin叠加现象的归类与思考
问题由来在对嵌套元素的子元素进行垂直方向上的居中操作时,采用margin-top会出现父元素和子元素一同下移的现象无法达到想要的效果。&amp;lt;!--html代码块--&amp;gt;&amp;lt;div id=&quot;father&quot;&amp;gt; &amp;lt;div id=&quot;son&quot;&原创 2018-07-31 22:07:55 · 978 阅读 · 0 评论 -
width和height的100%和auto的区别以及height:100%无效的场景
一: 父容器有height,width1:子元素宽度为100%#father{ width: 200px; height: 200px; background-color: #cccccc; border: 2px solid red; } #son{ ...原创 2018-08-05 11:33:42 · 1581 阅读 · 0 评论 -
元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求。下边将五种常用的居中方法进行总结。 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的偏移在使用margin进行具体高度的偏移时,需要知道父元素和子元素的具体的宽高尺寸 1:水平方向居中 在进行水平方向上的居中时,可对子元素样式使用margin:0 auto;...原创 2018-08-04 12:48:33 · 17615 阅读 · 0 评论 -
对css中选择器的优先级和优先权的思考总结
我们知道css样式有三种形式 1:行内样式; 2:内部样式; 3:外部样式; 那你知道如果对于同一元素的同一属性,上述三个样式都设置了一遍,最后显示的是以什么为准的么? 可能大多数的人都会说:行内样式&gt;内部样式&gt;外部样式;至少以前我是这么认为的;接下来就用代码结合解释详细的描述一下真正的表现吧。一:先比较内部样式和外部样式的优先级 在比较之前,先看这样两段代码:&l...原创 2018-07-27 11:32:05 · 547 阅读 · 0 评论 -
区分伪类和伪元素
一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果。伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪类。(这种文档树无法描述的状态是什么呢?当一个元素在用户的不同行为下就变化成不同的状态这个行为的变化dom就无法描述,就要产生伪类,来为一些选择器添加特殊的效果)。2:什么是文档树(DOM)原创 2018-04-23 20:37:46 · 1007 阅读 · 4 评论 -
iOS:使用面向对象思想代替delegate
父组件弹两次弹窗原创 2019-10-06 21:16:05 · 189 阅读 · 0 评论