meta | 易学教程

前端学习（316）：居中方法四flex

阅读更多关于前端学习（316）：居中方法四flex

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){display: flex;} div:nth-child(1) div{margin: auto; } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https://blog.csdn.net/weixin_43392489/article/details/103837865

前端学习（317）：居中方法五flex

阅读更多关于前端学习（317）：居中方法五flex

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){display: flex;justify-content: center;align-items: center;} div:nth-child(1) div{ } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https://blog.csdn.net/weixin_43392489/article/details

前端学习（318）：居中方法六

阅读更多关于前端学习（318）：居中方法六

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){vertical-align: middle;display: table-cell;text-align: center;} div:nth-child(1) div{display: inline-block; } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https://blog.csdn.net/weixin

前端学习（319）：居中方法七

阅读更多关于前端学习（319）：居中方法七

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){text-align: center;line-height: 400px;} div:nth-child(1) div{display: inline-block;vertical-align: middle;line-height: 200px; } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https:/

圣杯布局和双飞翼布局

阅读更多关于圣杯布局和双飞翼布局

圣杯布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { overflow: hidden; padding: 0 100px; } .middle { float: left; height: 100px; width: 100%; background-color: green; } .left { /* 以便申明 left 属性 */ position: relative; /* 移出当前界面，注意和 parent 中的 padding-left 配合正好 */ left: -100px; float: left; height: 100px; width: 100px; background-color: red; /* 上移一行 */ margin-left: -100%; } .right { position: relative; right: -100px;

前端学习（321）：屏幕窗口居中

阅读更多关于前端学习（321）：屏幕窗口居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>屏幕窗口居中</title> <style> html,body{height: 100%;} *{margin: 0;padding: 0;} .box{width: 200px;height: 100px;background: skyblue;} body{display: flex;justify-content: center;align-items: center;} </style> </head> <body> <div class="box"></div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https://blog.csdn.net/weixin_43392489/article/details/103838108

前端学习（322）：屏幕窗口居中二

阅读更多关于前端学习（322）：屏幕窗口居中二

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>屏幕窗口居中</title> <style> *{margin: 0;padding: 0;} .box{width: 200px;height: 100px;background: skyblue;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);} </style> </head> <body> <div class="box"></div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https://blog.csdn.net/weixin_43392489/article/details/103838139

移动端常见问题汇总

阅读更多关于移动端常见问题汇总

原文转自：点我转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。代码如下： background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain

小总结

阅读更多关于小总结

关于safari 浏览器 input圆角的解决方案去除iOS safari 浏览器的input的圆角问题 -webkit-appearance: none; border 阴影 .shadow--2dp{ box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); } .shadow--2dp { box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) } .shadow--3dp { box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12) } .shadow--4dp { box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2) } .shadow--6dp { box-shadow: 0 6px 10px 0 rgba(0,0

BootStrap学习(3)_导航菜单

阅读更多关于 BootStrap学习(3)_导航菜单

一、导航元素 1.表格导航或标签以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs 。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body style="margin-top:20px;margin-left:20px;"> <p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li class="active"><a

订阅 meta