"
Team:ZJU-China/sandbox
From 2013.igem.org
(Difference between revisions)
(Created page with "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...") |
|||
| Line 1: | Line 1: | ||
| - | |||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head> | <head> | ||
| Line 207: | Line 206: | ||
#iGEM_logo img { | #iGEM_logo img { | ||
height: 60px; | height: 60px; | ||
| + | } | ||
| + | |||
| + | /* ----------------------------------------- | ||
| + | iGEM Reset | ||
| + | ----------------------------------------- */ | ||
| + | |||
| + | #globalWrapper { | ||
| + | background-color: transparent; | ||
| + | border: none; | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
| + | #content { | ||
| + | background-color: transparent; | ||
| + | border: none; | ||
| + | padding: 0; | ||
| + | margin: 0; | ||
| + | width: 100%; | ||
| + | overflow: visible; | ||
| + | height: 100%; | ||
| + | } | ||
| + | #bodyContent { | ||
| + | border: none; | ||
| + | padding: 0; | ||
| + | margin: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
| + | #top-section { | ||
| + | height: 15px; | ||
| + | margin: 0px; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | margin-bottom: 0 !important; | ||
| + | padding: 0; | ||
| + | border: none; | ||
| + | font-size: 10px; | ||
| + | } | ||
| + | #p-logo { | ||
| + | height: 1px; | ||
| + | overflow: hidden; | ||
| + | display: none; | ||
| + | } | ||
| + | #search-controls { | ||
| + | overflow: hidden; | ||
| + | display: block; | ||
| + | background: none; | ||
| + | position: absolute; | ||
| + | top: 100px; | ||
| + | right: 40px; | ||
| + | } | ||
| + | #menubar.left-menu { | ||
| + | /*margin-top: -80px; uncomment this when page goes live */ | ||
| + | background: none; | ||
| + | height: 20px; | ||
| + | left: 20px; | ||
| + | float: left; | ||
| + | } | ||
| + | .left-menu ul { | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | .left-menu:hover ul { | ||
| + | visibility: visible; | ||
| + | } | ||
| + | .left-menu:hover ul li a { | ||
| + | color: #666; | ||
| + | } | ||
| + | .left-menu li a:hover { | ||
| + | color: #aaaaff !important; | ||
| + | text-decoration: underline; | ||
| + | } | ||
| + | #menubar.right-menu { | ||
| + | display: block; | ||
| + | width: 300px; | ||
| + | float: left; | ||
| + | margin-top: 2px; | ||
| + | margin-right: 0px; | ||
| + | border: none; | ||
| + | } | ||
| + | .right-menu ul { | ||
| + | width: 300px; | ||
| + | margin: 0px; | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | .right-menu ul li a { | ||
| + | background: none; | ||
| + | color: #666; | ||
| + | } | ||
| + | .right-menu:hover ul { | ||
| + | visibility: visible; | ||
| + | } | ||
| + | #footer-box { | ||
| + | width: 100%; | ||
| + | margin: -10px auto 0 auto; | ||
| + | padding: 20px 0; | ||
| + | } | ||
| + | .visualClear { | ||
| + | display: none; | ||
| + | } | ||
| + | #footer { | ||
| + | border: none; | ||
| + | width: 965px; | ||
| + | margin: 0 auto; | ||
| + | padding: 0; | ||
| + | } | ||
| + | .firstHeading { | ||
| + | display: none; | ||
| + | } | ||
| + | #f-list a { | ||
| + | color: #333; | ||
| + | font-size: 10px; | ||
| + | } | ||
| + | #f-list a:hover { | ||
| + | color: #666; | ||
| + | } | ||
| + | .printfooter { | ||
| + | display: none; | ||
| + | } | ||
| + | #footer ul { | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | } | ||
| + | #footer ul li { | ||
| + | margin-top: 0; | ||
| + | margin-bottom: 0; | ||
| + | margin-left: 10px; | ||
| + | margin-right: 10px; | ||
| + | padding: 0; | ||
| + | } | ||
| + | #search-controls { | ||
| + | display: none; | ||
| + | } | ||
| + | h3#siteSub { | ||
| + | display: none; | ||
| + | } | ||
| + | #contentSub { | ||
| + | display: none; | ||
| + | } | ||
| + | p:first-child { | ||
| + | display: none; | ||
| + | } | ||
| + | #catlinks { | ||
| + | display: none; | ||
| + | } | ||
| + | #footer-box { | ||
| + | display: none; | ||
} | } | ||
--> | --> | ||
Revision as of 08:14, 22 August 2013
说明
顶部颜色：#102B66
底部颜色：#01164B
清除方法
由于所有列都是浮动的，因此，此布局在 .footer 规则中采用 clear:both 声明。此清除方法强制使 .container 了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。如果您的设计要求您从 .container 中删除 .footer，则需要采用其它清除方法。最可靠的方法是在最后一个浮动列之后（但在 .container 结束之前）添加 <br class="clearfloat" /> or <div class="clearfloat"></div>。这具有相同的清除效果。
徽标替换
此布局的 .header 中使用了图像占位符，您可能希望在其中放置徽标。建议您删除此占位符，并将其替换为您自己的链接徽标。
请注意，如果您使用属性检查器导航到使用 SRC 字段的徽标图像（而不是删除并替换占位符），则应删除内嵌背景和显示属性。这些内嵌样式仅用于在浏览器中出于演示目的而显示徽标占位符。
要删除内嵌样式，请确保将 CSS 样式面板设置为“当前”。选择图像，然后在“CSS 样式”面板的“属性”窗格中右键单击并删除显示和背景属性。（当然，您始终可以直接访问代码，并在其中删除图像或占位符的内嵌样式。）
背景
本质上，任何 div 中的背景颜色将仅显示与内容一样的长度。这意味着，如果要使用背景颜色或边框创建侧面列的外观，将不会一直扩展到脚注，而是在内容结束时停止。如果 .content div 将始终包含更多内容，则可以在 .content div 中放置一个边框将其与列分开。
