快捷导航
发新帖
返回列表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>126邮箱登陆页面</title>
<style type="text/css">
#div1 {
        text-align: center;
        width: 996px;
        height: 464px;
}
#toubu {
        width: 996px;
        height: 81px;
        margin: 0;
        padding: 0;
        background-repeat: repeat-x;
        z-index: 1;
        background-image: url(images/bg.jpg);
}
.zi {
        color: rgba(255,255,255,1.00);
        background-repeat: repeat-x;
}
#biao {
        z-index: 1;
        position: absolute;
        top: 20px;
        left: 30px;
        width: 229px;
        height: 53px;
}
#touzi {
        width: 300px;
        position: absolute;
        top: 23px;
        text-align: right;
        left: 650px;
}
a {
        font-size: 12px;
        color: rgba(2,95,27,1);
}
#zuozi {
        text-align: left;
        width: 200px;
        position: absolute;
        top: 200px;
        left: 175px;
        font-size: 14px;
        line-height: 30px;
}
.268 {
        color: rgba(199,68,0,1.00);
        font-size: 20px;
        font-family: "微软雅黑", "Adobe 黑体 Std R";
}
a:link {
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: rgba(127,127,127,1);
}
a:hover {
        text-decoration: underline;
        color: rgba(103,172,0,1);
}
a:active {
        text-decoration: none;
}
#zuobiao {
        width: 145px;
        height: 30px;
        position: absolute;
        top: 125px;
        left: 175px;
}
#zhuce {
        position: absolute;
        top: 285px;
        left: 275px;
        width: 75px;
        height: 28px;
        line-height: 30px;
        font-family: "微软雅黑", "Adobe 黑体 Std R";
        font-size: 12px;
        background-image: url(images/submit.jpg);
}
body,td,th {
        font-size: 12px;
}
#duanxin {
        height: 22px;
        position: absolute;
        top: 325px;
        left: 210px;
        width: 150px;
        text-align: left;
}
#you {
        width: 336px;
        height: 320px;
        position: relative;
        top: 40px;
        left: 425px;
        text-align: left;
        border-left: 1px solid rgba(135,135,135,1.00);
}
#denglu126 {
        position: relative;
        left: 25px;
        top: 23px;
        font-family: "微软雅黑", "Adobe 黑体 Std R";
        font-size: 16px;
        line-height: 17px;
        width: 240px;
}
#yonghudenglu {
        position: absolute;
        left: 25px;
        top: 100px;
        width: 300px;
        line-height: 35px;
}
</style>
</head>

<body>
<div id="div1">
  <header id="toubu">
    <div id="biao"><img src="images/top.jpg" width="229" height="53" alt=""/></div>
    <div class="zi" id="touzi"><a href="#" class="zi">设为首页</a>|<a href="#" class="zi">188财富邮</a>|<a href="#" class="zi">168邮箱</a>|<a href="#" class="zi">帮助</a>|<a href="#" class="zi">网易首页</a></div>
  </header>
  <div id="zuobiao"><img src="images/126logo.gif" width="145" height="30" alt=""/></div>
  <div id="zuozi">距北京奥运开幕还有<span class="268">268</span>天<br>
还没有网易126免费邮?</div>
  <div id="zhuce"><a href="#">注 册</a></div>
  <div id="duanxin"><img src="images/bg1.jpg" width="20" height="17" alt=""/><a href="#">自写短信  <img src="images/bg2.jpg" width="22" height="17" alt=""/></a><a href="#">贺卡</a></div>
  <div id="you">
    <div id="denglu126"><a href="#">你知道这些数据吗?<br>
    网易邮箱精准过滤超过98%的垃圾邮件 &gt;&gt;</a><br>
    <br>
    登录网易126免费邮</div>
    <div id="yonghudenglu">
      <label for="textfield">用户名:</label>
      <input type="text" name="textfield" id="textfield">
      @126.com<br>
      <label for="password">密 码:</label>
      <input type="password" name="password" id="password">
      <a href="#">      忘记密码</a><br>
      <label for="select">版 本:</label>
      <select name="select" id="select">
        <option selected>默认</option>
        <option>逍遥</option>
        <option>极速</option>
      </select>
      <a href="#">升级逍遥3.0</a><br>
      <label>
        <input name="CheckboxGroup1" type="checkbox" id="CheckboxGroup1_0" value="复选框" checked>
        记住用户名</label>
      <label>
        <input name="CheckboxGroup1" type="checkbox" id="CheckboxGroup1_1" value="复选框" checked>
        SSL安全登录</label>
      <br>
      <input type="image" name="imageField" id="imageField" src="images/bg3.jpg">
<br>
    </div>
  </div>
</div>
</body>
</html>



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
举报 使用道具
| 回复

共1个回复 最后回复于 2017-1-21 17:44

勤币 614   学币 0  
沙发
发表于 2017-1-21 17:44:12 | 只看该作者
第一个问题 268实时视图不显示桔色
答:因为你的class用的是数字,样式已失效。

第二个问题 自写短信那里也不能垂直居中
答:给图片设置一个居中样式 vertical-align:middle;

第三个问题 版本选择框如何才能设置成密码一样宽度
答:用户名、密码、版本的表单设置一个统一的宽度就可以了。
举报 使用道具
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表