此篇博文的重点不是布局,只是单纯的记录下自己一直忽视的知识点。效果图与下图类似,只是没有滚动条。
刚开始,本人想到用form表单做,程序如下:
<!DOCTYPE html >< html >< head lang= "en" >< meta charset= "UTF-8" >< title ></ title >< link rel= "stylesheet" href= "ex1.css" /></ head >< body >< form action= "" style= " background-color : #eeeeee ; width : 400 px ; margin : 0 auto ; border : 1 px solid #aaaaaa ; position : relative ; " >< label for= "" style= " position : absolute ; top : - 10 px ; left : 0 ; " >< b >Your Contact Details</ b ></ label >< br />< label for= "name" >Name:(Required)</ label >< br />< input type= "text" id= "name" />< br />< br />< label for= "email" >Email Address:</ label >< br />< input type= "text" id= "email" />< br />< br />< label for= "web" >Web Address:</ label >< br />< input type= "text" id= "web" /></ form ></ body ></ html >
<!DOCTYPE html >< html >< head lang= "en" >< meta charset= "UTF-8" >< title ></ title >< link rel= "stylesheet" href= "ex1.css" /></ head >< body >< fieldset action= "" style= " width : 500 px ; margin : 0 auto ; background-color : #F5F5F5 " >< legend > Your Contact Details </ legend >< label for= "name" > Name:(Required) </ label >< br />< input type= "text" id= "name" />< br />< br />< label for= "email" > Email Address: </ label >< br />< input type= "text" id= "email" />< br />< br />< label for= "web" > Web Address: </ label >< br />< input type= "text" id= "web" /></ fieldset ></ body ></ html >
fieldset标签,表示表单分组。为了识别每个fieldset的用途,会用到legend元素。legend元素用来添加分组说明标签。