布局效果
文章平均质量分 58
鸭绒
追求起点是大厂。
展开
-
响应式布局:rem + 媒体查询
1.rem单位rem与em的区别:rem是一个相对单位,相对于html的字体大小em是一个相对单位,相对于当前元素或父元素的字体大小rem相对于em的优势:rem的参考系是唯一的html标签,如果整个页面很多地方使用rem进行布局,只需要在不同屏幕下修改html的字体大小,那么整个页面都会同步变化。而em的参考系过多,不好统一处理。2. 媒体查询上面我们知道在不同屏幕大小情况下,可以通过控制html的字体大小来控制页面样式,那么我们如何根据不同屏幕的大小来控制html字体的大小呢?媒体查原创 2021-06-10 23:32:32 · 3226 阅读 · 1 评论 -
CSS修改滚动条的默认样式
滚动条的默认样式可能不能让人满意,下面修改滚动默认样式:效果图:修改滚动条样式涉及三个伪类:::-webkit-scrollbar(设置整个滚动条的大小)::-webkit-scrollbar-thumb (设置滚动条滑块样式)::-webkit-scrollbar-track(设置滚动轨道的样式)示例:::-webkit-scrollbar { width: 5px;//这是竖向滚动条的宽度。如果是横向滚动条则设置height}::-webkit-scrollbar-thumb原创 2021-03-22 19:10:59 · 756 阅读 · 0 评论 -
前端如何根据后端返回的文本数据进行换行显示?
假设后端传回一个文本数据:文本内容就是上面圈着的一部分,内容中包含换行符(↵).对于这类型的数据,在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理,那么内容是不会在有换行符的位置进行换行显示的:而正常的显示应该是:下面两种方法可以实现这种效果:方法一:(下面是在Vue中实现的,但所有框架思想一样)//部分代码://<div class="commendContent" v-html="commendContent"></div>原创 2021-01-24 15:34:30 · 22574 阅读 · 6 评论 -
请用HTML + CSS 实现一个定宽定高元素在容器中水平和垂直居中
写这篇博客主要是在牛客做小红书2020校招前端笔试有这么一道题目,然后就在脑袋里回想关于CSS的知识,看看自己有几种实现方法。实现1:绝对定位+转换:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2020-11-03 19:15:59 · 625 阅读 · 0 评论 -
阮一峰老师 flex布局语法篇和实战篇(转载)
确实比一般教程写的清晰明了易懂1.flex布局语法篇网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选.转载 2020-09-30 10:01:17 · 1892 阅读 · 0 评论 -
阮一峰老师 只要一行代码,实现五种CSS经典布局(转载)
只要一行代码,实现五种 CSS 经典布局 作者: 阮一峰日期: 2020年8月10日 页面布局是样式开发的第一步,也是 CSS 最重要的功能之一。 常用的页面布局,其实就那么几个。下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页...转载 2020-09-30 09:40:03 · 3773 阅读 · 2 评论 -
阮一峰老师 CSS Grid 网格布局教程(转载)
特别声明:这篇博客转载于阮一峰老师,转载是为了方便日后复习,实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2>网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的.转载 2020-09-30 08:35:29 · 31442 阅读 · 1 评论 -
原生js、css分别实现提示框渐渐消失的效果
效果展示:方法一:(js)思路:通过js修改dom的visibility、opacity的属性来实现效果。 <div id="remind"> {{ changeState ? "添加至购物车" : "从购物车删除" }} <div class="triangle"></div> </div> addToCart: function() { //发送给父组件,在父组件获取该货物的id,并存在vue原创 2020-09-26 10:26:34 · 1830 阅读 · 0 评论 -
动画实战 奔跑的小白熊(包含图片资源)
奔跑的小白熊效果是来自于百度浏览器的作品,下面奔跑的小白熊是我的实现的效果:实现这个效果并不是使用一个动态的gif图实现的,而是通过一张图片结合动画实现的。想要实现相同效果可以在这里获取相应图片。如果喜欢的话,看下面完整源码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width原创 2020-07-22 15:56:18 · 2844 阅读 · 0 评论 -
纯HTML、CSS实现搭建品优购商城的静态网站 这布局还好吗?超适合前端入门者
这个静态网站非常适合前端入门者,我们很多时候学习的都是理论知识,我们应该多动手,把理论转化为实践,前端知识多,多动手才能加深印象。下面我们先来看看静态网站的布局效果:觉得这个静态网站还OK的话?自己也想动手尝试一下,可以到这里取相应的素材.接着上源码:HTML:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name=".原创 2020-07-19 12:09:40 · 3882 阅读 · 0 评论 -
CSS3 新增的选择器 ::before ::after经典使用场景
文章目录1.属性选择器2.结构伪类选择器2.1 :nth-child(n)(重点)3.伪元素选择器(重点)1.属性选择器属性选择器可以根据元素特定属性来选择元素,这样就可以不借助于类或者id选择器。格式一:标签名[属性名]<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=de原创 2020-07-13 14:59:24 · 809 阅读 · 0 评论 -
单行文字、多行文字溢出省略号显示
文章目录1.单行文本2. 多行文字1.单行文本满足三个条件:强制在一行内显示文本超出的部分隐藏文字用省略号代替超出的部分转换为代码: /*条件一*/ white-space:nowrap; /*条件二*/ overflow:hidden; /*条件三*/ text-overflow:ellipsis;示例:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF原创 2020-07-13 09:57:25 · 282 阅读 · 0 评论 -
仿小米实现的纯CSS等腰直角三角形 + 仿京东实现纯CSS非等腰直角三角形+聊天框的冒泡样式
我们都是到页面的边框通常是矩形或者椭圆形,那三角形是少见的,那我们用CSS怎么做才能实现三角形呢?文章目录1.实现三角形原理2.仿小米商场三角形3. 仿京东非等腰直角三角形4.总结1.实现三角形原理先给你看看这样的效果:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=.原创 2020-07-12 16:29:14 · 563 阅读 · 0 评论 -
总结京东、天猫、王者荣耀PC端网站的CSS源码的初始化
文章目录1.京东2.天猫3.王者荣耀4.总结为什么需要CSS初始化?不同的浏览器对有些标签的默认值是不同的,为了消除浏览器对HTML文本呈现的差异,考虑到浏览器的兼容性,我们需对CSS进行初始化,让一些标签在任何浏览器都是使用CSS初始化的值而不是默认值。即重新设置浏览器的样式。每个网页都必须先进行CSS初始化注意:所有代码解释都标记在代码中1.京东下面这段代码就是京东商城的CSS初始化/* 最常见,所有标签内外边距设为0*/* { margin: 0; padding: 0;原创 2020-07-12 11:48:30 · 802 阅读 · 0 评论 -
羡慕别人网站小图标好看?推荐两个免费的图标网站 教你使用图标装饰自己的网站
一个网站的好坏不只取决于网站的性能与功能,还取决用户使用的舒适度。文章目录1.介绍字体图标2.字体图标的下载3.使用字体图标1.介绍字体图标字体图标使用场景:主要用于显示网页中通用、常用的一些小图标,例如音乐播放器的暂停、收藏、分享等图标。为什么叫“字体图标”呢?因为它展示的是图标,本质上它是属于字体的,拥有字体的属性,可以像字体一样改变字体颜色大小。2.字体图标的下载推荐两个下载网站:icomoon字库 网址:http://icomoon.io (外国服务器,打开网速慢)阿里i.原创 2020-07-11 16:12:02 · 628 阅读 · 0 评论 -
图片底部默认有空白缝隙bug的解决方案
文章目录1.指出bug2.解决bug1.指出bugbug描述:我们通常会在一个容器中包裹着一张图片,但是图片下面默认会有一个空白缝隙。原因:行内块元素会和文字的基线对齐。我们来看看这个bug:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, in原创 2020-07-11 14:55:50 · 623 阅读 · 0 评论 -
前端性能优化 CSS之“精灵图”
文章目录1.为什么需要学习精灵图2. 获取精灵图3.使用精灵图示例1:示例24.使用精灵图的核心总结1.为什么需要学习精灵图我们都知道一个网站离不开数量非常多的图片,假设每一张图片都要向服务器发出请求,那服务器必定会压力过大大大降低页面的加载速度,甚至服务器崩溃。为了有效减少服务器接收和发送请求的次数,提高页面的加载速度,那就需要用到精灵图,也就是精灵技术。精灵技术核心原理: 将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。2. 获取精灵图使用精灵图的核心:精灵原创 2020-07-11 12:41:26 · 743 阅读 · 0 评论 -
前端必备 PS三种切图方法 Cutterman最好用的切图工具
1.常见的图片格式jpg图像格式:JPEG(JPG)对色彩的信息保留较好,高清,颜色较多,适用于产品类图片。gif图像格式:GIF格式最多储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际用于一些图片小动画效果。png图像格式是一种新兴的网络图像格式,结合gif和jpeg的优点,具有储存形式丰富的特点,能够保持透明背景,如果想要切成背景透明图片,请选择png格式。PSD图像格式是photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计稿,对我们前端人员来原创 2020-07-11 00:09:41 · 5590 阅读 · 1 评论 -
CSS 之 display visibility overflow三属性用于隐藏元素的区别
文章目录1. display2. visibility3. overflow4.区别1. display该属性有很多属性值,我们这里只学两个:属性值描述none隐藏对象block显示对象或者转换为块级元素看下面代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" co原创 2020-07-10 10:51:51 · 276 阅读 · 0 评论 -
CSS之“绝对定位”的盒子使用margin:0px auto;不能实现水平居中的解决方案
在盒子实现水平居中的布局中,我们经常直接使用margin:0px auto;来实现居中,在很多时候的确可以一句这样的代码就实现了,但在绝对定位的盒子中,这是不起作用的。1.根据代码测试是否真如上面所说:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.原创 2020-07-09 16:48:09 · 2593 阅读 · 4 评论 -
CSS三大布局之“定位”的使用场景 要懂得学以致用
在了解定位属性的使用场景之前,我们先来学习定位的几个属性值分别是什么意思以及一些注意点,定位的使用场景穿插在这些内容里面。希望大家学到的东西要回熟练的运用起来。文章目录1.为什么需要定位2. 定位的组成2.1 定位模式2.2 边偏移3. 静态定位static3. 相对定位relative(重点)4. 绝对定位absolute(重点)5. 固定定位fixed(重要)6. 粘性定位(新属性值)7.绝对定位与相对定位使用场景1.为什么需要定位大家先考虑下面情况使用标准流以及浮动是否能实现吗?某个元素.原创 2020-07-09 13:34:05 · 2869 阅读 · 0 评论 -
CSS最常见的布局方式之浮动 以及清除浮动 掌握浮动基本能搭建完整的网页,重要性如何?
文章目录1. 传统网页布局的三种方式1.1 标准流2.为什么需要浮动3. 什么是浮动4.浮动的排列特性5. 浮动的经典用法6. 为什么需要清除浮动1. 传统网页布局的三种方式网页布局的本质——用CSS来摆放盒子。把盒子放到相应位置。CSS提供了三种传统布局方式:标准流浮动定位1.1 标准流所谓的标准流就是标签会按照规定好默认方式排列。块级元素会独占一行,从上往下顺序排列。常用元素:<div> <hr> <p> <h1~h6> <原创 2020-07-08 12:10:12 · 942 阅读 · 0 评论 -
前端三大技术栈之CSS3总结上
文章目录1.CSS字体属性1.1 font-family1.2 font-size1.3 font-weight1.CSS字体属性CSS font属性用于定义字体系列、大小、粗细和字体样式(如斜体)。1.1 font-familyCSS使用font-family属性定义文本的字体系列。例:p { font-family: "微软雅黑";}div { font-family: Arial, "微软雅黑","Microsoft Yahei";}各种字体之间必须使用英文状态下的原创 2020-07-07 13:52:57 · 832 阅读 · 0 评论 -
CSS 嵌套块元素垂直外边距的塌陷解决方案
文章目录1. 什么是嵌套块元素垂直外边距的塌陷?2. 解决方案1. 什么是嵌套块元素垂直外边距的塌陷?对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷相对较大的外边距值,而子元素没有实现上外边距效果。1.在只给父元素加上上外边距时能正常:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta na原创 2020-07-07 11:55:42 · 2370 阅读 · 0 评论 -
CSS三大特性之优先级 你在写CSS代码样式时,是否总是不起作用?
文章目录1. 选择器优先级1.1 优先级注意点1.2 权重叠加1.3 示例1. 选择器优先级选择器权重如下图所示:选择器选择器权重继承或*0,0,0,0元素选择器0,0,0,1类选择器,伪类选择器0,0,1,0ID选择器0,1,0,0行内样式 style=" "1,0,0,0!important无穷大1.1 优先级注意点权重是有4组数字组成,但是不会有进位。可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,依次类原创 2020-07-07 10:53:08 · 259 阅读 · 0 评论 -
Canvas实现PC端刮刮卡和生成四位随机验证码
一、先来实现刮刮卡1.所需知识点1.获得操作canvas的对象getContext():获得用于在画布上绘图的对象。2.getImageData(x,y,width,height)定义:getImageData()方法返回ImageData对象,该对象拷贝了画布指定矩形的像素数据,该对象不是一张图片,而是保存了画布中数据的对象。参数: 1.x、y分别表示开始复制的左上角的位置坐标。 2.width、height分别表示要复制的矩形区域的宽度、高度。 对于ImageData对象中原创 2020-05-20 22:28:14 · 527 阅读 · 0 评论 -
520 抖音哄女友图片动画+详细讲解
1. css部分*{ margin:0; padding:0;}.container{ width:800px; height:600px; margin:200px auto;}.box{ width: 400px; height: 400px; margin: 100px auto; position: re...原创 2020-04-07 23:44:39 · 1078 阅读 · 0 评论 -
前端必学的6个HTML+CSS特效
1.图片慢慢靠近当我们在看图片时,可能觉得图片有点小,那我们就给用户一种体验,当用户把鼠标移入时,图片慢慢变大。效果图:知识点:CSS3之“过渡”:transition()----定义如何放大图片和放大过程的时间CSS3之“2D转换”:transform:scale()----放大图片CSS3之“溢出”:overflow:hidden----当图片放大时,溢出要隐藏代码:<div class="imgDiv"> <img src="https://timgs原创 2020-05-16 22:56:10 · 2506 阅读 · 0 评论 -
瀑布流效果,用女神图片用三种方法实现,比在浏览器看过瘾,哈哈哈
第一种方法:采用纯CSS的"多列"属性实现瀑布流用到的一些多列属性:1. column-count:指定元素的列数2. column-gap:指定列之间的差距3. column-width:指定列的宽度效果图:上代码:imageUrl:string[]=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589350346618&di=de03b3da00a0f34c39原创 2020-05-14 12:10:59 · 1040 阅读 · 0 评论