Skip to content

Y
YunQi-Front-end
Commit de3fe139 by 王家齐
Options

index.html

parent d20da3c6
Showing with 154 additions and 0 deletions
前端/index用户主页/index.html 0 → 100644
<!DOCTYPE html>
<!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/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/container.css">
<link rel="stylesheet" href="./css/animation.css">
</head>
<body>
<!-- 引入的大背景 -->
<div class="intro">
<!-- <div class="banner">云启图书管理系统</div> -->
<!-- <div class="banner">YunQi Book Management</div> -->
<!-- <img src="./img/index-nav-bg3.png" style="width: 100%;"> -->
<!-- 导航栏------------------------------- -->
<div class="nav">
<div class="container">
<div class="nav-logo">
<img src="./img/yunding-logo2.png">
</div>
<div class="nav-login">登陆</div>
<!-- <div>|</div> -->
<div class="nav-login">注册</div>
<div class="nav-list">
<div class="li">首页</div>
<!-- 跳转到首页的问题好像不能用锚点 and其他页面导航栏的细节问题！！！ -->
<li class="li">
<a class="li my-list" href="#my">我的</a>
<ul>
<li>未读消息</li>
<li>已借书籍</li>
<li>借阅历史</li>
</ul>
</li>
<li class="li"><a class="li" href="#hot-list">热榜</a></li>
<li class="li"><a class="li" href="#book-list">图书库</a></li>
<li class="li"><a class="li" href="#user-message">用户反馈</a></li>
</div>
</div>
</div>
<div class="container">
<!-- 搜索框------------------------------- -->
<div class="search-box">
<div class="search-cate">
<label for="category">检索分类</label>
<select id="category" class="category" >
<option>书名</option>
<option>类别</option>
</select>
</div>
<!-- 下拉条动画 -->
<input type="text" class="search-bar" placeholder="输入你想借的书吧！\(￣︶￣*\))">
<button class="search-btn">
检索
<!-- <img src="./img/search-bar放大镜.png" style="zoom: 20%;"> -->
</button>
</div>
</div>
</div>
<!-- 淡蓝色背景 -->
<div class="bg">
<div class="container">
<!-- 我的--------------------------------- -->
<div class="none" id="my"></div>
<div class="my">
<div class="header">
<!-- <img src="./img/search-bar放大镜.png"> -->
<div class="big-h">我的</div>
</div>
<div class="my-messgage">
<header class="my-messgage-header">
<div class="middle-h">未读消息</div>
</header>
<div class="my-messgage-main">
<li>管理员已处理审批，请于x日x时去xx拿书。</li>
<button>已读</button>
<!-- 按下去变灰 -->
</div>
</div>
<div class="my-bookshelf">
<div class="middle-h">已借书籍</div>
<div class="my-bookshelf-main">
<div class="book-box">
<!-- <div class="my-book-img"></div>
<div class="my-book-message"></div> -->
</div>
<div class="book-box"></div>
<div class="book-box"></div>
<div class="book-box"></div>
<div class="book-box"></div>
</div>
<!-- 怎么做到有几个展示几个？ -->
</div>
<div class="my-history">
<div class="middle-h">借阅历史</div>
<li></li>
</div>
</div>
<!-- 热榜--------------------------------- -->
<div class="none" id="hot-list"></div>
<div class="hot-list" id="hot-list">
<div class="header">
<div class="big-h">热榜</div>
</div>
<div></div>
</div>
<!-- 图书库------------------------------- -->
<div class="none" id="book-list"></div>
<div class="book-list" id="book-list">
<div class="header">
<div class="big-h">图书库</div>
</div>
<div class="book-box"></div>
</div>
<!-- 反馈--------------------------------- -->
<div class="none" id="user-message"></div>
<div class="user-message" id="user-message">
<div class="header">
<div class="big-h">用户反馈</div>
</div>
<input type="text" class="user-input">
</div>
</div>
<footer class="footer">
<div class="container">
云启未来，梦抵星辰。
</div>
</footer>
</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/index.js"></script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment