div css basic framework_html/css_WEB-ITnose

基本盒子模型框架，非完整项目代码，仅是个结构，如您觉得有用欢迎转载或讨论，但引用请注明文章来源，如有问题请email指出。感谢 ～

 

html文件

  
  

       

         
• Contact Us

         
• Photo

         
• News

         
• Index

       

  

  
  

  

  
  

      

          

           

             

               
• 新闻

               
• 评论

               
• 技术

               
• 点评

             

           

           

             

               

                 
• 新闻列表

                 
• 新闻列表

                 
• 新闻列表

                 
• 新闻列表

               

               

                 
• 评论列表

               

               

                 
• 技术列表

               

               

                 
• 点评列表

               

             

           

         

      

      

          

          
          

          

              

                

username：
                  
                  
                  
                

                

password ：
                  
                  
                  
                

                

                  
                  
                  
                

               

          

      

  

  
  

        

             

              sidebar_1
             

             
• text1

             
• text2

             
• text3

             
• text4

             
• text5

             

             

             

              sidebar_2
             

             
• text1_1

             
• text2_1

             
• text3_1

             
• text4_1

             
• text5_1

             

             

             

              sidebar_3
             

             
• text1_2

             
• text2_2

             
• text3_2

             
• text4_2

             
• text5_2

             

             

        

        

             

                  maintext_top
                 
             

             

                 maintext_text
                < ;h2>text1

There is no pregnant woman to laugh at.
             It is a pure wisdom, a crucible from, a variety of and, it receives as, for Maecenas in bed.
         But as a joke. Fusce malesuada enim vitae lacus
              Euismod vulputate No worries or fears. Maecenas vulputate some hatred.
             Your chocolate is just a foot away. For the spread of the word, always, it needs a gate, it needs a place,
             The real estate is now in the market. He is said to have lived in this street.

                

text2

There is no pregnant woman to laugh at.
             It is a pure wisdom, a crucible from, a variety of and, it receives as, for Maecenas in bed.
         But as a joke. Fusce malesuada enim vitae lacus
              Euismod vulputate No worries or fears. Maecenas vulputate some hatred.
             Your chocolate is just a foot away. For the spread of the word, always, it needs a gate, it needs a place,
             The real estate is now in the market. He is said to have lived in this street.
                

text3

                

There is no pregnant woman to laugh at.
             It is a pure wisdom, a crucible, a variety, and, for Maecenas in bed.
         But as a joke. Fusce malesuada enim vitae lacus
              Euismod vulputate No worries or fears. Maecenas vulputate some hatred.
             Your chocolate is just a foot away. For the spread of the word, always, it needs a gate, it needs a place,
             The real estate is now in the market. He is said to have lived in this street.
                

text4

                

There is no pregnant woman to laugh at.
             It is a pure wisdom, a crucible from, a variety of and, it receives as, for Maecenas in bed.
         But as a joke. Fusce malesuada enim vitae lacus
              Euismod vulputate No worries or fears. Maecenas vulputate some hatred.               Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
              purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.

                 

text5

                 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
              Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
              Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
              euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
              Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
              purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.

             

        

  

  
  

       

           

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
              Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
              Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
              euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
              Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
              purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
           

       

       

           

About

           

Enlighten Designs is an Internet solutions provider that specialises in
              front and back end development. To view some of the web sites we have created view our
              portfolio.

           

We are currently undergoing a 'face lift', so if you have any questions or would
              like more information about the services we provide please feel free to contact us.

           

Contact Us

           

Phone: (***)********

              Fax: ((***)********

              Email: ****@163.com

              *****, HanKou, WuHan

           

More contact information…

       

  

  
  

      

       index - news - photo - Contact Us
      

       Copyright © hello Designs Powered by AAA and AAAA2.0
  

CSS file

/*主页面***************************************************/
html, body {
margin: 0;
padding: 0;
}

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}

/*page-container*******************************************************/
#page-container {
width: 760px;
margin: 0 auto;
}

/*main-nav*****************************************************/
#main-nav {
height: 30px;
padding:20px 20px 0 0;
}

#main-nav ul {
list-style:none;
margin-right:0px;
margin-bottom:0px;
}

#main-nav ul li{
    float: right;
    margin:0 15px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #000000;
}

#main-nav li a {
    font-family: Tahoma, Arial, Helvetica, Sans-serif;
    text-decoration: none;
    color: #333333;
    font-size: 18px;
}

#main-nav li a:hover {
    color: #66FFFF;
    text-decoration: underline;
    background-color: #CCCCCC;
    display: block;
    font-size: 18px;
}

/*header**********************************************************/
#header {
width:760px;
height:150px;
background:url(../img/banna.gif);
margin-bottom:5px;
}

/*main***********************************************************/
#main {
margin-bottom:5px;
}

/*MainLeft*/
#MainLeft {
    padding:5px;
    width:242px;
    border: 1px solid #66FFFF;
}

#MainLeft #user {
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: #66FFFF;
}

#MainLeft #user .textfield{
    background-color: #DFEFF0;

}

#MainLeft #user .button{
    height: 25px;
    width: 60px;
}

/*tab*/
#tab {
width:460px;
height:345px;
float:right;
margin-left:10px;
border: 1px solid #66FFFF;
padding:15px;
}

/*content_1*******************************************************/
#content_1 {
height:700px;
width:758px;
margin-bottom:5px;
border: 1px solid #66FFFF;
}


