HTML/CSS
是欢欢啊
如果词不达意,那就把爱意藏在心底
展开
-
CSS中的nth-child()属性
first-child、last-child、nth-child、nth-last-child、nth-of-typefirst-child,last-child可直接使用,例如 ul li:first-child,ul li:last-child,但是其余的选择都需要在后面加入(),例如ul li:nth-child(n); ->选中ul元素下面第n个li元素,且n是从1开始的,这里和JavaScript中的eq()不同,eq选择也是从第1个开始的,但是索引值是从0开始1、fi...原创 2021-10-27 15:11:33 · 37010 阅读 · 2 评论 -
移动端高度兼容iPhoneX
varheight=window.screen.height;console.log(height);varfooter=document.querySelector("footer");if(height>670){footer.style.marginTop=`5.2rem`;//此处改为自己需要的间距(此处使用的是模板字符串)}移动端rem可以参考我的另一篇文章:rem使用的方法...原创 2021-08-04 11:06:01 · 152 阅读 · 0 评论 -
一套web代码自适应pc端以及手机端的几种解决方法
最近遇到一个很棘手的项目,自作聪明想使用自己的一套方法自适应手机端和PC端,造成了不小错误,特地从网上学习了一下,现在把学习到的跟大家分享一下手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是原创 2020-07-11 12:02:14 · 6629 阅读 · 2 评论 -
响应式布局
HTML部分:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式页面入门教程:Albert Yang</title> <link rel="sty原创 2021-07-05 18:00:19 · 124 阅读 · 0 评论 -
VScode设置编辑器背景图片
最近在知乎上看见有人设置了vscode编辑器的背景图片,觉得很新鲜,就尝试以一下,倒是成功了。1.首先在vscode扩展中,找到background这个插件,快捷键Ctrl+shift+x2.完成第一步就已经有默认背景了,可是想设置自己喜欢的怎么办?往下看打开 文件>首选项>设置在右侧设置里"background.enabled": true,"background.useDefault": false,"background.custom.转载 2021-06-29 14:58:30 · 824 阅读 · 0 评论 -
一行代码解决移动端适配问题
相信很多朋友都有过被移动端适配支配的恐惧吧,这里给大家介绍一下只用一行代码就解决移动端适配的问题。话不多说上代码//只用在css文件中加上:root { font-size:13.33333vw;//加上这一行代码后1rem = 100px;}为什么一行代码就能够实现移动端的适配呢?首先要先说明:移动端的设计稿一般是width:750px,height:auto(这里指的是不确定),100vw = 100%,这个也没有问题吧;那么,设计稿拿过来,我们可以得出:750px = 100vw,这个原创 2021-04-20 14:46:58 · 340 阅读 · 0 评论 -
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
一、静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端。2、设计方法: PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮转载 2021-04-20 14:31:48 · 269 阅读 · 0 评论 -
正方体3D旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>正方体原创 2021-04-10 11:14:54 · 196 阅读 · 0 评论 -
CSS伪元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS原创 2021-04-10 10:03:20 · 63 阅读 · 0 评论 -
新增的表单元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新增.原创 2021-04-08 17:27:24 · 69 阅读 · 0 评论