html部分:
<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>
html逻辑：
这么垃圾就不讲了哈.讲下css与js哈
图片：
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;
}
}
css逻辑;
第一步：取消所有标签的（padding+margin），原因,因为会和效果有误差.
第二步:设置css变量:
怎么设?
定义变量:
:root
{
--modal-duration: 2s;
--primary-color: #30336b;
--secondary-color: #be2edd;
}
第三步：body里面所有的标签的效果过渡（过渡的标签名称 过渡的时间 什么速度过渡）为:
第四步：body里面的某一个div往右移动200px.
哪一个呢？
第五：
默认让上面的这个图片往左移动-100%消失.
并让它固定定位在左上角,自身宽高是200px 100vh。
第六：这上面的图片
图片：logo图片大小是75px 75px.没有小圆点.第一个li上面没有上边框.没有text-decoration: none;，触碰a要有text-decoration: underline;。
第七;
意思是;
第一;背景颜色为:var(–primary-color);相对定位让里面的标签都在head里面.文字居中,内边距左右40 上下15px.
第二;header左边外边距为30px。
第三;有小手手,内边距也就是文字自身与自身内部的距离.外边距是外部与外部的距离.
第四：
button:focus
{
outline: none;
}
系统点击焦点边框的颜色清掉.
然后是这里的东西了.
第一步;
固定定位,
这个东西要显示就显示在可视区上下左右中心.
第二步;
去除掉
外面的紫色.
第四步;因为.modal有绝对定位,所以里面的这个绝对定位.close-btn相对于父元素.modal.
第五步：
代表
第六步：
form代表0%代表透明.到100%看见.
js逻辑：
第一步：
获取
第一个是：
第二个：
第三个：
第四个：
代表是当点击模态框的时候,模态框none掉,如果点击的不是模态框false.
第二步：
点击的时候,显示出来.因为是toggle函数所以在点击会消失.(回归原位把)
第三：
、点击登陆的时候,
出来.
第四：
点击的时候,none掉modal，模态框
完毕.