使用HTML+CSS打造经典登录界面 QQ邮箱链接官网登录

先来个完成图

然后对这几天的认知学习做一个小笔记

1. 一个盒子的实际高度（宽度）是由content+padding+border+margin组成。
可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。
2. 行内元素margin设置非行内元素块之间margin设置父子块之间的margin设置
其中子块的margin设置将会以父块的content为参考。

这个一定要理解好，否则会造成明明写好了css样式，效果却不如人意。

项目实战

使用HTML+CSS打造QQ邮箱登录界面

HTML片段

<head><title>QQ邮箱登录界面</title><link rel="shortcut icon" type="image/x-icon" href="images/logo1.jpg"/><link rel="stylesheet" type="text/css" href="index.css"/>
</head><body><div class="header"><div class="header_top"><ul><li><a href="https://mail.qq.com/">首页</a></li><li><a href="#">业务</a></li><li><a href="#">下载</a></li><li><a href="http://kf.qq.com/product/email.html">服务</a></l><li><a href="https://en.mail.qq.com/cgi-bin/loginpage">English</a></li></ul></div><div class="imga"><a href="https://mail.qq.com/"><img src="data:images/ph.jpg" height="100" width="230" /></a></div><!-- 登录界面--><div class="main"><!-- 左侧信息栏 --><div class="main_left"><h1>QQ邮箱&nbsp;&nbsp;常联系！</h1><h4>没有什么能够阻挡</h4></br><p>你对自由的向往</p><p>天马行空的生涯</p><p>你的心了无牵挂</p><span>选自《蓝莲花》</span></div><!-- 右侧登录界面 --><div class="main_right"><div class="index"><form><p class="headline">用户登录</p><p class="username">用户名：</p><input type="text" placeholder="请输入您的账号"><p class="password" >密码：</p><input type="password" placeholder="请输入密码"><input type="submit" value="登录" name="login" ></br><p class="password"><input type="checkbox" name="rempas" /> 记住密码</p><p class="wanjipwd"> <a href="https://aq.qq.com/v2/uv_aq/html/reset_pwd/pc_reset_pwd_input_account.html?v=3.0&old_ver_account=">找回密码</a></p></br><p class="noaccount">没有账号？<a href="#">立即注册</a></p></form></div></div> <!-- 底部 --><div class="footer"><ul><li><a href="https://www.tencent.com/zh-cn/index.html">关于腾讯</a></li><li><a href="#">诚聘人才</a></li><li><a href="http://mail.qq.com/contact_us.html">联系我们</a></li><li><a href="#">商务合作</a></li><li><a href="https://privacy.qq.com/">隐私政策</a></li><li class="ty"><a href="#">深圳南山区科技园腾讯滨海大厦</a>&nbsp;&nbsp; copyright&copy; 1998-2019</li></ul></div></body>
</html>

/* CSS Document */

