PC端页面
PC端登录
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录-PC开发</title>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
<!-- 左边动画 -->
<div class="mainl">
<div class="boxl">
<div class="point">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="dashed">
<img src="images/dashed.png" >
</div>
<div class="pic">
<img src="images/pie.png" class="pie">
<img src="images/leave.png" class="leave">
<img src="images/people.png" class="people">
<img src="images/screwed1.png" class="screwed1">
<img src="images/screwed.png" class="screwed2">
<img src="images/hand.png" class="hand">
<img src="images/key.png" class="key">
<img src="images/flower.png" class="flower">
</div>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="line"></div>
</div>
</div>
<!-- 三角 -->
<div class="mainc">
</div>
<!-- 登录 -->
<div class="mainr">
<div class="boxr">
<div class="logo">
<h2><img src="images/logo.png" ></h2>
<span class="cname">鹰飞PC官网</span>
</div>
<div class="accent">
<ul>
<li>
<div class="avatar">
<img src="images/avatar.png" >
</div>
<input type="text" placeholder="请输入用户名">
</li>
<li>
<div class="lock">
<img src="images/lock.png" >
</div>
<input type="password" placeholder="请输入密码">
</li>
<li class="last">
<button class="button1">立即登录</button>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
-
考核反馈
1.第一步把布局规划做好，否则后期调整不方便
2.添加动画要合理。
3.要考虑到,队医一些定位的布局可以选择使用盒子包裹住
PC端首页
反馈
一般使用li作nav时,可以使用display:inline-block,减少float:left;的使用
PC端的nav变画,一般是颜色由浅变深.不用加粗
动画效果不要太突兀
命名要正确,见其名,知其意
标签选择要搭配好
一般只有一个<h1></h1>
a链接中不要放div
移动端页面
移动端登录
反馈
发送验证码部分在大盒子中添加font-size,因为页面有默认的文字基线,随着页面的变化,文字会随着变化.
动画使用translate,不要使用left,top.
移动端首页
反馈
关注,推荐,最新需求处的动画一般使用JS来实现
实现关注下方出现滚动的效果时,添加overflow:hidden
图标库,推荐使用阿里云,,导入方式通过link
同时不要忽略基线问题
扫一扫
1282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