/*sidebar*/
#sidebar {
float:right;
width:260px;
height:690px;
border: 1px solid #66FFFF;
margin:5px;
}

#sidebar .sidebar_all {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #66FFFF;
    margin-bottom:5px;
}

#sidebar a:link{
 color: #000000;
 text-decoration:none;
}
#sidebar a:visited {
 color: #666666;
 text-decoration:none;
}
#sidebar a:hover {
 color: #66FFFF;
 text-decoration:underline;
}

#sidebar span {
font-size: medium;
color: #66FFFF;
text-decoration: none;
background-color: #CCCCCC;
text-align: center;
line-height: 30px;
display: block;
}

#sidebar ul li
{
margin:5px;
}
/*maintext*/
#maintext {
width:478px;
height:690px;
border: 1px solid #66FFFF;
margin:5px;
}

#maintext a:link{
 color: #000000;
 text-decoration:none;
}
#maintext a:visited {
 color: #666666;
 text-decoration:none;
}
#maintext a:hover {
 color: #000000;
 text-decoration:underline;
}

#maintext span {
    font-size: medium;
    color: #66FFFF;
    text-decoration: none;
    background-color: #66FFFF;
    text-align: center;
    line-height: 30px;
    display: block;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-color: #333333;
    border-bottom-color: #333333;
}

#maintext #maintext_top {
margin-bottom:2px;
}

#maintext #maintext_text {
    overflow-y: scroll;
    height:442px;
}

#maintext #maintext_text.padding {
padding:15px;;
}

#maintext #maintext_text h2 {
margin-bottom:15px;
}

/*content_2*********************************************************************************/
#content_2{
border: 1px solid #66FFFF;
}

/*sidebar-a*/
#sidebar-a {
width: 260px;
float: right;
line-height: 18px;
}

#sidebar-a .padding {
padding: 25px;
}

/*content*/
#content {
margin-top:15px;
margin-right: 260px;
line-height: 18px;
}

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

#content.padding {
padding: 25px;
}

/*footer***********************AD's CSS*****************************************************/
#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
margin-top:2px;
}

#footer a {
color: #c9c9c9;
text-decoration: none;
}

#footer a:hover {
color: #db6d16;
}

#footer #altnav {
float: right;
text-align: right;
}


/****************************************************/
/**************tab's CSS******************************/
#f_div {
MARGIN-TOP: 0px;
OVERFLOW: hidden;
WIDTH: 242px;
HEIGHT: 188px
}

#f_imgDiv {
}

#f_img {
    FILTER: revealTrans(duration=1,transition=23);
    border: 1px solid #66FFFF;
}

#f_buttonDiv {
 FILTER: ALPHA(opacity=70); OVERFLOW: hidden; WIDTH: 100%; POSITION: relative; TOP: -15px; HEIGHT: 16px
}

#all_button {
 BACKGROUND: #fff
}

#f_line {
FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);
FLOAT: right;
WIDTH: 100px;
BACKGROUND-COLOR: #000
}

#f_buttonDiv A {
PADDING-RIGHT: 0px! important;
PADDING-LEFT: 7px; FLOAT: right;
PADDING-BOTTOM: 0px! important;
FONT: bold 9px sans-serif; OVERFLOW: hidden;
BORDER-LEFT: #fff 1px solid;
WIDTH: 22px;
COLOR: #fff;
PADDING-TOP: 1px;
HEIGHT: 15px
}

#f_buttonDiv A:link {
 BACKGROUND: #000
}

#f_buttonDiv A:visited {
 BACKGROUND: #000
}

#f_buttonDiv A:active {
 BACKGROUND: #000
}
#f_buttonDiv A:hover {
 BACKGROUND: #ff840c
}

#f_buttonDiv A.on:link {
 BACKGROUND: #ff840c
}

#page-container #show #imTEXT #tabs1 .main1box #main1 .block li {
padding: 5px;
padding-left: 35px;
text-align: left;
}
#f_buttonDiv A.on:visited {
 BACKGROUND: #ff840c
}

#f_buttonDiv A.on:active {
 BACKGROUND: #ff840c
}
#f_buttonDiv A.on:hover {
 BACKGROUND: #ff840c
}

#f_text {
 VERTICAL-ALIGN: middle;
 LINE-HEIGHT: 20px;
 HEIGHT: 28px;
 TEXT-ALIGN: center
}

/***/
/***/
#tabs1{
 text-align:left;
 width:400px;
}
.menu1box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:405px;
 text-align:left;
}
#menu1{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu1 li{
 float:left;
 display:block;
 cursor:pointer;
 width:72px;
 text-align:center;
 line-height:21px;
 height:28px;
}
#menu1 li.hover{
 background:#fff;
 border-left:1px solid #333;
 border-top:1px solid #333;
 border-right:1px solid #333;
}
.main1box{
 clear:both;
 margin-top:-1px;
 border:1px solid #333;
 height:320px;
 width:450px;
}
#main1 ul{
 display: none;
}

#main1 ul{
 margin-left:30px;
 margin-top:15px;
}

#main1 ul.block{
 display: block;
 margin-left:30px;
 margin-top:15px;
}

#main1 ul li{
margin:5px;
}

a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}

#menu1 li.hover a {
font-family: Tahoma, Arial, Helvetica, Sans-serif;
    display: block;
    color: #333333;
}

#menu1 li.hover a:hover {
display: block;
background:#66FFFF;
}

 

 

完全代码下载