<!DOCTYPE html>
<html>
<head>
<title>Ionicons v2.0.0 Cheatsheet</title>
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
background: #fff;
color: #444;
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a, a:visited {
color: #888;
text-decoration: underline;
}
a:hover, a:focus { color: #000; }
header {
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
overflow: hidden;
padding: 20px 0;
}
header h1 {
color: #888;
float: left;
font-size: 36px;
font-weight: 300;
}
header a {
float: right;
font-size: 14px;
}
.container {
margin: 0 auto;
max-width: 1200px;
min-width: 960px;
padding: 0 20px;
width: 95%;
}
.icon-row {
border-bottom: 1px dotted #ccc;
padding: 10px 0 20px;
margin-bottom: 20px;
}
.ion {
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.preview-icon { vertical-align: bottom; }
.preview-scale {
color: #888;
font-size: 12px;
margin-top: 5px;
}
.step {
display: inline-block;
line-height: 1;
position: relative;
width: 10%;
}
.step i {
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.step:hover i { opacity: .3; }
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-32 { font-size: 32px; }
.size-48 { font-size: 48px; }
.size-64 { font-size: 64px; }
.size-96 { font-size: 96px; }
.usage { margin-top: 10px; }
.usage input {
font-family: monospace;
margin-right: 3px;
padding: 2px 5px;
text-align: center;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.usage label {
font-size: 12px;
text-align: right;
padding: 0 3px 0 60px;
}
.usage label:first-child { padding-left: 0; }
.usage .name { width: 180px; }
.usage .html { width: 80px; }
.usage .css { width: 80px; }
footer {
color: #888;
font-size: 12px;
padding: 20px 0;
}
</style>
<link href="css/ionicons.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<header>
<h1>Ionicons v2.0.0 Cheatsheet, 733 icons:</h1>
<p><a href="http://ionicons.com/">Ionicons Homepage</a></p>
</header>
<div class="content">
<div class="icon-row">
<div class="preview-icon"><span class="step size-12">
<i class="icon ion-alert"></i>
</span><span class="step size-14">
<i class="icon ion-alert"></i>
</span><span class="step size-16">
<i class="icon ion-alert"></i>
</span><span class="step size-18">
<i class="icon ion-alert"></i>
</span><span class="step size-21">
<i class="icon ion-alert"></i>
</span><span class="step size-24">
<i class="icon ion-alert"></i>
</span><span class="step size-32">
<i class="icon ion-alert"></i>
</span><span class="step size-48">
<i class="icon ion-alert"></i>
</span><span class="step size-64">
<i class="icon ion-alert"></i>
</span><span class="step size-96">
<i class="icon ion-alert"></i>
</span>
</div>
<div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
<div class="usage">
<label>Classname:</label>
<input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-alert" />
<label>Selectable:</label>
<span class="ion"></span>
<label>Escaped HTML:</label>
<input class="html" type="text" readonly="readonly" onClick="this.select();" value="&#xf101;" />
<label>CSS Content:</label>
<input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f101" />
</div>
</div>
<div class="icon-row">
<div class="preview-icon"><span class="step size-12">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-14">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-16">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-18">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-21">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-24">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-32">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-48">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-64">
<i class="icon ion-alert-circled"></i>
</span><span class="step size-96">
<i class="icon ion-alert-circled"></i>
</span>
</div>
<div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
<div class="usage">
<label>Classname:</label>
<input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-alert-circled" />
<label>Selectable:</label>
<span class="ion"></span>
<label>Escaped HTML:</label>
<input class="html" type="text" readonly="readonly" onClick="this.select();" value="&#xf100;" />
<label>CSS Content:</label>
<input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f100" />
</div>
</div>
<div class="icon-row">
<div class="preview-icon"><span class="step size-12">
<i class="icon ion-android-add"></i>
</span><span class="step size-14">
<i class="icon ion-android-add"></i>
</span><span class="step size-16">
<i class="icon ion-android-add"></i>
</span><span class="step size-18">
<i class="icon ion-android-add"></i>
</span><span class="step size-21">
<i class="icon ion-android-add"></i>
</span><span class="step size-24">
<i class="icon ion-android-add"></i>
</span><span class="step size-32">
<i class="icon ion-android-add"></i>
</span><span class="step size-48">
<i class="icon ion-android-add"></i>
</span><span class="step size-64">
<i class="icon ion-android-add"></i>
</span><span class="step size-96">
<i class="icon ion-android-add"></i>
</span>
</div>
<div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div>
<div class="usage">
<label>Classname:</label>
<input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-add" />
<label>Se
没有合适的资源?快使用搜索试试~ 我知道了~
课设&大作业&毕设-酒店VIP会员服务展示响应式网站模板-适配移动端-HTML源码.zip
共137个文件
scss:85个
jpg:13个
js:10个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 78 浏览量
2024-03-28
09:35:30
上传
评论
收藏 2.59MB ZIP 举报
温馨提示
同学们,想要为你的毕业设计、课程大作业打造一片独一无二、引人入胜的数字天地吗?这份超酷的响应式HTML网页模板源码,就是你实现梦想的神兵利器! 这份源码利用最前沿的HTML5和CSS3技术,搭载流行的Bootstrap框架,为你构建了一个完全可定制、适应各种屏幕尺寸的响应式网页模板。它不仅优化了用户在电脑、平板、手机上的浏览体验,还确保了在不同设备上都能展现出完美的布局和样式。 这个模板拥有丰富的功能组件,包括导航栏、轮播图、卡片式布局等,可以灵活组合以满足你的创意需求。而且,它还支持多种浏览器和操作系统,让你的作品在任何环境下都能稳定展现。 最棒的是,这份源码功能齐全、注释清晰,即使你是编程新手也能快速上手。我们提供了详细的教程和技术支持,帮助你轻松完成个性化的网站开发。 这份响应式HTML网页模板源码,是你进行毕设、课设或大作业的最佳伙伴。它不仅节省了你的时间,降低了学习成本,还能助你提升作品的专业品质。快来获取这份资源,让你的项目在众多作品中脱颖而出!
资源推荐
资源详情
资源评论
收起资源包目录
课设&大作业&毕设-酒店VIP会员服务展示响应式网站模板-适配移动端-HTML源码.zip (137个子文件)
prepros-6.config 11KB
bootstrap.css 147KB
ionicons.css 56KB
ionicons.min.css 50KB
font-awesome.min.css 30KB
style.css 29KB
animate.css 24KB
magnific-popup.css 8KB
owl.carousel.min.css 3KB
_flaticon.css 2KB
fontawesome-webfont.eot 162KB
ionicons.eot 118KB
cheatsheet.html 1.22MB
blog-single.html 20KB
rooms.html 17KB
blog.html 13KB
index.html 13KB
booknow.html 12KB
about.html 10KB
contact.html 9KB
big_image_1.jpg 168KB
img_5.jpg 104KB
img_4.jpg 100KB
img_6.jpg 96KB
person_6.jpg 78KB
img_3.jpg 69KB
img_1.jpg 64KB
person_5.jpg 49KB
person_4.jpg 47KB
person_3.jpg 45KB
img_2.jpg 37KB
person_2.jpg 33KB
person_1.jpg 30KB
jquery-3.2.1.min.js 85KB
bootstrap.min.js 49KB
owl.carousel.min.js 42KB
jquery.magnific-popup.min.js 20KB
popper.min.js 19KB
jquery-migrate-3.0.0.js 15KB
jquery.stellar.min.js 12KB
jquery.waypoints.min.js 9KB
main.js 4KB
magnific-popup-options.js 1KB
bootstrap.css.map 72KB
f_img_1.png 616KB
_variables.scss 35KB
style.scss 22KB
_reboot.scss 11KB
_forms.scss 9KB
_custom-forms.scss 8KB
_navbar.scss 7KB
_card.scss 6KB
_input-group.scss 5KB
_modal.scss 5KB
_popover.scss 4KB
_breakpoints.scss 4KB
_carousel.scss 4KB
_button-group.scss 4KB
_tables.scss 3KB
_forms.scss 3KB
_buttons.scss 3KB
_dropdown.scss 3KB
_list-group.scss 3KB
_print.scss 3KB
_buttons.scss 3KB
_functions.scss 3KB
_tooltip.scss 2KB
_flex.scss 2KB
_type.scss 2KB
_gradients.scss 2KB
_nav.scss 2KB
_grid-framework.scss 2KB
_pagination.scss 2KB
_grid.scss 2KB
_borders.scss 2KB
_caret.scss 1KB
_display.scss 1KB
_spacing.scss 1KB
_text.scss 1KB
_breadcrumb.scss 1KB
_image.scss 1KB
_alert.scss 1KB
_images.scss 1KB
_code.scss 1KB
_mixins.scss 1018B
_grid.scss 1016B
_badge.scss 982B
bootstrap.scss 881B
_close.scss 860B
_progress.scss 841B
_hover.scss 783B
_screen-reader.scss 778B
_embed.scss 727B
_border-radius.scss 722B
bootstrap-grid.scss 648B
_table-row.scss 647B
_position.scss 614B
_root.scss 572B
_reset-text.scss 547B
_background-variant.scss 474B
共 137 条
- 1
- 2
资源评论
DTcode7
- 粉丝: 1496
- 资源: 4061
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功