/*这是一个简单的由div+Css布局而成的页面,页面整体用id选择器体分四部分,即header ,nav,content 和tooter,其中header又用div分成了logo,banner和tool三部分,在banner里面放了一个可移动的文字标签,而content用class选择器分为main和barside两部分,main用同样的方法分为left,right两部分。nav是导航部分,由无序列表ul组成,content中又由left,left1,left2组成,右同,然而left用class分成tit和con两部分,con内容部分有无序列表和超链接标签制成,右同。left1和left2里制作了一个简单
表单和表格,barside由复选框单选框下拉列表


                上传文件


                隐藏域的使用:
               
               
               
          
    
    

    
    

    
      



@charset "utf-8";
/* CSS Document */
body{
 margin:0;
 padding:0;
 text-align:center;
 margin-left:150px;
 font-size:12px;
 }
.t{
 float:left;
 width:100%;
 height:10px;
 overflow:hidden;
 }
#container{
 width:1000px;
 margin:auto 0;
 text-align:left;
 }

#header{          //header部分
 float:left;
 width:100%;
}
.logo{
 float:left;
 width:180px;
 height:100px;
 background:#F00;
 }

.banner{
 float:left;
 margin-left:10px;
 width:600px;
 height:100px;;
 background:#6CC
}
.banner marquee{        //会移动的文字
 font-size:24px;
 color:#006;
 margin-top:35px;}
.tool{
 float:right;
 width:200px;
 height:100px;
 background:#03F;

 }
#nav{                   //导航
 float:left;
 width:100%;
 height:30px;
 background:#CCC;
 }
#content{                //内容部分
 float:left;
 width:100%;
 height:640px;
 }
.main{
 float:left;
 width:650px;
 }
.left{
 width:430px;
 float:left;
 height:207px;
 }
.left1{
 background-color:#3C3;
 width:430px;
 float:left;
 height:207px;
 }
.left1 table{           //表格
 color:#006;
 margin:20px;}
.left2{
 background-color:#C3F;
 width:430px;
 float:left;
 height:207px;
 }

.tit{
 width:430px;;
 height:30px;
 background:#CCC;
 }
 h3{        //标题设置
 font-size:14px;
 width:100%;
 color:#006;
 margin:0px;
 padding:0px;
 text-align:center;
 line-height:26px;
 }
.con{
 width:430px;;
 height:177px;
 border:1px solid #CCC;
  }
.con ul{       
 margin:5px 5px;
 }
ul li a{
 padding:15px;
 }
.left .cli li{
 float:left;}
.cw_1{
 width:428px !important;
 width:430px;
 }
.right{
 width:200px;
 height:207px; 
 float:right;
 }
.right1{
 width:200px;
 height:207px; 
 float:right;
 background:#F0F;
 }
.right2{
 width:200px;
 height:207px; 
 float:right;
 background:#FC3;
 }
.tit1{
 width:200px;;
 height:30px;
 background:#CCC;
 }
.con1{
 width:200px;;
 height:177px;
 border:1px solid #CCC;
  }
.cw_2{
 width:198px !important;
 width:207px;
 }
.barside{
 float:right;
 width:340px;
 height:100%;
 background:#F66;
  }
.barside form{           //form表单设置
 margin:30px;
 font-size:12px;
 color:#006;
 
 }
#ad{
 float:left;
 width:100%;
 height:100px;
 background:#93C;
 }
#footer{                //脚本
 float:left;
 width:100%;
 height:30px;
 background:#C3C;
 text-align:center;
 border-bottom-left-radius:20px 15px;
 border-bottom-right-radius:20px 15px;
 border:#90C solid 2px;
 }


@charset "utf-8";
/* CSS Document */
          //导航中的无序列表设置
ul{
 float:left;
 margin:0px;
 padding:0PX;
 list-style:none;
}
a{               //a标签
 font-size:12px;
 text-decoration:none;
 }
#nav li{
 float:left;
 width:150px;
 height:30px;
 text-align:center;
 line-height:30px;
 }
#nav .nt{
 width:1px;
 height:14px;
 background:#000;
 margin-top:8px;
 }

你可能感兴趣的:(html,css,div,html,+,css)