code css để tạo ra giao diện trang web Green Simple
Diễn đàn cntt ĐH-TÔN ĐỨC THẮNG.Thân mời các anh em tham gia để diễn đàn phong phú hơn :: Thảo luận chung-Tin tức-Thông báo
Trang 1 trong tổng số 1 trang
code css để tạo ra giao diện trang web Green Simple
/* structure and general styles for site, if you don't want to change the layout only edit the other style sheet */
body {
background: #7E984D url(img/bg.jpg) repeat-x left bottom;
margin: 0;
}
/* header */
#header
{
background-color: #77933d;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
border-bottom: 0;
margin: 5px 0px 0px 0px;
}
#header h1
{
font-size: 3.2em;
margin: 0;
padding: 0;
line-height: 60px;
color: #fff;
}
/* Page Wrapper */
#wrapper {
margin: 0 auto;
width: 922px;
}
/* right column */
#rightcolumn {
float: right;
color: #333;
margin: 0px 0px 5px 0px;
padding: 10px;
width: 196px;
}
#rightcolumn h2 {
color: #333300;
font-size: 1.2em;
line-height: 30px;
padding: 0;
margin: 0;
padding-left: 5px;
}
#rightcolumn ul {
padding: 0;
margin: 0 0 9px 0;
border-top: 1px solid #ccc;
}
#rightcolumn li {border-bottom: 1px solid #ccc; list-style: none; margin: 0; padding: 0;}
#rightcolumn li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 10px;
text-decoration: none;
width: 186px;
}
#rightcolumn li a:hover {
background-color: #ccc;
color: #654;
width: 186px;
}
/* left column */
#leftcolumn
{
font-size: 1.2em;
float: left;
color: #333;
margin-right: 0;
padding: 10px;
width: 679px;
display: inline;
margin-right: 5px;
}
/* footer */
#footer {
width: 923px;
clear: both;
color: #333;
background: #BD9C8C;
margin: 0px 0px 30px 0px;
}
/* top navigation */
.navigation {
background: #D9E1E5 url(img/nav.jpg);
border: 1px solid #D8EBD8;
height: 41px;
clear: both;
margin-bottom: 5px;
}
.navigation a {
background: transparent url(img/nav.jpg) left top repeat-x;
border-right: 1px solid #D8EBD8;
color: #333300;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 18px;
text-decoration: none;
}
.navigation a:hover {
background: transparent url(img/nav.jpg) left bottom;
color: #333300;
}
/* main content wrapper (background image ensures columns are equal */
#maincontent {
background: transparent url(img/main.gif) left top repeat-y;
float: left;
margin-bottom: 5px;
}
/* footer */
/* footer */
#footer {
background: url(img/bgfooter.gif) repeat-x;
background-position: bottom;
color: #FFF;
font: bold 1em sans-serif;
line-height: 34px;
text-align: center;
}
#footer a,.footer a:hover {color: #FFF;}
/* font styles and general content stlyes */
[img][/img]
body {
background: #7E984D url(img/bg.jpg) repeat-x left bottom;
margin: 0;
}
/* header */
#header
{
background-color: #77933d;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
border-bottom: 0;
margin: 5px 0px 0px 0px;
}
#header h1
{
font-size: 3.2em;
margin: 0;
padding: 0;
line-height: 60px;
color: #fff;
}
/* Page Wrapper */
#wrapper {
margin: 0 auto;
width: 922px;
}
/* right column */
#rightcolumn {
float: right;
color: #333;
margin: 0px 0px 5px 0px;
padding: 10px;
width: 196px;
}
#rightcolumn h2 {
color: #333300;
font-size: 1.2em;
line-height: 30px;
padding: 0;
margin: 0;
padding-left: 5px;
}
#rightcolumn ul {
padding: 0;
margin: 0 0 9px 0;
border-top: 1px solid #ccc;
}
#rightcolumn li {border-bottom: 1px solid #ccc; list-style: none; margin: 0; padding: 0;}
#rightcolumn li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 10px;
text-decoration: none;
width: 186px;
}
#rightcolumn li a:hover {
background-color: #ccc;
color: #654;
width: 186px;
}
/* left column */
#leftcolumn
{
font-size: 1.2em;
float: left;
color: #333;
margin-right: 0;
padding: 10px;
width: 679px;
display: inline;
margin-right: 5px;
}
/* footer */
#footer {
width: 923px;
clear: both;
color: #333;
background: #BD9C8C;
margin: 0px 0px 30px 0px;
}
/* top navigation */
.navigation {
background: #D9E1E5 url(img/nav.jpg);
border: 1px solid #D8EBD8;
height: 41px;
clear: both;
margin-bottom: 5px;
}
.navigation a {
background: transparent url(img/nav.jpg) left top repeat-x;
border-right: 1px solid #D8EBD8;
color: #333300;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 18px;
text-decoration: none;
}
.navigation a:hover {
background: transparent url(img/nav.jpg) left bottom;
color: #333300;
}
/* main content wrapper (background image ensures columns are equal */
#maincontent {
background: transparent url(img/main.gif) left top repeat-y;
float: left;
margin-bottom: 5px;
}
/* footer */
/* footer */
#footer {
background: url(img/bgfooter.gif) repeat-x;
background-position: bottom;
color: #FFF;
font: bold 1em sans-serif;
line-height: 34px;
text-align: center;
}
#footer a,.footer a:hover {color: #FFF;}
/* font styles and general content stlyes */
[img][/img]
Similar topics
» them 1 code chay hinh
» Trang site của thầy vương
» code web demo asp
» code php mua sach
» code chạy hình
» Trang site của thầy vương
» code web demo asp
» code php mua sach
» code chạy hình
Diễn đàn cntt ĐH-TÔN ĐỨC THẮNG.Thân mời các anh em tham gia để diễn đàn phong phú hơn :: Thảo luận chung-Tin tức-Thông báo
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|