QQ邮箱登录PC布局实战笔记一

QQ邮箱布局实战（PC）笔记<一>

开篇说明:

这个系列的笔记算是作为我复习前端知识的一个系列吧。前端的知识很杂，各种小技巧很多，而且更新变化很快，不像我们在校学习的那些计算机基础理论知识一样，多少年都是经典。所以我就选择了实战这种动手比较强的方式进行复习。用到哪些知识点，就开始复习回忆哪些知识。这样的效果也许不是最好的，但是能把前端大概的知识框架进行了解，也就达到了自己学习的目的。加油~~。

知识范围：

先是HTML和CSS的部分，在这个部分里面最核心的就是要学会如何进行布局，当然现在仅仅是针对PC端进行复习。对于以后的移动端方面会单独进行复习总结。同时，我现在复习仅仅是最经典的DIV+CSS的布局，对于现在新型的一些布局，如flex布局等等，会在以后进行整理学习。

最终要努力实现效果图:

实战思路:

首先搭建起css、js、imgs、index.html的基本项目目录结构。
2.效果图分析：

顶部区域：总体分为两个部分：一个logo部分，还有一个导航链接部分。logo部分在顶部区域的左端，导航部分在顶部区域的右端。logo部分可以使用img标签和a标签进行实现,导航部分可以使用ul和li标签进行实现。如下图所示:
中间区域：主要是有一个版心区域，垂直居中，然后在版心里面进行分为左右两个盒子，左边的盒子放一些文字和图片，右边的区域主要有一个表单，进行登录使用，表单其实是一个选项卡，我们先完成简单布局，交互效果以后再加。选项卡下边是一个按钮，注意：按钮和选项卡是圆角的。
底部区域：底部区域可以将一个div放到底部的最中间，注意字体符号都要垂直居中，也要注意版权符号的使用。

知识&问题：

div
img
a
ul&li
浮动的基础知识
定位的基础知识(子绝父相)
如何垂直居中
兼容性

参考文档:

本篇结语：

QQ邮箱登录页面总体简单，是一个练习div+css布局的好例子。这篇文章分析完了（相关问题等实战完毕之后会一块进行回答和分析）.下一篇：布局实现以及知识总结笔记。完~~。

QQ邮箱登录PC布局实战笔记一相关推荐

QQ邮箱登录PC布局实战笔记二
本文目标: 尽量100%还原QQ邮箱登录界面头部区域,掌握div之间的位置关系,掌握常见的定位技术和浮动技术.将头部所需要的HTML标签进行仔细学习. 开始准备: 浏览器:Firefox/Chrome ...
QQ邮箱登录PC布局实战笔记四
本文说明: 经过几次的努力,一个完整的QQ邮箱静态页面已经搭建完成,自己的确在一些细节方面并没有很好地和人家百分百一致,但是也是通过自己的方法,得到了功能的实现.老实来讲,HTML和CSS的布局是一件 ...
QQ邮箱登录PC布局实战笔记三
本次目标: 完成中间内容区域,和底部区域(很简单),对于表单部分,先把布局写好,对于选项卡的的优化方面,等到下一次再去写. 相关代码: html部分: & ...
[实战篇]关于QQ邮箱登录之测试用例
今天,我们来分析一个关于QQ邮箱登录模块的测试用例: 邮箱登录模块它就只有两个,一个是登录账号,一个是登录密码.在上一篇注册模块的文章中分析过,如果是一个输入框的话,你就直接对这一个输入框进行等价类划 ...
HTML+CSS 模拟QQ邮箱登录界面
模拟QQ邮箱登录界面 index.html <!DOCTYPE html> <html lang="en"> <head><meta ch ...
python实现kindle每天推送博客1----kindle推送原理，python实现qq邮箱登录及邮件发送
kindle想每天看新闻,看博客, 其实自己用python写个代码就能很简单实现了. 1.kindle推送原理 kindle不仅可以买书看书,还可以自己推送内容原理很简单,往你个人的kindle邮箱 ...
java qq邮箱登录_SpringBoot实现QQ邮箱注册和登录
1.登录注册思路这是一个使用spring boot做的一个qq邮箱注册和登录的项目. 没写前端页面,使用postman测试.有截图详细. 1.1.思路注册:通过输入的邮箱发送验证码,检验前端传来的 ...
Java实现QQ邮箱登录，实现邮箱验证码三分钟失效，代码实现发送验证码和登录全过程思路。内附完整项目。
温馨提示: 如果感觉本文章困难,请移步简单的邮箱验证,不涉及数据库和Redis,点击我进行跳转使用技术: 1. MySQL数据库 2. Redis缓存(极其简单)点击此处学习功能介绍: 发送验证码 ...
WEB自动化——练习之QQ邮箱登录
# 导包 from selenium import webdriver from time import sleep # 导入动作链类,可以储存鼠标动作并执行 from selenium.webdri ...

QQ邮箱登录PC布局实战笔记一

QQ邮箱布局实战（PC）笔记<一>

开篇说明:

知识范围：

最终要努力实现效果图:

实战思路:

知识&问题：

参考文档:

本篇结语：

QQ邮箱登录PC布局实战笔记一相关推荐

最新文章

热门文章