搜索到
35
篇与
的结果
-
CSS 浮动(Float) 清除浮动 说浮动之前，先说一些别的东西标准文档流宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画标准文档流的特性1.空白折叠现象(无论多少个空格、换行、tab，都会折叠为一个空格)2.高矮不齐，底边对齐3.自动换行，一行写不满，换行写行内元素和块级元素行内元素和块级元素的区别：(非常重要)行内元素与其他行内元素并排；不能设置宽、高。默认的宽度，就是文字的宽度块级元素霸占一行，不能与其他任何元素并列能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%块级元素和行内元素的相互转换我们可以通过display属性将块级元素和行内元素进行相互转换display:inline;可以把块级元素转换为行内元素display:block;可以把行内元素转换为块级元素再说一个：display:inline-block;可以把行内元素或块级元素设置为 行内块元素 ，可以并排显示，并且可以设置块级元素的属性标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：脱离 标准文档流！css中一共有三种手段，使一个元素脱离标准文档流：浮动绝对定位固定定位浮动(float)float:left | right | none ;(默认不浮动none)浮动的元素脱标在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排浮动并没有完全地脱离了标准文档流（但是它具有破坏性，所以可以用Flex布局，想了解Flex布局，请参考我的 Flex布局教程），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围效果 上图，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个div标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个div还在自己的层面上遵从标准流进行排列。一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个行内元素，还是块级元素浮动的元素互相贴靠如果给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果，如下图 上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号。如果没有足够的空间靠着1号，3号自己去贴左墙，不过3号贴左墙的时候，并不会往1号里面挤，而是往1号下面排列，如果小到极限时，里面的浮动的子元素宽度是不会改变的同样，float还有一个属性值是right，这个和属性值left是对称的。浮动的元素有“字围”效果如下： 上图中，我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。收缩收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）如图： 上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷同步如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起(自己动手写一下)如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界补充： 上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：补充浮动只对父元素和以后的元素有影响，对之前的元素没有影响浮动的清除(重点)元素浮动会造成的影响：对父元素的影响(父元素的高度坍塌)解决办法：加高法 给父元素设置高度，就不会塌陷(简单，基本不用，大部分情况下父元素的高度是需要子元素撑起来的)overflow:hidden 简单，使用overflow:hidden父元素的高度会随着子元素的高度变化而变化。overflow:hidden本职工作是用来处理溢出 在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了隔墙法(clear:both) 在所有子元素后面加一个空的div 在这个div上面加clear:both，就可以清除浮动（分为内墙法和外墙法，本质上一样），clear:both是专业清除浮动的对后面兄弟元素造成的影响(兄弟元素会向上移动)解决办法：在受影响的元素上面的加 clear:both（参考对父元素的影响）项目中最常用的清除浮动的办法利用伪元素 after其实很简单,就是写一个清除浮动的类,哪个元素想要清除浮动,只需加上 class=“clearfix” 就可以,非常简单清除浮动类的代码:.clearfix:after{ content: ""; display: block; clear: both; height: 0; }由于浮动具有破坏性,所以后面就有一个新的Flex布局方案,用起来别提多爽了,绝对让你爽到爆,还简单容易上手,想了解 Flex布局 ,请参考我的文章：Flex 布局教程 -
创意CSS合辑一：轻松实现多种有趣效果 作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。相信有了以下示例，很多不会css动画效果的朋友，也就会了列表文字图标实现思路：主要看css部分，先固定 span 标签宽高为，圆角 50%，然后设定行高，让字符垂直居中；设定 overflow: hidden，限制字符溢出；然后设定 letter-spacing: 200px,让字符间距变大，不让第二个字符显示到span中；然后设定 text-indent: 12px，来让第一个字符居中。HTML部分<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>04 第一个字符串生成文字图标</title> </head> <body> <div class="app"> <ul> <li><span>第一个字符串生成文字图标</span>第一个字符串生成文字图标</li> <li><span>用CSS可以做什么？</span>用CSS可以做什么？</li> <li><span>前端的致命诱惑</span>前端的致命诱惑</li> </ul> </div> </body> </html>css部分*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #f5f5f5; color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .app ul { max-width: 300px; } .app ul li{ width: 100%; color: #152239; font-size: 16px; line-height: 42px; margin: 15px 0; float: left; } .app ul li span{ width: 42px; height: 42px; line-height: 40px; color: #1E47ED; font-size: 18px; font-weight: 700; text-indent: 12px; border-radius: 50%; display: block; float: left; overflow: hidden; background-color: #eaeaea; letter-spacing: 20px; margin-right: 15px; }呼吸灯效果实现思路：写出三个圆，class 分别为 .red、.green、.bluecss 部分主要使用 animation 来实现边框及其阴影的大小变化，和其透明度的变化这个效果可以用作在网站的整体 Loading，也可以放在网站首屏当一个 banner 的背景也是非常棒的！Html部分<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>好看的呼吸灯效果</title> </head> <body> <div class="app"> <span class="red"></span> <span class="green"></span> <span class="blue"></span> </div> </body> </html>css部分*{ margin:0; padding: 0; } body,html{ background-color: #000; } .app{ width:100%; height: 100vh; display: flex; justify-content: center; align-items: center; } span{ width: 60px; height: 60px; margin: 40px; border-radius: 50%; } .red{ animation: just1 2s ease-in-out infinite alternate; } .green{ animation: just2 3s ease-in-out infinite alternate; } .blue{ animation: just3 4s ease-in-out infinite alternate; } @keyframes just1{ 0%{ border: 5px solid rgba(255,0,0,0); box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset; } 100%{ border: 5px solid rgba(255,0,0,1); box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset; } } @keyframes just2{ 0%{ border: 5px solid rgba(0,255,0,0); box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset; } 100%{ border: 5px solid rgba(0,255,0,1); box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset; } } @keyframes just3{ 0%{ border: 5px solid rgba(0,0,255,0); box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset; } 100%{ border: 5px solid rgba(0,0,255,1); box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset; } }动态毛玻璃实现思路：两个圆形 div（.circle），以及模糊块（.bg-filter）使用animation 属性以及不同的参数来实现动效，产生动画视觉效果用 backdrop-filter 属性中的 blur 参数来模拟毛玻璃效果，数值越大，模糊效果越重，可适当调试参数，直到你喜欢为止此效果可适用于登录窗口，网站背景或者一些卡片列表中，使网页更具科技感和空间感。Html部分<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>动态的毛玻璃背景</title> </head> <body> <div class="app"> <div class="box"> <div class="circle-box"> <div class="circle"></div> <div class="circle"></div> </div> <div class="bg-filter"></div> </div> </div> </body> </html>css部分.app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .box{ width: 400px; height: 300px; position: relative; } .circle-box{ width: 100%; height: 100%; border-radius: 10px; position: absolute; overflow: hidden; } .circle:first-child{ width: 120px; height: 120px; border-radius: 50%; border: 30px solid #7BF52A; box-sizing: border-box; position: absolute; top: -38px; left: -40px; animation: move-y 3.5s linear infinite; } .circle:last-child{ width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(136deg, #7BF52A 0%, #FFCD56 100%); box-sizing: border-box; position: absolute; bottom: -30px; right: -30px; animation: move-y 5s ease-in-out infinite; } .bg-filter{ width: 100%; height: 100%; background: rgba(255,255,255,.05); box-shadow: 0 2px 6px rgba(0,0,0,0.1); backdrop-filter: blur(6px); border-radius: 10px; box-sizing: border-box; position: absolute; } @keyframes move-y { 0% { transform: translateY(0); } 50% { transform: translateY(-16px); } 100% { transform: translateY(0); } }图片因为上传后格式转换了，这篇就分享这几个，后面会再分享
-
word press登陆页美化 PHP部分使用方法很简单，将下面的代码添加到WordPress主题的“functions.php”文件中即可。function io_login_header(){ echo '<div class="login-container"> <div class="login-body"> <div class="login-img shadow-lg position-relative flex-fill"> <div class="img-bg position-absolute"> <div class="login-info"> <h2>'. get_bloginfo('name') .'</h1> <p>'. get_bloginfo('description') .'</p> </div> </div> </div>'; } function io_login_footer(){ echo '</div><!--login-body END--> </div><!--login-container END--> <div class="footer-copyright position-absolute"> <span>Copyright © <a href="'. esc_url(home_url()) .'" class="text-white-50" title="'. get_bloginfo('name') .'" rel="home">'. get_bloginfo('name') .'</a></span> </div>'; } add_action('<a href="https://www.xhybk.com/tag/login" title="更多关于 login 的文章" target="_blank">login</a>_header', 'io_login_header'); add_action('login_footer', 'io_login_footer'); //登录页面的LOGO链接为首页链接 add_filter('login_headerurl',function() {return esc_url(home_url());});css部分同上function custom_login_style(){ $login_color = io_get_option('login_color',array('color-l'=>'','color-r'=>'')); echo '<style type="text/css"> body{background:'.$login_color['color-l'].';background:-o-linear-gradient(45deg,'.$login_color['color-l'].','.$login_color['color-r'].');background:linear-gradient(45deg,'.$login_color['color-l'].','.$login_color['color-r'].');height:100vh} .login h1 a{background-image:url('.io_get_option('logo',get_template_directory_uri() .'/images/logo.png').');width:180px;background-position:center center;background-size:'.io_get_option('login_logo_size',160).'px} .login-container{position:relative;display:flex;align-items:center;justify-content:center;height:100vh} .login-body{position:relative;display:flex;margin:0 1.5rem} .login-img{display:none} .img-bg{color:#fff;padding:2rem;bottom:-2rem;left:0;top:-2rem;right:0;border-radius:10px;background-image:url('.io_get_option('login_ico',get_template_directory_uri() .'/images/login.jpg').');background-repeat:no-repeat;background-position:center center;background-size:cover} .img-bg h2{font-size:2rem;margin-bottom:1.25rem} #login{position:relative;background:#fff;border-radius:10px;padding:28px;width:280px;box-shadow:0 1rem 3rem rgba(0,0,0,.175)} .flex-fill{flex:1 1 auto} .position-relative{position:relative} .position-absolute{position:absolute} .shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important} .footer-copyright{bottom:0;color:rgba(255,255,255,.6);text-align:center;margin:20px;left:0;right:0} .footer-copyright a{color:rgba(255,255,255,.6);text-decoration:none} #login form{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-width:0;padding:0} #login form .forgetmenot{float:none} .login #login_error,.login .message,.login .success{border-left-color:#40b9f1;box-shadow:none;background:#d4eeff;border-radius:6px;color:#2e73b7} .login #login_error{border-left-color:#f1404b;background:#ffd4d6;color:#b72e37} #login form p.submit{padding:20px 0 0} #login form p.submit .button-primary{float:none;background-color:#f1404b;font-weight:bold;color:#fff;width:100%;height:40px;border-width:0;text-shadow:none!important;border-color:none;transition:.5s} #login form input{box-shadow:none!important;outline:none!important} #login form p.submit .button-primary:hover{background-color:#444} .login #backtoblog,.login #nav{padding:0} @media screen and (min-width:768px){.login-body{width:1200px} .login-img{display:block} #login{margin-left:-60px;padding:40px} } </style>'; } add_action('login_head', 'custom_login_style');效果图
-
文章颜色包裹文字代码实现 迷幻紫西瓜红天空之境小太阳小宇宙橄榄绿优雅紫深邃黑无边框以上的效果是怎么实现的呢，其实很简单的，下面我将代码分享给大家。首先是用一个div包裹，用ID选择器，代码如下：（这些个代码是放在文章中使用的，当然你在其他的页面中也是可以的，我只针对Joe主题，因为其他的主题没有测试，如果不显示的话请在代码的前后用三个英文状态下的感叹号 ！进行代码的包裹：就像这样！！！<——div id="lk_mhz">迷幻紫</div——>！！！为防止代码被解析我加了横线 ）<div id="lk_mhz">迷幻紫//替换文字，引用时删除注释</div> <div id="lk_xgh">西瓜红</div> <div id="lk_tkzj">天空之境</div> <div id="lk_xty">小太阳</div> <div id="lk_xyz">小宇宙</div> <div id="lk_gll">橄榄绿</div> <div id="lk_yyz">优雅紫</div> <div id="lk_szh">深邃黑</div> <div id="lk_wbk">无边框</div>...在你的网站根目录中创建一个css文件，放入下面的css代码： @charset "utf-8"; #lk_mhz,#lk_xgh,#lk_tkzj,#lk_xyz,#lk_gll ,#lk_xty,#lk_yyz,#lk_szh,#lk_wbk{ border-radius: 8px; } /*迷幻紫*/ #lk_mhz{ color: #555555; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252); background-color: #8EC5FC; background-image: linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%); background-image: -webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%); } /*西瓜红*/ #lk_xgh{ color: #555555; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174); background-color: #ff9a8b66; background-image: linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%); background-image: -webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%); } /*天空之境*/ #lk_tkzj { color: #555555; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243); background-color: #FFDEE9; background-image: linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-image: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); } /*小宇宙*/ #lk_xyz { color: #eeeeee; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0); background-image: radial-gradient( circle 263px at 100.2% 3%, rgba(12,85,141,1) 31.1%, rgba(205,181,93,1) 36.4%, rgba(244,102,90,1) 50.9%, rgba(199,206,187,1) 60.7%, rgba(249,140,69,1) 72.5%, rgba(12,73,116,1) 72.6% ); } /*橄榄绿*/ #lk_gll { color: #eeeeee; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163); background-image: linear-gradient( 102deg, rgba(68,110,92,1) 17.4%, rgba(107,156,120,1) 49.3%, rgba(154,183,130,1) 83.4%, rgba(247,237,191,1) 110.3% ); } /*小太阳*/ #lk_xty { color: #ffffff; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; /*border-radius: 10px; */ box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243); background-image: radial-gradient( circle farthest-corner at -8.9% 51.2%, rgba(255,124,0,1) 0%, rgba(255,124,0,1) 15.9%, rgba(255,163,77,1) 15.9%, rgba(255,163,77,1) 24.4%, rgba(19,30,37,1) 24.5%, rgba(19,30,37,1) 66% ); } /*优雅紫*/ #lk_yyz { color: #ffffff; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0); background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(95,117,227,1) 0%, rgba(188,167,205,1) 90% ); } /*深邃黑*/ #lk_szh { color: #c7c7c7; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; /*border-radius: 5px;*/ box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0); background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 90.2% ); } /*无边框*/ #lk_wbk { color: #000000; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 15px; } #lk_xyz a , #lk_gll a{ color: #eeeeee; } #lk_szh a{ color: #c7c7c7; } #lk_xty a, #lk_yyz a{ color: #ffffff; } ...效果就是文章第一段展示的。应用前在head里引用<link rel="stylesheet" href="你的css路径">...路径填写为/×××.css发布文章时，直接复制div（就是第一段代码）就可以了。
-
二次元风格的登录界面，也只是用html和css来写的，大家可以来看看！ 给大家带来比较具有二次元风格的登录界面，也只是用html和css来写的，大家可以来看看！HTML部分既然是制作登录界面我们可以使用表单元素，会比盒子更加简单一些，个人相信大家应该可以明白里头的啥意思吧！！！这边就介绍一下CSS部分吧<div class="shell"> <div id="img-box"> <img src="./a34a7810c48ee409750f92812023beb0-1.jpg" alt=""> </div> <form action="" method="post"> <div id="form-body"> <div id="welcome-lines"> <div id="w-line-1">HI,老K</div> <div id="w-line-2">Welcome Back</div> </div> <div id="input-area"> <div class="f-inp"> <input type="text" placeholder="Email Address"> </div> <div class="f-inp"> <input type="password" placeholder="Password"> </div> </div> <div id="submit-button-cvr"> <button type="submit" id="submit-button">LOGIN</button> </div> <div id="forgot-pass"> <a href="#">Forgot password?</a> </div> </div> </form> </div>...CSS部分还是给我们先清除内外边距然后这个ountline：none；的意思是鼠标点击文本框的时候，文本的边框焦点会被去除掉还是设置一个背景颜色，这里我们使用的是渐变色：然后在需要让盒子来正中间，需要使用弹性布局感觉下面都挺简单的，我就着重讲一下这个伪元素吧placeholderplaceholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的placeholder属性。* { padding: 0; margin: 0; outline: none; } body { background: linear-gradient(45deg, #fbda61, #ff5acd); display: flex; justify-content: center; align-items: center; height: 100vh; } .shell, form { position: relative; } .shell { display: flex; justify-content: center; } form { width: 562px; height: 520px; background-color: #fff; box-shadow: 0px 15px 40px #b6354e; border-radius: 15px; display: flex; justify-content: center; align-items: center; } #img-box { width: 330px; height: 520px; } #img-box img { height: 100%; margin-left: -175px; border-radius: 20px; } #form-body { width: 320px; display: flex; justify-content: center; align-items: center; flex-direction: column; } #welcome-lines { width: 100%; text-align: center; line-height: 1; } #w-line-1 { color: #7f7f7f; font-size: 50px; } #w-line-2 { color: #9c9c9c; font-size: 30px; margin-top: 17px; } #input-area { width: 100%; margin-top: 40px; } .f-inp { padding: 13px 25px; border: 2px solid #6e6d6d; line-height: 1; border-radius: 20px; margin-bottom: 15px; } .f-inp input { width: 100%; font-size: 14px; padding: 0; margin: 0; border: 0; } .f-inp input::placeholder { color: #b9b9b9; } #submit-button-cvr { margin-top: 20px; } #submit-button { display: block; width: 100%; color: #fff; font-size: 14px; margin: 0; padding: 14px 40px; border: 0; background-color: #f5506e; border-radius: 25px; line-height: 1; cursor: pointer; } #forgot-pass { text-align: center; margin-top: 10px; } #forgot-pass a { color: #868686; font-size: 12px; text-decoration: none; }...接下来展示源码，素材图片就是封面哦<!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>老K&&前端小窝</title> <style> * { padding: 0; margin: 0; outline: none; } body { background: linear-gradient(45deg, #fbda61, #ff5acd); display: flex; justify-content: center; align-items: center; height: 100vh; } .shell, form { position: relative; } .shell { display: flex; justify-content: center; } form { width: 562px; height: 520px; background-color: #fff; box-shadow: 0px 15px 40px #b6354e; border-radius: 15px; display: flex; justify-content: center; align-items: center; } #img-box { width: 330px; height: 520px; } #img-box img { height: 100%; margin-left: -175px; border-radius: 20px; } #form-body { width: 320px; display: flex; justify-content: center; align-items: center; flex-direction: column; } #welcome-lines { width: 100%; text-align: center; line-height: 1; } #w-line-1 { color: #7f7f7f; font-size: 50px; } #w-line-2 { color: #9c9c9c; font-size: 30px; margin-top: 17px; } #input-area { width: 100%; margin-top: 40px; } .f-inp { padding: 13px 25px; border: 2px solid #6e6d6d; line-height: 1; border-radius: 20px; margin-bottom: 15px; } .f-inp input { width: 100%; font-size: 14px; padding: 0; margin: 0; border: 0; } .f-inp input::placeholder { color: #b9b9b9; } #submit-button-cvr { margin-top: 20px; } #submit-button { display: block; width: 100%; color: #fff; font-size: 14px; margin: 0; padding: 14px 40px; border: 0; background-color: #f5506e; border-radius: 25px; line-height: 1; cursor: pointer; } #forgot-pass { text-align: center; margin-top: 10px; } #forgot-pass a { color: #868686; font-size: 12px; text-decoration: none; } </style> </head> <body> <div class="shell"> <div id="img-box"> <img src="./a34a7810c48ee409750f92812023beb0-1.jpg" alt=""> </div> <form action="" method="post"> <div id="form-body"> <div id="welcome-lines"> <div id="w-line-1">HI,老K</div> <div id="w-line-2">Welcome Back</div> </div> <div id="input-area"> <div class="f-inp"> <input type="text" placeholder="Email Address"> </div> <div class="f-inp"> <input type="password" placeholder="Password"> </div> </div> <div id="submit-button-cvr"> <button type="submit" id="submit-button">LOGIN</button> </div> <div id="forgot-pass"> <a href="#">Forgot password?</a> </div> </div> </form> </div> </body> </html>...最后的效果是这样子的：大家可以尝试敲一敲，这样一步步就会了解到这种类型的布局，然后自己在尝试几次就可以自己来写自己的专属登录界面然后后期通过js完善一下会更加完美哦！！
CC BY-NC-ND