css
关注
分享
扫一扫
yusirxiaer
前端移动端一路の风景
展开
-
CSS3 输入文字特效
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { position: relative; min-height: 100vh; b...原创 2022-01-08 22:54:00 · 714 阅读 · 0 评论 -
css3 卡片hover3D效果
鼠标hover卡片 向上翻转，看简易代码<!DOCTYPE html><html><head> <title>3D Flip Card hover effects</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: consolas; box-sizing: border-box; } bod..原创 2021-03-20 22:39:15 · 640 阅读 · 0 评论 -
box-sizing的使用
box-sizing人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：.simple { width: 500px;...原创 2018-09-25 14:14:18 · 168 阅读 · 0 评论 -
p字间距 html段落内文字设置字间距间隔
只对段落p内文字设置字间距，段落<p>是html段落标签，以<p>开始，以</p>结束，通常文章分段使用p标签，而有时小局部布局也可以使用p来布局。通过css设置其样式实现排版目的。这里针对p设置字间距，使用letter-spacing《css 字间距》属性实现，其属性单词值为具体数字+单位（整数）。一、网页全局定义设置p的字间距p{letter-...原创 2018-12-20 12:44:58 · 21453 阅读 · 0 评论 -
:nth-child(n)与:nth-of-type(n)为啥显示不对呢
首先是二者的区别:nth-child(n) 是选择父元素的第n个子元素。 :nth-of-type(n) 是选择父元素的第n个同类型的子元素举个例子：<div class="read"> <h1>title</h1> <p>paragraph1</p> <p>paragraph2&am原创 2019-01-08 11:47:50 · 2905 阅读 · 0 评论 -
css3 box-shadow阴影(内外阴影与发光)讲解
基础说明： 外阴影：box-shadow: X轴 Y轴 Rpx color; 属性说明（顺序依次对应）： 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 内阴影：box-shadow: X轴 Y轴 Rpx color inset; 默认是外阴影 内阴影：inset 可以设置成内...原创 2019-01-16 17:34:23 · 15559 阅读 · 0 评论 -
css3自适应布局单位vw,vh
视口单位(Viewport units)什么是视口？在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。...原创 2019-07-08 13:56:54 · 341 阅读 · 0 评论 -
如何解决浏览器缩小出现横向滚动条时网页背景图出现空白的问题
原因：当窗口缩小时，浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(1024px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的BUG。解决方案：html,body { height: 100%; width: 100%; min-width: 1024 !impor...原创 2019-07-08 15:39:42 · 1991 阅读 · 0 评论 -
css3实现科技感的呼吸灯效果
呼吸灯效果是一种常见的灯光效果，比如网页的按钮，现实生活中比如电脑的开机按钮。使用CSS3的animation方法可以实现很多迷人的网页动画特效。使用CSS3 配合box-shadow即可实现类似的效果样式代码如下 123456789101112131415161718192021222324252627282...原创 2019-09-26 16:48:46 · 10024 阅读 · 2 评论 -
让行内元素（如图片）在div中水平垂直居中 （干货）
（1）第一种：用vertical-align<div class="method1"> <span class="tiptop"></span> <img class="test" src="img/Dota2.jpg" alt="dota2"></div>原创 2018-07-18 16:42:07 · 5347 阅读 · 2 评论 -
推荐base.css
学习《编写高质量代码--Web前端开发修炼之道》 /* CSS Document *//*css reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{ border-collap...原创 2018-07-18 13:55:40 · 1997 阅读 · 0 评论 -
CSS做个Switch开关
Switch开关： 根据需求可知，Switch开关只有两种选择，true或false。所以我们想到HTML的checkbox控件，用它来做。 <input id="switch" type="checkbox" class="switch" /> 但是在浏览器中，checkbox是有固定形状的（对勾），所以我们并不能直接修改checkbox的样式。 那我们该修改一...原创 2018-06-27 17:34:16 · 2938 阅读 · 0 评论 -
css 三角角标样式
.sanjiao { width: 0px; height: 0px; overflow: hidden; border-width: 100px; border-color: red transparent transparent transparent; border-style: solid dashed dashed dashed; }原创 2017-07-25 11:27:26 · 6363 阅读 · 1 评论 -
HTML与CSS布局技巧总结
很多人对CSS的布局有困惑，实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解，分析下了解各种布局的优劣，同时希望能分享给初入前端的朋友们一些在布局上的经验，如果有那些地方总结的不好，欢迎大家指正。言归正传，现在就来揭开各种布局的面纱。单列布局div class="parent"> div class="child">div>div>1原创 2017-08-19 00:12:04 · 435 阅读 · 0 评论 -
Html5做webapp中界面适配的问题总结
做一款软件首先是要做出相应的界面，然而对于手机软件开发者来说，大小各异的手机屏幕却给我们带来了不少的麻烦。HTML5技术在大家的心中要比传统的Android/iOS/wp简单的多，因为它的适配性和平台跨越方面比较出色。在外看来却不是那样的，跨平台的问题暂且不说，其屏幕适配方面并不比原生态代码简单。下面给大家分享下我总结出来的H5界面适配：一、Media Queries网上一搜一大把的一个方原创 2017-09-05 15:03:16 · 1249 阅读 · 0 评论 -
css hack技术整理
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经原创 2017-09-06 10:44:04 · 313 阅读 · 0 评论 -
div内图片和文字水平垂直居中
大小不固定的图片、多行文字的水平垂直居中本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是转载 2017-11-29 17:32:36 · 39504 阅读 · 0 评论 -
CSS clip:rect矩形剪裁功能
CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。根据Dreamweaver的自动提示，clip有如下可用属性关键字：就顺序上而言，top → right → bottom → left，在CSS中是统一相...原创 2018-02-22 11:56:56 · 1678 阅读 · 0 评论 -
CSS页面布局解决方案大全
前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。居中布局水平居中1）使用inline-block+text-align（1）原理、用法原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。用法：对子框设置display:inline-block，对父框设置t...原创 2018-04-08 16:08:23 · 334 阅读 · 0 评论 -
小白十分钟-推荐导航栏
大腿绕道，给小白学习用，上代码<div class="list"> <div class="infor"> <ul class="left"> <li><a href="">限时特价</a></li> &原创 2018-06-07 17:31:31 · 322 阅读 · 0 评论 -
缩小窗口时CSS背景图出现右侧空白BUG的解决方法
页面容器（#wrap）与页面头部（#header ）为100%宽度。而内容的容器（#page）为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度：改变浏览器窗口的大小，小于内容层宽度，如下图所示。拖动水平滚动条，出现了bug的样子。右边的背景不存在了。如下图所示。问题的根本在于：当窗口缩小时，原创 2017-06-21 11:46:10 · 1155 阅读 · 0 评论