用HTML来实现左上角显示姓名学号全屏蓝底
时间: 2024-03-10 13:50:52 浏览: 61
可以使用以下HTML代码来实现左上角显示姓名学号全屏蓝底:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
body {
margin: 0;
padding: 0;
}
.header {
background-color: blue;
color: white;
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
padding: 0 10px;
}
.header h1 {
margin: 0;
font-size: 24px;
font-weight: normal;
}
.header p {
margin: 0;
font-size: 18px;
font-weight: normal;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="header">
<h1>My Webpage</h1>
<p>姓名:XXX 学号:XXX</p>
</div>
<h2>Page content goes here.</h2>
</body>
</html>
```
在这个HTML代码中,我们使用了一个class为“header”的div元素来实现头部的显示效果。在CSS样式中,我们设置了这个div元素的背景颜色为蓝色,字体颜色为白色,高度为50像素,并且使用了flex布局来使头部的内容左对齐。在div元素中,我们使用了h1元素来显示网页标题,使用p元素来显示姓名和学号。最后,我们在body中添加了一个h2元素来占用页面内容的位置。
阅读全文