黑马程序员技术交流社区

标题: 基础测试题第五题有没有完全达到效果的？ [打印本页]
作者: 吴凡    时间: 2012-6-30 00:30
标题: 基础测试题第五题有没有完全达到效果的？
主要是 必填信息 如何黑体 居左 且背景色为爱丽丝蓝。
其次是表格总是感觉看上去大小和题目中给出的效果不一样。
作者: xiaozehope    时间: 2012-6-30 09:24
兄弟，第五道是测试你html代码的基本功底吧，必填信息是加粗了，用<strong></strong>标签包起来，如果你样式没有设置居中或居右的话，默认是居左的，背景颜色你可以用截图工具把焦点放到颜色区域就可以看到rgb格式的颜色编码了。对于表格的效果我却认为基本一样就可以了，不必要完全一样。

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

html页代码：login.html

  2. <html>
  3. <head>
  4. <title>登录页面</title>
  5. <link href="css/login.css" type="text/css" rel="stylesheet" />

  7. </head>
  8. <body>



  12. <div id="main" >
  13.         <div id="top" class="row" ><strong>必填信息</strong></div>
  14.         <div id="middle" >
  15.                 <form id="loginform" action="" method="post" onSubmit="" >
  16.                 <ul class="ul" >
  17.                         <li class="leftli"><lable for="loginname">登录名</lable></li>
  18.                         <li class="rightli"><span>&nbsp;</span><input type="text" id="loginname" name="loginname" />（只能用英文、数字和下划线）</li>
  19.                         <li class="leftli"><lable for="pwd">密码</lable></li>
  20.                         <li class="rightli"><span>&nbsp;</span><input type="password" id="pwd" name="pwd" />（密码必须大于5位，区分大小写）</li>
  21.                         <li class="leftli"><lable for="confirmpwd">确认密码</lable></li>
  22.                         <li class="rightli"><span>&nbsp;</span><input type="password" id="confirmpwd" name="confirmpwd" /></li>
  23.                         <li class="leftli"><lable for="email">邮件地址</lable></li>
  24.                         <li class="rightli"><span>&nbsp;</span><input type="text" id="email" name="email" /></li>
  25.                         <li class="leftli"><lable for="confirmemail">确认邮件地址</lable></li>
  26.                         <li class="rightli"><span>&nbsp;</span><input type="text" id="confirmemail" name="confirmemail" /></li>
  27.                         <li class="onlyli"><span></span><input type="submit" value="提&nbsp;&nbsp;交" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重&nbsp;&nbsp;填" /></li>
  28.                 </ul>
  29.                 </form>
  30.         </div>
  31.        

  33. </div>

  35. </body>
  36. </html>
复制代码
css文件代码：
  1. *{
  2.         margin:0px;
  3.         padding:0px;
  4. }



  8. body{
  9.         margin:0px;
  10.         padding:0px;
  11. }

  13. #main{
  14.         width:600px;
  15.         margin:100px auto 0 auto;
  16. }

  18. .row{
  19.         width:100%;
  20.         height:30px;
  21.         line-height:30px;
  22.         border:1px solid #ccc;
  23. }

  25. #top{       
  26.         background-color:rgb(197,227,253);
  27. }

  29. #middle{
  30.         width:100%;
  31.         height:auto;
  32.         background-color:rgb(247,247,247);
  33. }

  35. .ul{
  36.         float:left;
  37.         display:inline;
  38. }

  40. .ul, .ul li{
  41.         list-style:none outside none;
  42. }

  44. .ul li{
  45.         float:left;
  46.         height:30px;
  47.         line-height:30px;
  48.         border:1px solid #ccc;
  49. }

  51. li span{
  52.         display:inline-block;
  53. }

  55. .leftli{
  56.         width:100px;
  57.         text-align:right;
  58.                
  59. }

  61. .rightli{
  62.         width:496px;       
  63. }

  65. .onlyli {
  66.         width:596px;
  67.         text-align:center;
  68. }

复制代码
作者: 吴凡    时间: 2012-6-30 10:44
谢谢了，感觉你很专业，我对HTML接触就是看了那几天视频，C#入门经典里面我是跟着控件走的，这题刚好不让用VS，然后我就觉得很陌生。
作者: 吴凡    时间: 2012-6-30 10:47
继续追问，在大型网站开发中手写HTML的时候多不多？难道不用设计工具和控件吗？
感觉直接手写HTML出来的效果很原始且开发效率低，毕竟技术是前进的，学会使用新的工具新的开发开发模式还是一定的吧。
作者: xiaozehope    时间: 2012-6-30 11:05
手写是看你个人对html的功底，如果你只会界面设计，那到时候要是有错误了，要你调，你可以调起来比较久，但是你会看懂html那就有可能比较快解决，学习代码不要因为有捷径就走，要先知道不通过捷径你可以实现不，可以了，那就可以用捷径了，个人的想法{:soso_e120:}



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2