HTML+CSS实现登陆页面样式布局,简单的网页布局_页面登录的样式设置资源-CSDN文库

共14个文件

png：4个

html：3个

css：2个

版权申诉

html

网页

web设计

网页设计

64 浏览量 2023-11-07 18:08:03 上传评论收藏 176KB RAR 举报

在网页设计领域，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页界面的基础。这个“HTML+CSS实现登陆页面样式布局”的主题涵盖了如何利用这两种技术来创建一个基本的登录页面，这对于初学者，尤其是大一大二大三的学生来说，是一个很好的实践项目，有助于巩固理论知识并提升实际操作技能。 HTML是网页内容的结构语言，负责定义网页的基本元素，如标题、段落、表单、图像等。在创建登录页面时，我们需要使用`<form>`标签来构建表单，包含用户名输入框（`<input type="text">`）和密码输入框（`<input type="password">`），以及提交按钮（`<input type="submit">`）。同时，还要设置相应的表单属性，如`name`属性来标识输入字段，`placeholder`属性为输入框提供提示文本。 CSS则是用于控制网页元素样式的语言。在登录页面布局中，我们可以用它来设定颜色、字体、边距、对齐方式等视觉效果。例如，通过设置`background-color`改变背景色，使用`font-family`指定字体，运用`margin`和`padding`调整元素间距，使用`display: flex`或`grid`实现响应式布局，确保页面在不同设备上都能良好显示。对于表单元素，可以使用`border`、`border-radius`来创建圆角，`box-shadow`添加阴影效果，增强用户体验。登录页面的样式布局通常包括以下几个部分： 1. **头部**：可以包含logo、页面标题等，可以使用`header`标签，并通过CSS设置其背景色、高度等。 2. **主体内容**：这里是登录表单所在的地方，可以使用`form`标签，并通过CSS设置表单的宽度、居中对齐等。输入框和按钮可以用`input[type=text]`和`input[type=submit]`，并添加样式如边框宽度、圆角、内边距等。 3. **提示信息**：如果需要显示错误信息或验证提示，可以使用`p`标签，并添加对应的CSS类以显示不同的颜色和字体样式。 4. **底部**：可能包含版权信息或链接，使用`footer`标签，并通过CSS进行样式设定。 5. **响应式设计**：为了让登录页面在手机和平板等不同设备上看起来和谐，需要使用媒体查询(`@media query`)来调整不同屏幕尺寸下的布局。在这个练习中，你可以尝试使用ID和类选择器来精细化控制各个元素的样式，学习浮动布局和Flexbox或Grid布局，理解盒模型以及如何用CSS处理元素的相对定位和绝对定位。通过完成这个登录页面，你会更深入地理解HTML和CSS在实际应用中的作用，从而提升你的网页设计能力。记得在实践中不断调整和优化，以获得最佳的视觉效果和交互体验。

资源推荐

资源详情

资源评论

收起资源包目录

style.css 3KB

导航栏.html 3KB

.vscode

settings.json 39B

launch.json 498B

Log.css 4KB

Homepage.html 232B

images_nav

shoppingCart.png 5KB

pexels-photo-4620821.jpeg 49KB

face-smile-black.png 779B

face-smile-white.png 681B

logo.png 12KB

pexels-photo-4620843.jpeg 104KB

Log.html 4KB

log.js 8KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Login Registration page</title> <link rel="stylesheet" href="Log.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="nav1"> <div id="logo" class="logo"> <p><img src="./images_nav/logo.png" width="100px" height="99px" /></p> </div> <ul> <li class="special"><a href="#"> HOME</a></li> <li class="special"><a href="#"> PRODUCT </a></li> <li class="special"><a href="#"> LOGIN</a></li> <li class="special"><a href="#"> ABOUT </a></li> <script> function changeMode() { var element = document.body; element.classList.toggle("dark-mode"); } </script> </ul> <div class="gou"><img src="./images_nav/shoppingCart.png" /></div> <div id="container_1"> <label class="switch"> <input type="checkbox" onclick="changeMode()" /> <span class="slider"></span> </label> </div> <div id="bottom">Back to top</div> </div> <div class="container right-panel-active">  <div class="container__form container--signup"> <form action="#" class="form" id="form1" action="/Homepage.html"> <h2 class="form__title">Sign Up</h2> <input type="text" id="UserName1" placeholder="User Name" class="input" /> <input type="email" id="Email1" placeholder="Email" class="input" /> <input type="password" id="Password1" placeholder="Password" class="input" /> <span id="Password_length" class="regularity"></span> <span id="Password_irregularity" class="regularity"></span> <input type="password" id="ConfirmPassword1" placeholder=" ConfirmPassword" class="input" /> <span id="Password_match" class="error"> </span> <button class="btn" id="registerBtn">Register</button> <button type="reset" class="btn" id="resetButton">Rest</button> </form> </div>  <div class="container__form container--signin"> <form action="#" class="form" id="form2"> <h2 class="form__title">Sign In</h2> <input type="text" id="UserName2" placeholder="User Name" class="input" /> <span id="NameError" class="error"></span> <input type="password" id="Password2" placeholder="Password" class="input" /> <span id="PasswordError" class="error"></span> <a href="#" class="link">Forgot your password?</a> <span id="lo" class="link" ><input type="checkbox" />No login for a week</span > <button class="btn">Sign In</button> </form> </div>  <div class="container__overlay"> <div class="overlay"> <div class="overlay__panel overlay--left"> <button class="btn" id="signIn">Sign In</button> </div> <div class="overlay__panel overlay--right"> <button class="btn" id="signUp">Sign Up</button> </div> </div> </div> </div> <script src="log.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