Team:ZJU-China/sandbox page

From 2013.igem.org

(Difference between revisions)
(Created page with "{{:Team:ZJU-China/template/reset}} {{:Team:ZJU-China/template/page_css}} {{:Team:ZJU-China/template/header}} <div id="main-image"></div> <div class="container"> <div id="contai...")
 
(One intermediate revision not shown)
Line 2: Line 2:
{{:Team:ZJU-China/template/page_css}}
{{:Team:ZJU-China/template/page_css}}
{{:Team:ZJU-China/template/header}}
{{:Team:ZJU-China/template/header}}
 +
<html>
<div id="main-image"></div>
<div id="main-image"></div>
<div class="container">
<div class="container">
   <div id="container-wrapper">
   <div id="container-wrapper">
-
     <div class="sidebar1">
+
     </html>{{:Team:ZJU-China/template/project-menu}}<html>
-
      <section class="ac-container">
+
-
        <div>
+
-
            <input id="ac-1" name="accordion-1" type="radio" checked />
+
-
            <label for="ac-1">About us</label>
+
-
            <article class="ac-small">
+
-
                <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p>
+
-
            </article>
+
-
        </div>
+
-
        <div>
+
-
            <input id="ac-2" name="accordion-1" type="radio" />
+
-
            <label for="ac-2">How we work</label>
+
-
            <article class="ac-medium">
+
-
                <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
+
-
            </article>
+
-
        </div>
+
-
        <div>
+
-
            <input id="ac-3" name="accordion-1" type="radio" />
+
-
            <label for="ac-3">References</label>
+
-
            <article class="ac-large">
+
-
                <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
+
-
            </article>
+
-
        </div>
+
-
        <div>
+
-
            <input id="ac-4" name="accordion-1" type="radio" />
+
-
            <label for="ac-4">Contact us</label>
+
-
            <article class="ac-large">
+
-
                <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
+
-
            </article>
+
-
        </div>
+
-
      </section>
+
-
      <p> 以上链接说明了一种基本导航结构,该结构使用以 CSS 设置样式的无序列表。请以此作为起点修改属性,以生成您自己的独特外观。如果需要弹出菜单,请使用 Spry 菜单、Adobe Exchange 中的菜单构件 或其它各种 javascript 或 CSS 解决方案创建您自己的菜单。</p>
+
-
      <p>如果您想要在顶部进行导航,只需将 ul.nav 移到页面顶部并重新创建样式即可。</p>
+
-
    <!-- end .sidebar1 --></div>
+
     <div class="content">
     <div class="content">
       <h1>说明</h1>
       <h1>说明</h1>
Line 54: Line 22:
   </div>
   </div>
   <div class="clean"></div>
   <div class="clean"></div>
-
<!-- end .container --></div>
+
</div>
<div class="footer">
<div class="footer">
-
   <img src="https://static.igem.org/mediawiki/2013/4/45/ZJU-logo.png" width="235" height="68" alt="The logo of Zhejiang University" longdesc="http://www.zju.edu.cn/" /
+
   <img src="https://static.igem.org/mediawiki/2013/4/45/ZJU-logo.png" width="235" height="68" alt="The logo of Zhejiang University" longdesc="http://www.zju.edu.cn/" />
-
<!-- end .footer -->
+
</div>
</div>
 +
</html>

Latest revision as of 09:28, 23 September 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 中放置一个边框将其与列分开。