Difference between revisions of "Template:Team:NUDT CHINA/CSS"

(Created page with "{{Template_All_Teams}} <!-- Declare that you are going to use html code instead of wiki code --> <html> <!-- Start of CSS--> <style type="text/css"> →‎PAGE LAYOUT: ...")
 
Line 1: Line 1:
 
{{Template_All_Teams}}
 
{{Template_All_Teams}}
−
 
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
 +
<head>
 +
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
  
−
<!-- Start of CSS-->
+
<!--RESET-->
 
<style type="text/css">
 
<style type="text/css">
−
 
+
.clearStyle {
−
/* PAGE LAYOUT */
+
margin: 0;
−
 
+
padding: 0;
−
/* Change Background color*/
+
border: 0;
−
body {
+
font-size: 100%;
−
background-color: #fff;
+
font: inherit;
 +
vertical-align: baseline;
 
}
 
}
−
 
+
body {
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
background-color: #f3f3f3;
−
#mainContainer {
+
background-image: url(https://static.igem.org/mediawiki/2015/8/8a/Team_NUDT_CHINA_Soft_wallpaper.png);
−
width: 978px;
+
background-repeat: repeat;
−
overflow:hidden;
+
background-attachment: fixed;
−
float:left;
+
background-position: 0px 0px;  
−
margin-left:20px;
+
height: 100%;
−
margin-bottom: 10px;
+
width: auto;
−
background-color: #fff;  
+
−
border-bottom: 14px solid #565656;
+
−
border-right: 2px solid #565656;
+
−
border-left: 2px solid #565656;
+
−
border-top: 2px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
 
}
 
}
−
 
+
</style>
−
/* Creates the container for the menu */
+
<!--MENU-->
−
#menuContainer  {  
+
<style type="text/css">
−
float:left;
+
#menu
−
width: 134px;
+
{
−
padding: 20px 0px;
+
    position: fixed;
−
border-top: 14px solid #565656;
+
    top: 30px;  
−
background-color: #E8E8E9;
+
left: 0px;
 
}
 
}
 +
#menu img
 +
{
 +
margin-left: 30px;
 +
margin-bottom: 0px
 +
}
 +
#menu ul
 +
{
 +
list-style-type:none;
 +
padding: 0;
 +
border: 0;
  
−
/* Creates the container for the content */
+
}
−
#contentContainer {
+
#menu li
−
padding-top:20px;
+
{
−
padding-right:10px;
+
position: relative;
−
margin-bottom: 20px;
+
−
width: 814px;
+
−
padding-left: 20px;
+
−
float: left;
+
−
background-color: #fff;
+
−
border-top: 14px solid #565656;
+
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
font-size: 16px;
 
}
 
}
−
 
+
#menu a
−
/*Set up height place holder for the banner*/
+
{
−
#bannerContainer {
+
position: relative;
−
height:200px;
+
display: inline-block;
−
margin:auto;
+
margin: 8px 0px 0px 0px;
−
text-align:center;
+
    padding: 0.3em .5em 0.3em;
−
color: #24B694;
+
    text-decoration: none;
 +
background-color: #ffffff;
 +
color: #888887;
 +
border-radius: 0 .4em .4em 0;
 +
outline: none;
 +
cursor: pointer;
 
}
 
}
−
 
+
#menu a.b
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
{
−
 
+
position: relative;
−
/*Change the styling of text for everything inside main container*/
+
display: inline-block;
−
#mainContainer p {
+
margin: 1px 0px;
−
font-size: 13px;
+
    padding: 0.3em .5em 0.3em;
−
color: #000000;
+
    text-decoration: none;
 +
background-color: #ffffff;
 +
outline: none;
 +
cursor: pointer;
 +
background-color: #888887;
 +
color: #ffffff;
 +
border-radius: 0 1em 1em 0;
 +
font-size: 14px;
 +
}
 +
#menu a:hover
 +
{
 +
background-color: #ffffff;
 +
color:#d82545;
 +
}
 +
#menu a.b:hover
 +
{
 +
background-color: #888887;
 +
color:#f9d24b;
 +
}
 +
#menu span
 +
{
 +
padding-left: 10px;
 +
padding-right: 10px;
 
}
 
}
−
+
</style>
−
/*This changes the color and font family */
+
<!--NAVIGATION-->
−
#contentContainer h1, h2, h3, h4, h5, h6 {  
+
<style type="text/css">
−
color: #565656;
+
#navigation
−
border-bottom: none;
+
{
−
font-weight: bold;
+
    position: fixed;
 +
    top: 50px;
 +
right: 0px;
 +
text-align: right;
 +
}
 +
#navigation img
 +
{
 +
margin-right: 30px;
 +
margin-top: 0px;
 +
}
 +
