整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

web前端学习教程,html蓝色大气全屏登录页面开发

色大气全屏背景通用登录页面html模板是一款适用于PC端和手机端的登录界面模板、APP登录界面模板。现在就业非常重要的一个项目你准备好了吗?下午小编教你从无到有的敲代码敲出自己博客最重要的项目 高薪就业轻松2倍。

项目源代码:

<!DOCTYPE html>
<html lang="en">
<head>
<title>蓝色登录界面HTML代码</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
 
<!--布局框架-->
<link rel="stylesheet" type="text/css" href="css/util.css">
 
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
 
<body>
 
 <div class="limiter">
 <div class="container-login100" style="background-image: url('images/img-01.jpg');">
 <div class="wrap-login100 p-t-190 p-b-30">
 <form class="login100-form validate-form">
 <div class="login100-form-avatar">
 <img src="images/avatar-01.jpg" alt="AVATAR">
 </div>
 
 <span class="login100-form-title p-t-20 p-b-45">Hello</span>
 
 <div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名">
 <input class="input100" type="text" name="username" placeholder="用户名" autocomplete="off">
 <span class="focus-input100"></span>
 <span class="symbol-input100">
 <i class="fa fa-user"></i>
 </span>
 </div>
 
 <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
 <input class="input100" type="password" name="pass" placeholder="密码">
 <span class="focus-input100"></span>
 <span class="symbol-input100">
 <i class="fa fa-lock"></i>
 </span>
 </div>
 
 <div class="container-login100-form-btn p-t-10">
 <button class="login100-form-btn">登 录</button>
 </div>
 
 <div class="text-center w-full p-t-25 p-b-230">
 <a href="#" class="txt1">忘记密码?</a>
 </div>
 
 <div class="text-center w-full">
 <a class="txt1" href="#">
 立即注册
 <i class="fa fa-long-arrow-right"></i>
 </a>
 </div>
 </form>
 </div>
 </div>
 </div>
 
 <script src="vendor/jquery/jquery-1.12.4.min.js"></script>
 <script src="js/main.js"></script>
 
</body>
</html>

代码运行效果截图

大家需要这个项目css代码,js,图片做练习的可以找我免费领取,如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字 找我领取 24小时在线!

们在进行开发的时候,需要进行前端的设计,但是如果都是自己写的话,需要写大量的CSS。

如果套用的模板的话,势必会省很大的时间和精力。

经过一段时间的整理,孟哥整理了11套高质量的后台模板,非常奈斯。

需要的,可以自取。













关注+转发+评论。

点击了解更多(z9tl)

前话

Hello,小伙伴们大家新年好,本篇是今年第一篇,也筹划许久,本篇主题为美食,系html5网站模板,div加css布局,网页资源分开存储以便管理,网页结构清晰简单,希望本篇能够助力各位萌新

主题

《周末の食记》

美食能抚平一切的忧伤

简介

文件结构包含了css、fonts、images、js和html,运用html5技术,包括nav标签、header标签和footer标签等,采用bootstrap进行布局

图摘

目录

编码

<div class="ftco-46-row d-flex flex-column flex-lg-row">
    <div class="ftco-46-text ftco-46-arrow-right">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">扬州炒饭</h3>
        <p class="mb-5">一碗不一样的炒饭,让你难以拒绝.</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
        </div>
        <div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
        <div class="ftco-46-text ftco-46-arrow-up">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">蓝莓酸奶冰激凌</h3>
        <p class="mb-5">触动您的心灵,令人甜蜜至极,难以忘怀,心旷神怡的味觉享受,精选一级的夏威夷果仁,入口丝滑</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
    </div>
</div>

结语

如果人的一生总的能量是固定的话,那就节省开支,延长时间,喜怒哀乐不溢于言表,不困于心智,保持乐观心态