<!DOCTYPE HTML>
<html>
<head>
<title>simplestyle_7</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&v1" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<h1>simplestyle<a href="#">_7</a></h1>
<div class="slogan">Cool slogan goes here!</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="current" in the li tag for the selected page - to highlight which page you're on -->
<li><a href="index.html">Home</a></li>
<li class="current"><a href="examples.html">Examples</a></li>
<li><a href="page.html">A Page</a></li>
<li><a href="another_page.html">Another Page</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div id="site_content">
<div id="sidebar_container">
<img class="paperclip" src="style/paperclip.png" alt="paperclip" />
<div class="sidebar">
<!-- insert your sidebar items here -->
<h3>Latest News</h3>
<h4>What's the News?</h4>
<h5>1st July 2011</h5>
<p>Put your latest news item here, or anything else you would like in the sidebar!<br /><a href="#">Read more</a></p>
</div>
<img class="paperclip" src="style/paperclip.png" alt="paperclip" />
<div class="sidebar">
<h3>Newsletter</h3>
<p>If you would like to receive our newletter, please enter your email address and click 'Subscribe'.</p>
<form method="post" action="#" id="subscribe">
<p style="padding: 0 0 9px 0;"><input class="search" type="text" name="email_address" value="your email address" onclick="javascript: document.forms['subscribe'].email_address.value=''" /></p>
<p><input class="subscribe" name="subscribe" type="submit" value="Subscribe" /></p>
</form>
</div>
<img class="paperclip" src="style/paperclip.png" alt="paperclip" />
<div class="sidebar">
<h3>Latest Blog</h3>
<h4>Website Goes Live</h4>
<h5>1st July 2011</h5>
<p>We have just launched our new website. Take a look around, we'd love to know what you think.....<br /><a href="#">read more</a></p>
</div>
</div>
<div id="content">
<!-- insert the page content here -->
<h1>Examples</h1>
<p>This page contains examples of all the styled elements available as part of this design. Use this page for reference, whilst you build your website.</p>
<h2>Headings</h2>
<p>These are the different heading formats:</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h2>Text</h2>
<p>The following examples show how the text (within '<p></p>' tags) will appear:</p>
<p><strong>This is an example of bold text</strong></p>
<p><i>This is an example of italic text</i></p>
<p><a href="#">This is a hyperlink</a></p>
<h2>Lists</h2>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h2>Images</h2>
<p>images can be placed on the left, in the center or on the right:</p>
<span class="left"><img src="style/graphic.png" alt="example graphic" /></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum.
</p>
<span class="center"><img src="style/graphic.png" alt="example graphic" /></span>
<span class="right"><img src="style/graphic.png" alt="example graphic" /></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</p>
<h2>Tables</h2>
<p>Tables should be used to display data and not used for laying out your website:</p>
<table style="width:100%; border-spacing:0;">
<tr><th>Item</th><th>Description</th></tr>
<tr><td>Item 1</td><td>Description of Item 1</td></tr>
<tr><td>Item 2</td><td>Description of Item 2</td></tr>
<tr><td>Item 3</td><td>Description of Item 3</td></tr>
<tr><td>Item 4</td><td>Description of Item 4</td></tr>
</table>
<h2>Form Elements</h2>
<form action="#" method="post">
<div class="form_settings">
<p><span>Form field example</span><input type="text" name="name" value="" /></p>
<p><span>Textarea example</span><textarea rows="8" cols="50" name="name"></textarea></p>
<p><span>Checkbox example</span><input class="checkbox" type="checkbox" name="name" value="" /></p>
<p><span>Dropdown list example</span><select id="id" name="name"><option value="1">Example 1</option><option value="2">Example 2</option></select></p>
<p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="name" value="button" /></p>
</div>
</form>
</div>
</div>
<div id="footer">
<p>Copyright © simplestyle_7 | <a href="http://www.moobnn.com/cssthemes/html5moban/">HTML5 模板</a> | <a href="#">CSS</a> | <a href="http://www.moobnn.com/">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络 淘宝店</a></p>
</div>
</div>
</body>
</html>
漂亮的格子底纹线条式博客模板_灰色漂亮简洁线条博客扁平化整站html底纹简单.rar
需积分: 0 138 浏览量
2023-09-12
08:43:34
上传
评论
收藏 22KB RAR 举报
漂亮的格子底纹线条式博客模板_灰色漂亮简洁线条博客扁平化整站html底纹简单.rar （10个子文件） 
examples.html 7KB
style.css 6KB another_page.html 6KB
paperclip.png 3KB page.html 6KB pattern.png 158B graphic.png 8KB bullet.png 989B index.html 5KB contact.html 4KB资源评论
