石狮网站建设费用,网站发的文章怎么做的,wordpress 删除 评论,庆云网站seo目录 前言
一、网页制作概述
二、登录页面
2.1 HTML内容
2.2 CSS样式
三、技术说明书
四、页面效果图 前言
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架#xff0c;由Twitter的设计师Mark Otto和Jacob Thornton合作开发。
它基于HTML、CSS和JavaScri…
目录 前言
一、网页制作概述
二、登录页面
2.1 HTML内容
2.2 CSS样式
三、技术说明书
四、页面效果图 前言
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架由Twitter的设计师Mark Otto和Jacob Thornton合作开发。
它基于HTML、CSS和JavaScript旨在通过提供一系列预定义的CSS类、JavaScript插件和HTML模板简化Web开发过程使开发者能够快速创建美观且功能丰富的网页。
如果你只是需要使用 Bootstrap 的预编译 CSS 或 JS 文件你可以直接使用 BootCDN 提供的免费 CDN 加速服务。 CSS文件
!-- CSS --
link hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css relstylesheet integritysha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HIN crossoriginanonymous JS文件
!-- jQuery and JavaScript Bundle with Popper --
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js integritysha384-DfXdz2htPH0lsSSs5nCTpuj/zy4COGpamoFVy38MVBnEIbbVYUewOrCXaRkfj crossoriginanonymous/script
script srchttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js integritysha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiAE0F3zPrJQQtQ82gQ1HPY3QIVtztVua crossoriginanonymous/script 一、网页制作概述
HTML代码构成了网页的基础结构。编写HTML时应关注语义化标签、链接和图像、表格和列表的使用以创建清晰、易于导航的网页。
HTML完成后使用CSS添加风格和色彩。CSS影响网页的外观和格式包括颜色、字体和布局。选择合适的颜色、字体和布局可以提升网页的吸引力。
最后一步是添加交互效果和动态功能如动画、表单验证和交互反馈以增强用户体验。
创建一个登录页面通常涉及HTML和CSS的基本知识。下面是一个简单的登录页面的示例包括了基本的HTML结构以及一些CSS样式来美化页面。 二、登录页面 2.1 HTML内容
首先我们创建一个基本的HTML结构。在你的HTML文件中你可以这样写 !doctype html
html langenhead!--设置编码--meta charsetutf-8!--添加页面视口--meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitnotitleSignin Template · Bootstrap v4.6/title!-- Bootstrap core CSS --
link href./assets/dist/css/bootstrap.min.css relstylesheet!-- Custom styles for this template --link href./css/styles.css relstylesheet/headbody classtext-centerform classform-signin action/login methodpostimg classmb-4 src./assets/brand/bootstrap-solid.svg alt width72 height72h1 classh3 mb-3 font-weight-normal欢迎登录/h1label forinputEmail classsr-only邮箱地址/labelinput typeemail idinputEmail classform-control placeholder请输入邮箱地址 required autofocuslabel forinputPassword classsr-only密码/labelinput typepassword idinputPassword classform-control placeholder请输入密码 requireddiv classcheckbox mb-3labelinput typecheckbox idremember valueremember-me 记住我/label/divbutton classbtn btn-lg btn-primary btn-block typesubmit登 录/buttonnav classnavbar fixed-bottom navbar-light bg-light justify-content-centerp classmt-5 mb-3 text-mutedCopyright copy; 2019-2024/p/nav/form/body
/html2.2 CSS样式
接下来我们添加一些CSS来美化这个登录页面。在一个css目录下创建一个名为styles.css的文件并添加以下内容
html,body {height: 100%;
}body {display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;padding-top: 40px;padding-bottom: 40px;background-color: #f5f5f5;
}.form-signin .checkbox {font-weight: 400;
}.form-signin .form-control {position: relative;box-sizing: border-box;height: auto;padding: 10px;font-size: 16px;
}.form-signin {width: 100%;max-width: 330px;padding: 15px;margin: auto;
}.form-signin .form-control:focus {z-index: 2;
}
.form-signin input[typeemail] {margin-bottom: -1px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;
}
.form-signin input[typepassword] {margin-bottom: 10px;border-top-left-radius: 0;border-top-right-radius: 0;
}三、技术说明书
登录页面主要应用了web前端2个模块的技术HTML CSS
HTML模块 主要针对页面的结构搭建使用了Bootstrap样式比如添加按钮样式还有输入框和选择框的样式该页面整体采用的是form表单样式作为主要元素加上clsss属性其中包含: 表单标签form 段落标签 p 字体标签 h1 Bootstrap的图标等。
另外还有输入框的自带表单验证功能 CSS模块 主要采用的是浮动式布局的方式页面搭建主要通过设置form登录表单的clss属性来确定每个元素的位置然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置设置文字颜色color属性等。 综上所述 HTML 部分定义了登录表单的结构包括用户名和密码输入框以及一个提交按钮。表单的action属性设置为/login这通常是服务器端处理登录请求的URL。你可以根据实际情况修改这个值。method属性设置为post这是处理登录信息时的标准方法。 CSS 部分提供了样式包括背景颜色、边框、阴影和按钮的样式使得登录表单看起来更加美观和用户友好。你可以根据需要调整这些样式。 通过以上步骤你就可以创建一个基本的登录页面了。
四、页面效果图
