国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 大二學(xué)生基于Html+Css+javascript的網(wǎng)頁制作——動漫設(shè)計公司響應(yīng)式網(wǎng)站模板 (10個

大二學(xué)生基于Html+Css+javascript的網(wǎng)頁制作——動漫設(shè)計公司響應(yīng)式網(wǎng)站模板 (10個

時間：2023-10-15 15:36:02 | 來源：網(wǎng)站運營

時間：2023-10-15 15:36:02 來源：網(wǎng)站運營

大二學(xué)生基于Html+Css+javascript的網(wǎng)頁制作——動漫設(shè)計公司響應(yīng)式網(wǎng)站模板 (10個頁面)：
HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。
?精彩專欄推薦

? 【作者主頁—— 獲取更多優(yōu)質(zhì)源碼】 ? 【web前端期末大作業(yè)—— 畢設(shè)項目精品實戰(zhàn)案例(1000套)】

@TOC

一、網(wǎng)頁介紹

1 網(wǎng)頁簡介：此作品為學(xué)生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。

2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運行及修改編輯等操作）。

3.知識應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點。

一、網(wǎng)頁效果




在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述



二、代碼展示

1.HTML代碼結(jié)構(gòu)

代碼如下（示例）：以下僅展示部分代碼供參考~

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>袁動官網(wǎng)-首頁</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/swiper.min.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/animate.min.css" /> </head> <body> <!--頂部--> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid wrap"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" > <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--logo--> <a class="navbar-brand" href="#"> <img src="img/logo.png" alt="" /> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!--<ul class="language navbar-right"> <li><a href="#" class="active">中</a></li> <li>|</li> <li><a href="#">EN</a></li> </ul>--> <ul class="nav navbar-nav main-nav navbar-right"> <li class="active"><a href="index.html">首頁</a></li> <li><a href="worksShow.html">作品展示</a></li> <li><a href="recruit.html">招賢納士</a></li> <li><a href="contract.html">聯(lián)系我們</a></li> <li><a href="about.html">關(guān)于公司</a></li> <li class="lang"> <a class="active">中</a>|<a href="en_index.html">EN</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image: url(img/banner.png)" ></div> <div class="swiper-slide" style="background-image: url(img/banner.png)" ></div> <div class="swiper-slide" style="background-image: url(img/banner.png)" ></div> <div class="swiper-slide" style="background-image: url(img/banner.png)" ></div> <div class="swiper-slide" style="background-image: url(img/banner.png)" ></div> </div> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-white"></div> <!-- Add Arrows --> <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> </div> <!--多圖輪播--> <div class="lunbo"> <div class="title wow bounceInUp">我們參與的項目</div> <div class="picScroll"> <ul> <li> <a target="_blank" href="###"> <img _src="img/lunbo1.png" src="img/lunbo1.png" /> <div class="img-text">大型海戰(zhàn)戰(zhàn)場“潛龍之淵”上線，全民開戰(zhàn)！</div> </a> </li> <li> <a target="_blank" href="###"> <img _src="img/lunbo2.png" src="img/lunbo2.png" /> <div class="img-text"> 天刀嘲天宮《一人之戰(zhàn)》視頻首發(fā) 同名專輯上架QQ音樂 </div> </a> </li> <li> <a target="_blank" href="###" ><img _src="img/lunbo3.png" src="img/lunbo3.png" /> <div class="img-text">懶人攻略 如何刷完一周勝負(fù)令</div> </a> </li> <li> <a target="_blank" href="###" ><img _src="img/lunbo4.png" src="img/lunbo4.png" /> <div class="img-text"> 《王者榮耀》魔性H5上線，五軍對決等你來戰(zhàn) </div> </a> </li> <li> <a target="_blank" href="###" ><img _src="img/lunbo5.png" src="img/lunbo5.png" /> <div class="img-text"> 超高期待！玩家Coser作品獲《絕地求生 全軍出擊》官方點贊 </div> </a> </li> <li> <a target="_blank" href="###" ><img _src="img/lunbo6.png" src="img/lunbo6.png" /> <div class="img-text">揭幕戰(zhàn)RNGvsIG LPL春季賽1月15日正式開賽</div> </a> </li> </ul> <a class="prev" href="javascript:void(0)"></a> <a class="next" href="javascript:void(0)"></a> </div> <a href="###"><div class="more">更多作品</div></a> </div> <!--關(guān)于我們--> <div class="aboutUs"> <div class="wrap"> <div class="title wow bounceInUp">關(guān)于我們</div> <div class="text wow slideInDown"> <span class="ccf0f32" >杭州袁動動漫設(shè)計有限公司（YD ART），致力于CG美術(shù)概念設(shè)計及三維影視游戲視覺開發(fā)制作</span > <span >其團(tuán)隊現(xiàn)由創(chuàng)辦人袁杰聯(lián)合著名CG藝術(shù)家肖壯悅以及XRCGTEAM（<a href="http://www.xrcgteam.com" >http://www.xrcgteam.com</a >）成員和各游戲、影視、動漫業(yè)內(nèi)資深藝術(shù)家所組成，</span > <span >為國內(nèi)外眾多項目提供優(yōu)質(zhì)概念設(shè)計、原畫設(shè)定、美宣插畫、次世代3D、GUI、動作特效等外包服務(wù)。</span > <span >曾參與《星際爭霸》《上古卷軸》《英雄聯(lián)盟》《戰(zhàn)神》《三國無雙》《夢幻西游》《LOC》《鬼吹燈》《長城》等國內(nèi)外大型游戲影視項目視覺美術(shù)開發(fā)制作</span > </div> <div class="row"> <div class="col-xs-6 col-sm-3"> <div class=""> <h3 class="timer count-title" id="count-number" data-to="150" data-speed="1500" ></h3> 員工 </div> </div> <div class="col-xs-6 col-sm-3"> <div class=""> <h3 class="timer count-title" id="count-number" data-to="100" data-speed="1500" ></h3> 客戶 </div> </div> <div class="col-xs-6 col-sm-3"> <div class=""> <h3 class="timer count-title" id="count-number" data-to="200" data-speed="1500" ></h3> 項目 </div> </div> <div class="col-xs-6 col-sm-3"> <div class=""> <h3 class="timer count-title" id="count-number" data-to="6" data-speed="1500" ></h3> 周年 </div> </div> </div> </div> </div> <!--他們信任我們--> <div class="believe"> <div class="wrap"> <div class="title wow bounceInUp">他們信任我們</div> <div class="partnerList"> <ul> <a href="###"> <li> <img src="img/about_01.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_02.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_03.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_04.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_05.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_06.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_07.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_08.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_09.jpg" /> </li> </a> <a href="###"> <li> <img src="img/about_10.jpg" /> </li> </a> </ul> </div> </div> </div> <!--我們做什么--> <div class="wedo"> <div class="wrap"> <div class="title wow bounceInUp">我們做什么</div> <div class="text wow slideInDown"> <span class="ccf0f32 f18">ACG領(lǐng)域視覺美術(shù)外包方案解決專家</span> <span >我們提供2D、3D、次世代游戲美術(shù)全流程外包服務(wù)，包括美術(shù)風(fēng)格預(yù)研、整包定制、美術(shù)咨詢等服務(wù)</span > </div> <div class="row dolist"> <a href="###"> <div class="col-xs-6 col-sm-4 col-md-2 wow bounceInLeft" data-wow-delay="1.5s" > <img src="img/doimg_1.png" />手游 </div> </a> <a href="###"> <div class="col-xs-6 col-sm-4 col-md-2 wow bounceInLeft" data-wow-delay="1s" > <img src="img/doimg_2.png" />頁游 </div> </a> <a href="###"> <div class="col-xs-6 col-sm-4 col-md-2 wow bounceInLeft" data-wow-delay="0.5s" > <img src="img/doimg_3.png" />端游 </div> </a> <a href="###"> <div class="col-xs-6 col-sm-4 col-md-2 wow bounceInRight" data-wow-delay="0.5s" > <img src="img/doimg_4.png" />次世代 </div> </a> <a href="###"> <div class="col-xs-6 col-sm-4 col-md-2 wow bounceInRight" data-wow-delay="1s" > <img src="img/doimg_5.png" />單機(jī) </div> </a> <a href="###"> <div class="col-xs-6 col-sm-4 col-md-2 wow bounceInRight" data-wow-delay="1.5s" > <img src="img/doimg_6.png" />影視 </div> </a> </div> <div class="text-list wow bounceInDown"> <ul> <li> <a href="###">角色原畫設(shè)計</a> <a href="###">場景原畫設(shè)計</a> <a href="###">UI設(shè)計</a> </li> <li> <a href="###">肖像繪制</a> <a href="###">道具繪制</a> <a href="###">圖標(biāo)繪制</a> </li> <li> <a href="###">美宣</a> <a href="###">卡牌繪制</a> <a href="###">2D場景整合</a> </li> <li> <a href="###">3DMAX角色模型</a> <a href="###">3DMAX場景模型</a> <a href="###">次世代模型、貼圖</a> </li> <li> <a href="###">3DMAX動畫</a> <a href="###">3DMAX特效</a> <a href="###">3轉(zhuǎn)2繪制</a> </li> </ul> </div> </div> </div> <!--footer--> <div class="footer"> <img src="img/foot_logo.png" /> </div> </body> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8" ></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8" ></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script> <script src="js/numberAdd.js" type="text/javascript" charset="utf-8"></script> <script src="js/swiper.min.js" type="text/javascript" charset="utf-8" ></script> <script type="text/javascript" src="js/wow.min.js"></script> <script type="text/javascript"> //多圖輪播 jQuery(".picScroll").slide({ mainCell: "ul", effect: "leftLoop", vis: 6, scroll: 1, autoPage: true, switchLoad: "_src", autoPlay: true, }); //banner輪播 var swiper = new Swiper(".swiper-container", { spaceBetween: 30, // effect: 'fade', loop: true, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); //鼠標(biāo)滾動特效 new WOW().init(); </script></html>

2.CSS樣式代碼

body { font-size: 18px; font-family: "microsoft yahei";}a:hover { text-decoration: none;}.row{ margin-right: 0; margin-left: 0;}.wrap { max-width: 1200px; margin: 0 auto;}.navbar-default { background-color: rgba(255, 255, 255, 0.9); border: 0; height: 100px; line-height: 100px;}.navbar-brand { height: 100px; padding: 25px 15px;}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover { color: #cf0f32; background: none; display: none;}.show .worklist .title{ display: block; position: absolute; top: 45%; color: #FFFFFF; width: 100%; text-align: center; display: none;}/*招賢納士*/.banner{ width: 100%; height:521px; background: url(../img/banner1.png) no-repeat center center;}.recruit { padding: 40px 0;}.recruit .title{ text-align: center; color: #262b2e; font-size: 36px; margin: 0px auto; padding-bottom: 20px;}.recruitlist .row .name{ margin: 40px auto; text-align: center; width: 100px;}.recruitlist .row .name span{ display: block;}.recruitlist .row .name .num{ margin-top: 30px; font-size: 36px;}.recruitlist .row img{ display: block; margin: 10px auto;}.recruitlist .row .text{ margin: 50px 0px 0 55px;}.recruitlist .row .text span{ display: block; margin: 10px 0; text-align: left; color:#999999; font-size: 16px;}.recruitlist .row .text .yaoqiu{ font-size: 16px; color: #333333;}.recruit .tishi{ text-align: center; color: #CF0F32; margin: 40px auto; width:720px; font-size: 16px; padding: 0 20px;}/*聯(lián)系我們*/.contract{ margin: 50px auto;} width: 50%; } .partnerList img { width: 90%; } .wedo { padding: 30px 0; } .wedo .text { padding: 0 20px; line-height: 35px; } .wedo .text-list ul li { width: 50%; padding-left: 40px; margin-bottom: 20px; } .wedo .text-list.en_text-list ul li{ width: 100%; } .wedo .text-list { margin: 30px 0 0 0; } .footer img { margin-top: 0; margin-bottom: 10px; } .show{ margin-top: 100px; } .show>.title{ font-size: 30px; } .recruitlist .row .text{ margin: 50px 10px 0 20px; } .recruit .tishi{ width:100%; } .map .dingwei{ position: absolute; z-index: 1; margin-left: 81%; margin-top: -34.2%; cursor: pointer; } .map .dingwei>img{ width: 10px; height: 10px; } .map .addr-name{ /*display: block;*/ margin-left: 67.3%; margin-top: -39.5%; width: 121px; height: 30px; line-height: 25px; font-size: 12px; } .map .en_addr-name{ width: 180px; margin-left: 53%; } .map .dingwei1{ margin-left: 80.5%; margin-top: -31.2%; width: 10px; height: 20px; /*border: 1px solid #A94442;*/ } .map .dingwei2{ margin-left: 75.6%; margin-top: -26.3%; width: 10px; height: 20px; /*border: 1px solid #A94442;*/ } .map .addr-name1{ /*display: block;*/ margin-left: 65%; margin-top: -39.5%; width: 140px; height: 35px; line-height: 28px; font-size: 13px; } .map .addr-name2{ /*display: block;*/ margin-left: 60.5%; margin-top: -34.5%; width: 135px; height: 35px; line-height: 28px; font-size: 13px; } .map .en_addr-name1{ /*display: block;*/ margin-left: 58%; margin-top: -39.5%; width: 180px; height: 35px; line-height: 28px; font-size: 13px; } .map .en_addr-name2{ /*display: block;*/ margin-left: 55%; margin-top: -34.5%; width: 180px; height: 35px; line-height: 28px; font-size: 13px; } .banner{ height: 400px; } .aboutUs div.row>div>div{ font-size: 20px; } .en_contractlist{ font-size: 16px; } .en_contractlist .imgDiv { margin-right: 0; }}/*平板*/@media (min-width:768px) and (max-width: 992px) { body { overflow-x: hidden; } .nav>li>a{padding: 10px 6px;} .swiper-container { width: 100%; height: 600px; } .aboutUs div.row>div>div { width: 165px; height: 165px; } .aboutUs div.row h3 { margin-top: 40px; } .aboutUs .text{ padding:0 20px; } .wedo .text-list ul li{ margin-bottom: 20px; width: 33%; padding-left: 80px; } .wedo .text-list.en_text-list ul li{ width: 45%; } .recruitlist .row .text{ margin: 50px 10px 0 20px; } .recruit .tishi{ width:100%; } .map .dingwei{ position: absolute; z-index: 1; margin-left: 81%; margin-top: -32%; cursor: pointer; } .map .dingwei>img{ width: 15px; height: 15px; } .map .addr-name{ /*display: block;*/ margin-left: 73.4%; margin-top: -35%; width: 131px; height: 30px; line-height: 25px; font-size: 12px; } .map .en_addr-name{ width: 180px; margin-left: 70%; } .map .dingwei1{ margin-left: 80.5%; margin-top: -31.2%; width: 20px; height: 30px; /*border: 1px solid #A94442;*/ } .map .dingwei2{ margin-left: 75.6%; margin-top: -26.3%; width: 20px; height: 30px; /*border: 1px solid #A94442;*/ } .map .addr-name1{ /*display: block;*/ margin-left: 72.5%; margin-top: -36%; width: 140px; height: 35px; line-height: 28px; font-size: 13px; } .map .addr-name2{ /*display: block;*/ margin-left: 68%; margin-top: -31%; width: 135px; height: 35px; line-height: 28px; font-size: 13px; } .map .en_addr-name1{ /*display: block;*/ margin-left: 70.5%; margin-top: -36%; width: 180px; } .map .en_addr-name2{ /*display: block;*/ margin-left: 64%; margin-top: -31%; width: 200px; }}

三、個人總結(jié)

一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定) 1. 頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分； 2. 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成； 3. 頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)； 4. 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)； 5. 要有JS特效，如定時切換和手動切換圖片新聞； 6. 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用； 7. 頁面清爽、美觀、大方，不雷同。
8. 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。

四、更多干貨

1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！

2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！

3.以上內(nèi)容技術(shù)相關(guān)問題 歡迎一起交流學(xué)習(xí)【主頁—— 獲取更多優(yōu)質(zhì)源碼】



關(guān)鍵詞：設(shè)計,響應(yīng),模板,學(xué)生

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