第八章综合案例————优名养生馆
1.封面页的设计与实现
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>优名养生馆</title>
<style type="text/css">
body{
background-image: url(img/bg (anli).jpg);
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
li{
width: 25%;
float: left;
line-height: 50px;
}
img{
margin-top: 70px;
margin-right: 40px;
}
.footer{
height: 50px;
width: 100%;
background-image: url(img/footer-bg.jpg);
border-top: 3px solid grap;
text-align: center;
z-index:9998;
position: fixed;
bottom: 0;
left: 0;
}
.footer-top{
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
z-index: 9999;
position: fixed;
bottom: 0;
left: 45%;
}
.footer-top a{
border-radius: 90px;
}
.footer-top a:link,a:visited{
display: block;
font-size: 20px;
color: brown;
text-decoration: none;
font-weight: bold;
border-top: 3px solid gray;
background-image: url(img/footer-top-bg1.jpg);
}
.footer-top a:hover{
background-image: url(img/footer-top-bg2.jpg);
color:while;
}
.footer a:hover{
background-color: darkgrap;
border-left: 2px solid white;
border-right: 2px solid white;
font-size: 16px;
color: red;
}
.footer a:link,a:visited{
display: block;
font-size: 20px;
color: brown;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<marquee direction ="right" scrollamount="20">
<img src="img/marquee1.jpg"/>
<img src="img/marquee2.jpg"/>
<img src="img/marquee3.jpg"/>
</marquee>
</div>
<nav>
<div class="footer-top">
<a href="index.html">进入官网</a>
</div>
<div class="footer">
<ul>
<li><a href="#">奇幻世界</a></li>
<li><a href="#">主题风采</a></li>
<li><a href="#">加盟相关</a></li>
<li><a href="#">友情推荐</a></li>
</ul>
</div>
</nav>
</body>
</html>
2.主页的设计与实现
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优名养生馆</title>
<style type="text/css">
body{
background-image: url(img/bg (anli).jpg);
}
.all{
margin: 0px auto;
width: 900px;
}
.top{
width: 900px;
height: 225px;
background-image: url("img/top-bg.jpg");
}
.cent{
width: 320px;
margin-left: auto;
margin-right: auto;
font-size: 58px;
font-family: "楷体";
color: lemonchiffon;
font-style: italic;
}
.nav{
width: 200px;
float: left;
margin-top: 30px;
font-size: 20px;
font-weight: bold;
color: saddlebrown;
}
.main{
width: 700px;
height: 300px;
float: left;
margin-top: 10px;
}
.footer{
font-size: 14px;
font-weight: bold;
color: brown;
text-align: center;
clear: both;
background-image: url("img/footer-bg.jpg");
}
p{
color: brown;
font-size: 16px;
}
img{
margin: 15px;
}
ul{
list-style-type: none;
}
li{
height: 22px;
}
a:link{
font-size: 16px;
text-decoration: none;
color: brown;
}
a:hover{
background-color: burlywood;
color: white;
}
</style>
</head>
<body>
<div class="all">
<div class="top">
<br />
<div class="cent">优名养生馆</div>
</div>
<nav>
<div class="nav">
<table>
<tr>养生之道</tr>
<tr>
<ul>
<li><a href="#">运动养生</a></li>
<li><a href="#">四季养生</a></li>
<li><a href="#">健康检测</a></li>
</ul>
</tr>
<tr>中医养生</tr>
<tr>
<ul>
<li><a href="#">经络养生</a></li>
<li><a href="#">特质养生</a></li>
<li><a href="#">特色疗法</a></li>
</ul>
</tr>
</table>
</div>
</nav>
<div class="main">
<img src="img/main.jpg" align="left"/>
<img src=“img/main.jpg” align=“left”/>
<p> 古人云:善养生者,上养神智、中养形态、下养筋骨。</p>
<p> 养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期达到保养、调养、颐养生命,实现人类健康、长寿的目的。</p>
<p> 养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复;也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老:心理层面的养生包括养心、养性、养神。</p>
</div>
<hr />
<div class="footer">版权所有©优名养生馆</div>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/2301_82347006/article/details/143723850
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！