IGEM Wiki提供了默认模板来进行编辑与构建Wiki,下面为代码示例:
此模板由HTML、CSS和jquery组成,原始代码:Template:Example2
注:不知道为什么页面上是空白,没有相关代码...
# HTML
HTML(超文本标记语言)用于标记文本在网页上创建字体、颜色、图形和超链接样式的标准标记语言。
- 色彩(Colors)
- 文本(Text)
<p>文字</p>
- 标题(Titles)
- 链接(Links)
<a href="link url">Link</a>
- 图片(Images)
<img src="image URL">
- 无序列表(Unordered Lists)
- 有序列表(Numbered Lists)
- 嵌套列表(Nested Lists)
- 表格(Tables)
See More
依次为无序列表、有序列表、嵌套列表、表格
<b>Painting Materials</b>
<ul>
<li> Brushes </li>
<li> Watercolors </li>
<li> Acrylic paint </li>
</ul>
2
3
4
5
6
<b>Things to buy: </b>
<ol>
<li> Milk </li>
<li> Eggs </li>
<li> Flour </li>
</ol>
2
3
4
5
6
<ul>
<li> Cold Colors </li>
<li> Warm Colors
<ol>
<li> Red </li>
<li> Orange </li>
<li> Yellow </li>
</ol>
</li>
</ul>
2
3
4
5
6
7
8
9
10
<table>
<tr>
<th> Header 1 </th>
<th> Header 2 </th>
</tr>
<tr>
<td> Content A 1 </td>
<td> Content B 1 </td>
</tr>
<tr>
<td> Content A 2 </td>
<td> Content B 2 </td>
</tr>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
注:其他标签也可以使用,如播放视频的Vedio元素
# 布局类(Layout classes)
列(Columns)
布局类(Layout classes)可以帮助构建页面。当你开始使你的页面具有适当的布局和响应时,你可以使用此类。
三种不同的布局选项(调用class column):
- full_size
- 一行仅一列
- two_thirds_size
- 占一行三分之二的位置,共三行
- third_size
- 占一行三分之一的位置,共三行
# 帮助类(Support Classes)
高亮(Highlight):
高亮需要在另一个布局框中声明,此highlight class
将为div
添加额外的填充和为不同效果设置样式。
<div class="column half_size" >
<div class="highlight">
</div>
</div>
2
3
4
样式高亮类(Styling highlight class):
下方为几种样式突出显示类的方法:
- highlight decoration_background
- 给背景添加灰色背景
- highlight decoration_A_top
- 在顶部添加蓝色的装饰线
- highlight decoration_B_top
- 在顶部添加橙色的线
- highlight decoration_A_full
- 在
div
元素周围添加蓝色边框
- 在
- highlight decoration_B_full
- 在
div
元素周围添加橙色边框
- 在
示例效果:
# 突出与分隔
使用button
类来高亮显示Wiki中链接:
<div class="button_link">
<a href="URL"> EXAMPLE BUTTON </a>
</div>
2
3
使用extra_space
类,它将在div
标签之间增加额外的垂直间距:
<div class="clear extra_space"></div>
此类分隔内容,基本上与编写文本时单击“输入”相同。
# 菜单和模板
菜单由{{IGEM_TopBar
}}模板自动生成。该菜单包含评委将用来评估团队Wiki的所有链接。
该模板还具有所有CSS和JavaScript来使模板起作用。你可以自由的在另外一个模板上编辑你的Wiki页面。
如果需要替换菜单并删除模板,则进行以下步骤:
- 登录IGEM账号
- 打开团队的Wiki页面,在顶部黑色菜单栏点击“edit”
- 在页面中删除{{
IGEM_TopBar
}}
必须在团队Wiki的每个页面上重复才能删除TopBar
样式
如果要清除所有默认的Wiki设置,对团队模板{{TeamName
}}进行编辑:
- 登录IGEM账号
- 转到团队的模板页面,在顶部黑色菜单栏点击
edit
- 将下方代码添加到
style
标签
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
body, html {background-color:white; width: 100%; height: 100%;}
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
2
3
4
5
# CSS
CSS为HTML元素提供样式,属性按字母顺序在模板排序,并且每一个属性都会修改类的功能和外观。下方为常见属性的列表:
- size
- width
- height
- layout
- position
- margin
- padding
- float
- display
- color
- border
- background-color
- font
- text-align
- font-weight
- text decoration
- color
- other
- list-style-type
- cursor
- transition
- 创建一个新的类:
使用特定名称命名类,避免其他代码覆盖它们。
/* highlight with a full orange border decoration */
.igem_2020_team_content .igem_2020_team_column_wrapper .orange_text {
color: #ffb819;
}
2
3
4
- 在现有类下创建一个新的类
下方示例,在高亮类下为橙色背景创建一个新类。
/* highlight with a full orange border decoration */
.igem_2020_team_content .igem_2020_team_column_wrapper .highlight.orange_background {
background-color: #ffb819;
}
2
3
4
- 更改元素的颜色:
找到需要修改元素或类,然后替换颜色代码的十六进制代码。
/* styling for the titles h1 h2 */
.igem_2020_team_content .igem_2020_team_column_wrapper h1,
.igem_2020_team_content .igem_2020_team_column_wrapper h2 {
padding:5px 15px;
border-bottom: 0px;
color: #ffb819;
}
2
3
4
5
6
7
# JQUERY
JavaScript和Jquery使页面中的菜单或其他交互元素起作用,更多信息可以通过https://learn.jquery.com/了解。