基础测试题第五题有没有完全达到效果的？

郑文

主要是必填信息如何黑体居左且背景色为爱丽丝蓝。
其次是表格总是感觉看上去大小和题目中给出的效果不一样。

xiaozehope · xiaozehope

兄弟，第五道是测试你html代码的基本功底吧，必填信息是加粗了，用<strong></strong>标签包起来，如果你样式没有设置居中或居右的话，默认是居左的，背景颜色你可以用截图工具把焦点放到颜色区域就可以看到rgb格式的颜色编码了。对于表格的效果我却认为基本一样就可以了，不必要完全一样。

个人认为这道题目用表格来布局是比较容易的，看不出html的基本功底。我是用div+css布局的，代码如下：

html页代码：login.html

<html>
<head>
<title>登录页面</title>
<link href="css/login.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main" >
<div id="top" class="row" ><strong>必填信息</strong></div>
<div id="middle" >
<form id="loginform" action="" method="post" onSubmit="" >
<ul class="ul" >
<li class="leftli"><lable for="loginname">登录名</lable></li>
<li class="rightli"><span> </span><input type="text" id="loginname" name="loginname" />（只能用英文、数字和下划线）</li>
<li class="leftli"><lable for="pwd">密码</lable></li>
<li class="rightli"><span> </span><input type="password" id="pwd" name="pwd" />（密码必须大于5位，区分大小写）</li>
<li class="leftli"><lable for="confirmpwd">确认密码</lable></li>
<li class="rightli"><span> </span><input type="password" id="confirmpwd" name="confirmpwd" /></li>
<li class="leftli"><lable for="email">邮件地址</lable></li>
<li class="rightli"><span> </span><input type="text" id="email" name="email" /></li>
<li class="leftli"><lable for="confirmemail">确认邮件地址</lable></li>
<li class="rightli"><span> </span><input type="text" id="confirmemail" name="confirmemail" /></li>
<li class="onlyli"><span></span><input type="submit" value="提  交" />    <input type="reset" value="重  填" /></li>
</ul>
</form>
</div>
</div>
</body>
</html>

复制代码

css文件代码：

*{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
}
#main{
width:600px;
margin:100px auto 0 auto;
}
.row{
width:100%;
height:30px;
line-height:30px;
border:1px solid #ccc;
}
#top{
background-color:rgb(197,227,253);
}
#middle{
width:100%;
height:auto;
background-color:rgb(247,247,247);
}
.ul{
float:left;
display:inline;
}
.ul, .ul li{
list-style:none outside none;
}
.ul li{
float:left;
height:30px;
line-height:30px;
border:1px solid #ccc;
}
li span{
display:inline-block;
}
.leftli{
width:100px;
text-align:right;
}
.rightli{
width:496px;
}
.onlyli {
width:596px;
text-align:center;
}

复制代码

吴凡 · 吴凡

谢谢了，感觉你很专业，我对HTML接触就是看了那几天视频，C#入门经典里面我是跟着控件走的，这题刚好不让用VS，然后我就觉得很陌生。

吴凡 · 吴凡

继续追问，在大型网站开发中手写HTML的时候多不多？难道不用设计工具和控件吗？
感觉直接手写HTML出来的效果很原始且开发效率低，毕竟技术是前进的，学会使用新的工具新的开发开发模式还是一定的吧。

xiaozehope · xiaozehope

手写是看你个人对html的功底，如果你只会界面设计，那到时候要是有错误了，要你调，你可以调起来比较久，但是你会看懂html那就有可能比较快解决，学习代码不要因为有捷径就走，要先知道不通过捷径你可以实现不，可以了，那就可以用捷径了，个人的想法{:soso_e120:}

帐号		自动登录	找回密码
密码			加入黑马

基础测试题第五题有没有完全达到效果的？

评分

4 个回复

评分