#navigation ul
 +
{
 +
list-style-type:none;
 +
border: 0;
 +
}
 +
#navigation li
 +
{
 +
position: relative;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
−
margin-top:10px;
+
font-size: 16px;
 
}
 
}
−
 
+
#navigation a
−
/*Style of the links - links are different inside the menu */
+
{
−
#contentContainer a {  
+
position: relative;
−
font-weight: bold;
+
display: inline-block;
−
color: #23b593;
+
margin: 8px 0px 0px 0px;
 +
    padding: 0.3em .5em 0.3em;
 +
    text-decoration: none;
 +
background-color: #ffffff;
 +
color: #888887;
 +
border-radius: .4em 0em 0em .4em;
 +
outline: none;
 +
cursor: pointer;
 
}
 
}
−
 
+
#navigation a.b
−
  /* Styling links on hover- links are different inside the menu */
+
{
−
#contentContainer a:hover {
+
position: relative;
−
color: #59bf92;
+
display: inline-block;
 +
margin: 1px 0px;
 +
    padding: 0.3em .5em 0.3em;
 +
    text-decoration: none;
 +
background-color: #ffffff;
 +
outline: none;
 +
cursor: pointer;
 +
background-color: #888887;
 +
color: #ffffff;
 +
border-radius: 1em 0em 0em 1em;
 +
font-size: 14px;
 
}
 
}
−
 
+
#navigation a:hover
−
/*Change the styling of tables */
+
{
−
        #contentContainer table {
+
background-color: #ffffff;
−
    border: 1px solid #565656;
+
color:#d82545;
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
−
 
+
−
/*Change the styling of table cells*/
+
−
    #contentContainer  td {
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
−
 
+
−
/*Change the styling of table headers */
+
−
    #contentContainer th {
+
−
    background-color: #E8E8E9;
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
−
 
+
−
 
+
−
 
+
−
/*MENU STYLING */
+
−
 
+
−
/*Styling for the links in the menu */
+
−
#menuContainer a {
+
−
color: #565656;
+
−
text-decoration:none;
+
−
font-weight: bold;
+
 
}
 
}
−
 
+
#navigation a.b:hover
−
/* Sets the style for lists inside menuContainer  */
+
{
−
#menuContainer ul {  
+
background-color: #888887;
−
list-style: none;
+
color:#f9d24b;
−
margin-left:0px;
+
 
}
 
}
−
 
+
#navigation span
−
/*Styles the list items to become menu buttons */
+
{
−
#menuContainer ul li {  
+
padding-left: 10px;
−
text-align: center;
+
padding-right: 10px;
−
display: block;
+
}
−
width: 100%;
+
</style>
−
height:30px;
+
<!--MAINCONTAINER-->
−
padding-top:10px;
+
<style type="text/css">
 +
#mainContainer
 +
{
 +
clear: both;
 +
width: 900px;
 +
margin: 30px 200px;
 +
padding: 30px 0px;
 +
font-family: 'verdana',sans-serif;
 +
background: #fff;
 +
box-shadow: 0 3px 8px rgba(0,0,0,.1);
 +
position: relative;
 
}
 
}
 +
#mainContainer ul
 +
{
 +
list-style-position:inside;
 +
padding: 10px 50px;
 +
border: 0;
  
−
/*For the menu buttons, changes the color when hovering*/
 
−
#menuContainer li:hover {
 
−
color:  #FFF;
 
−
background-color: #24B694;
 
 
}
 
}
−
 
+
#mainContainer li
−
/*Submenus are not displayed as default*/
+
{
−
#menuContainer li ul {
+
padding: 0;
−
display: none;
+
border: 0;
−
padding-top:15px;
+
−
margin-left: -19px;
+
 
}
 
}
  
−
/*Submenus are displayed when hovering the menu button */
+
#mainContainer p{
−
#menuContainer li:hover ul {
+
text-decoration: none;
−
/*display: inline-block; */
+
font-family: "Trebuchet MS", Helvetica, sans-serif;
−
display: block;  
+
color: #888887;
−
position: absolute;  
+
position: relative;
−
float:right;
+
padding: 10px 50px;
−
margin-left: 134px;
+
font-size: 16px;
−
margin-top:-42px;
+
}
−
}
+
#mainContainer a {
−
 
+
position: relative;
−
/*Style the submenu buttons*/
+
    text-decoration: none;
−
#menuContainer li ul li{
+
background-color: #c3c3c3;
−
background-color: #59BF92;  
+
color: #888887;
−
padding-left:20px;
+
−
padding-right:20px;
+
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
 
}
 
}
  
−
/*CLASSES */
+
#mainContainer a:hover
−
 
