网页设计——个人简历
目录
- 网页设计——个人简历
- 作品所有文件
- home页面效果
- home页面相关代码
- about页面效果
- about页面相关代码
- service页面效果
- service页面相关代码
- gallery页面效果
- gallery页面相关代码
- contact页面效果
- contact页面相关代码
作品所有文件
home页面效果
home页面相关代码
<div id="slider">
<div id="header_wrapper">
<div id="header">
<a href="#home"><img src="images/templatemo_logo.png" alt="Wall Shelf" /></a>
</div>
</div>
<div id="menu_wrapper">
<div id="menu">
<ul class="navigation">
<li><a href="#home" class="selected">Home<span class="ui_icon home"></span></a></li>
<li><a href="#aboutus">About<span class="ui_icon aboutus"></span></a></li>
<li><a href="#services">Services<span class="ui_icon services"></span></a></li>
<li><a href="#gallery">Gallery<span class="ui_icon gallery"></span></a></li>
<li><a href="#contactus">Contact<span class="ui_icon contactus"></span></a></li>
</ul>
</div>
</div>
<div id="content_wrapper">
<div id="content">
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="home">
<div class="col_550 float_l">
<h1>Introducing Wall Shelf Template</h1>
<p><em>Nullam at erat ipsum, quis tincidunt mauris. Nunc sit amet sapien eget eros iaculis hendrerit quis a enim. You may validate <a href="#" rel="nofollow">XHTML</a> & <a href="#" rel="nofollow">CSS</a>. </em></p>
<p>Wall Shelf is a Feel free to download, adapt and apply this template for your websites.
<div class="cleaner_h30"></div>
<h2>Our Services</h2>
<img src="images/templatemo_image_01.jpg" alt="image 01" class="image_wrapper image_fl" />
<p>Vivamus scelerisque consectetur nunc, nec vehicula lorem fermentum eu. Cras sodales arcu est, ac vulputate quam. Maecenas non turpis ipsum, viverra posuere sem. Ut vestibulum dictum tellus, ac lacinia lacus blandit eu. </p> <div class="btn_more"><a href="#services">Read more</a></div>
</div>
<div class="col_300 float_r">
<h2>Hire Us</h2>
<p><em>Donec ac eros ac nunc blandit hendrerit. Vestibulum tincidunt, odio at ultricies sollicitudin.</em></p>
<p>Mauris ligula tortor, congue laoreet rutrum eget, suscipit nec augue hendrerit velit adipiscing eget. </p>
<div class="btn_more"><a href="#aboutus">Read more</a></div>
<div class="cleaner_h30"></div>
<h2>Featured Design</h2>
<img src="images/templatemo_image_02.jpg" alt="image 02" class="image_wrapper" />
<div class="btn_more"><a href="#gallery">Read more</a></div>
</div>
</div>
about页面效果
about页面相关代码
<div class="panel" id="aboutus">
<h1>About Us</h1>
<div class="image_wrapper image_fl"><img src="images/templatemo_image_03.jpg" alt="image 3" /></div>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lectus turpis. Vivamus cursus tortor quis leo ullamcorper auctor quis tincidunt metus.</em></p>
<p align="justify">Vestibulum vitae lectus a leo commodo egestas. Sed et ligula mauris. Donec interdum iaculis eros, sed porttitor justo ornare ac. Suspendisse ultrices arcu auctor sapien malesuada dictum. <a href="#">Vivamus non ante</a> sit amet ligula dignissim blandit ut sit amet purus. Sed tristique euismod lectus sed scelerisque. Curabitur convallis fringilla ante, eget eleifend magna iaculis eget. Praesent at nunc tellus. Sed sed auctor odio. Maecenas ut mauris eu ligula placerat tempor vel ac augue. Integer fermentum, ante eget sodales lacinia, nisl diam semper elit, non hendrerit nunc urna vitae erat. Etiam vel nisi risus.</p>
<p>Vestibulum tempus porttitor ipsum, ut dictum metus molestie eu. Donec interdum, mi ut facilisis posuere, neque sapien lacinia urna, nec hendrerit dolor arcu sed justo. Aenean rhoncus porttitor dolor non posuere. Nulla eu mi id tellus vehicula pellentesque et vitae magna. </p>
<div class="cleaner_h30"></div>
<ul id="social_box">
<li><a href="#"><img src="images/facebook.png" alt="facebook" /></a></li>
<li><a href="#"><img src="images/twitter.png" alt="twitter" /></a></li>
<li><a href="#"><img src="images/linkedin.png" alt="linkin" /></a></li>
<li><a href="#"><img src="images/technorati.png" alt="technorati" /></a></li>
<li><a href="#"><img src="images/myspace.png" alt="myspace" /></a></li>
</ul>
</div>
service页面效果
service页面相关代码
<div class="panel" id="services">
<div class="col_380 float_l">
<h1>Service Overview</h1>
<img src="images/templatemo_image_04.jpg" alt="image 04" class="image_wrapper image_fl" />
<p align="justify">Sed eu libero quis neque laoreet cursus. Aliquam sit amet odio vitae dui blandit elementum. Ut eu dolor nunc. Nam in nunc sed mi adipiscing lacinia suscipit eget tortor. Vivamus lacinia lectus in velit aliquet ac placerat magna euismod. Fusce elit metus, elementum nec consequat a, interdum vitae est.</p>
<p align="justify">Integer eget nibh eu libero cursus ultricies. Nam ac eros erat. Integer varius pulvinar molestie. <a href="#">Vestibulum pellentesque</a> felis eget nibh pulvinar accumsan. Etiam non urna at ipsum condimentum tempus at eu mauris. Vivamus eget ante augue. Phasellus ut sapien tellus, placerat cursus augue.</p>
</div>
<div class="col_380 float_r">
<h1>Specialized Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lectus turpis.</p>
<ul class="service_list">
<li><a href="#" class="service_one">Sed nec eros egestas nisl</a></li>
<li><a href="#" class="service_two">Morbi sed nulla ac est cursus</a></li>
<li><a href="#" class="service_three">Curabitur ullamcorper nibh</a></li>
<li><a href="#" class="service_four">Pellentesque adipiscing</a></li>
<li><a href="#" class="service_five">Vestibulum urna purus</a></li>
</ul>
</div>
</div>
gallery页面效果
gallery页面相关代码
<div class="panel" id="gallery">
<h1>Our Gallery</h1>
<div id="gallery_container">
<div class="gallery_box">
<img src="images/gallery/image_01.jpg" alt="1" />
<h4>Project Title 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec ligula vitae ipsum blandit condimentum. Nam fringilla luctus mauris, non ornare turpis lobortin.</p>
<div class="btn_more"><a href="#">Visit <span>»</span></a></div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<a href="#" target="_parent"><img src="images/gallery/image_02.jpg" alt="2" /></a>
<h4>Project Title 2</h4>
<p>Donec ac eros ac nunc blandit hendrerit. Vestibulum tincidunt, odio at ultricies sollicitudin, ante felis luctus justo, non venenatis quam mauris non tortor.</p>
<div class="btn_more"><a href="#">Visit <span>»</span></a></div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<a href="#" target="_parent"><img src="images/gallery/image_03.jpg" alt="3" /></a>
<h4>Project Title 3</h4>
<p> Mauris ligula tortor, congue laoreet rutrum eget, suscipit nec augue. In congue consectetur est, sit amet hendrerit velit adipiscing eget.</p>
<div class="btn_more"><a href="#">Visit <span>»</span></a></div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<img src="images/gallery/image_04.jpg" alt="4" />
<h4>Project Title 4</h4>
<p> Curabitur iaculis, erat pharetra porttitor sollicitudin, turpis lectus placerat arcu, ac mattis eros sem ut metus. Nunc congue iaculis lectus in interdum.</p>
<div class="btn_more"><a href="#">Visit <span>»</span></a></div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<img src="images/gallery/image_05.jpg" alt="5" />
<h4>Project Title 5</h4>
<p> Curabitur iaculis enim dolor. Sed quis augue ligula. Quisque aliquet egestas felis, in egestas turpis sodales et. In ac diam ut orci viverra bibendum. </p>
<div class="btn_more"><a href="#">Visit <span>»</span></a></div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<img src="images/gallery/image_06.jpg" alt="6" />
<h4>Project Title 6</h4>
<p>Sed in viverra nulla. Duis rutrum vehicula ligula, non tempor nunc congue et. Nunc sit amet tortor nulla, ut eleifend enim sed condimentum tellus vestibulum in.</p>
<div class="btn_more"><a href="#">Visit <span>»</span></a></div>
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
</div>
contact页面效果
contact页面相关代码
<div class="panel" id="contactus">
<h1>Contact Us</h1>
<div class="cleaner_h10"></div>
<div class="col_380 float_l">
<div id="contact_form">
<form method="post" name="contact" action="#">
<label for="author">Name:</label> <input type="text" id="author" name="author" class="required input_field" />
<label for="email">Email:</label> <input type="text" id="email" name="email" class="validate-email required input_field" />
<label for="text">Message:</label> <textarea id="text" name="text" rows="0" cols="0" class="required"></textarea>
<br />
<input type="submit" class="submit_button" name="submit" id="submit" value="Send" />
<input type="reset" class="submit_button" name="reset" id="reset" value="Reset" />
</form>
</div>
</div>
<div class="col_380 float_r">
<h4>Mailing Address</h4>
770-990 Quisque odio quam, <br />
Pulvinar sit amet convallis eget, 10660<br />
Venenatis ut turpis<br />
<br />
Tel: 010-040-1111<br />
Fax: 010-050-6666
</div>
</div>
</div>
ps：由于篇幅较大无法全部展示，可关注微信公众号《IT的世界》获取源代码。该作品仅供学习参考
