<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<style>
*{
padding: 0px;
margin: 0px;
}
h2{
font-family: "palace script mt";
font-size: 120px;
color: black;
text-align: center;
padding-top: 40px;
}
h2 a{
font-family: 华文彩云;
font-size: 20px;
}
#one ul li{
display: inline-block;
font-size: 20px;
font-family: 华文琥珀;
color:sienna;
text-indent: 12em;
}
#two ul li{
display: inline-block;
color: darkorange;
font-family:方正姚体 ;
font-size: 20px;
border-radius:10% ;
}
#two ul li img:hover{
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
#two ul li:nth-child(1){
float: left;
padding-left: 35px;
}
#two ul li:nth-child(2),#two ul li:nth-child(3),#two ul li:nth-child(4){
float: left;
}
#two ul a{
position: relative;
top: 20px;
background: greenyellow;
border: 1px solid greenyellow;
border-radius: 4px;
padding: 2px 10px;
overflow: hidden;
color: black;
font-weight: bold;
text-decoration: none;
text-indent: 0;
line-height: 5px;
border-radius:10% ;
font-size: 15px;
}
#big{
position:fixed;
top:0px;
left:-20px;
bottom:0px;
right:0px;
z-index:-21;
}
#big img{
width:100%;
height:100%;
border:0px;
}
#three h4{
font-family: 华文行楷;
font-size: 30px;
border: double 5px greenyellow;
color: green;
padding: 10px;
margin-top:20px ;
margin-bottom:50px ;
}
#four h4{
font-family: 华文行楷;
font-size: 30px;
border: double 5px greenyellow;
color: green;
padding: 10px;
margin-top:610px ;
margin-bottom:10px ;
}
#four a{
color: red;
font-family: Blackadder ITC;
font-size: 24px;
}
#five ul li{
display: inline-block;
}
#five ul li :nth-child(1){
margin-top: 50px;
transform: gogogo 2s infinite linear ;
-webkit-animation:gogogo 2s infinite linear ;
}
#five ul li :nth-child(2){
margin-top: 50px;
transform: gogogo 2s infinite linear ;
-webkit-animation:gogogo 2s infinite linear ;
}
#five ul li :nth-child(3){
margin-top: 50px;
transform: gogogo 2s infinite linear ;
-webkit-animation:gogogo 2s infinite linear ;
}
#five ul li:nth-child(4){
margin-top: 50px;
transform: gogogo 2s infinite linear ;
-webkit-animation:gogogo 2s infinite linear ;
}
@keyframes gogogo{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(10deg);
}
100%{
transform: rotate(-10deg);
}
}
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(10deg);
}
100%{
-webkit-transform: rotate(-10deg);
}
}
#six a{
position: relative;
top: 20px;
background: greenyellow;
border: 1px solid greenyellow;
border-radius: 4px;
padding: 10px 40px;
overflow: hidden;
color: black;
font-weight: bold;
text-decoration: none;
text-indent: 0;
line-height: 5px;
border-radius:10% ;
font-size: 15px;
}
#seven{
padding-top: 100px;
padding-left: 100px;
width: 540px;
height: 480px;
border: 1px solid #F1EEEB;
border-right:2px solid pink ;
}
h5{
font-family:方正舒体 ;
background: pink;
color: white;
font-size: 40px;
height: 44px;
line-height: 34px;
text-indent: 0em;
border-radius:40% ;
}
#seven span{
display: inline-block;
padding: 6px 10px;
background: pink;
border-radius: 50px;
margin-right: 20px;
color: white;
}
#seven ul li{
padding-top: 30px;
padding-left: -10px;
font-size: 24px;
}
#seven ul li div{
text-align: center;
display: none;
}
#seven ul li div img{
border-radius: 10%;
}
#seven ul li a:hover div{
display: block;
}
#seven ul li a{
text-decoration: none;
color: pink;
}
#eight h4{
font-family: 华文行楷;
font-size: 30px;
border: double 5px greenyellow;
color: green;
padding: 10px;
margin-top:80px ;
margin-bottom:10px ;
}
#nine{
float: right;
margin-top:-550px ;
margin-right:50px ;
}
footer{
border: 2px solid darkgray;
background-color:darkgray;
color: white;
}
#twelve ul li :hover{
color: white;
}
#twelve{
float: left;
padding-left: 500px;
padding-bottom: 10px;
line-height: 40px;
}
#fourteen{
float: left;
padding-left:300px ;
padding-bottom:10px ;
line-height: 40px;
}
p{
padding-top:200px ;
text-align: center;
}
#fifteen{
padding-left: 900px;
}
</style>
<meta charset="utf-8"/>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/luara.css"/>
</head>
<body>
<div id="big"><img src="img/背景6.jpg"></div>
<header>
<h2>FoodiesFeed <a>您新生活的起点</a></h2>
<div id="fifteen">
<img src="img/dog.png"width="150px"height="150px" />
</div>
<div id="one">
<ul>
<hr />
<hr />
<li>首页</li>
<li>新品</li>
<a href="third.html"><li>教程</li></a>
<li>分类</li>
<hr />
</ul>
</div>
</header>
<section>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.luara.0.0.1.min.js"></script>
<hr/>
<div class="example">
<ul>
<li><img src="img/咖啡2.jpg"/></li>
<a href="second.html"><li><img src="img/入云屋2.jpg"/></li></a>
<li><img src="img/一行白2.jpg"/></li>
<li><img src="img/马卡龙3.jpg"/></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
$(function(){
<!--调用Luara示例-->
$(".example").luara({width:"700",height:"434",interval:4000,selected:"seleted"});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ;">
<div id="three">
<h4>新品上市</h4>
</div>
<div id="two">
<ul>
<li><img src="img/南瓜.jpg"width="200px"height="240px"/><br />
<b>【松软南瓜小蛋糕】 </b><br />
超松软，秋天的味道！<br />
今天的这道南瓜小蛋糕，制作<br />
很简单。因为南瓜肉含有丰富的水分，<br />
所以做成的小蛋糕口感十分松软，<br />
不试一试的话，可是很遗憾的哦。<br />
<a href="#">美食订购</a>
</li>
<li><img src="img/雪糕.jpg"width="200px"height="240px"/><br />
<b>【柠檬酸奶慕斯雪糕】</b><br />
这是一道慕斯雪糕，<br />
简单的说就是将慕斯<br />
冷冻之后制作而成的，<br />
它具有与
简单自创HTML作品
需积分: 50 127 浏览量
2018-11-12
16:22:31
上传
评论 7
收藏 90.37MB RAR 举报
HTML作品.rar （71个子文件） 
HTML作品 sweetfood css 
luara.css 502B ruyunwu2.css 1KB ruyunwu.css 1KB style.css 568B img 
圣诞4-4.jpg 454KB 椰子糕.jpg 403KB 背景2.jpg 6.88MB 181.jpg 139KB 圣诞2-2.jpg 488KB 马卡龙3.jpg 6.62MB 一行白.jpg 52KB 咖啡2.jpg 289KB 2.jpg 66KB 1.jpg 44KB 入云屋3.jpg 6.7MB 秋露.jpg 5.89MB 圣诞1-1.jpg 452KB 雪糕.jpg 972KB backgrand.jpg 2.24MB 背景8.jpg 25KB 故柿.jpg 5.87MB 青黛.jpg 226KB tay1.jpg 62KB 151.jpg 100KB
评论5.png 23KB 评论6.png 18KB 马卡龙.jpeg 31KB 大图.jpg 510KB 奶油.jpg 239KB 入云屋1.jpg 6.99MB 玉蟾秋.jpg 4.93MB 马卡龙2.jpg 2.97MB 评论3.png 19KB 一行白2.jpg 250KB 夏至.jpg 4.48MB 椰子糕_.jpg 1.63MB 191.jpg 66KB 161.jpg 101KB 评论1.png 32KB 评论4.png 28KB 背景5.jpg 3.89MB 141.jpg 129KB dog.png 23KB
欢迎.gif 26KB 131.jpg 66KB 评论2.png 23KB 蓬莱.jpg 4MB 入云屋2.jpg 410KB 思.jpg 22KB 南瓜.jpg 152KB 背景6.jpg 1.5MB 121.jpg 72KB 七星瓢虫.jpg 28KB 背景.jpg 3.6MB 酸奶.jpg 340KB 背景1.jpg 6.57MB 背景3.jpg 3.89MB 171.jpg 83KB 动图.jpg 43KB 201.jpg 75KB 圣诞3-3.jpg 342KB 背景4.jpg 2.75MB 背景7.jpg 3.7MB
second.html 8KB index.html 3KB js jquery-1.8.3.min.js 91KB jquery.luara.0.0.1.min.js 1KB .project 979B first.html 11KB third.html 6KB video 
微博正文 - 微博HTML5版.mp4 674KB资源评论
月暮归
- 粉丝: 1
- 资源: 1