*{margin: 0;padding: 0;list-style: none;}
body{background:url(images/bkgrd.jpg);background-size: 100%;
}
.header{width: 1200px;height: 870px;margin: 0 auto;}
.header_top{margin-top: 10px;height: 50px;line-height: 50px;
}
.header_top>ul>li{float: right;font-size: 15px;
}
.header_top>ul>li>a{text-decoration: none;color: #152b3c;padding:15px 30px;
}
.header_top>ul>li a:hover{border: 1px solid white;border-radius:5%;color: white;
}
.imga{position:relative;display:inline-block;margin-top:-60px;margin-left:10px;}.main{width:1200px;height: 450px;
}
.main_left{width:460px;height: 250px;float: left;padding:85px 110px
}
.main_left>p{padding: 8px 0;font-size: 30px;
}
.main_left>span{padding: 8px 0;font-size: 16px;color:#999;}
.main_right{width: 480px;height: 450px;float: right;
}
.main_right .index{width: 330px;height: 350px;background-color:rgba(255,255,255,0.75);margin: 50px 90px;
}
.headline{font-size: 22px;text-align: center;padding: 20px;
}
input[type="text"],
input[type="password"],
input[type="submit"]{-web-kit-appearance:none;-moz-appearance: none;display: block;margin: 0 auto;font-size:15px;width: 240px;
}
input[type="text"],
input[type="password"]{height:35px;border-radius:3px;border:1px solid #c8cccf;color:#6a6f77;outline:0;
}input[type="submit"]{margin-top: 25px;height: 35px;background: #357eb8;color: #bcedff;font-weight: bold;font-size: 16px;
}
input[type="submit"]:hover{background: #0e62a3;cursor: pointer;
}
.username{display: block;margin: 5px 0 5px 42px;font-size:17px; /*color: #6a6f77;*/
}
.password{/*color: #6a6f77;*/display: block ;float: left;margin-left: 46px;font-size: 17px;}
.wanjipwd{display: block;float: right;margin-right: 46px;font-size: 15px;}
.noaccount{display: block;float: right;margin-right: 46px;font-size: 15px;
}
.noaccount>a{text-decoration: none;
}
.footer{width: 1000px;margin:30px auto;
}
.footer>ul{margin-left: 15px;
}
.footer>ul>li{float: left;}
.footer>ul>li>a{text-decoration: none;border-left: 2px solid ;padding:0 10px;
}

使用HTML+CSS打造经典登录界面 QQ邮箱链接官网登录相关推荐

APP登录界面设计：注册框 or 登录框，哪个更合理？
登录和注册过程往往是产品和用户的 First Sight,因此登录注册入口是给用户留下好的第一印象的关键.遵循"所有的设计都应有据可循"的原则,下面是我司设计团队对"登录 ...
mysql查询使用qq邮箱注册_Spring Boot实现qq邮箱验证码注册和登录验证功能
1.登录注册思路这是一个使用spring boot做的一个qq邮箱注册和登录的项目. 没写前端页面,使用postman测试.有截图详细. 1.1.思路注册:通过输入的邮箱发送验证码,检验前端传来的 ...
黑马瑞吉外卖之移动端验证码登录使用qq邮箱
黑马瑞吉外卖之移动端验证码登录说明用qq邮箱进行验证码发送 hi,我是兰舟千帆,本次更文还是将瑞吉外卖的笔记完善一下.每一篇都写得很认真哦,希望需要的人可以得到帮助,谢谢你们的阅读. 说明 pc端 ...
2021瑞安高考成绩查询,温州教育网官网登录入口2021瑞安中考成绩查询中招查分系统...
温州教育网官网登录入口2021瑞安中考成绩查询中招查分系统温州市教育局网站(http://edu.wenzhou.gov.cn)是2021瑞安中考官方网站,温州教育局官网edu.wenzhou.go ...
Oracle官网登录账号（登录oracle官网下载资料账号）
Oracle官网登录账号: 用户名: 2030300081@qq.com 密码: Abc12345678
css101路由密码,192.168.0.101登陆官网登录入口
192.168.0.101 IP地址说明 192.168.0.101是路由器的专有地址:如果你想通过192.168.0.101访问路由器的管理页面请输入192.168.0.101到Web浏览器的地址栏 ...
全国志愿信息服务器,全国志愿者服务信息系统官网登录,2020全国志愿者服务信息系统官网登录注册入口预约 v1.0-手游汇...
全国志愿者服务信息系统官网登录是一款用户们都可以使用的软件,最新的志愿者的活动会在平台上不断的更新都是附近的一些内容,这个平台本身来说是非常安全可靠的.您如果有意向的话在手机上就能够轻松的报名,可以充 ...
2020计算机会计初级,2020年初级会计官网登录入口
2020年初级会计官网登录入口为:全国会计资格评价网,各考生进入官网后,下拉可在左侧看到"考试报名"."准考证打印"."成绩查询"等选项,点 ...
ch454c语言程序实例,CSDN18luck手机客户端下载 -IT新利18官网登录大本营
Linux-0.11 [内核源代码带中文注释] !!SYS_SIZE is the number of clicks (16 bytes) to be loaded.!0x3000 is 0x3000 ...
在线普通法测试软件,法宣在线官网登录平台app
法宣在线官网登录平台app是一个新推出的法律信息服务软件平台.它是为需要法律检查的用户专门创建的.其中将包含很多有用的信息,例如2019年云南法律宣传在线考试的时间,快速整合功能和宣传功能在线登录和在 ...

使用HTML+CSS打造经典登录界面 QQ邮箱链接官网登录

这个一定要理解好，否则会造成明明写好了css样式，效果却不如人意。

使用HTML+CSS打造QQ邮箱登录界面

使用HTML+CSS打造经典登录界面 QQ邮箱链接官网登录相关推荐

最新文章

热门文章

使用HTML+CSS打造经典登录界面 QQ邮箱 链接官网登录

这个一定要理解好，否则会造成明明写好了css样式，效果却不如人意。

使用HTML+CSS打造QQ邮箱登录界面

使用HTML+CSS打造经典登录界面 QQ邮箱 链接官网登录相关推荐

最新文章

热门文章

使用HTML+CSS打造经典登录界面 QQ邮箱链接官网登录

使用HTML+CSS打造经典登录界面 QQ邮箱链接官网登录相关推荐