整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
开发一个H5页面的时候，如果这个页面只适配竖屏/横屏，这种情况下，通常要做一个手机横竖屏的提示，实现这个提示功能的方法有多种，这里，我准备写几行样式来实现。
先看如何实现及效果，在总结一下用样式实现的几个好处。
代码：
效果图：
当横屏展示的时候：
实现起来特别简单，就是html和body元素上设置了after/before伪元素，使用media的方式在符合条件的情况下，将其展示出来。详细见上面代码所示。
纯CSS实现有哪些好处了
1、使用起来比较方便，引用这段CSS代码，所有页面就可以实现提示功能。
2、无http请求，不需要引入JS代码文件，也不会阻塞页面的渲染，图片转成base64，代码量也不多。
3、视觉可以自定义，提示图可以灵活更换。
bootstrap框架中综合运用fullpage全屏插件、animate.css动画等知识，可以实现动感炫酷的网页版个人简历。案例整体分为6屏，由于内容较多，本案例讲解第1屏，后面的文章陆续介绍其他屏的制作。
案例采用响应式布局，移动端也可以很好的实现信息的展示。第1屏首页的效果如下：
本案例的代码注释比较详细，大家参照代码就可以轻松实现案例效果。
网页文件index.html第1屏的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简历第1屏</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<!--自定义CSS-->
<link rel="stylesheet" type="text/css" href="css/t1.css"/>
</head>
<body>
<!--导航开始-->
<nav class="navbar navbar-default navbar-fixed-top dh">
<div class="container">
<div class="navbar-header">
<a href="test1.html" class="navbar-brand">斯图尔特的简历</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#dh-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="dh-menu">
<ul class="nav navbar-nav navbar-right" id="dh-menu1">
<li data-menuanchor="p1" class="active"><a href="#p1">首页</a></li>
<li data-menuanchor="p2"><a href="#p2">基本资料</a></li>
<li data-menuanchor="p3"><a href="#p3">专业技能</a></li>
<li data-menuanchor="p4"><a href="#p4">个人经历</a></li>
<li data-menuanchor="p5"><a href="#p5">项目经验</a></li>
<li data-menuanchor="p6"><a href="#p6">自我评价</a></li>
</ul>
</div>
</div>
</nav>
<!--导航结束-->
<!--fullpage开始-->
<div class="ap">
<!--第1屏-->
<div class="section sec1">
<div class="title1">
<span class="p1-title">web前端开发工程师</span>
<span class="hidden-xs">简历</span>
<span class="col-xs-12 hidden-sm hidden-md hidden-lg">简历</span>
<p class="title2">爱技术，爱生活</p>
<a href="#" class="next-page">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<!--四个角-->
<div class="corner corner1">
<img src="images/p1/1.png"/>
</div>
<div class="corner corner2">
<img src="images/p1/2.png"/>
</div>
<div class="corner corner3">
<img src="images/p1/3.png"/>
</div>
<div class="corner corner4">
<img src="images/p1/4.png"/>
</div>
</div>
</div>
<!-- 引入jq库文件-->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--自定义jq-->
<script type="text/javascript" src="js/t1.js"></script>
</body>
</html>
自定义CSS样式文件t1.css包含第1屏的代码如下：
body{
font-family:"microsoft yahei";
-webkit-tap-highlight-color:transparent;
}
a{
color:#fff;
}
/*主导航栏*/
#dh-menu1 .active a{
background:rgba(183,4,4,0.9);
color:#fff;
}
.dh{
border:none;
}
.navbar{
background:rgba(0,0,0,0.2);
transition:all 1s ease;
}
.dh .navbar-brand,.dh .navbar-brand:hover,.dh .navbar-brand:visited{
color:#fff;
font-size:19px;
letter-spacing: 0.1em;
}
.dh .navbar-right li a,.dh .navbar-right li a:visited{
color:#fff!important;
}
/*右侧导航栏*/
#fp-nav{
/*border:solid 1px #f00;*/
top:80%;
}
#fp-nav ul li{
margin:10px 50px;
width:150%;
height:150%;
vertical-align: middle;
}
#fp-nav ul li a{
display: block;
margin:10px 50px;
width:150%;
height:150%;
/*border:solid 1px #f00;*/
padding:1px;
}
#fp-nav ul li a span{
display: block;
background:#333;
border:none;
width:15px;
height:15px;
}
#fp-nav ul li a.active span{
background: #ddd;
box-shadow: 0px 0px 3px 1px #eee;
}
/*第1屏*/
.p1-title{
display: none;
}
.section{
text-align: center;
font-size:40px;
color:#fff;
}
.sec1{
background:url(../images/p1/bg1.jpg);
background-size:cover;
}
.sec1 .title1{
margin:-10% 0px 0px 0px;
}
.sec1 .title1 > span:first-child{
font-weight: bold;
font-size:45px;
color:#EB9316;
text-shadow:3px -2px 5px #333;
}
.sec1 .title1 > span.hidden-xs,
.sec1 .title1 > span.col-xs-12{
color:#f90;
text-shadow:2px -1px 7px #333;
}
.sec1 .title1 > span:nth-child(1),
.sec1 .title1 > span:nth-child(2){
position: relative;
animation:topmove 2s ease;
}
.sec1 .title1 p{
animation:p-scale 2s ease;
}
.sec1 .title2{
font-size:25px;
}
/**/
.next-page{
margin:0px 0px 0px -35px;
position:absolute;
bottom:15%;
left:50%;
border:solid 2px rgba(255,255,255,.5);
width:70px;
height:70px;
border-radius: 50%;
color:#eee;
line-height:80px;
overflow: hidden;
transition:all 1s ease;
background:rgba(0,0,0,0.5);
}
.next-page:hover{
background:rgba(50,50,50,0.9);
}
.next-page span{
animation: next-page 2s linear infinite;
opacity: 0.7;
font-size:30px;
}
/*4个角*/
.sec1 .corner{
position: absolute;
/*max-width:72px;
min-width: 50px;*/
width:5%;
}
.sec1 .corner img{
width:100%;
}
.sec1 .corner1{
top:10%;
left:10%;
animation: corner1 1s ease;
}
.sec1 .corner2{
bottom:10%;
left:10%;
animation: corner2 1s ease;
}
.sec1 .corner3{
top:10%;
right:10%;
animation: corner3 1s ease;
}
.sec1 .corner4{
bottom:10%;
right:10%;
animation: corner4 1s ease;
}
/*CSS3具体动画*/
@keyframes next-page{
0%{
top:-35px;
}
100%{
top:30px;
}
}
@keyframes corner1{
from{
opacity:0.1;
transform: rotate(-90deg);
}
to{
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes corner2{
from{
opacity:0.1;
transform: rotate(90deg);
}
to{
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes corner3{
from{
opacity:0.1;
transform: rotate(90deg);
}
to{
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes corner4{
from{
opacity:0.1;
transform: rotate(-90deg);
}
to{
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes topmove{
from{
top:-200px;
}
to{
top:0px;
}
}
@keyframes p-scale{
0%{
transform: scale(3);
}
50%{
transform: scale(0.5);
}
100%{
transform: scale(1);
}
}
自定义Jquery文件t1.js的代码如下：
$(function(){
$('.ap').fullpage({
sectionsColor:['transparent','transparent','#ccc','rgba(255,255,255,0)','transparent','transparent',],
navigation:true,
anchors:['p1','p2','p3','p4','p5','p6',],
menu:'#dh-menu1',
scrollingSpeed:700,
controlArrowColor:'rgba(245,245,245,0.9)',
normalScrollElementTouchThreshold:5,
easing:'easeInOut',
//页面渲染后回调
afterRender:function(){
//侧边导航事件
var tooltip1=['首页','基本资料','专业技能','个人经历','项目经验','自我评价'];
$('#fp-nav ul li a').each(function(index){
this.dataset['toggle']='tooltip';
this.dataset['placement']='left';
$(this).attr('title',tooltip1[index]);
});
$('[data-toggle="tooltip"]').tooltip();
$('#fp-nav').addClass('hidden-xs');
//
$('.next-page').on('click',function(){
$.fn.fullpage.moveSectionDown();
});
// 顶部导航栏自动收起事件
/*if($('.navbar-toggle').css('display')=='block'){
$('.navbar-collapse li').on('click',function(){
$('.navbar-toggle').trigger('click');
});
};*/
$('.navbar-collapse').on('click',function(){
$(this).collapse('hide');
});
//
setTimeout(function(){
$('.sec1 .corner').show();
$('.p1-title').show();
},500);
},
//滚动结束时回调
onLeave:function(index,nextIndex,direction){
switch(index){
case 1:
$('.sec1 .corner').hide();
$('.p1-title').hide();
break;
case 2:
if(direction == 'down'){
$('.sec2 .p2-icon').addClass('zoomOutUp');
setTimeout(function(){
$('.sec2 .p2-icon').removeClass('zoomOutUp');
$('.sec2 .container').hide();
},300);
}else{
$('.sec2 .container').hide();
}
break;
case 3:
$('.sec3 .container').hide();
break;
case 4:
$('.sec4 .container').hide();
$('.sky').show();
break;
case 6:
$('.sec6 .top').animate({'height':'50%'},700);
$('.sec6 .bottom').animate({'height':'50%'},700);
$('.sky').hide();
break;
}
},
//滚动后回调
afterLoad:function(anchorLink,index){
switch(anchorLink){
case 'p1':
$('.sec1 .corner').show();
$('.p1-title').show();
break;
case 'p2':
$('.sec2 .container').show();
break;
case 'p3':
$('.sec3 .container').show();
break;
case 'p4':
$('.sec4 .container').show();
break;
case 'p5':
break;
case 'p6':
$('.sec6 .top').animate({'height':'30%'},1000);
$('.sec6 .bottom').animate({'height':'30%'},1000);
break;
}
}
//
});
});
至此，第1屏的案例效果制作完成，敬请关注后续文章。
寻找热爱表达的你#
"screenshot-to-code"（截屏转代码）是一个人工智能开源项目，通常指的是将用户界面（UI）的截图转换成相应的前端代码。这样的项目对于前端开发者来说非常有用，因为它可以减少手动编写布局代码的工作量，提高开发效率。以下是一些关于"screenshot-to-code" AI开源项目的可能特性和功能：
1. 图像识别：项目使用图像识别技术来解析截屏中的UI元素，如按钮、文本框、导航栏等。
2. 布局分析：AI分析截图中的布局结构，包括元素的位置、大小和层级关系。
3. 代码生成：根据识别的UI元素和布局，自动生成相应的HTML、CSS和可能的JavaScript代码。
4. 支持多种UI框架：能够支持生成不同前端框架下的代码，如React、Vue或Angular。
5. 响应式设计：生成的代码应支持响应式设计，以适应不同屏幕尺寸和设备。
6. 样式提取：从截图中提取颜色、字体、间距等样式信息，并转换为CSS代码。
7. 交互功能：如果截图包含交互元素，AI应能识别并生成相应的交互代码。
8. 用户自定义：允许用户对生成的代码进行定制和修改，以满足特定需求。
9. 插件或扩展：可能作为浏览器插件或IDE扩展存在，方便开发者直接从截图生成代码。
10. 版本控制集成：与Git等版本控制系统集成，方便代码管理和协作。
11. 社区支持：作为开源项目，拥有活跃的社区，提供支持、反馈和持续改进。
12. 文档和教程：提供详细的文档和使用教程，帮助用户理解和使用工具。
13. 多语言支持：支持多种编程语言，以适应不同开发者的需求。
14. 可扩展性：允许开发者添加自定义组件或功能，以扩展工具的能力。
15. 质量控制：生成的代码应符合行业标准和最佳实践，保证代码质量。
16. 兼容性测试：确保生成的代码在不同的浏览器和设备上都能正常工作。
17. 性能优化：考虑性能优化，生成的代码应避免不必要的渲染负担。
18. 安全性：生成的代码应遵循安全标准，避免潜在的安全漏洞。
"screenshot-to-code" AI开源项目可以极大地提高前端开发的效率，尤其是在快速原型设计和迭代过程中。然而，需要注意的是，自动生成的代码可能需要进一步的人工审查和调整，以确保最终产品的质量和性能。
*请认真填写需求信息，我们会在24小时内与您取得联系。
