文章目录
蓝色背景—旅游
作品文件
该作品使用html+css来展示旅游项目，作品效果如下：
home页面效果
home页面相关代码
<div id="content">
<div id="home">
<div>
<div id="aside">
<div>
<h1>Welcome to <span class="last">Aviation School</span></h1>
<a href="index.html"><img src="images/model1.jpg" alt="Image" /></a>
<p>Life is like a box of chocolates, you never know what you are going to get.</p>
<p>The worst way to miss someone is to be sitting right beside them knowing you can’t have them.</p>
</div>
<ul>
<li>
<h2><a href="index.html">Our <span class="last">Curabitur dictum</span></a></h2>
<p>Life is like a box of chocolates, you never know what you are going to get.</p>
<p>The worst way to miss someone is to be sitting right beside them knowing you can’t have them.</p>
</li>
<li>
<h2><a href="index.html">Nam a mauris <span class="last">Pellentesque</span></a></h2>
<p>Life is like a box of chocolates, you never know what you are going to get.</p>
<p>Life is like a box of chocolates, you never know what you are going to get.</p>
<p>The worst way to miss someone is to be sitting right beside them knowing you can’t have them.</p>
</li>
</ul>
</div>
<div id="calendar">
<h3>School Calendar</h3>
<ul>
<li>
<div>
<span>10<br />Jan</span>
<h2><a href="index.html">This is just a place holder.</a></h2>
</div>
<p>Life is like a box of chocolates, you never know what you are going to get.</p>
<p>The worst way to miss someone is to be sitting right beside them knowing you can’t have them.</p>
</li>
<li>
<div>
<span>14<br />Jan</span>
<h2><a href="index.html">This is just a place holder.</a></h2>
</div>
<p>Life is like a box of chocolates, you never know what you are going to get.</p>
<p>The worst way to miss someone is to be sitting right beside them knowing you can’t have them.</p>
</li>
<li>
<div>
<span>30<br />Jan</span>
<h2><a href="index.html">This is just a place holder.</a></h2>
</div>
<p>If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
about us页面效果
about us页面相关代码
<div id="page">
<div id="header">
<div id="section">
<div><a href="index.html"><img src="images/logo.gif" alt="Logo" /></a></div>
<span>[email protected] <br /><br />+ 7958 917 9747 2481 000</span>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li class="current"><a href="about.html">About Us</a></li>
<li><a href="admissions.html">Admissions</a></li>
<li><a href="trainingcourses.html">Training Courses & Services</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="schoolcalendar.html">School Calendar</a></li>
<li><a href="contactus.html">Contact us</a></li>
</ul>
</div>
<div id="content">
<div>
<h3>About</h3>
<div class="first">
<a href="index.html"><img src="images/model2.jpg" alt="pilot" /></a>
<h2>We Have Free Templates for Everyone</h2>
<p>Waking up to presence, waking up to spirit, waking up to our soul cannot be done through a system of thought, be it religion or philosophy or theology or science, because reality is not a system of thought.Waking up to presence, waking up to spirit, waking up to our soul cannot be done through a system of thought, be it religion or philosophy or theology or science, because reality is not a system of thought.</p>
</div>
<div>
<h2>We Have More Templates for You</h2>
<p>Waking up to presence, waking up to spirit, waking up to our soul cannot be done through a system of thought, be it religion or philosophy or theology or science, because reality is not a system of thought.Waking up to presence, waking up to spirit, waking up to our soul cannot be done through a system of thought, be it religion or philosophy or theology or science, because reality is not a system of thought.</p>
</div>
<div>
<h2>Be Part of Our Community</h2>
<p>Waking up to presence, waking up to spirit, waking up to our soul cannot be done through a system of thought, be it religion or philosophy or theology or science, because reality is not a system of thought.</p>
</div>
<div>
<h2>Template details</h2>
<p>Waking up to presence, waking up to spirit, waking up to our soul cannot be done through a system of thought, be it religion or philosophy or theology or science, because reality is not a system of thought.Waking up to presence, waking up to spirit, waking up to our soul cannot be done through a system of thought, be it religion or philosophy or theology or science, because reality is not a system of thought.</p>
</div>
</div>
</div>
admissions页面效果
admissions页面相关代码
<div id="content">
<div>
<h3>Admissions</h3>
<p> You can replace all this text with your own text.</p>
<p>You can remove any link to our website from this website template, you're free to use this website template without linking back to us.</p>
<div class="section">
<div id="aside">
<h5>This is just a place holder, so you can see what the site would look like.</h5>
<p>One glance at [a book] and you hear the voice of another person—perhaps someone dead for thousands of years. Across the millennia3, the author is speaking, clearly and silently, inside your head, directly to you … To read is to voyage through time.</p>
<h5>This is just a place holder, so you can see what the site would look like.</h5>
<p>One glance at [a book] and you hear the voice of another person—perhaps someone dead for thousands of years. Across the millennia3, the author is speaking, clearly and silently, inside your head, directly to you … To read is to voyage through time.</p>
<h5>This is just a place holder, so you can see what the site would look like.</h5>
<p>If you're having problems editing this website template, then don't hesitate to ask for help on the Forum. This is just a place holder, so you can see what the site would look like.</p>
<h5>This is just a place holder, so you can see what the site would look like.</h5>
<p>One glance at [a book] and you hear the voice of another person—perhaps someone dead for thousands of years. Across the millennia3, the author is speaking, clearly and silently, inside your head, directly to you … To read is to voyage through time.</p>
</div>
<div id="sidebar">
<h5>This is just a place holder.</h5>
<p>If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.</p>
<h5>This is just a place holder.</h5>
<p>This website template has been collect from Free Website Templates for you, for free. You can replace all this text with your own text.</p>
<h5>This is just a place holder.</h5>
<p>You can remove any link to our website from this website template, you're free to use this website template without linking back to us.</p>
</div>
</div>
</div>
</div>
Training Courses & Services页面效果
Training Courses & Services页面相关代码
<div id="content">
<div>
<h3>Training Courses & Services</h3>
<p>You can replace all this text with your own text.</p>
<p>You can remove any link to our website from this website template, you're free to use this website template without linking back to us.</p>
<h4>If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.</h4>
<ul class="services">
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
<li>This is just a place holder.</li>
</ul>
<div class="section">
<div id="aside">
<h4>This is just a place holder, so you can see what the site would look like.</h4>
<h5><span>I.</span> This is just a place holder.</h5>
<p>You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us.</p>
<h5><span>II.</span> This is just a place holder.</h5>
<p>If you're having problems editing this website template, then don't hesitate to ask for help on the Forum. This is just a place holder, so you can see what the site would look like.</p>
<h5><span>III.</span> This is just a place holder.</h5>
<p>You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us.</p>
</div>
<div id="sidebar">
<h6>PERSUSCIPIT MAGNA</h6>
<ul class="links">
<li>Diam sollicitud Aliquam eget</li>
<li>Venenatis arcu a felis aliquet</li>
<li>Felis at entessed laoreet</li>
<li>Consector tellus Pellensteque</li>
<li>Ullampor ut interdum</li>
<li>Diam sollicitud Aliquam</li>
<li>Venenatis arcu a felis aliquet</li>
<li>Felis at entessed laoreet</li>
<li>Consector tellus Pellensteque</li>
<li>Venenatis arcu a felis aliquet</li>
<li>Venenatis arcu a felis aliquet</li>
<li>Diam sollicitud Aliquam eget</li>
<li>Ullampor ut interdum</li>
<li>Consector tellus Pellensteque</li>
</ul>
</div>
</div>
</div>
</div>
Blog页面效果
Blog页面相关代码
<div id="content">
<div>
<h3>Blog</h3>
<div class="section">
<div id="aside">
<p><span class="first">You can replace all this text with your own text.</span></p>
<p>You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.</p>
<br />
<p>You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forum. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forum. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forum. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.</p>
</div>
<div id="sidebar">
<ul class="blog">
<li>
<div>
<span>10<br />Jan</span>
<h2><a href="index.html">This is just a place holder.</a></h2>
</div>
<p> You can replace all this text with your own text.</p>
</li>
<li>
<div>
<span>15<br />Jan</span>
<h2><a href="index.html">This is just a place holder.</a></h2>
</div>
<p>You can remove any link to our website from this website template, you're free to use this website template without linking back to us.</p>
</li>
<li>
<div>
<span>20<br />Jan</span>
<h2><a href="index.html">This is just a place holder.</a></h2>
</div>
<p>If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.</p>
</li>
<li>
<div>
<span>27 <br />Jan</span>
<h2><a href="index.html">This is just a place holder.</a></h2>
</div>
<p> You can replace all this text with your own text.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
ps：由于篇幅较大无法全部展示，可关注微信公众号《月光作笺Y》并回复作品主题《蓝色背景-旅游》获取源代码。该作品仅供学习参考