+
{
−
/*Clear class for all the pages, adds spacing too*/
+
text-decoration:underline;
−
.clear{
+
color:#d82545;
−
clear:both;
+
}
−
height: 10px;
+
#mainContainer h1, h2, h3, h4, h5, h6{
 +
color: #444;
 +
margin: 20px 0px;
 +
padding:4px 8px;
 +
letter-spacing: -1px;
 +
text-transform: uppercase;
 +
position: relative;
 +
}
 +
#mainContainer h1 {
 +
font:bold 28px/12px 'verdana',sans-serif;
 +
border-left: 10px solid #444;
 +
}
 +
#mainContainer h2 {
 +
font:bold 24px/10px 'verdana',sans-serif;
 +
border-left: 20px solid #444;
 +
}
 +
#mainContainer h3 {
 +
font:bold 22px/8px 'verdana',sans-serif;
 +
border-left: 30px solid #444;
 +
}
 +
#mainContainer h4 {
 +
font:bold 22px/6px 'verdana',sans-serif;
 +
border-left: 35px solid #444;
 +
}
 +
#mainContainer h5 {
 +
font:bold 20px/4px 'verdana',sans-serif;
 +
border-left: 40px solid #444;
 +
}
 +
#mainContainer h6 {
 +
font:bold 18px/2px 'verdana',sans-serif;
 +
border-left: 45px solid #444;
 
}
 
}
−
 
−
 
−
/* highlight box for special messages */
 
−
    .highlightBox {
 
−
        width:500px;
 
−
        margin:auto;
 
−
        background-color: #E8E8E9;
 
−
margin-bottom: 15px;
 
−
margin-top: 15px;
 
−
padding: 15px;
 
−
padding-top: 5px;
 
−
    }
 
−
 
−
 
 
</style>
 
</style>
−
<!-- End of CSS -->
+
</head>
−
 
+
<body>
−
 
+
<div id = "menu">
−
<!-- Start of the template html elements. -->
+
<img src="https://static.igem.org/mediawiki/2015/9/99/Menu.png"/>
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
<ul>   
−
 
+
<li><a id = "HOME" href="https://2015.igem.org/Team:NUDT_CHINA"><span>HOME</span></a></li>
−
 
+
−
<div id="bannerContainer">
+
<li><a id = "PROJECT" href = "#"><span>PROJECT</span></a></li>
−
<img src="https://static.igem.org/mediawiki/2015/0/06/Team_NUDT_CHINA_banner.jpg" style="top-margin: 15px; left-margin: 15px;"/>
+
<li><a id = "Description" href = "https://2015.igem.org/Team:NUDT_CHINA/Description" class = "b"><span>Description</span></a></li>
−
<!-- <br><br>
+
<li><a id = "Experiments" href = "https://2015.igem.org/Team:NUDT_CHINA/Experiments" class = "b"><span>Experiments &amp; Protocols</span></a></li>
−
<h2> Add a banner to your wiki! </h2>
+
<li><a id = "Results" href="https://2015.igem.org/Team:NUDT_CHINA/Results"  class = "b"><span>Results</span></a></li>
−
+
<li><a id = "Design" href="https://2015.igem.org/Team:NUDT_CHINA/Design" class = "b"><span>Design</span></a></li>
−
<p>You can make the image 980px by  200px</p>
+
−
<p> Remember to call the file: "<i>Team_NUDT_CHINA_banner.jpg</i>" </p>
+
<li><a id = "PARTS" href = "#"><span>PARTS</span></a></li>
−
--> </div>
+
<li><a id = "Team" href = "https://2015.igem.org/Team:NUDT_CHINA/Parts" class = "b"><span>Team Parts</span></a></li>
−
 
+
<li><a id = "Basic" href = "https://2015.igem.org/Team:NUDT_CHINA/Basic_Part" class = "b"><span>Basic Parts</span></a></li>
−
<!-- Start of menu -->
+
<li><a id = "Composite" href="https://2015.igem.org/Team:NUDT_CHINA/Composite_Part"  class = "b"><span>Composite Parts</span></a></li>
−
<div id="menuContainer">
+
<li><a id = "Part" href="https://2015.igem.org/Team:NUDT_CHINA/Part_Collection" class = "b"><span>Part Collection</span></a></li>
−
 
+
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
−
<ul>
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA"><li>HOME</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Team"><li>TEAM</li></a>
+
−
 
+
−
<a href="#"><li>PROJECT
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Experiments"><li>Experiments &amp; Protocols</li></a>
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Design"><li>Design</li></a>
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="#"><li>PARTS
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Part_Collection"><li>Part Collection</li></a>
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Notebook"><li>NOTEBOOK</li></a>
+
−
     
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Attributions"><li>ATTRIBUTIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Collaborations"><li>COLLABORATIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Practices"><li>HUMAN PRACTICES</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Safety"><li>SAFETY</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Modeling"><li>MODELING</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Measurement"><li>MEASUREMENT</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Software"><li>SOFTWARE</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
  
