论坛
标题:
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/)
Powered by Discuz! X3.1