<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网易邮箱登录</title>
<style type="text/css">
header a{
color: red;
}
input[type=text]{
font-size: 18px;
background-color: rgb(255, 255, 237);
}
input[type^=pass]{
background-color: rgb(85, 170, 255);
font-size: 18px;
}
section img:nth-of-type(1){
background-color: aqua;
}
section li{
color: deepskyblue;
}
footer a{
color: mediumorchid;
}
</style>
</head>
<body>
<!--第一步，先把网页划分结构 该网页大概分为三部分，上中下结构-->
<!--header头部里面分为两部分，左右，左边放logo，右边是文字-->
<header>
<h1><a href="#"><img src="imades/163logo.gif"/></a></h1>
<p>
<a href="#">免费邮</a>
<a href="#"> 企业邮</a>
<a href="#">VIP邮箱</a>
<a href="#">帮助</a>
</p>
</header>
<!--中间的section部分又分为左右结构，左边是图片和无序列表，右边是表单-->
<section>
<!--左边-->
<div>
<img src="imades/imap.jpg" alt=""/>
<ul>
<li>163/126/yeah三大免费邮箱均默认开放</li>
<li>全面支持iPhone/iPad及Android等系统</li>
<li>客户端、手机与网页，实现发送、阅读邮件</li>
</ul>
<a href="#">立即同步普通登录手机号登录</a>
</div>
<!--右边-->
<form action="#" method="get">
<p>
用户名：
<input type="text" name="userName"/>
@163.com
</p>
<p>
密码：
<input type="password" name="psw"/>
</p>
<p>
版本：
<select name=""version id="">
<option value="">默认</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</select>
</p>
<p>
<input type="checkbox" value="autoLogin"/>自动登录
<input type="checkbox" value="ssl" checked/>SSL
</p>
</form>
</section>
<!--底部-->
<footer>
<img src="imades/netease_logo.gif" alt=""/>
<a href="#">关于网易</a>
<a href="#">免费邮 </a>
<a href="#">官方博客</a>
<a href="#">客户服务 </a>
<a href="#">隐私政策</a>|
<a href="#">网易公司版权所有 © 2015-2018</a>
</footer>
</body>
</html>12.13作业
最新推荐文章于 2024-10-04 06:11:34 发布
扫一扫
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
