web开发笔记——login页面（上）

最新推荐文章于 2022-10-02 12:18:32 发布
最新推荐文章于 2022-10-02 12:18:32 发布
阅读量1.5k 收藏
点赞数
分类专栏： web开发笔记 初学者 文章标签： login页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41816749/article/details/81483025
版权

一、简单的商城登录页面制作流程

1.先建立一个项目文件夹，将自己的所需要的素材拖入项目文件夹的images文1件，在建立一个文本index.html，格式改成.html格式。

2.查看效果图，看看你所做的登录页面将要呈现什么效果，并且将它分成块。

这是一个简单的登录页面，可以将其分为两层，第一层是背景图；第二层是登录框（嵌套在背景图中），登录框还能够分为两部分，上面的主体，下面的登录链接。

3.我用的代码编辑器是sublime text3，可以在软件中直接打开项目文件，找到index.html打开，html文件的基础内容就不说了

4.用<div></div>分层，如同2所说的一样——大-中-两小。

5.这个简单的页面中，我并没有单独建立css文件，而是在<style type="text/css"></style>中去定义样式：背景.wrap{}；；登录框.login{margin:; width:; height:; background:;}；；主体.form-wrap{width:100%; height:; border-bottom:     dotted    ;/*分割线*/      padding-top:;/*顶部填充高度*/}     登录链接.login-link｛｝       文本.text{width:; height:; margin-bottom:; border-radius:;/*边框圆角*/   border:     solid #xxx;/*边框线*/        background-repeat：no-repeat； background-position:;    text-indent:;/*文本缩进*/         .user{}    .pwd{}          .sub{}          

以上属于定义样式表

 6.    可以参照第四条，可以直接输入。要input，就要使用<form>;

附：

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8"/>
         <title>登录页面</title>

         <style type="text/css">
         
         body{
              margin:0;
         }
        .wrap{
             width:100%;
             min-width:1200px;
             height:520px;
             background:url("images/dlbg.jpg") center;
             overflow:hidden;
         }
        .login{
              /*position:absolute;
              right:130px;
              top:100px;*/
              /*float:right;
              margin:100px 130px 0 0;*/
              margin:100px 130px 0 auto;
              width:340px;
              height:320px;
              background:#FFF;
        }
        .form-wrap{
              width:100%;
              height:220px;
              border-bottom:1px dotted #000;
              text-align:center;
              padding-top: 40px
              
         }
        .login-link{
              width:100%;
              height:100px;
              text-align:center;
        }
        .text{
              width:249px;
              height:40px;
              margin-bottom:20px ;
              border-radius:5px;
              border:1px solid #333;
              background-repeat: no-repeat;
              background-position: -1px;
              text-indent:50px ;
             
         }
        .user{
              background-image:url("images/zhanghao.jpg");
              background-repeat-x: no-repeat;
              background-position-y: -1px;
              }
        .pwd{
              background-image:url("images/mima.jpg");
              background-repeat-x: no-repeat;
              background-position-x: 0px;
              }
        .sub{
              width:255px;
              height:44px;
              background:url("images/but.jpg");
              border-width:0;
         }
              
         </style>
    </head>
    <body>
         <div class="wrap">
              <div class="login">
                   <div  class="form-wrap">
                        <form action="">
                             <input type="text" class="user text" placeholder="用户名"/>
                             <input type="password"  class="pwd text" placeholder="密码"/>
                             <input type="submit" class="sub" value=""/>
                        </form>
                   </div>
                    <div class="login-link">
                            <p>
                                合作网站账号登录：
                                <img src="images/qqlogin.png" alt=""/>
                                <img src="images/taobao.png" alt=""/>
                                <img src="images/weixin.png" alt=""/>
                        
                        </div>
                   </div> 
              </div>
        </div>
    </body>
</html>

结束

 

mw__wm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web开发 学习笔记
m0_59952100的博客
04-03 856
目录◆基础定义●Web前端開發主要技術●IDE简介●HTTP协议●什么是网站？●​什么是网页？●WEB标准●什么是HTML？◆网页元素(标签)详解●文档类型标签、根标签、简单元标签 ●页面显示标签/非元标签 ▼p标签、h标签 ▼div标签●常见转义字符（字符实体）：▼!--注释标签▼列表html——list●web开发规范●多媒体标签▼img图片标签 ▼超级链接（超链接） ▼audio音频标签、video视频标签 ▼大纲标签▼form表单标签▼input文本框(输入框)&input单选框、复选框&input
javaweb--简单的login用户登录
刘向阳的博客
09-07 1419
简单jsp前后台交互实现登录 无数据库校验！ login.jsp <%-- Created by IntelliJ IDEA. User: Administrator Date: 2021/9/7 0007 Time: 16:49 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" languag
login登录web配置
w1824575989的博客
10-15 2331
首先明确该文要实现的功能是：当你网站中存在用户名和密码登陆情况：如果你未登录直接复制页面地址回车进入页面时，这时就起作用了。你这时session、cookia等等存储该用户名是空的则自动进入登陆界面。 再也不用你一个一个页面添加 if(session["username"]==null) { Response.Redirect="login.aspx"; } 大家说是不是方便多了。下来我们就一起学习一下这个小技巧： 在webconfig中有一个重要节点 <system.web>.
web前端的登陆页面制作
weixin_45420201的博客
08-18 1万+
web前端的登陆页面制作 登陆页面中有要登陆系统（网站）的名称，输入账号密码的输入框，以及登陆按钮这几个重要部分，其余的可以随便添加，但是页面布局要合理 标陆页面题在页面输入框之前的图像是特殊的字体，因此要在制作页面的目录中导入font-awesome-4.7.0，通过调用实现该字体的样式。 根据上面的页面可以将其分为几块： 1.整个大的是一个div将其余各个部分包裹其中; 2.登...
HTML+CSS登录页面
qq_54000767的博客
10-02 456
HTML+CSS制作简单登录页面
CSS一个元素同时使用多个类选择器（class selector）
极客神殿
09-13 2663
一个元素同时使用多个类选择器 CSS中类选择器用点号表示。实际项目中一个div元素为了能被多个样式表匹配到（样式复用），通常div的class中由好几段组成，如<div class="user login">能被.user和.login两个选择器选中。如果这两个选择器中有相同的属性值，则该属性值先被改为.user中的值，再被改为.login中的值，即重复的属性以最后一个选择器中的属性值...
JSP——登录页面login.jsp
05-18
Javaweb账号登陆 实现登录页面login.jsp，在其中输入用户名，密码，发送到登录验证页面loginCL.jsp，验证登录成功.
开发调用海康威视摄像头的web端页面
05-22
点击webComponents.exe安装 注意版本号和 32位 64位（这里跟正一下 木有64位尴尬尴尬） 如果没有合适的 请去官网下载 ...这3个文件导入你的项目，还需要jquery 没有的小伙伴可以导开发包里面的1.7
login-and-other-functions.rar_login_web登陆页面_登陆_登陆页面
09-19
web登陆页面的用户注册、插入、修改、查找、删除等功能的JSP实现
开发工具 login 开发工具 login
05-31
开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发工具 login开发...
登录login页面html模板
12-04
登录login页面html模板
HTML和CSS实现京东登录页面（html,css代码详解）
热门推荐
dwjdj的博客
12-26 2万+
HTML代码 基本布局 想练手，或者需要素材的留言我发给你即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东-欢迎登陆</title> <meta name="keywords" content=...
HTML编写的登录界面
刘康康的博客
09-28 5690
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;   &lt;meta charset="utf-8"&gt;   &lt;title&gt;登录&lt;/title&gt;   &lt;meta name="description" content="particles
Vue2学习笔记3 - 制作Login页面
Coder.Monkey的工作簿
11-07 1030
在学会了用vue-cli安装环境，以及了解了vue-cli4的目录结构后，开始学习如何写代码，从登录页面开始，不过学习总要有参考对象和学习目标，作者打算学习制作一个基本的管理平台框架，先去码云（https://gitee.com/）平台搜索一些vue的代码作为参考学习对象。这里，主要参考good_luck/vue-admin-beautiful（https://gitee.com/chu1204505056/vue-admin-beautiful），以及花裤衩/vue-admin-templa...
Web前段开发——登录实例（一）
qq_43152859的博客
12-02 740
所需工具：MySql、Naticat、VS、动软代码生成器（没有安装的话自行百度下载） 前期准备：配置好MySql数据库、利用动软生成代码文件 详细步骤： 1.打开VS，新建项目，项目名称可以自行命名，项目位置为存储路径，设置后一定要记清，后面会用到！ 2.在“Web.config”输入如下代码，位置如图所示，代码如下： &amp;amp;lt;connectionStrings&amp;amp;gt; &amp;amp;lt;add...
Web开发中一个完整的用户登陆（固化）
海涛高软
08-24 761
客户端界面有两个：上图点击提交按钮后，客户端接收到的画面：关键代码： FR:海涛高软 （QQ技术交流群： 386476712）
[一天一点java web]登录的实现原理
weixin_34392435的博客
04-25 212
[一天一点java web] 这是本人学习java web 的记录心得，是刚刚学习的时候做的笔记，原封不动的搬到博客上来，以做纪念留念，有很多地方 有错误的地方，我也没有修改，大家一笑而过。。。本文理的内容，只能参考！ 1. 首先 写个表单 有 名称 有密码 有提交按钮 2. 然后 写一个servlet 来接收表单 提交的值 3. 再页面上打印出 表单提交的...
web开发笔记——login页面（下）
qq_41816749的博客
08-09 302
仿京东登录页面 1.如上一篇文章所讲的内容，做好准备工作。然后要建立一个存放.css的we文件，如我就在项目文件下建立了style/style.css。 2.不多说了，先看下效果图：  可以将它分为上中下三个层次，中又是background内嵌入账户登录框。 3.这是对样式表的定义，通过.xxx来表示class xxx这一块区域中的样式，如width   height     back...
Android开发实战——登录注册页面（附源码）
最新发布
06-08
很高兴为您解答关于Android开发的问题。以下是登录注册页面的示例代码： 1. activity_login.xml ``` android:layout_width="match_parent" android:layout_height="match_parent" android:orientation=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值