163网页邮箱的实现

夜夜夜璟归

2024-03-13 帮助3人

通过html和css实现以下效果：

学新通

1.界面分析

通过上图可知，该网页都位于浏览器的居中页面，所以开始的时候需要设设置版心，让整个页面居中显示。

然后将页面分为三个部分书写；分别为头部，中间和底部。

其中头部里面再分为两个部分，左边的图片部分，然后设置左浮动，右别的无序列表部分，然后右浮动进行设置。

学新通

然后中间部分大致也分为两个部分，也是左浮动和右浮动进行处理，但是左边盒子里面再分为两个部分，分为上面的图片部分和下边的无序列表部分；右边则可以分为标题部分和下面的table表格部分。

学新通

最后是底部,也是分为两个部分，左边的图片部分，设置为左浮动，和右边的无序列表部分，设置为右浮动。

学新通

2.html代码块：

<body>
<div class="banxing">
<div class="nav">
<div class="nav-left">
<img src="image/163logo.gif" alt="">
</div>
<div class="nav-right">
<ul class="right">
<li><a href="#">免费邮</a></li>
<li><a href="#">企业邮</a></li>
<li><a href="#">VIP邮箱</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="main-left">
<div class="ab">
<img src="image/imap.jpg" alt="">
</div>
<ul >
<li>163/126/yeah三大免费邮箱均默认开放</li>
<li>全面支持iPhone/iPad及Android等系统</li>
<li>客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录</li>
</ul>
</div>
<div class="main-right">
<div class="main-one">
<img src="image/loginIcon.gif" alt="">
<h3>普通登录</h3>
</div>
<form action="" method="POST" name="name1">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username">
@163.com</td>
</tr>
<tr>
<td>密&emsp;码</td>
<td><input type="password" name="pas"></td>
</tr>
<tr>
<td>版&emsp;本</td>
<td>
<select name="moren" id="">
<option value="">默认</option>
<option value="">新版</option>
<option value="">旧版</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="dengl">自动登录 <input type="checkbox" name="dengl" checked>SSL</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="button" value="登录">
<input type="submit" name="button" value="注册">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="foot">
<div class="foot-left">
<img src="image/netease_logo.gif" alt="">
</div>
<div class="foot-right">
<ul>
<li><a href="">关于网易</a></li>
<li><a href="">免费邮</a></li>
<li><a href="">官方博客</a></li>
<li><a href="">客户服务</a></li>
<li><a href="">隐私政策</a><span>|</span></li>
<li><a href="">2022-07-14</a></li>
</ul>
</div>
</div>
</div>
</body>

3.css样式部分：

*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.banxing{
width: 1226px;
margin:0 auto;
/* background-color: red; */
}
/* 头部 */
.nav{
height: 100px;
}
.nav-left{
width: 150px;
height: 76px;
float: left;
}
.nav-left>img{
width: 100%;
height: 100%;
margin: 12px 0;
}
.nav-right{
float: right;
}
.right>li{
font-size: 20px;
line-height: 100px;
float: left;
list-style: none;
}
.right>li>a{
color: black;
margin-left: 15px;
}
.right>li:last-child{
margin-right: 50px;
}
/* main */
.main{
height: 500px;
margin-top: 20px;
}
.main-left{
width: 600px;
margin: 10px;
float: left;
}
.ab{
width: 580px;
height: 300px;
}
.ab>img{
width: 100%;
height: 100%;
}
.main-left>ul{
margin-left: 20px;
margin-top: 10px;
}
.main-left>ul>li{
margin-top: 20px;
font-size: 18px;
font-weight: 500;
}
.main-right{
width: 480px;
float: right;
border: 1px solid black;
}
.main-one{
height: 30px;
margin-top: 20px;
margin-left: 10px;
/* float: left; */
}
img{
float: left;
margin-top: 3px;
}
h3{
line-height: 30px;
float: left;
}
table{
margin: 10px auto;
}
td{
padding-top: 30px;
}
/* foot */
.foot{
background-color:#F7F7F7;
margin-top: 20px;
height: 100px;
}
.foot-left{
float: left;
width: 200px;
}
.foot-left>img{
width: 100%;
margin: 14px 0;
}
.foot-right{
float: right;
}
.foot-right>ul>li{
line-height: 100px;
list-style: none;
float: left;
font-size: 18px;
margin-right: 10px;
}
.foot-right>ul>li>a{
color: black;
}
span{
margin-left:10px;
}
ul>li>a:hover{
color: red;
}

这篇好文章是转载于：学新通技术网

163网页邮箱的实现

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

photoshop扩展功能面板显示灰色怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

photoshop蒙版画笔没反应怎么办