999精品在线视频,手机成人午夜在线视频,久久不卡国产精品无码,中日无码在线观看,成人av手机在线观看,日韩精品亚洲一区中文字幕,亚洲av无码人妻,四虎国产在线观看 ?

“433”學生成長平臺前端設計與開發

2022-03-29 22:44:50高天棟王鶴穎王葉萍李時穎
客聯 2022年1期
關鍵詞:頁面效果設計

高天棟 王鶴穎 王葉萍 李時穎

摘 要:本文主要描述“433”學生成長平臺”的前端設計與開發,重點探討從需求分析到頁面邏輯與網站業務邏輯的梳理,網站視覺表現,前端頁面的設計和實現過程。

關鍵詞:433;UI;設計;前端技術

一、引言

"433"學生成才工程是蘇州經貿職業技術學院助力學生成長成才的系統工程。通過指導每位學生擔任1任干部、參加1個社團、組織1次班級或學校活動、培養1項專業特長;為學生搭建鍛煉的平臺,全面提升個人素養;指導學生結對1名技能導師,明確1個技能培養方向,參加1次技能比賽,培育學生核心技能;指導學生加入1個創新創業團隊,完成1次創新創業實踐,取得1項創新創業成果,培育學生創新精神。

433”學生成長平臺是服務于"433"學生成才工程的信息化平臺。本文主要介紹該平臺前端部分的設計與主要網頁的主要部分實現過程。

二、需求分析

網站正式開發前,我們通過與學生工作各相關部門對接,明確需求,得到如圖1-1的需求分析。通過需求分析,明確整個433成長成才信息平臺的基本構成主要包括:形象展示頁、注冊登錄頁、網站首頁、成才典型頁,433心得體會頁,433活動頁,成才護航頁。

三、視覺設計

網站功能結構明確后進行視覺設計,明確網站基本配色方案,logo,相關布局要素,制作相關素材,為前端開發提供基礎物料。

由于網站主要服務于學生,主題風格設定為活力清新,最終將網站主題色設定為活力橙,色值為#f47b04。

Logo作為網站的主要視覺標識應該是網站主題形象的符號化凝練,由于“433”這個原創概念很好的概括了成才系統工程的特征,數字元素本身也是很好的視覺設計元素,logo設計提取“433“字樣作為主要視覺元素,在整體扁平化的設計風格基礎上,通過強調陰影和疊壓效果增強其視覺表現力。tab標簽等元素等均保持統一的視覺風格。

網站logo、主要tab標簽、登錄表單的設計如下圖所示:

圖2-1為logo設計,將“433”字樣作為視覺元素,主題風格為扁平風格。通過強調陰影增強了視覺元素間的空間疊壓關系,增強了視覺趣味。

圖2-2為主要tab標簽設計,設計沿用了主視覺元素增加標簽的辨識度,同時增加主色調的明度在色彩上形成深淺兩個視覺層次。

圖2-3為登錄表單設計,為增強網站整體視覺的統一性和視覺表現的趣味性。表單登錄頁面將logo作為圖案進行運用。并將表單設計為卡片,用陰影進行凸顯強調。

主導航設計

主導航為網站的訪問提供了總入口。同時也是最重要的視覺元素之一。

圖2-4為主導航設計。

主導航采用非常簡潔的線性設計,導航條與logo一起組成了頁面布局的top部分。導航的點擊效果設計為帶有立體感的凹陷效果,與網站logo強調陰影的處理協調統一。

四、前端靜態開發概述

完成前一階段的需求分析與網站功能設計、視覺設計部分的工作后,網站就進入了具體開發的階段。由于前端靜態開發與數據庫,后臺管理等網站部分的開發相對獨立。本文主要探討前端靜態開發中的一些重要環節與技術要點。

1.網站頁面主要布局

網站主要頁面布局設計如圖3-1所示。

