<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网易邮箱登录</title>
<style>
p{
font-size: 16px;
}
header a{
font-size: 14px;
color: #F10158;
}
*[type=text]{
background: #FFFFED;
font-size: 18px;
}
*[type*=pass]{
background: #FFFFED;
font-size: 18px;
}
section img:first-child{
width: 200px;
height: 150px;
}
section li{
color: #0099FF;
}
footer a{
font-size: 14px;
color: #9873F2;
}
</style>
</head>
<body>
<!--第一步，先把网页划分结构 该网页大概分为三部分，上中下结构-->
<!--header头部里面分为两部分，左右，左边放logo，右边是文字-->
<header>
<!--左边logo-->
<h1><a href="#"><img src="image/163logo.gif" alt="logo"/></a></h1>
<!--右边超链接-->
<p>
<a href="#">免费邮</a>
<a href="#"> 企业邮</a>
<a href="#">VIP邮箱</a>
<a href="#">帮助</a>
</p>
</header>
<!--中间的section部分又分为左右结构，左边是图片和无序列表，右边是表单-->
<section>
<!--左边-->
<div>
<img src="image/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="image/netease_logo.gif" alt=""/>
<a href="#">关于网易</a>
<a href="#">免费邮 </a>
<a href="#">官方博客</a>
<a href="#">客户服务 </a>
<a href="#">隐私政策</a>|
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>总裁致辞页面</title>
<style>
h2{
font-size: 18px;
}
p{
font-size: 12px;
}
p>a{
font-weight: bold;
color: red;
}
p>.year{
font-style: italic;
font-size: 16px;
color: blue;
}
</style>
</head>
<body>
<h2>总裁致辞</h2>
<hr/>
<img src="image/icon.jpg" alt="高管团队"/>
<p>目前北大青鸟IT教育全体系员工<a>10000</a>余名、授权培训中心<a>180</a>余家、合作院校<a>500</a>余所、覆盖全国<a>90</a>余座城市，市场占有率达到<a>39.8</a>%。</p>
<p>作为IT职业教育的先行者，北大青鸟IT教育创新的职业教育理念和业务经营模式得到了社会的广泛认可：国家人力资源和社会保障部与北大青鸟IT教育实施课程联合认证制度；公司两度入选中华人民共和国商务部评选的“中国连锁经营百强企业”，是迄今为止教育培训领域唯一上榜品牌。公司连续两年荣获 “中国服务业十大优秀特许品牌”称号，并获得中国特许经营协会颁发的中国连锁经营百强和中国特许经营年度大奖；获得新浪颁发的“中国教育杰出贡献奖”和“中国十大品牌教育集团”称号；并赢得 “中国IT公众认知企业金奖”、“本土最具知名度认证奖”、“最佳就业认同奖”、“质量放心用户满意双优品牌”、“最佳实用课程奖”等数十个奖项。人民日报、光明日报、经济日报、解放日报、中国青年报、中国计算机报等几十家权威媒体对公司进行了多方面的报道。</p>
<p><a class="year">2000年</a>，北大青鸟IT教育创造性地将特许经营模式引入到IT职业教育领域，在全国建立“北大青鸟APTECH计算机授权培训中心”。所有中心实行统一经营管理、严格保证教学质量，受到社会和业界的高度认可。发展速度之快、经营规模之大、学员人数之多，在全国众多IT职业培训机构中一枝独秀。成立至今，北大青鸟IT教育先后培养<a>45</a>万名学员进入IT行业。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>员工团队风采页面</title>
<style>
h3{
font-size: 18px;
}
.h3-1{
color: red;
}
#h3-2{
color: green;
}
body p{
font-size: 14px;
}
body img:nth-of-type(3){
width: 300px;
height: 200px;
}
body img:nth-of-type(4){
width: 300px;
height: 200px;
}
.p2~p{
color: blue;
}
a[href]{
font-size: 14px;
color: #640000;
}
</style>
</head>
<body>
<img src="image/recruit-01.jpg"/><img src="image/recruit-02.jpg"/>
<p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员工提供完善的培训与发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企业发展前景、 广阔的个人发展平台、快乐向上的工作环境，是青鸟人一直秉承的核心要素</p>
<h3 class="h3-1">我们的管理团队</h3>
<img src="image/recruit-03.jpg"/><img src="image/recruit-04.jpg"/>
<p class="p2">北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员工提供完善的培训与发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企业发展前景、 广阔的个人发展平台、快乐向上的</p>
<h3 id="h3-2">我们的部门风采</h3>
<img src="image/recruit-05.jpg"/>
<p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才，公司为员工提供完善的培训与发展体系，关注员工成长，同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企业发展前景、 广阔的个人发展空间。
<ul>
<li><a href="">联系我们</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">版权声明</a></li>
<li><a href="">招商加盟</a></li>
</ul>
</body>
</html>
2171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
