论坛

标题: 268实时视图不显示桔色，自写短信那里也不能垂直居中，版本选择框如何才能设置成密码一样宽度？ [打印本页]

作者: 冰封的樱 时间: 2017-1-20 13:52
标题: 268实时视图不显示桔色，自写短信那里也不能垂直居中，版本选择框如何才能设置成密码一样宽度？
<!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%的垃圾邮件 >></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>

作者: yuanxi52028 时间: 2017-1-21 17:44
第一个问题 268实时视图不显示桔色
答：因为你的class用的是数字，样式已失效。

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

第三个问题版本选择框如何才能设置成密码一样宽度
答：用户名、密码、版本的表单设置一个统一的宽度就可以了。

欢迎光临论坛 (http://bbs.qinxue.com/)