学习前端心得
学习了半年，觉得自己一事无成。就算是叫握现在立刻做个表单都不会，排版这个东西真的不容小看，后悔一味的一个头冲进js的世界，搞得现在开始做时，怎么下手都不知道，刚刚学习前端的同学，切记快速进入js，先把html和css搞懂，多做练习，不要弄得跟我一样，下手都不知所措，切记切记，这个寒假必须要补习，下面是一个别人做的表单：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>Untitled Document</title> 6 <style type="text/css"> 7 body{ 8 font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 9 font-size:12px; 10 } 11 p, h1, form, button{border:0; margin:0; padding:0;} 12 .spacer{clear:both; height:1px;} 13 /* ----------- My Form ----------- */ 14 .myform{ 15 margin:0 auto; 16 width:400px; 17 padding:14px; 18 } 19 /* ----------- basic ----------- */ 20 #basic{ 21 border:solid 2px #DEDEDE; 22 } 23 #basic h1 { 24 font-size:14px; 25 font-weight:bold; 26 margin-bottom:8px; 27 } 28 #basic p{ 29 font-size:11px; 30 color:#666666; 31 margin-bottom:20px; 32 border-bottom:solid 1px #dedede; 33 padding-bottom:10px; 34 } 35 #basic label{ 36 display:block; 37 font-weight:bold; 38 text-align:right; 39 width:140px; 40 float:left; 41 } 42 #basic .small{ 43 color:#666666; 44 display:block; 45 font-size:11px; 46 font-weight:normal; 47 text-align:right; 48 width:140px; 49 } 50 #basic input{ 51 float:left; 52 width:200px; 53 margin:2px 0 30px 10px; 54 } 55 #basic button{ 56 clear:both; 57 margin-left:150px; 58 background:#888888; 59 color:#FFFFFF; 60 border:solid 1px #666666; 61 font-size:11px; 62 font-weight:bold; 63 padding:4px 6px; 64 } 65 66 67 /* ----------- stylized ----------- */ 68 #stylized{ 69 border:solid 2px #b7ddf2; 70 background:#ebf4fb; 71 } 72 #stylized h1 { 73 font-size:14px; 74 font-weight:bold; 75 margin-bottom:8px; 76 } 77 #stylized p{ 78 font-size:11px; 79 color:#666666; 80 margin-bottom:20px; 81 border-bottom:solid 1px #b7ddf2; 82 padding-bottom:10px; 83 } 84 #stylized label{ 85 display:block; 86 font-weight:bold; 87 text-align:right; 88 width:140px; 89 float:left; 90 } 91 #stylized .small{ 92 color:#666666; 93 display:block; 94 font-size:11px; 95 font-weight:normal; 96 text-align:right; 97 width:140px; 98 } 99 #stylized input{ 100 float:left; 101 font-size:12px; 102 padding:4px 2px; 103 border:solid 1px #aacfe4; 104 width:200px; 105 margin:2px 0 20px 10px; 106 } 107 #stylized button{ 108 clear:both; 109 margin-left:150px; 110 width:125px; 111 height:31px; 112 background:#666666 url(img/button.png) no-repeat; 113 text-align:center; 114 line-height:31px; 115 color:#FFFFFF; 116 font-size:11px; 117 font-weight:bold; 118 } 119 120 </style> 121 </head> 122 123 <body> 124 <div id="basic" class="myform"> 125 <form id="form1" name="form1" method="post" action=""> 126 <h1>Sign-up form</h1> 127 <p>This is the basic look of my form without table</p> 128 <label>Name 129 <span class="small">Add your name</span> 130 </label> 131 <input type="text" name="textfield" id="textfield" /> 132 133 <label>Email 134 <span class="small">Add a valid address</span> 135 </label> 136 <input type="text" name="textfield" id="textfield" /> 137 138 <label>Password 139 <span class="small">Min. size 6 chars</span> 140 </label> 141 <input type="text" name="textfield" id="textfield" /> 142 <button type="submit">Sign-up</button> 143 <div class="spacer"></div> 144 145 146 </form> 147 </div> 148 149 <br/><br/><br/> 150 151 <div id="stylized" class="myform"> 152 <form id="form1" name="form1" method="post" action=""> 153 <h1>Sign-up form</h1> 154 <p>This is the basic look of my form without table</p> 155 <label>Name 156 <span class="small">Add your name</span> 157 </label> 158 <input type="text" name="textfield" id="textfield" /> 159 160 <label>Email 161 <span class="small">Add a valid address</span> 162 </label> 163 <input type="text" name="textfield" id="textfield" /> 164 165 <label>Password 166 <span class="small">Min. size 6 chars</span> 167 </label> 168 <input type="text" name="textfield" id="textfield" /> 169 <button type="submit">Sign-up</button> 170 <div class="spacer"></div> 171 172 </form> 173 </div> 174 175 </body> 176 </html>
