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

2019年8月7日 00:30:36html教程评论2.3K views阅读模式

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

html文件

无标题文档

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

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

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

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;
}