網站首頁是訪問者獲得主要信息和形成對網站整體印象的關鍵頁面。首頁的導航欄集成了網站所有功能的訪問鏈接。考慮到新聞和活動是內容最豐富,更新動態最多的部分,所以作為首頁的主展示區。其他功能都獨立展示在其他頁面。

首頁的結構非常簡單,主要結構構成如下:

<img src="../images/icon.png" width="150px"/>

<ul class="fix"><li class="nall"></li>……

<li><a href="https://www.szjm.edu.cn/" target="_blank">學院首頁</a></li></ul>

<form><input type="search"/></form>

新聞區和活動區主要使用自定義列表dl:

<p class="sec1">新聞</p>

<dl class="xin"><dd></dd><dt class="news"><a href="#">MORE>>

></a></dt>

<dt>信息技術學院舉辦“翰墨書華章 丹青頌黨恩”書畫比賽</dt>

<dt>“逐夢新時代 奮進新征程”……

</dt></dl><p class="sec2">最新活動</p><dl class="play"><dd><p class="move"></p></dd><dt>信息技術學院暑期志愿者招募……</dt></dl>

2.導航調的凹陷效果實現

導航條的凹陷效果主要采用的是hover偽類技術,設置方法如下:

.fix a:link,.fix a:visited{? color:#FFF; background-color:#F90; padding-top:6px; }

.fix a:hover{

color:#FFF; background-color:#F90; padding-top:6px;

box-shadow:0px 0px 20px 0px rgba(204,51,0,0.8) inset;

transition:box-shadow 1s linear; }

3.注冊登錄頁面開發

注冊登錄頁面的主體是一個表單,基于盒子模型設計在卡片效果的塊狀元素上層。表單樣式主要設定卡片的陰影效果和表單組件的色彩與形狀:

form{ width:300px; height:300px; background-color:#FFF;border:1px #FFF solid; border-radius:10px; color:#CCC;

input[class^="bt"]{ width:56px;height:36px; border:#FFF 1px solid; background-color:#F90; border-radius:10px;color:#00C; font:normal bolder 12px/18px "微軟雅黑"; text-align:center;}

.zh{ background-color:rgba(255,153,0,0.2); border:#FFF 1px solid; border-radius:5px; }

.mm{ background-color:rgba(255,153,0,0.2);border:#FFF 1px solid; border-radius:5px; }

4.成才典型頁面與翻轉動畫效果實現

成才典型頁面以翻轉立方體的展示方式展示成才典型的個人形象與主要成果。增強了視覺趣味性。當鼠標點擊圖片時,圖片會出現上下翻轉,翻轉效果使用了h5的動畫技術。主要實現方法為將翻轉前翻轉后的圖片設置在一個div標簽中,通過hover偽類控制顯示隱藏和移動參數,關鍵設置如下:

.no1{background-color:rgba(0,102,204,0.4);transform:rotateX(90deg) translateZ(130px);? }

.no2{transform:translateZ(130px) translateX(0px);}

.pic li:hover{transform:rotateX(-90deg);}

5.成才體會頁面的設計與實現:

為了增強文字部分在視覺效果上的整體感,在文字背后增加了一個淡藍的色塊,在色系上也形成了良好的近互補關系,平衡了橙色的跳躍感。

個人圖片展示鼠標放上去時才會顯示清晰效果。增強了頁面的統一感和訪問的趣味性。主要實現方法是通過鼠標點擊時更改圖片不透明度的偽類設置實現該效果。

實現方法為:

dt.p1{background:url(../images/xz.jpg) no-repeat center;

background-size:cover;}

dt.p2{background:url(../images/xz2.jpg) no-repeat center;

background-size:contain;}

dt{ float:left;width:220px; height:220px; border-radius:50%;

background-color:#FC9; opacity:0.5; border:#F90 10px solid;

box-shadow:5px 5px 20px 0px #CCCCCC; margin-left:10px; margin-top:50px; }

dt:hover{opacity:0.8;}

五、結語

本文較為詳細的描述了網站從需求到視覺到具體的前端頁面的設計開發過程和一些重要的前端技術實現。筆者認為本項目具有一定的典型意義,可為同類項目提供一些參考與借鑒。

參考文獻:

[1] 陳鵬, 程勇.WAMP項目開發實用案例[J].科學出版社,2017,(2):33-48。

[2]曹劉陽.編寫高質量代碼:Web前端開發修煉之道[M].北京:機械工業出版社,2010.

[3]劉春華.基于HTML5的移動互聯網應用發展趨勢[J].移動通信,2013(09):64-68.

猜你喜歡
頁面效果設計
大狗熊在睡覺
刷新生活的頁面
保健醫苑(2022年1期)2022-08-30 08:39:14
按摩效果確有理論依據
迅速制造慢門虛化效果
瞞天過海——仿生設計萌到家
藝術啟蒙(2018年7期)2018-08-23 09:14:18
抓住“瞬間性”效果
中華詩詞(2018年11期)2018-03-26 06:41:34
設計秀
海峽姐妹(2017年7期)2017-07-31 19:08:17
有種設計叫而專
Coco薇(2017年5期)2017-06-05 08:53:16
模擬百種唇妝效果
Coco薇(2016年8期)2016-10-09 02:11:50
同一Word文檔 縱橫頁面并存
主站蜘蛛池模板: 欧美亚洲日韩中文| 亚洲中文无码h在线观看| 国产乱子伦视频在线播放| 日本久久免费| 伦精品一区二区三区视频| 亚洲a级在线观看| 欧美午夜在线视频| 99热这里只有精品国产99| 亚洲另类第一页| 91亚瑟视频| 日韩黄色精品| 国产视频自拍一区| 国产高潮视频在线观看| 四虎成人精品在永久免费| 日韩天堂视频| 国产色图在线观看| 欧美天堂久久| 国产AV毛片| 91年精品国产福利线观看久久| 无套av在线| 国产乱人伦AV在线A| 欧美a在线视频| 日韩无码视频专区| 欧美成在线视频| 久久婷婷六月| 亚洲综合九九| 九色视频在线免费观看| 国产成人一级| 久久综合干| 亚洲精品无码抽插日韩| 国产91丝袜在线播放动漫 | 亚洲日韩精品伊甸| 九色在线观看视频| а∨天堂一区中文字幕| 中国美女**毛片录像在线| 色香蕉网站| 网久久综合| 少妇精品网站| 国产va在线| 97在线观看视频免费| 特级毛片8级毛片免费观看| 免费视频在线2021入口| 精品五夜婷香蕉国产线看观看| 欧美亚洲国产一区| 亚洲第一黄色网址| 日韩中文精品亚洲第三区| 中文字幕日韩久久综合影院| 久久久久免费看成人影片| 亚洲精品国产综合99久久夜夜嗨| 日本不卡视频在线| 日韩小视频在线播放| 亚洲无码在线午夜电影| 亚洲人成人伊人成综合网无码| 亚洲综合日韩精品| 欧美日韩国产成人在线观看| 日韩高清欧美| 精品国产Ⅴ无码大片在线观看81| 好吊色国产欧美日韩免费观看| 色综合久久无码网| 天天干伊人| 久久五月天综合| 凹凸国产分类在线观看| 国产精品成人一区二区| 黄色网在线| 亚洲av综合网| 亚洲区欧美区| 国产亚洲视频在线观看| 久久综合九色综合97网| 青青操视频在线| 国产精品亚洲va在线观看| 欧美激情伊人| 国产天天色| 永久毛片在线播| 国产成人h在线观看网站站| 狠狠色综合久久狠狠色综合| 欧美日韩国产在线人成app| 免费一级毛片完整版在线看| 五月天丁香婷婷综合久久| 在线观看国产一区二区三区99| 成人精品午夜福利在线播放| 99久久国产综合精品2023 | 精品三级网站|