写一个个人中心页面包含导航栏、个人资料、头像等。并且为响应式布局
时间: 2023-06-20 20:05:01 浏览: 41
HTML代码：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人中心</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="#">个人中心</a>
</div>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">个人资料</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">退出</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="container">
<div class="profile">
<div class="avatar">
<img src="avatar.png" alt="头像">
</div>
<div class="info">
<h1>用户名</h1>
<p>邮箱：xxx@xxx.com</p>
<p>电话：12345678901</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
```
CSS代码：
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 1rem;
}
.logo a {
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
color: #fff;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
list-style: none;
font-size: 1.2rem;
}
.nav-links li a {
text-decoration: none;
color: #fff;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
margin: 5px;
background-color: #fff;
}
.container {
max-width: 1200px;
margin: 2rem auto;
display: flex;
justify-content: center;
}
.profile {
display: flex;
align-items: center;
background-color: #f1f1f1;
padding: 1rem;
border-radius: 10px;
}
.avatar img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin-right: 2rem;
}
.info h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
@media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #333;
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
.line1 {
transform: rotate(45deg) translate(5px, 6px);
}
.line2 {
opacity: 0;
}
.line3 {
transform: rotate(-45deg) translate(5px, -6px);
}
```
JavaScript代码：
```
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();
```
效果图：
相关推荐
最新推荐
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
主要介绍了BootStrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果，非常不错，具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
css3与html5实现响应式导航菜单(导航栏)效果分享
使用纯CSS来实现的一个响应式导航菜单，我们使用的是HTML5+CSS3技术，当浏览器窗口变小或者使用手机浏览器访问的时候，原本横条菜单会收缩成一个下拉菜单，当鼠标滑向菜单时下拉展示全部菜单
vue实现导航栏效果（选中状态刷新不消失）
主要为大家详细介绍了vue实现导航栏效果，选中状态刷新不消失，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现nav导航栏的方法
主要为大家详细介绍了vue项目nav导航栏的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序自定义导航栏兼容适配所有机型（附完整案例）
主要介绍了小程序自定义导航栏兼容适配所有机型（附完整案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
spring添加xml配置文件
1. 创建一个新的Spring配置文件，例如"applicationContext.xml"。
2. 在文件头部添加XML命名空间和schema定义，如下所示：
```
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。