随笔分类 - HTML
摘要：这篇文章主要整理一些css3实现的一些文字特效，分享给大家， 相信您看完会有不少的收货哦！ 一、css3 空心文字 <style> .hollow{ -webkit-text-stroke: 1px black; -webkit-text-fill-color : transparent; font
阅读全文
posted @ 2020-06-16 23:58
前端一点红
摘要：css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位，以下为常用的几种： 1、static（静态定位）： 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。也就是按照文档的书写布局自动分配在一个合适的地方，
阅读全文
posted @ 2020-06-16 23:39
前端一点红
摘要：这篇文章主要介绍使用js实现文字无间歇性上下滚动，一些网站的公告，新闻列表使用的比较多，感兴趣的小伙伴们可以参考一下 ，代码实现如下。 html+css部分： 1 <style> 2 #moocbox{ 3 width: 600px; 4 height: 22px; 5 border: 1px so
阅读全文
posted @ 2020-06-16 23:14
前端一点红
摘要：最简单实用的CSS3搜索框样式，纯CSS效果无需任何javascript，其中部分搜索框在点击的时候有动画特效，搜索框的应用也是比较普通的，效果如下： 代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8
阅读全文
posted @ 2020-06-16 22:10
前端一点红
摘要：每一个网页或者说是web页都有其固定的后缀名，不同的后缀名对应着不同的文件格式和不同的规则、协议、用法，最常见的web页的后缀名是.html和.htm，但这只是web页最基本的两种文件格式，今天我们来介绍一下web页的其它一些文件格式。 首先介绍一下html与htm 关于HTML，HTML(Hype
阅读全文
posted @ 2020-06-16 22:07
前端一点红
摘要：如何修复我们会向你介绍，如何在 Linux VPS 上修复 WordPress 中的 HTTP 错误。 下面列出了 WordPress 用户遇到的最常见的 HTTP 错误，我们的建议侧重于如何发现错误原因以及解决方法。 1、 修复在上传图像时出现的 HTTP 错误 如果你在基于 WordPress
阅读全文
posted @ 2020-06-16 21:11
前端一点红
摘要：在写html表单的时候，发现了一个问题：input和button设置了一样的宽高，但是显示高度确不一致，先看代码： 1 <style> 2 input,button{ 3 width:100px; 4 height: 60px; 5 } 6 </style> 7 <input type="text"
阅读全文
posted @ 2020-06-16 18:54
前端一点红
摘要：target作为目标伪类选择器，是css3中的新特性之一，目前已经支持所有主流浏览器，除了 IE8 及更早的版本。target伪类的主要是用于匹配文档中uri中某个标志符的目标元素，具体来说，uri中的标志通常会包含一个#，后面带有一个标志符名称，如#box_one,:target就是匹配ID为"b
阅读全文
posted @ 2020-06-16 18:52
前端一点红
摘要：解决android 5.0 webview不能加载http与https混合内容的问题 在使用WebView加载https资源文件时，如果认证证书不被Android认可，那么会出现无法成功加载对应资源问题。那么，我们就要针对这一状况作出对应的处理。 1、解决方法：启用mixed content ,we
阅读全文
posted @ 2020-06-16 18:50
前端一点红
摘要：使用CSS 绘制出 1px 的边框，在移动端上渲染的效果会出现不同，部分手机发现1px 线条变胖了，这篇文章整理2种方式实现1px 像素线条。 1、利用box-shadow + transform 1 <style> 2 span.onepixel{ 3 width: 300px;position:
阅读全文
posted @ 2020-06-16 18:47
前端一点红
摘要：一、line-height的定义 css中line-height行高是指文本行基线之间的距离，不同字体，基线位置不同。line-height只影响行内元素和其他行内内容，而不会直接影响块级元素，如果块级元素设置了line-height，这个值只会应用到块级元素里面的内联内容时才会有影响。在块级元素上
阅读全文
posted @ 2020-06-13 14:40
前端一点红
摘要：这篇文章整理css如何实现文章分割线的多种方式，分割线在页面中可以起到美化作用，那么就来看看使用css实现分割线样式的多种方法。效果如下： 方式一：单个标签实现分隔线： html: <div class="line_01">小小分隔线 单标签实现</div> css: .demo_line_01{
阅读全文
posted @ 2020-06-13 14:36
前端一点红
摘要：在前端页面开发中，需要使用css来选择除了第一个之外的子元素，例如希望每个span之间能间隔一定的距离，单不能给每个span设置margin-left，这样会导致第一个span的前面有间距，影响排版。下面就来讲解实现css获取除第一个之外的子元素的多种方法。 效果如下： 设计坞https://www
阅读全文
posted @ 2020-06-13 14:28
前端一点红
摘要：在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果，每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0，将模糊值blur也设置为0，此时增加扩张半径，就会使元素的投影变为实线边框。这样就可以模
阅读全文
posted @ 2020-06-13 14:23
前端一点红
摘要：一、横向条纹如下代码： 1 background: linear-gradient(#fb3 20%, #58a 80%) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而
阅读全文
posted @ 2020-06-13 14:20
前端一点红
摘要：text-shadow 属性仅仅是用来设置文本阴影的，似乎并不能实现字体发光效果。其实不然，这正是 text-shadow 属性的精妙之处。当阴影的水平偏移量和垂直偏移量都为0时，阴影就和文本重合了。这时，如果增大阴影模糊的距离，就可以达到字体外发光的效果了。当然，为了使外发光更加酷炫，还需要使用到
阅读全文
posted @ 2020-06-13 14:13
前端一点红
摘要：css/css3样式已是web前端开发的主流技术了。每个优秀的前端程序员都应该熟悉，甚至精通css。那么要如何才能学好css,并很好的应用到实际开发中，这篇文章就推荐一些关于css相关的书籍给大家。 CSS世界 以“流”为线索，从结构、内容到美化装饰等方面，全面且深入地讲解前端开发人员必须了解和掌握
阅读全文
posted @ 2020-06-13 14:09
前端一点红
摘要：在网页开发中遇到这样一个问题，在使用select的时候，想让里面的文字水平居中。首先想到的是text-align:center;但是发现在Chrome浏览器下不兼容，需要使用到text-align-last:center;就可以了。代码如下： select{ width: 400px; text-a
阅读全文
posted @ 2020-06-13 14:08
前端一点红
摘要：为了判断浏览器是否支持css3的一些新属性样式，当不兼容该样式的时候，我们可以更优雅的降级处理。这就需要使用到css3的条件判断功能：在css中支持@supports标记、或者在js中使用CSS.supports函数，来检测浏览器是否支持css3的新属性。下面就来看看如何实现的！ CSS @supp
阅读全文
posted @ 2020-06-13 14:02
前端一点红
摘要：大家都知道autocomplete属性是表单字段中的HTML5新属性，该属性有两种状态值，分别为"on" 和 "off"，该属性可省略：省略属性值后默认值为"on"，也可以省略属性名，直接写入关键字on或off。 网站项目中，有登录和注册的弹框，在除chrome的浏览器中一切都ok，一旦在谷歌浏览器
阅读全文
posted @ 2020-06-13 13:57
前端一点红
浙公网安备 33010602011771号