<!DOCTYPE html>
<!--
Flaticon icon font: Flaticon
Creation date: 22/01/2018 09:50
-->
<html>
<!DOCTYPE html>
<html>
<head>
<title>Flaticon WebFont</title>
<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="flaticon.css">
<meta charset="UTF-8">
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font-family: 'Varela Round', Helvetica, Arial, sans-serif;
font-size: 16px;
color: #222;
}
a {
color: #333;
border-bottom: 1px solid #a9fd00;
font-weight: bold;
text-decoration: none;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 30px;
font-style: normal;
margin-left: 20px;
color: #333;
}
.wrapper {
max-width: 600px;
margin: auto;
padding: 0 1em;
}
.title {
font-size: 1.25em;
text-align: center;
margin-bottom: 1em;
text-transform: uppercase;
}
header {
text-align: center;
background-color: #222;
color: #fff;
padding: 1em;
}
header .logo {
width: 210px;
height: 38px;
display: inline-block;
vertical-align: middle;
margin-right: 1em;
border: none;
}
header strong {
font-size: 1.95em;
font-weight: bold;
vertical-align: middle;
margin-top: 5px;
display: inline-block;
}
.demo {
margin: 2em auto;
line-height: 1.25em;
}
.demo ul li {
margin-bottom: 1em;
}
.demo ul li .num {
color: #222;
border-radius: 20px;
display: inline-block;
width: 26px;
padding: 3px;
height: 26px;
text-align: center;
margin-right: 0.5em;
border: 1px solid #222;
}
.demo ul li code {
background-color: #222;
border-radius: 4px;
padding: 0.25em 0.5em;
display: inline-block;
color: #fff;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
font-weight: lighter;
margin-top: 1em;
font-size: 0.8em;
word-break: break-all;
}
.demo ul li code.big {
padding: 1em;
font-size: 0.9em;
}
.demo ul li code .red {
color: #EF3159;
}
.demo ul li code .green {
color: #ACFF65;
}
.demo ul li code .yellow {
color: #FFFF99;
}
.demo ul li code .blue {
color: #99D3FF;
}
.demo ul li code .purple {
color: #A295FF;
}
.demo ul li code .dots {
margin-top: 0.5em;
display: block;
}
#glyphs {
border-bottom: 1px solid #ccc;
padding: 2em 0;
text-align: center;
}
.glyph {
display: inline-block;
width: 9em;
margin: 1em;
text-align: center;
vertical-align: top;
background: #FFF;
}
.glyph .glyph-icon {
padding: 10px;
display: block;
font-family:"Flaticon";
font-size: 64px;
line-height: 1;
}
.glyph .glyph-icon:before {
font-size: 64px;
color: #222;
margin-left: 0;
}
.class-name {
font-size: 0.65em;
background-color: #222;
color: #fff;
border-radius: 4px 4px 0 0;
padding: 0.5em;
color: #FFFF99;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}
.author-name {
font-size: 0.6em;
background-color: #fcfcfd;
border: 1px solid #DEDEE4;
border-top: 0;
border-radius: 0 0 4px 4px;
padding: 0.5em;
}
.class-name:last-child {
font-size: 10px;
color:#888;
}
.class-name:last-child a {
font-size: 10px;
color:#555;
}
.class-name:last-child a:hover {
color:#a9fd00;
}
.glyph > input {
display: block;
width: 100px;
margin: 5px auto;
text-align: center;
font-size: 12px;
cursor: text;
}
.glyph > input.icon-input {
font-family:"Flaticon";
font-size: 16px;
margin-bottom: 10px;
}
.attribution .title {
margin-top: 2em;
}
.attribution textarea {
background-color: #fcfcfd;
padding: 1em;
border: none;
box-shadow: none;
border: 1px solid #DEDEE4;
border-radius: 4px;
resize: none;
width: 100%;
height: 150px;
font-size: 0.8em;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
-webkit-appearance: none;
}
.iconsuse {
margin: 2em auto;
text-align: center;
max-width: 1200px;
}
.iconsuse:after {
content: '';
display: table;
clear: both;
}
.iconsuse .image {
float: left;
width: 25%;
padding: 0 1em;
}
.iconsuse .image p {
margin-bottom: 1em;
}
.iconsuse .image span {
display: block;
font-size: 0.65em;
background-color: #222;
color: #fff;
border-radius: 4px;
padding: 0.5em;
color: #FFFF99;
margin-top: 1em;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}
#footer {
text-align: center;
background-color: #4C5B5C;
color: #7c9192;
padding: 1em;
}
#footer a {
border: none;
color: #a9fd00;
font-weight: normal;
}
@media (max-width: 960px) {
.iconsuse .image {
width: 50%;
}
}
@media (max-width: 560px) {
.iconsuse .image {
width: 100%;
}
}
</style>
</head>
<body class="characters-off">
<header>
<a href="https://www.flaticon.com" target="_blank" class="logo">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" viewBox="0 0 560.875 102.036" enable-background="new 0 0 560.875 102.036" xml:space="preserve">
<defs>
</defs>
<g>
<g
没有合适的资源?快使用搜索试试~ 我知道了~
HTML+CSS+JS+JQ+Bootstrap的精致料理美食响应式网站模板.7z
共72个文件
jpg:28个
html:8个
css:7个
需积分: 5 0 下载量 188 浏览量
2024-07-29
11:33:55
上传
评论
收藏 2.74MB 7Z 举报
温馨提示
实践案例:这些代码通常提供实际网站构建的示例,包括布局、交互和动态效果,有助于理解理论知识在现实项目中的应用。 技术栈覆盖:包含HTML5、CSS3和现代JavaScript(如ES6+),紧跟Web开发趋势,帮助学习者掌握最新技术。 清晰的结构:良好的代码组织和注释,便于初学者理解代码逻辑和功能实现。 模块化设计:代码可能采用模块化方式编写,使得部分功能可以轻松地被提取或替换,适合个性化定制。 跨浏览器兼容:确保网站在不同浏览器中表现一致,提高用户体验。 响应式布局:适应各种设备屏幕尺寸,从桌面到移动设备,提供无缝的视觉体验。 加载速度:优化图像和脚本,减少HTTP请求,提升页面加载速度。 代码压缩:使用Gzip等方法压缩文件大小,加快数据传输。 用户交互:利用JavaScript创建动态表单验证、下拉菜单等,增强用户参与度。 动画效果:通过CSS3或JavaScript实现平滑过渡和动画,增加视觉吸引力。
资源推荐
资源详情
资源评论
收起资源包目录
HTML+CSS+JS+JQ+Bootstrap的精致料理美食响应式网站模板.7z (72个子文件)
[web前端]&[课程设计]&[网站源码]-精致料理美食响应式网站模板
html
icon-fonts
Flaticon.eot 22KB
fontawesome-webfont.eot 162KB
flaticon.html 27KB
Flaticon.woff 14KB
fontawesome-webfont.woff 96KB
fontawesome-webfont.woff2 75KB
Flaticon.svg 139KB
fontawesome-webfont.svg 434KB
Flaticon.ttf 22KB
menu.html 17KB
Icons
Flaticon.eot 22KB
flaticon.html 27KB
_flaticon.scss 4KB
Flaticon.woff 14KB
Flaticon.svg 139KB
Flaticon.ttf 22KB
flaticon.css 3KB
Gruntfile.js 2KB
js
bootstrap.min.js 50KB
main.js 3KB
map.js 706B
circle-progress.min.js 4KB
owl.carousel.min.js 42KB
jquery-3.2.1.min.js 85KB
HTML
img
menu-bg.jpg 190KB
review-bg.jpg 201KB
footer-bg.jpg 127KB
chefs
2.jpg 19KB
1.jpg 17KB
3.jpg 17KB
chefs-bg.jpg 80KB
blog
2.jpg 101KB
thumb
2.jpg 4KB
1.jpg 3KB
3.jpg 4KB
4.jpg 4KB
1.jpg 136KB
3.jpg 70KB
favicon.ico 17KB
page-top-bg
2.jpg 176KB
1.jpg 84KB
3.jpg 124KB
4.jpg 140KB
brands
2.jpg 4KB
1.jpg 6KB
5.jpg 6KB
3.jpg 5KB
4.jpg 4KB
contact-img.jpg 23KB
featured-bg.jpg 99KB
icon
3.png 1KB
1.png 1KB
2.png 1KB
slider
slider-1.jpg 212KB
slider-2.jpg 139KB
slider-3.jpg 154KB
sign.png 3KB
package.json 498B
css
style.css 23KB
bootstrap.min.css 138KB
owl.carousel.css 4KB
animate.css 73KB
font-awesome.min.css 30KB
flaticon.css 3KB
sass
style.scss 23KB
index.html 18KB
elements.html 10KB
contact.html 6KB
about.html 7KB
blog.html 8KB
fonts
HelveticaNeueLTPro-Md.woff 24KB
HelveticaNeueLTPro-Md.otf 41KB
共 72 条
- 1
资源评论
master_chenchengg
- 粉丝: 1w+
- 资源: 2177
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功