<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style type="text/css">
*{padding: 0px;margin:0px;}
:root
{
--modal-duration: 2s;
--primary-color: #30336b;
--secondary-color: #be2edd;
}
body
{
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
transition: transform 0.5s ease;
}
body.show-nav {
transform: translateX(200px);
}
nav
{
background-color: var(--primary-color);
color: #fff;
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 100vh;
z-index:100;
transform: translateX(-100%);
}
nav .logo {
padding: 30px 0;
text-align: center;
}
nav .logo img
{
width: 75px;
height: 75px;
}
nav ul
{
list-style: none;
}
nav ul li
{
border-bottom: 2px solid rgba(200, 200, 200, 0.1);
padding: 20px;
}
nav ul li:first-of-type {
border-top: 2px solid rgba(200, 200, 200, 0.1);
}
nav ul li a
{
color: #fff;
text-decoration: none;
}
nav ul li a:hover
{
text-decoration: underline;
}
header
{
background-color: var(--primary-color);
color: #fff;
text-align: center;
padding: 40px 15px;
position: relative;
font-size: 130%;
}header p {
margin: 30px 0;
}
button,input[type="submit"]
{
background-color: var(--secondary-color);
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 12px;
border: 0;
}
button:focus
{
outline: none;
}
.toggle {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 20px;
left: 20px;
}
.cta-btn
{
padding: 12px 30px;
font-size: 20px;
}
.container{
padding: 15px;
margin: 0px auto;
max-width: 100%;
width: 800px;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0px;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.modal-container.show-modal {
display: block;
}
.modal
{
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
width: 400px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
}
.modal-header {
background-color: var(--primary-color);
color: #fff;
padding: 15px;
}
.close-btn {
background-color: transparent;
position: absolute;
top: 0;
right: 0;
font-size: 25px;
}
.modal-content {
padding: 20px;
}
.modal-form div {
margin: 15px 0;
}
.modal-form label {
display: block;
margin-bottom: 5px;
}
.modal-form .form-input {
padding: 8px;
width: 100%;
}
@keyframes modalopen
{
from
{
opacity: 0;
}
to{
opacity: 1;
}
}
</style>
</head>
<body>
<nav>
<div class="logo">
<img src="img/img.png" alt="logo">
</div>
<ul>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
</ul>
</nav>
<header>
<button class="toggle" id="toggle">
<i class="fa fa-bars fa-2x"></i>
</button>
<h1>666</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis,
quisquam!
</p>
<button class="cta-btn" id="open">登录</button>
</header>
<div class="container">
<h1>为什么选择米修在线?</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia,
repellendus magnam enim dolorem alias adipisci commodi eum. Aspernatur
debitis expedita rem itaque dolor! Obcaecati unde aliquam mollitia alias
maxime.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum iure
consequuntur labore eaque repellendus, impedit obcaecati ut veritatis ab
sapiente.
</p>
<h2>我们的教学宗旨</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam!
Officiis non quidem, nobis dolorum, illo, vel tenetur officia tempora
error molestiae nostrum quis libero odit omnis ratione fuga voluptatum
obcaecati vero impedit aliquid nihil doloribus dolorem. Commodi, beatae
provident!
</p>
<h2>我们的优势</h2>
<ul>
<li>丰富的线上课程</li>
<li>优秀的师资团队</li>
<li>课后辅导及问答</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit modi
facere non, rem est officia similique? Exercitationem alias provident
magni optio veritatis, eligendi modi saepe ut eum expedita dolorem
corrupti. Quis, iste. Ullam sit minima officiis animi a saepe modi,
repellat reprehenderit eveniet molestias corporis cupiditate optio nemo
dolorem adipisci quis voluptates dolorum molestiae delectus deleniti
ducimus mollitia neque aliquid. Delectus a, perferendis vitae omnis est
molestiae voluptates mollitia? Cumque?
</p>
</div>
<!--模态框-->
<div class="modal-container" id="modal">
<div class="modal">
<button class="close-btn" id="close">
<i class="fa fa-times"></i>
</button>
<div class="modal-header">
<h3>登录</h3>
</div>
<div class="modal-content">
<p>登录了解更多课程及促销活动</p>
<form class="modal-form">
<div>
<label for="name"></label>
<input type="text" name="" id="name" placeholder="请输入姓名" class="form-input">
</div>
<div>
<label for="email">邮箱</label>
<input
type="email"
id="email"
placeholder="请输入邮箱"
class="form-input"
/>
</div>
<div>
<label for="password">密码</label>
<input
type="password"
id="password"
placeholder="请输入密码"
class="form-input"
/>
</div>
<div>
<label for="password2">确认密码</label>
<input
type="password"
id="password2"
placeholder="请再次输入密码"
class="form-input"
/>
</div>
<input type="submit" value="提交" class="submit-btn" />
</form>
</div>
</div>
</div>
<script type="text/javascript">
// 获取节点
const toggle = document.getElementById("toggle");
const close = document.getElementById("close");
const open = document.getElementById("open");
const modal = document.getElementById("modal");
window.addEventListener("click",e=>
{
e.target==modal?modal.classList.remove("show-modal"):false;
/*点击的是不是modaldiv,如果是就模态框消失,否则上面都不做。*/
});
toggle.addEventListener("click",()=>
{
document.body.classList.toggle("show-nav");
//如果按下了按钮就显示nav否则切换不见nav
});
open.addEventListener("click",()=>
{
modal.classList.add("show-modal");
//如果点击的是登录按钮就显示模态框
});
close.addEventListener("click",()=>
{
modal.classList.remove("show-modal");
//如果点击的是模态框上面的x的话,也消失掉.
});
</script>
</body>
</html>