<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Touches of Pearl</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="Bluefish 1.0.4"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header"><h1>Touches of Pearl</h1></div>
<div id="skiplinks">
<ul>
<li id="to_home"><a href="#">Home</a></li>
<li id="to_content"><a href="#">Skip To Content</a></li>
<li id="to_nav"><a href="#">Skip to Navigation</a></li>
<li id="feed"><a href="#">Feed</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>
<div id="horiznav">
<ul>
<li><a href="#" id="current">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>
<div id="container">
<div id="content">
<h2>Subtle, Clean, Flexible.</h2>
<h3>About This Design</h3>
<p>This design was born out of a general idea, and the colors selected from ones that are my mother's favorites. She's always had a love for pink and gray, and she adores pearls, so that was the inspiration for this design. She also hates clutter in websites, so I was careful to try to keep white space as much as possible.</p>
<h3>Specs</h3>
<p>The main area of the page fills 80% of the window, the header and footer areas fill 100%. The main page has a three column look, with the second column actually containing two separate columns as well. The layout is ideal for screens with a 1024 resolution width and higher, but works fine for smaller screens as well.</p>
<p>I have used a shocking (for me at least) 21 images in this design. The total file size of those images comes to 18.2k all together. However, with the exception of the image placeholder box used in different places, all of the images are background images and the site looks perfectly fine without them. The vast majority of the icons come from the popular free <a href="http://www.famfamfam.com/lab/icons/silk/">Silk Icons</a> set.</p>
<p>As always, this website is XHTML 1.0 Strict, is completely tableless for layout, and has been tested in Firefox, IE 6 and IE 7 Beta 2, Opera, Konqueror, and Safari.</p>
<p>f you have problems with this template, or questions, you can post them on <a href="http://blog.websitestyle.com/index.php/2006/09/20/new-template-touches-of-pearl/">the original release page</a> or <a href="http://blog.websitestyle.com/index.php/contact/">contact me directly</a>.</p>
<p class="right"><a href="sub.html" class="more">Learn More</a></p>
<h2>The Included Styles</h2>
<h3>Alternate Layout</h3>
<p>There is an alternate subpage layout that is a single column look. On the subpage you will find all of the included styles given as examples of use. On the subpage I have also added links in a little section at the bottom that might be good for webpage tagging and bookmarking.</p>
<p class="right"><a href="sub.html" class="more">View the Alternate Layout</a></p>
<h3>Special Styles</h3>
<p>For this design, I have also taken a more careful hand with the typography and extra styles so that I could convey the clean, elegant, look I was going for.</p>
<p>While I normally include a series of different styles that can be used, I went a little bit further this time and created more. I made many quick classes for general use, things like bold, italic, underline, strikethrough, and highlight.</p>
<p>You can see all of the included special styles shown on the subpage.</p>
<p class="right"><a href="sub.html" class="more">View the Included Styles</a></p>
<h2>Usage</h2>
<p>I am freeing this template according to the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. That license gives you the right to use this template in any way (commercial or non-commercial), make changes to it, create things based on it, etc... so long as an attribution is made to the author. Per this, please leave the link at the bottom of the footer to my site, though you are free to change the text of that link (such as, 'Based on a design by', etc..) to suit your needs. You can also, alternatively, put a link in your 'About' page or other page as appropriate.</p>
</div>
<div id="rightcol">
<div id="topper">
<h2 id="about">About Us</h2>
<p> This is a good section to use to say a bit about your website, a quick summary of what it is all about. This is a good section to use to say a bit about your website, a quick summary of what it is all about. This is a good section to use to say a bit about your website, a quick summary of what it is all about.</p>
<p class="right"><a href="#" class="more">Learn More</a></p>
</div>
<div id="secondcol">
<h2 id="news">News</h2>
<ul>
<li><a href="#">News Headline</a>
<ul><li>This is a news item and has a link in it. This is a news item and has a link in it.</li></ul>
</li>
<li><a href="#">News Headline</a>
<ul><li>This is a news item and has a link in it. This is a news item and has a link in it.</li></ul>
</li>
<li><a href="#">News Headline</a>
<ul><li>This is a news item and has a link in it. This is a news item and has a link in it.</li></ul>
</li>
<li><a href="#">News Headline</a>
<ul><li>This is a news item and has a link in it. This is a news item and has a link in it.</li></ul>
</li>
<li><a href="#">News Headline</a>
<ul><li>This is a news item and has a link in it. This is a news item and has a link in it.</li></ul>
</li>
<li><a href="#">News Headline</a>
<ul><li>This is a news item and has a link in it. This is a news item and has a link in it.</li></ul>
</li>
</ul>
</div>
<div id="thirdcol">
<h2 id="links">Links</h2>
<ul>
<li><a href="#">A Link Here</a> - My Friend's Blog</li>
<li><a href="#">A Link Here</a> - My Favorite Browser</li>
<li><a href="#">A Link Here</a> - My Photo Album</li>
<li><a href="#">A Link Can Go In Here</a></li>
<li><a href="#">A Link Can Go In Here</a></li>
<li><a href="#">A Link Can Go In Here</a></li>
<li><a href="#">A Link Can Go In Here</a></li>
</ul>
<h2 id="ads">Advertisements</h2>
<div id="ad_box">
<!-- This is just a placeholder for something you can put here. If you want to insert some sort of script or image here, just go ahead and remove all of the area below this until you hit the next comment telling you to stop. -->
<p style="text-align:center"><img src="img/img.gif" alt="Placeholder." /></p><p style="font-size:larger">A good place for your text ads, flicker feed, amazon wish list, widgets, or some sort of buttons to things you like.</p><p style="text-align:center"><img src="img/img.gif" alt="Placeholder." /></p><p style="font-size:larger; font-weight:bold;">Read the comments in the HTML for this section.</p>
<!-- Stop deleting here and make sure all your ad stuff is above this -->
</div>
</div> <!-- Ends the third column -->
<!-- This section begins the area below the two right colums -->
<p><img src="img/img.gif" class="left" alt="Placeholder." /><strong>Image with class=float:left.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tincidunt libero ut urna. Mauris euismod mollis lacus. Suspendisse mollis felis nec erat mattis sagittis. Quisque eget pede eget risus viverra cursus. Praesent dui lectus, lacinia quis, posuere in, tempus ac, diam. Etiam congue nibh quis dolor. Aliquet vel, gravida nec, erat. Fusce posuere rutrum nunc. Suspendisse varius
DIV+CSS10个模板(有含内页) （138个子文件） 
style.css 8KB style.css 6KB default.css 5KB style.css 4KB style.css 4KB style.css 4KB default.css 3KB default.css 3KB default.css 2KB sub.css 605B
package.gif 11KB upbg.gif 9KB bigbox.gif 8KB lbhover.gif 5KB searchbg.gif 5KB logo.gif 3KB notes.gif 3KB topleft.gif 3KB searchbg.gif 3KB image.gif 2KB pearl.gif 2KB bgmain.gif 2KB top.gif 2KB somepicture.gif 2KB box.gif 2KB a1.gif 1KB bigimage.gif 1KB header.gif 1KB barcurrent.gif 1KB bg.gif 1KB lb.gif 1KB image.gif 1KB smallbox.gif 1KB img.gif 1KB feed.gif 1KB link.gif 1KB subscribe.gif 1KB black_pearl.gif 1KB ads.gif 1KB pink_pearl.gif 1KB news.gif 1KB email.gif 1KB home.gif 1KB to_content.gif 1010B to_nav.gif 1004B barbg.gif 982B arrow_right.gif 922B quote.gif 915B bar.gif 897B image.gif 843B bgdate.gif 824B divider.gif 818B baractive.gif 800B input.gif 734B bg_navitem.gif 663B bg.gif 653B gbox.gif 622B bgfooter.gif 598B a26.gif 551B calendar.gif 541B boxtop.gif 538B greenbtn.gif 507B bluebtn.gif 502B a47.gif 495B smallboxtop.gif 450B a16.gif 407B topicsbg.gif 368B a33.gif 367B hoverbtn.gif 342B li.gif 306B a8.gif 295B nav_li.gif 286B gboxtop.gif 285B quote.gif 274B quote.gif 228B li.gif 207B li.gif 194B bgshade.gif 175B a18.gif 158B barul.gif 155B bg.gif 152B bgsubtitle.gif 147B back.gif 144B abg.gif 135B a50.gif 121B bullet.gif 113B corner.gif 112B h3bg.gif 101B bg.gif 91B comment.gif 82B title1.gif 72B a38.gif 72B a41.gif 70B a36.gif 70B news.gif 63B arrow.gif 61B corner.gif 60B topper_corner.gif 60B bgcode.gif 56B bg4.gif 54B共 138 条
- 1
- 2
资源评论
cbf001
- 粉丝: 3
- 资源: 1
最新资源
- VC6.0 windows.h 头文件 原始上传备份
- 基于Flask框架的JavaScript、HTML、CSS、Python整合的天气系统设计源码
- ad7606_drv.h
- 基于YOLOv5的工地安全帽识别及危险区域禁入系统设计源码
- 基于Alberto Abadie理论的Penalized Synthetic Control方法设计源码
- Reality安全下载.apk
- 基于Java语言的ape-club程序员社区交流平台设计源码
- 12864yejin.OBJ
- AirportItlwm-v2.3.0-stable-Sonoma14.0.kext.zip
- BOOT-00001前后端分离个人财务管理系统源码+数据库.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
