整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
擊上方藍(lán)字關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識(shí)，搞懂一個(gè)問題！
開發(fā)一個(gè)H5頁面的時(shí)候，如果這個(gè)頁面只適配豎屏/橫屏，這種情況下，通常要做一個(gè)手機(jī)橫豎屏的提示，實(shí)現(xiàn)這個(gè)提示功能的方法有多種，這里，我準(zhǔn)備寫幾行樣式來實(shí)現(xiàn)。
先看如何實(shí)現(xiàn)及效果，在總結(jié)一下用樣式實(shí)現(xiàn)的幾個(gè)好處。
代碼：
效果圖：
當(dāng)橫屏展示的時(shí)候：
實(shí)現(xiàn)起來特別簡(jiǎn)單，就是html和body元素上設(shè)置了after/before偽元素，使用media的方式在符合條件的情況下，將其展示出來。詳細(xì)見上面代碼所示。
純CSS實(shí)現(xiàn)有哪些好處了
1、使用起來比較方便，引用這段CSS代碼，所有頁面就可以實(shí)現(xiàn)提示功能。
2、無http請(qǐng)求，不需要引入JS代碼文件，也不會(huì)阻塞頁面的渲染，圖片轉(zhuǎn)成base64，代碼量也不多。
3、視覺可以自定義，提示圖可以靈活更換。
bootstrap框架中綜合運(yùn)用fullpage全屏插件、animate.css動(dòng)畫等知識(shí)，可以實(shí)現(xiàn)動(dòng)感炫酷的網(wǎng)頁版?zhèn)€人簡(jiǎn)歷。案例整體分為6屏，由于內(nèi)容較多，本案例講解第1屏，后面的文章陸續(xù)介紹其他屏的制作。
案例采用響應(yīng)式布局，移動(dòng)端也可以很好的實(shí)現(xiàn)信息的展示。第1屏首頁的效果如下：
本案例的代碼注釋比較詳細(xì)，大家參照代碼就可以輕松實(shí)現(xiàn)案例效果。
網(wǎng)頁文件index.html第1屏的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)歷第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>
<!--導(dǎo)航開始-->
<nav class="navbar navbar-default navbar-fixed-top dh">
<div class="container">
<div class="navbar-header">
<a href="test1.html" class="navbar-brand">斯圖爾特的簡(jiǎn)歷</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">專業(yè)技能</a></li>
<li data-menuanchor="p4"><a href="#p4">個(gè)人經(jīng)歷</a></li>
<li data-menuanchor="p5"><a href="#p5">項(xiàng)目經(jīng)驗(yàn)</a></li>
<li data-menuanchor="p6"><a href="#p6">自我評(píng)價(jià)</a></li>
</ul>
</div>
</div>
</nav>
<!--導(dǎo)航結(jié)束-->
<!--fullpage開始-->
<div class="ap">
<!--第1屏-->
<div class="section sec1">
<div class="title1">
<span class="p1-title">web前端開發(fā)工程師</span>
<span class="hidden-xs">簡(jiǎn)歷</span>
<span class="col-xs-12 hidden-sm hidden-md hidden-lg">簡(jiǎn)歷</span>
<p class="title2">愛技術(shù)，愛生活</p>
<a href="#" class="next-page">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<!--四個(gè)角-->
<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;
}
/*主導(dǎo)航欄*/
#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;
}
/*右側(cè)導(dǎo)航欄*/
#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個(gè)角*/
.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具體動(dòng)畫*/
@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',
//頁面渲染后回調(diào)
afterRender:function(){
//側(cè)邊導(dǎo)航事件
var tooltip1=['首頁','基本資料','專業(yè)技能','個(gè)人經(jīng)歷','項(xiàng)目經(jīng)驗(yàn)','自我評(píng)價(jià)'];
$('#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();
});
// 頂部導(dǎo)航欄自動(dòng)收起事件
/*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);
},
//滾動(dòng)結(jié)束時(shí)回調(diào)
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;
}
},
//滾動(dòng)后回調(diào)
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屏的案例效果制作完成，敬請(qǐng)關(guān)注后續(xù)文章。
尋找熱愛表達(dá)的你#
"screenshot-to-code"（截屏轉(zhuǎn)代碼）是一個(gè)人工智能開源項(xiàng)目，通常指的是將用戶界面（UI）的截圖轉(zhuǎn)換成相應(yīng)的前端代碼。這樣的項(xiàng)目對(duì)于前端開發(fā)者來說非常有用，因?yàn)樗梢詼p少手動(dòng)編寫布局代碼的工作量，提高開發(fā)效率。以下是一些關(guān)于"screenshot-to-code" AI開源項(xiàng)目的可能特性和功能：
1. 圖像識(shí)別：項(xiàng)目使用圖像識(shí)別技術(shù)來解析截屏中的UI元素，如按鈕、文本框、導(dǎo)航欄等。
2. 布局分析：AI分析截圖中的布局結(jié)構(gòu)，包括元素的位置、大小和層級(jí)關(guān)系。
3. 代碼生成：根據(jù)識(shí)別的UI元素和布局，自動(dòng)生成相應(yīng)的HTML、CSS和可能的JavaScript代碼。
4. 支持多種UI框架：能夠支持生成不同前端框架下的代碼，如React、Vue或Angular。
5. 響應(yīng)式設(shè)計(jì)：生成的代碼應(yīng)支持響應(yīng)式設(shè)計(jì)，以適應(yīng)不同屏幕尺寸和設(shè)備。
6. 樣式提取：從截圖中提取顏色、字體、間距等樣式信息，并轉(zhuǎn)換為CSS代碼。
7. 交互功能：如果截圖包含交互元素，AI應(yīng)能識(shí)別并生成相應(yīng)的交互代碼。
8. 用戶自定義：允許用戶對(duì)生成的代碼進(jìn)行定制和修改，以滿足特定需求。
9. 插件或擴(kuò)展：可能作為瀏覽器插件或IDE擴(kuò)展存在，方便開發(fā)者直接從截圖生成代碼。
10. 版本控制集成：與Git等版本控制系統(tǒng)集成，方便代碼管理和協(xié)作。
11. 社區(qū)支持：作為開源項(xiàng)目，擁有活躍的社區(qū)，提供支持、反饋和持續(xù)改進(jìn)。
12. 文檔和教程：提供詳細(xì)的文檔和使用教程，幫助用戶理解和使用工具。
13. 多語言支持：支持多種編程語言，以適應(yīng)不同開發(fā)者的需求。
14. 可擴(kuò)展性：允許開發(fā)者添加自定義組件或功能，以擴(kuò)展工具的能力。
15. 質(zhì)量控制：生成的代碼應(yīng)符合行業(yè)標(biāo)準(zhǔn)和最佳實(shí)踐，保證代碼質(zhì)量。
16. 兼容性測(cè)試：確保生成的代碼在不同的瀏覽器和設(shè)備上都能正常工作。
17. 性能優(yōu)化：考慮性能優(yōu)化，生成的代碼應(yīng)避免不必要的渲染負(fù)擔(dān)。
18. 安全性：生成的代碼應(yīng)遵循安全標(biāo)準(zhǔn)，避免潛在的安全漏洞。
"screenshot-to-code" AI開源項(xiàng)目可以極大地提高前端開發(fā)的效率，尤其是在快速原型設(shè)計(jì)和迭代過程中。然而，需要注意的是，自動(dòng)生成的代碼可能需要進(jìn)一步的人工審查和調(diào)整，以確保最終產(chǎn)品的質(zhì)量和性能。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