−
<!-- Start of test -->
+
<li><a id = "NOTEBOOK" href="https://2015.igem.org/Team:NUDT_CHINA/Notebook"><span>NOTEBOOK</span></a></li>
−
<a href="https://2015.igem.org/Team:NUDT_CHINA/Temporary Test"><li>TEST</li></a>
+
<li><a id = "ATTRIBUTIONS" href="https://2015.igem.org/Team:NUDT_CHINA/Attributions"><span>ATTRIBUTIONS</span></a></li>
−
<!-- End of test -->
+
<li><a id = "COLLABORATIONS" href="https://2015.igem.org/Team:NUDT_CHINA/Collaborations"><span>COLLABORATIONS</span></a></li>
 +
<li><a id = "HUMAN" href="https://2015.igem.org/Team:NUDT_CHINA/Practices"><span>HUMAN PRACTICES</span></a></li> 
 +
<li><a id = "SAFETY" href="https://2015.igem.org/Team:NUDT_CHINA/Safety"><span>SAFETY</span></a></li>
 +
<li><a id = "MODELING" href="https://2015.igem.org/Team:NUDT_CHINA/Modeling"><span>MODELING</span></a></li> 
 +
<li><a id = "MEASUREMENT" href="https://2015.igem.org/Team:NUDT_CHINA/Measurement"><span>MEASUREMENT</span></a></li> 
 +
<li><a id = "SOFTWARE" href="https://2015.igem.org/Team:NUDT_CHINA/Software"><span>SOFTWARE</span></a></li>
 +
<li><a id = "ENTREPRENEURSHIP" href="https://2015.igem.org/Team:NUDT_CHINA/Entrepreneurship"><span>ENTREPRENEURSHIP</span></a></li> 
 +
</ul>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
$('#menu li a').hover( 
 +
function() { 
 +
$(this).animate({'paddingLeft': '1.2em', 'paddingRight': '1.2em'}, 'fast');
 +
}, 
 +
function() {
 +
$(this).animate({'paddingLeft': '0.5em', 'paddingRight': '0.5em'}, 'fast'); 
 +
}
 +
);
 +
});
 +
</script> 
 +
    </div>
 +
<div id = "navigation">
 +
<ul> 
 +
<li><a href="#pos1"><span>Title 1</span></a></li>
 +
 +
<li><a href = "#pos2"><span>Title 2</span></a></li>
 +
<li><a href = "#pos2" class = "b"><span>Title 2.1</span></a></li>
 +
<li><a href = "#pos3" class = "b"><span>Title 2.2</span></a></li>
  
−
</ul>
+
<li><a href = "#pos4"><span>Title 3</span></a></li>
−
</div>
+
<li><a href = "#pos4" class = "b"><span>Title 3.1</span></a></li>
−
<!-- End of menu  -->
+
  
−
<!-- Start of content -->
+
<li><a href = "#pos5"><span>Title 4</span></a></li>
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
<li><a href = "#pos6"><span>Title 5</span></a></li>
 +
</ul>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
$('#navigation li a').hover( 
 +
function() { 
 +
$(this).animate({'paddingLeft': '1.2em', 'paddingRight': '1.2em'}, 'fast');
 +
}, 
 +
function() {
 +
$(this).animate({'paddingLeft': '0.5em', 'paddingRight': '0.5em'}, 'fast'); 
 +
}
 +
);
 +
});
 +
</script> 
 +
<img src="https://static.igem.org/mediawiki/2015/9/93/Team_NUDT_CHINA_Navigate.png"/>
 +
    </div>
 +
<div id = "mainContainer" class = "clearStyle">
 +
<h1 id = "pos1">Title 1</h1>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<h2 id = "pos2" >Title 2.1</h2>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<h3 id = "pos3" >Title 2.2</h3>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<h4 id = "pos4" >Title 3.1 </h4>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<h5 id = "pos5" >Title 4</h5>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<h6 id = "pos6" >Title 5</h6>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
 +
<ul> 
 +
<li><a href="http://wwww.baidu.com">BAIDU</a></li>
 +
<li><a href="http://wwww.baidu.com">BAIDU</a></li>
 +
<li><a href="http://wwww.baidu.com">BAIDU</a></li>
 +
</ul>
 +
</div>
 +
</body>
 
</html>
 
</html>

Revision as of 03:41, 28 July 2015

Title 1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

Title 2.1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

Title 2.2

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

Title 3.1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

Title 4

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

Title 5

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."