div + css 基本框架_html/css_WEB-ITnose

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

html文件

立即学习“前端免费学习笔记（深入）”；

无标题文档

          Contact Us
          Contact Us
          Contact Us
          Contact Us











                Contact Us
                Contact Us
                Contact Us
                Contact Us





                  Contact Us
                  新闻列表
                  新闻列表
                  新闻列表


                  评论列表


                  技术列表


                  点评列表


















              Contact Us

              Contact Us
              Contact Us
              Contact Us
              Contact Us
              Contact Us



              Contact Us

              Contact Us
              Contact Us
              Contact Us
              Contact Us
              Contact Us



              Contact Us

              Contact Us
              Contact Us
              Contact Us
              Contact Us
              Contact Us





                  Contact Us



                  Contact Us

text1

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.

text2

text3

text4

text5

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: Contact Us

*****, HanKou, WuHan

CSS文件

/*主页面***************************************************/
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**********************************************************/
#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;
}

/******************************************************************************/
/*************************AD’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
}

/****************************************************/
/**************tab’s CSS******************************/
#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;
}

完全代码下载

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3088817.html

div + css 基本框架_html/css_WEB-ITnose

text1

text2

text3

text4

text5

About

Contact Us

关于作者

PHP中文网签约作者

发表回复

div + css 基本框架_html/css_WEB-ITnose

text1

text2

text3

text4

text5

About

Contact Us

关于作者

PHP中文网签约作者

AD推荐 黄金广告位招租... 更多推荐

发表回复

分享到:

请登录

AD推荐黄金广告位招租... 更多推荐