<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
min-width: 1400px;
}
body {
max-width: 1920px;
min-height: 1080px;
background: url("demo.jpg") top no-repeat;
background-size: cover;
font-size: 16px;
display: flex;
flex-direction: column;
}
header {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
width: 300px;
height: 200px;
background: url("logo.png") no-repeat;
background-size: contain;
margin-left: 40px;
margin-top: 20px;
}
.username {
color: #fff;
font-size: 20px;
margin-top: 20px;
margin-right: 20px;
}
main {
width: 100%;
flex: 1;
}
section {
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
}
.backImg {
width: 300px;
height: 600px;
position: relative;
/* margin: 0 auto; */
left: 206px;
background: url("center.png") no-repeat;
}
.centerUsername {
position: absolute;
left: 50%;
color: #fff;
font-size: 20px;
transform: translateX(-50%);
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<div class="username">用户名:xxx</div>
</header>
<main>
<section>
<div class="backImg">
<div class="centerUsername">用户名XXX</div>
</div>
</section>
</main>
</body>
</html>
响应式页面CSS.7z （4个子文件） 
logo.png 40KB
demo.jpg 1.42MB
index.html 2KB center.png 724KB资源评论
画一个圆_
- 粉丝: 997
- 资源: 5
最新资源
- MATLAB脉冲幅度调制系统PAM-AWGN性能仿真
- 华为云HCIE-CLOUD FusionAccess桌面云实验指导书
- 数据结构课程设计-校园导游咨询系统.zip
- 数据库操作与查询实例教程 - SQL语言应用
- 基于BiLSTM-LSTM-Softmax的实体关系联合抽取算法项目源码.zip
- VID_20241104_092646.mp4
- 图形数据处理作业C和C++源码（含包括OpenGL, 地形, 纹理和裁剪等）.zip
- ModifyJSON.zip
- 各种系统编程和并行编程作业实验C和C++源码（含任务管理、进程间通信、并行算法等）.zip
- 基于人工神经网络-随机森林-LSTM的径流预测项目源码（Python期末大作业）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
