HTML/CSS
关注
分享
扫一扫
前端向朔
学习-撕裂-成长-变强
展开
-
HTML 编码规范
HTML 编码规范语法用两个空格来代替制表符（tab） —— 这是唯一能保证在所有环境下获得一致展现的方法。嵌套元素应当缩进一次（即两个空格）。对于属性的定义，确保全部使用双引号，绝不要使用单引号。不要在自闭合（self-closing）元素的尾部添加斜线 – HTML5 规范中明确说明这是可选的。不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。<!DOCTYPE html><html> <原创 2020-07-29 13:49:09 · 913 阅读 · 0 评论 -
CSS 编码规范
CSS 编码规范文件CSS 文件使用 UTF-8 编码。样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 UTF-8字符 @charset; 都用小写字母，不能出现转义符，编码名允许大小混写@charset "UTF-8";缩进使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。示例：.selector { margin: 0; padding: 0;}空格选择器 与 { 之间必须包原创 2020-07-28 10:37:35 · 1064 阅读 · 0 评论 -
a标签的字体颜色继承问题
为什么span标签继承了父类的颜色，唯独链接不能，直到直接设置a的颜色就行？原创 2017-09-03 19:04:21 · 14975 阅读 · 0 评论 -
CSS Mask 在WeGame新手引导的实践
全新版WeGame客户端下载：http://wegame.com/client在全新的WeGame版本，如果首次登录，则会加载新手引导的模块，在这个模块中要实现下图右边效果，我们采用CSS Mask遮罩，类似于alpha透明通道的遮罩效果。详细介绍：介绍：css遮罩最早是由苹果公司提出，并已经出现在W3C草案中的属性，css mask属性目前还不是正式标准，需要添加-webkit-内核前缀才能使用原创 2017-09-14 20:05:49 · 1376 阅读 · 0 评论 -
CSS盒模型
盒模型(box model)是CSS中的一个重要概念，它规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。原创 2017-09-02 17:52:01 · 957 阅读 · 0 评论 -
分享一道有意思的HTML题
<!--下面这段代码有什么问题？请列举（晚点看答案哦，看看自己能发现几个问题）--><P> 哥写的不是HTML，是寂寞。<br><br> 我说：<br>不要迷恋哥，哥只是一个传说。<!--解答-->1，P标签不需要大写，应该小写2，p标签没有闭合，应该闭合3， 是为了缩进，可以使用css的属性text-indent:2em;4,<br/原创 2016-10-07 15:19:41 · 880 阅读 · 0 评论 -
CSS技巧-根据兄弟元素的数量来设置样式
场景我们在写一些类似朋友圈晒图的九宫格布局时，经常会遇到一下几种情况： 1.只有一张图 2.只有两张图 3.只有三张图 4.只有四张图 5.四张图以上等 最终实现：See the Pen <a href="https://codepen.io/xiangshuo1992/pen/MQmwam/">MQmwam</a> by Luke.Deng (<...原创 2018-02-11 12:21:30 · 6316 阅读 · 0 评论 -
单屏（全屏）适配解决方案（jQuery插件）
背景在平时的web开发过程中，经常会要实现单屏或者叫全屏的效果，同时要满足设备适配要求，虽然一些常见的插件能实现一定的效果，但是如果需要灵活运用的话还是会受到很多限制，在不断的实践过程中，我们梳理了一套全屏适配解决方案，能兼容IE8+，下面我们来详细了解。案例分析案例一： 可以看到图中元素有几类， 1.中间主体内容元素 2.背景图片 3.背景图片上面，主体内容下面的粒子效果...原创 2018-05-17 13:27:56 · 4665 阅读 · 0 评论 -
帧动画的多种实现方式与性能对比
概述前面我分享了《Web动画形式》，各种动画形式都可以制作出一种类型的动画，那就是帧动画，也叫序列帧动画，定格动画，逐帧动画等，这里我们统一用帧动画来表述，接下来我们就来看看帧动画有哪些打开方式吧。 （高兴的小伙子）应用场景帧动画一般用来实现稍微复杂一点的动画效果，同时希望动画更细腻，设计师更自由的发挥。他可以定义到每一个时间刻度上的展现内容，我们一般用帧动画来做页面的Loadi...原创 2018-07-11 10:42:47 · 12416 阅读 · 4 评论 -
还不会CSS水平垂直居中？这里有12种方案
今天读书的时候，愕然发现自己居然没有总结过水平垂直居中的方法，在印象中，这个知识点确实是很神奇的存在：极其常见的需求，从理论上来看，它似乎极其简单，在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤其如此。接下来我们就来总结一下该如何实现这...原创 2019-01-18 17:39:28 · 1342 阅读 · 0 评论 -
【HTML】元素的 alt 和 title 有什么区别？
概述这道题大概还可以加个限定词，我们暂且把 <title> 标签排除在本次讨论之外。元素的 alt 和 title 属性 有什么区别？ALT 属性最常见用在 <img> 标签上，那我们先来看下 <img> 标签的 alt 属性。alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像，alt 属性可...原创 2019-05-02 12:01:36 · 15493 阅读 · 0 评论 -
【CSS】属性content有什么作用呢？有哪些场景可以用到？
认识 :before 和 :after默认 display: inline；必须设置 content 属性，否则一切都是无用功， content 属性也只能应用在 :before 和 :after 伪元素上；默认user-select: none，就是 :before 和 :after 的内容无法被用户选中；伪元素可以和伪类结合使用形如：.target:hover:after。:bef...原创 2019-05-08 10:26:01 · 12128 阅读 · 1 评论 -
【CSS】rgba()和opacity这两个的透明效果有什么区别
1.opacity 是属性，rgba()是函数，计算之后是个属性值；2.opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；扩展：1.transparent 也是透明，是个属性值，颜色值，跟#000是一类，不过它是关键字...原创 2019-05-14 09:24:39 · 3555 阅读 · 0 评论 -
【CSS】怎样修改chrome记住密码后自动填充表单的黄色背景？
问题跟踪：https://github.com/haizlin/fe-interview/issues/95倒是一直没注意过这个问题，搜了下思否已经有提问和回答，基本也能解决问题，包括上面的两个回答，同时优快云的账号登录也是用上面内阴影的方法解决的。https://segmentfault.com/q/1010000000671971以下才是重点：都提到了Chrome有默认样式，说“除了...原创 2019-05-14 10:08:00 · 1325 阅读 · 0 评论 -
元素圆角与内部滚动条的矛盾
文章目录概述元素圆角与滚动条方案一方案二方案实现自定义滚动条扩展遗留问题概述我们在写 web 页面的时候，除了页面原生的滚动条，比如 HTML 的滚动条，BODY 的滚动条之外，还有一种比较常见的滚动条，那就是元素内部滚动条，我们在利用元素内部滚动条的时候会遇到什么问题呢，我们如何自定义滚动条。元素圆角与滚动条比如迅雷客户端，除了最右边的滚动条是页面滚动条，其他两个都是元素内部滚动条。...原创 2019-09-23 11:24:56 · 2047 阅读 · 0 评论 -
大型网站前端使用图片格式的正确姿势
在网页上使用JPG、PNG和SVG：新手指南 | Cheesecake Labs 本文转载自：众成翻译 译者：lunasun 审校: lizheming 链接：http://www.zcfy.cc/article/3211 原文：https://cheesecakelabs.com/blog/jpg-png-svg-web-beginners-guide/在网页上使用J转载 2017-06-27 19:59:48 · 4044 阅读 · 0 评论 -
网页特殊符号(HTML字符实体)大全
网页特殊符号有很多实用的地方哦，比如版权符号：© 商标注册符号： ® 关闭符号：×（这个我经常用）字体一般要设置大点。下面我们就来看下网页中有哪些特殊符号吧。HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。HTML 原代码显示结果描述<<小于号或显示标记>>大于号或显示标记&&可用于显示其它特殊字符"“引原创 2016-11-15 20:44:02 · 161121 阅读 · 4 评论 -
圣杯布局&双飞翼布局认识
作为纯野生的前端小白，当第一次听到圣杯布局的时候是懵逼的，这是什么布局，简直从来没听过。于是乎搜索引擎搜索一番，狂点开十来个页面，看demo，看评论，动手实践demo，最后。。。“圣杯布局从听过到看过”Duang！！！先贴出我看的文章： 1.这篇思路清晰，一看就清楚了。 http://www.cnblogs.com/imwtr/p/4441741.html2.这篇是最好的实践，把常用的圣杯布局写原创 2016-06-15 18:23:27 · 1262 阅读 · 0 评论 -
CSS 外边距(margin)重叠及防止方法
前段时间辞职了，然后一直处于求职的状态，面试的第一家公司是一家初创公司，在一个孵化器里面办公，笔试只有十道题，HTML/CSS/JS各三道题，最后一道题是逻辑题，关于面试题方面我下回再总结。今天先就里面的一个问题-margin重叠做一个学习。 （转载）正文从这里开始~边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 两个转载 2016-07-30 20:27:18 · 15189 阅读 · 1 评论 -
输入框美化（placeholder）
本文主要介绍针对输入框的美化 为了兼容ie7+，不能直接使用H5的属性placeholder，但是又需要实现输入提示效果，所以总结了以下两种方式。最终实现效果示例： 方式一： 通过添加p标签，并绑定js事件来模拟输入框光标进入隐藏效果。<div class="foo-input foo-user"> <input class="input-text" type="text" valu原创 2016-08-16 23:28:19 · 3778 阅读 · 0 评论 -
CSS 元素垂直居中的 6种方法
6 Methods For Vertical Centering With CSS 外国人分享的文章，原文地址： http://vanseodesign.com/css/vertical-centering/其实经常是看评论的，评论的人好多，也好用心，都是真诚的评论，国内的文章评论挺少的，不过能写出好文章的也不多。http://blog.youkuaiyun.com/wolinxuebin/article/转载 2016-08-06 17:54:40 · 544 阅读 · 0 评论 -
[转]css3 media媒体查询器用法总结
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。准备工作1：设置Meta标签首先我们在使用Media的时转载 2016-08-07 13:29:54 · 2158 阅读 · 0 评论 -
半透明下拉菜单
1，点击 cart Fredr….菜单title时， 2，弹出菜单菜单， 3，菜单弹出有动画效果， 4，菜单title 右侧箭头默认向上，点击菜单展开时，箭头向下，有转动动画， 5，弹出菜单，鼠标移动时，每栏菜单有颜色变化， 6，整个菜单全部半透明。HTML<div class="wrap"> <div class="nav"> <div class原创 2016-08-07 17:34:43 · 3550 阅读 · 3 评论 -
弹窗组件
需求说明： 1，点击页面按钮，弹出窗口； 2，要有半透明背景遮罩； 3，弹出窗口圆角。窗口半透明，但内容不透明；带阴影； 4，窗口可拖动； 5，拖动停止之后，滚动页面时窗口位置不动。CSS呼吸效果.popUpb_b_s{ display:block;width:33px;padding:20px;margi原创 2016-08-07 18:40:11 · 1135 阅读 · 0 评论 -
LESS学习笔记（初学实用）
一、什么是less？Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 LESS官网（中文）：http://lesscss.cn/二、less怎么用？方式一：直接通过引入less.js文件，通过浏览器端来编译.less文件（类css文件），当然先要下载less.js文件放在项目文件中，目录就来个简单的。 —-less原创 2016-08-19 15:18:42 · 2434 阅读 · 0 评论 -
近期做页面遇到的问题汇总
常用布局标签：header，nav，section，article，p,span,a ,img,h1,em,i,hr,div,input,select,table,ul,li,footer 文本这是元素，p是标签排列时边框重叠问题，可以设置，margin-right：-1px; margin-bottom: -1px;padding-bottom: 1px;来解决下边框隐藏问题。li靠边一原创 2016-09-11 13:33:03 · 770 阅读 · 0 评论 -
IE8下实现兼容rgba
昨天遇到一个问题，要实现一个背景透明的效果，用CSS3用rgba()就能实现，即background: rgba(0,0,0,.5);但是要兼容到IE8，就发现没有透明效果，因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。rgba的含义，r代表red，g代表green，b代表blue，a代表透明度。红绿蓝是三原色，所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0转载 2016-09-11 13:55:18 · 2528 阅读 · 0 评论 -
absolute定位实现移动布局
今天再次拜读了一遍张大神的文章，读到可以用绝对定位实现移动端fiex效果的布局，于是在拜读完之后动手实践了一下。 先上图。 效果描述：头尾固定，侧边栏固定，中间内容块自适应，自由滑动。html结构<div class="top"></div><div class="content"></div><div class="side"></div><div class="bottom"></di原创 2016-09-22 17:50:11 · 3051 阅读 · 1 评论 -
CSS盒子模型
一直在用盒子模型，却没有认真看下文档，今天看了下，长知识了，这里记录下。 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。这是一个标准的盒子模型（浏览器里截取的） Margi原创 2016-10-07 12:03:33 · 571 阅读 · 0 评论 -
JS Cookie当天24点过期，chrome时差问题
昨天遇到一个问题，要实现一个背景透明的效果，用CSS3用rgba()就能实现，即background: rgba(0,0,0,.5);但是要兼容到IE8，就发现没有透明效果，因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。rgba的含义，r代表red，g代表green，b代表blue，a代表透明度。红绿蓝是三原色，所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0原创 2016-09-25 11:21:44 · 7209 阅读 · 0 评论 -
CSS盒子塌陷问题解决方案
什么是盒子塌陷？ 外部盒子本应该包裹住内部的浮动盒子，结果却没有。问题出现的原因 父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。 因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内原创 2016-10-07 16:03:10 · 8040 阅读 · 0 评论 -
审查慕课网“实战”页面发现的CSS属性用法
在审查慕课网“实战”页面的时候，最吸引我的地方是他的大图背景固定，且好像每个模块的背景都不一样，于是就F12审查了一下，发现原来就是一个小技巧。对背景图片设置：background：rgba(0, 0, 0, 0) url("/img/cover_new_02.jpg") no-repeat fixed center 0 / cover 背景图片固定效果，主要是fixed固定，背景属性以及cover原创 2016-06-02 15:15:40 · 544 阅读 · 0 评论