大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 好厨艺西餐美食企业网站模板6个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90220157
2，点击上方下载
目录1
项目视频
html+css+js网页设计 美食 好厨艺西餐美食企业网站
页面展示
页面1
页面2
页面3
页面4
页面5
页面6
代码展示
<body id="page1">
<div id="bgSlider"></div>
<div class="bg_spinner"></div>
<div class="extra">
<!--==============================header=================================-->
<header>
<div class="top-row">
<div class="main">
<div class="wrapper">
<h1><a href="index.html">GoodCook</a></h1>
<ul class="pagination">
<li class="current"><a href="images/bg-img1.jpg">1</a></li>
<li><a href="images/bg-img2.jpg">2</a></li>
<li><a href="images/bg-img3.jpg">3</a></li>
</ul>
<strong class="bg-text">Background:</strong>
</div>
</div>
</div>
<div class="menu-row">
<div class="menu-border">
<div class="main">
<nav>
<ul class="menu">
<li><a class="active" href="index.html">Main</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="recipes.html">New Recipes</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li class="last"><a href="contacts.html">Contacts</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="ic">More Website Templates @ <a >模板在线</a> <a >厚朴网络 淘宝店</a> - September 26, 2011!</div>
</header>
<!--==============================content================================-->
<div class="inner">
<div class="main">
<section id="content">
<div class="slider">
<ul class="items">
<li>
<img src="images/slider-img1.jpg" alt="" />
<div class="banner">
<strong class="title">
<strong>Hot</strong><em>Recipe</em>
</strong>
<p class="p3">Lorem ipsum dolor sit amet consecteur adipising elit, sed do eiusmod tem por incididunt ut labore et dolore magna.</p>
<a class="button-1" href="#">Read More</a>
</div>
</li>
<li>
<img src="images/slider-img2.jpg" alt="" />
<div class="banner">
<strong class="title">
<strong>Hot</strong><em>Recipe</em>
</strong>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<a class="button-1" href="#">Read More</a>
</div>
</li>
<li>
<img src="images/slider-img3.jpg" alt="" />
<div class="banner">
<strong class="title">
<strong>Hot</strong><em>Recipe</em>
</strong>
<p>Neque porro quisquam estui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.</p>
<a class="button-1" href="#">Read More</a>
</div>
</li>
</ul>
<a class="banner-2" href="#"></a>
</div>
<ul class="pags">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<div class="bg">
<div class="padding">
<div class="wrapper">
<article class="col-1">
<h3>Weight Loss Ideas</h3>
<p>Good Cook is one of <a class="link" >free website templates</a> createdCollect from moobnn.com team. This template is optimized for 1280X1024 screen resolution. It is also XHTML & CSS valid.</p>
<div class="relative">
<a class="button-2" href="#">Read More</a>
</div>
</article>
<article class="col-1">
<h3>Fast Food. Yes or No?</h3>
<p>This <a class="link" >Good Cook Template</a> goes with two pack ages – with PSD source files and without them. PSD source files are available for free for the registered members of Templates.com.</p>
<div class="relative">
<a class="button-2" href="#">Read More</a>
</div>
</article>
<article class="col-2">
<h3>Taste of Asia</h3>
<p>This web template has several pages: <a class="link" href="index.html">Main</a>, <a class="link" href="about.html">About Us</a>, <a class="link" href="courses.html">Courses</a>, <a class="link" href="recipes.html">New Recipes</a>, <a class="link" href="calendar.html">Calendar</a>, <a class="link" href="contacts.html">Contact Us</a> (please note that contact us form – doesn’t work).</p>
<div class="relative">
<a class="button-2" href="#">Read More</a>
</div>
</article>
</div>
</div>
</div>
<div class="padding-2">
<div class="indent-top">
<div class="wrapper">
<article class="col-3">
<h4><strong>Welcome</strong> <em>to Our Site!</em></h4>
<p class="color-2 p1">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem quia voluptas:</p>
<ul class="list-1">
<li><a href="#">Sit aspernatur aut odit aut fugit quia consequuntur</a></li>
<li><a href="#">Magni dolores eos qui ratione voluptatem sequi nesciunt eque</a></li>
<li><a href="#">Qui dolorem ipsum quia dolor sit amet, consectetur adipisci</a></li>
<li><a href="#">Sed quia non numquam eius modi tempora incidunt</a></li>
</ul>
</article>
<div class="extra-wrap">
<a href="#"><img src="images/banner-1.jpg" alt="" /></a>
</div>
</div>
</div>
</div>
</section>
<div class="block"></div>
</div>
</div>
</div>
<!--==============================footer=================================-->
<footer>
<div class="padding">
<div class="main">
<div class="wrapper">
<div class="fleft footer-text">
<span>Good Cook</span> © 2011
<strong>Website Template Collect from <a rel="nofollow" class="link" >模板在线</a> <a >厚朴网络 淘宝店</a> | <a >模板在线</strong>
<!-- {%FOOTER_LINK} -->
</div>
<ul class="list-services">
<li>Link to Us:</li>
<li><a class="tooltips" title="facebook" href="#"></a></li>
<li class="item-1"><a class="tooltips" title="twitter" href="#"></a></li>
<li class="item-2"><a class="tooltips" title="linkedin" href="#"></a></li>
</ul>
</div>
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript">
$(window).load(function() {
$('.slider')._TMS({
duration:1000,
easing:'easeOutQuart',
preset:'simpleFade',
slideshow:10000,
banners:'fade',
pauseOnHover:true,
waitBannerAnimation:false,
pagination:'.pags'
});
});
</script>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
