<!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
没有合适的资源?快使用搜索试试~ 我知道了~
毕设&课设&大作业-工业项目展示响应式网页模板-适配移动端-HTML源码.zip
共134个文件
scss:84个
jpg:13个
css:11个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 53 浏览量
2024-03-28
09:33:10
上传
评论
收藏 2.73MB ZIP 举报
温馨提示
尊敬的设计师、开发者以及学生朋友们,您是否在寻求一款高质量、易于定制的响应式HTML网页模板源码?这份针对毕业设计、课程设计以及大型作业的源码资源将完美满足您的需求! 这份源码采用最新的HTML5和CSS3技术,结合流行的Bootstrap框架,为您打造了一个高度可定制、跨设备兼容的响应式网页模板。它不仅优化了用户体验,还确保了在不同尺寸的屏幕和设备上均能呈现出完美的布局和样式。 此模板具备丰富的功能组件,如导航栏、轮播图、卡片式布局等,可以灵活组合以满足您的各种设计需求。同时,它还支持多种浏览器和操作系统,让您的作品在各种环境下都能稳定运行。 更令人惊喜的是,这份源码文档齐全、注释清晰,即使您是初学者也能快速上手。我们提供了详细的教程和技术支持,助您轻松完成个性化的网站开发。 总之,这份响应式HTML网页模板源码是您进行毕设、课设或大作业的理想选择。它不仅节省了开发时间,降低了学习成本,还能帮助您提升作品的专业品质。立即获取这份资源,让您的项目脱颖而出!
资源推荐
资源详情
资源评论
收起资源包目录
毕设&课设&大作业-工业项目展示响应式网页模板-适配移动端-HTML源码.zip (134个子文件)
style.css 215KB
_bootstrap.css 189KB
bootstrap.css 154KB
ionicons.css 56KB
ionicons.min.css 50KB
bootstrap-grid.css 45KB
font-awesome.min.css 30KB
animate.css 24KB
jquery.fancybox.min.css 12KB
bootstrap-reboot.css 5KB
owl.carousel.min.css 3KB
fontawesome-webfont.eot 162KB
ionicons.eot 118KB
cheatsheet.html 1.22MB
index.html 22KB
projects.html 13KB
contact.html 13KB
services.html 12KB
blog.html 12KB
about.html 11KB
single.html 9KB
project-single.html 9KB
hero_2.jpg 347KB
hero_3.jpg 319KB
hero_1.jpg 210KB
about_1.jpg 164KB
img_2.jpg 126KB
img_1.jpg 100KB
about_2.jpg 89KB
img_3.jpg 85KB
img_4.jpg 74KB
person_2.jpg 27KB
person_3.jpg 27KB
person_1.jpg 26KB
person_4.jpg 24KB
jquery-3.2.1.min.js 85KB
jquery.fancybox.min.js 67KB
bootstrap.min.js 50KB
owl.carousel.min.js 42KB
popper.min.js 19KB
jquery.waypoints.min.js 9KB
main.js 4KB
bootstrap.css.map 75KB
_variables.scss 37KB
style.scss 19KB
_reboot.scss 11KB
_custom-forms.scss 11KB
_forms.scss 9KB
_navbar.scss 6KB
_card.scss 6KB
_carousel.scss 5KB
_input-group.scss 5KB
_modal.scss 5KB
_popover.scss 4KB
_breakpoints.scss 4KB
_dropdown.scss 4KB
_button-group.scss 4KB
_tables.scss 3KB
_forms.scss 3KB
_buttons.scss 3KB
_print.scss 3KB
_list-group.scss 3KB
_flex.scss 3KB
_buttons.scss 3KB
_functions.scss 3KB
_tooltip.scss 2KB
_type.scss 2KB
_gradients.scss 2KB
_nav.scss 2KB
_grid-framework.scss 2KB
_pagination.scss 2KB
_grid.scss 2KB
_text.scss 2KB
_borders.scss 2KB
_caret.scss 1KB
_display.scss 1KB
_spacing.scss 1KB
_breadcrumb.scss 1KB
_image.scss 1KB
_alert.scss 1KB
_images.scss 1KB
_grid.scss 1016B
_mixins.scss 984B
_badge.scss 982B
_code.scss 968B
_bootstrap.scss 882B
_progress.scss 864B
_close.scss 860B
_hover.scss 747B
_screen-reader.scss 733B
_embed.scss 727B
_border-radius.scss 722B
_position.scss 674B
bootstrap-grid.scss 649B
_table-row.scss 647B
_root.scss 572B
_reset-text.scss 547B
_background-variant.scss 474B
_pagination.scss 453B
_utilities.scss 436B
共 134 条
- 1
- 2
资源评论
DTcode7
- 粉丝: 4600
- 资源: 4100
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功