<!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>登录页</title> <link rel="stylesheet" href="css/4.css"> <link rel="stylesheet" href="css/2.css"> </head> <body> <!-- 导航栏 --> <div class="nav"> <img src="image/log.png" alt=""> <span class="title">我的博客系统</span> <!-- 使用 span 把左右两侧的元素给撑开 --> <span class="spacer"></span> <a href="1.html">主页</a> <a href="3.html">写博客</a> <a href="2.html">注销</a> </div> <!-- 登录页面的版心 --> <div class="login-container"> <div class="login-dialog"> <h3>登录</h3> <div class="row1"> <span>用户名</span> <input type="text" id="username"> </div> <div class="row1"> <span>密码</span> <input type="password" id="password"> </div> <div class="row2"> <input type="button" value="提交" id="submit"> </div> </div> </div> </body> </html>
时间: 2023-10-13 15:04:45 浏览: 140
这是一个简单的登录页面的HTML代码,包含一个导航栏和一个登录框。
导航栏包含了一个logo、一个标题以及三个链接,分别指向主页、写博客和注销页面。
登录框包含了一个标题、一个用户名输入框、一个密码输入框和一个提交按钮。
这个页面使用了两个CSS文件,分别是4.css和2.css,可能包含了页面的样式和布局信息。
相关问题
<!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>Document</title> </head> <body> <style>
抱歉,作为AI,我无法在这里展示CSS样式。但是,您可以在`<style>`标签中编写CSS样式,然后将其应用于网页中的HTML元素。例如,可以通过以下方式将样式应用于段落元素:
```
<style>
p {
color: blue;
font-size: 16px;
}
</style>
<p>This is a paragraph.</p>
```
这将使段落元素的文本颜色变为蓝色,字体大小为16像素。
解释<!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"> <meta name="description" content=""> <meta name="author" content=""> <title>Freelancer - Start Bootstrap Theme</title>
这段代码是HTML文档的头部,其中包含了一些元信息(metadata),包括文档的字符编码、浏览器兼容性设置、页面视图配置以及页面描述信息等等。具体来说,这段代码中:
- `<!DOCTYPE html>` 声明文档类型为HTML5
- `<html lang="en">` 开始一个HTML文档,设置文档语言为英语
- `<head>` 开始文档头部
- `<meta charset="utf-8">` 设置文档的字符编码为UTF-8
- `<meta http-equiv="X-UA-Compatible" content="IE=edge">` 告诉浏览器使用最新的IE版本渲染页面
- `<meta name="viewport" content="width=device-width, initial-scale=1">` 设置页面在移动设备上的视图大小和缩放比例
- `<meta name="description" content="">` 设置页面的描述信息
- `<meta name="author" content="">` 设置页面的作者信息
- `<title>Freelancer - Start Bootstrap Theme</title>` 设置页面的标题。
阅读全文