時間：2023-10-13 22:00:01 | 來源：網(wǎng)站運營
時間：2023-10-13 22:00:01 來源：網(wǎng)站運營
大二Web課程設(shè)計：HTML+CSS學校靜態(tài)網(wǎng)頁設(shè)計——杭州師范大學泰州學院（11頁）：精彩專欄推薦 文末獲取聯(lián)系 ?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁: 【主頁—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項目精品實戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 Echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】 HTML+CSS+JS實例代碼： 【 ?HTML+CSS+JS實例代碼 (炫酷特效網(wǎng)頁代碼) 繼續(xù)更新中...】 免費且實用的WEB前端學習指南： 【 web前端零基礎(chǔ)到高級學習視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁、其他html為二級頁面； （2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3） js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到j(luò)s代碼）。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/三級頁面.dwt" codeOutsideHTMLIsLocked="false" --><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- InstanceBeginEditable name="doctitle" --><title>客戶案例</title><!-- InstanceEndEditable --><link href="css/style.css" rel="stylesheet" type="text/css" /><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --></head><body><!-----頭部開始-------><div class="top"><a href="index.html"><img class="floatl" style="float:left" src="images/logo.jpg" /></a> </div><!---nav開始----><div class="daohang"><div id="nav"><ul><li><a href="index.html">首頁</a></li><li><a href="about.html">關(guān)于我們</a></li><li><a href="xiangmu.html">設(shè)計項目</a></li><li><a href="anli.html">客戶案例</a></li><li><a href="zixun.html">新聞資訊</a></li><li><a href="women.html">聯(lián)系我們</a></li><li><a href="jianjie.html">個人簡介</a></li></ul></div></div><!---nav結(jié)束----><!-----頭部結(jié)束-------><!-----main開始-------><div class="main1"><div class="left"><div class="title"><a href="zixun.html"><h1>新聞資訊</h1></a></div><div class="left-box"><ul><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li><li><h2>青春心向黨 建功新時代 </h2></li></ul></div></div><div class="right"><!-- InstanceBeginEditable name="right" --><div class=" luj"><a href="index.html">首頁</a>><a href="anli.html">客戶案例</a>>訂購服務(wù)的網(wǎng)站頁面設(shè)計</div><div class="title">訂購服務(wù)的網(wǎng)站頁面設(shè)計 </div><img src="images/anlixq02.jpg" /><P> 對于出門旅行，絕大多數(shù)的用戶都抱有著不小的期待。但是旅行本身并不輕松，需要訂購酒店，需要購買機票和車票，租車，購買門票，同時旅行還意味著非常大量的活動。而這次的概念設(shè)計，就是圍繞著預(yù)訂服務(wù)來展開的。同樣使用了3D建模來構(gòu)建視覺，諸多和日常出行相關(guān)的視覺元素占據(jù)了左側(cè)的頁面，而右側(cè)則是預(yù)訂需要填寫的表單內(nèi)容。整個頁面采用了更加富有活力的配色，降低用戶填寫表單時候的緊張情緒，清晰直觀的頁面布局，讓用戶無需四處摸索，可以直接開始交互。從標題到表單的條目都保有良好的對比度，可以快速掃視閱讀，便于用戶填寫。</P><P> 向下滾動，用戶可以了解這項服務(wù)的相關(guān)優(yōu)勢，特殊的功能，相關(guān)福利，以及更多的信息。每個信息都緊密圍繞著一個主題來予以闡述，視覺化的元素被設(shè)計得非常吸睛，同時，和整體在風格調(diào)性上也保持著高度的一致。</P><p> 形體和色彩，到底哪個在設(shè)計中更加富有表現(xiàn)力?這個問題可能沒有一個固定答案，這場在戰(zhàn)爭在設(shè)計領(lǐng)域當中已經(jīng)持續(xù)多年，甚至會一直持續(xù)下去。這個設(shè)計項目是為一個室內(nèi)設(shè)計工作室來設(shè)計官方網(wǎng)站，他們的主要業(yè)務(wù)是制作可視化的室內(nèi)設(shè)計渲染圖。他們熟知如何最大限度地借助設(shè)計工具來呈現(xiàn)室內(nèi)設(shè)計的效果，在接到需求之后，我們決定使用全屏背景結(jié)合他們最擅長的3D建模，來展現(xiàn)高質(zhì)量的室內(nèi)設(shè)計能力和建模渲染效果。</P></div><!-- InstanceEndEditable --></div></div><!-----main結(jié)束-------><!-----bottom開始-------><div class="bottom"><div class="bottom-box"><p>2016-2019 @ 版權(quán)所有 視覺傳達1601班 </p></div></div><!-----bottom結(jié)束-------></body><!-- InstanceEnd --></html>@charset "utf-8";/* CSS Document */body{ margin:0 auto; font-size:12px; font-family: "微軟雅黑",arial; line-height:22px; }div,p,ul,li,p,h1,h2,h3{ height:auto; margin:0;; padding:0; vertical-align:middle ;list-style:none;}a{ text-decoration:none;color:#333;}img{ border:0; margin:0; padding:0;}/*---網(wǎng)頁開始-----*//*---top開始-----*/.top{ height:200px; width:1024px; margin:0 auto; }.ban{ height: 335px;width: 1024px;margin: 0 auto;}/*---top結(jié)束-----*//*---導航----*/.daohang{width:1024px;height: 47px;background: url(../images/nav-bj.jpg);margin: 0 auto;}#nav{ width:1024px; height:47px; line-height:47px; font-weight:bolder; font-size:14px; margin:0 auto; }#nav ul{ margin:0 auto; }#nav li{float: left;width: 140px;text-align: center;color: #FFF;}#nav a{width:140px;height:47px; display:block; font-size:14px; font-weight:bold; float:left;}#nav a:link { color:#FFF; }#nav a:visited{ color:#FFF; overflow:hidden; }#nav a:hover { color: #FFF; overflow:hidden; background:#224200; }#nav a:active { color: #FFF; overflow:hidden; background:#224200; }/*---------main開始-----------------*/.main1{ width:1022px; margin:0 auto; margin-top:10px;}.main{ width:1022px; margin:0 auto; margin-top:10px;border: #333 1px solid;}.box{ height:320px;width: 1024px;margin: 0 auto;margin-bottom:10px;}.inner{ width: 1024px; height: 320px; position: relative; overflow: hidden; } .inner img{ width:1024px; height: 320px; vertical-align: top } .inner ul { width: 1000%; position: absolute; list-style: none; left:0; top: 0; } .inner li{ float: left; } ol { position: absolute; height: 20px; right: 20px; bottom: 12px; text-align: center; padding: 5px; } ol li{ display: block; width: 20px; height: 20px; line-height: 20px; background-color: #fff; margin: 5px; cursor: pointer; } ol .current{ background-color: red; } #arr{ display: block; } #arr span{ width: 30px; height: 40px; position: absolute; left: 14px; top: 156px; margin-top: -20px; background: #fff; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑體'; font-size: 30px; color: #000; opacity: 0.5; border: 1px solid #fff; } #arr #right { right: 18px; left: auto; }.box1{ width:1024px; height:311px; margin:0 auto;}.shang-left{float: left;width: 320px;}.gk-title{ width:320px; height:40px; background:#0b6d47; }.gk-title h1{ height: 40px;line-height: 40px;width: 130px;margin-left: 20px;font-size: 16px;color: #FFF;font-family: "黑體"; }.gk{ width: 308px;height:262px; border-left:#8c8c8c 1px solid; border-right:#8c8c8c 1px solid; border-bottom:#8c8c8c 1px solid; background:#FFF; padding:0px 5px;padding-top: 10px; }.gk span{ color:#F00;}.gk img{ margin-right:10px; float:left;}.xz{ width:347px; height:311px; padding-left:5px; margin:0px 15px;border:#8c8c8c 1px solid; background:#FFF; float:left; overflow:hidden;}.xz h1{height:35px; line-height:35px; font-size:14px; color:#333; font-family:"黑體"; }.xz span{font-size:12px; color:#333; color:#408602; font-family: "Courier New", Courier, monospace}.xz img{ width:160px; height:120px; margin:5px; float:left;}.shang-right{float:left;}.count-title{ width:320px; height:40px; background: #0b6d47; }.count-title h1{ height: 40px;line-height: 40px;width: 130px;margin-left: 20px;font-size: 16px;color: #FFF;font-family: "黑體"; }.count{width: 298px;height: 252px;border-left: #8c8c8c 1px solid;border-right: #8c8c8c 1px solid;border-bottom: #8c8c8c 1px solid;background: #FFF;padding: 10px;}.count img{ margin:10px 0px 10px 20px;}.count p{line-height: 30px;font-size: 14px;height: 30px;}.count span{ color:#408602; font-size:16px; font-family:"黑體";}.yy-title{ width:1024px; height: 40px;background: #0b6d47;}.yy-title h1{ height: 40px;line-height: 40px;width: 130px;margin-left: 20px;font-size: 16px;color: #FFF;font-family: "黑體"; }.floatl{ float: left;}.yy{ width: 978px;padding:10px;height: 190px;border-left: #6c6b6b 1px solid;border-right: #6c6b6b 1px solid;border-bottom: #6c6b6b 1px solid;background: #FFF; }.meishi{ margin-top:15px !important; margin-bottom:15px; }.ms{ width: 1002px;padding:10px;height: 190px;border-left: #6c6b6b 1px solid;border-right: #6c6b6b 1px solid;border-bottom: #6c6b6b 1px solid;background: #FFF; }.ms ul{}.ms ul li{ width:185px; height:180px; margin:5px; float:left;}.ms ul li img{ width:185px; height:150px;}.ms ul li p{ text-align:center; font-size:14px;}.righttitle{width: 935px; background:url(../images/er_02.png) no-repeat; height:68px; line-height:68px; padding-left:65px; color:#3e8100; font-size:18px; font-weight:bold;}.righttitle span{ font-size:14px; color:#a5a5a5; font-family:"arial"; font-weight:normal;}.erfenlei{ width:155px;}.erfenlei ul li{ width:155px;line-height:34px; font-size:14px; font-weight:bold; color:#fff;}.erfenlei ul li a{ display:block; background:url(../images/erfenlei.png) no-repeat; width:140px; padding-left:15px;height:34px; line-height:34px; font-size:14px; font-weight:bold; color:#fff;}.erfenlei ul li a:hover{ color:#ffff0; background:url(../images/erfenlei1.jpg) no-repeat;}.erfenlei ul li ul{ margin-bottom:10px; _margin-bottom:5px; border-bottom:1px #326421 solid;}.erfenlei ul li ul li{ padding-left:30px; font-size:12px; color:#fff; line-height:25px; font-weight:normal; height:25px;}.erfenlei ul li ul li a{ background:url(../images/dian.jpg) left center no-repeat;font-size:12px; display:block;height:25px; color:#fff; line-height:25px; font-weight:normal;}.erfenlei ul li ul li a:hover{background:url(../images/dian.jpg) left center no-repeat;font-size:12px; color:#fff; line-height:25px; font-weight:normal;}.ncontu { line-height: 22px;padding: 0px 12px;color: #464646;height: 470px;width: 1000px;}.ncontu ul { }.ncontu ul li { width: 250px; display:block; float: left; height: 220px; overflow:hidden;margin-bottom: 15px;}.ncontu ul li img{ width:230px; height:186px;}.ncontu ul li a { border-bottom: #907f6f 1px solid; border-left: #907f6f 1px solid; padding-bottom: 4px; padding-left: 4px; width:230px; padding-right: 4px; display: block; background: #ffffff; float: left; height: 188px; border-top: #907f6f 1px solid; border-right: #907f6f 1px solid; padding-top: 4px}.ncontu ul li a:hover { border-bottom: #cc0000 1px solid; border-left: #cc0000 1px solid; border-top: #cc0000 1px solid; border-right: #cc0000 1px solid}.ncontu ul li a.pro3 { border-bottom: #907f6f 0px solid; text-aLIGN: center; border-left: #907f6f 0px solid; line-height: 20px; width: 211px; display: block; background: none transparent scroll repeat 0% 0%; float: left; height: 20px; color: #464646; border-top: #907f6f 0px solid; border-right: #907f6f 0px solid; text-decoration:none}.ncontu ul li a.pro3:hover { border-bottom: #907f6f 0px solid; border-left: #907f6f 0px solid; color: #ff9900; border-top: #907f6f 0px solid; border-right: #907f6f 0px solid}.yema{ width:690px; height:30px; margin-top:20px; text-align:center;}.news{ width: 983px;padding: 0px 20px;margin-bottom: 30px; }.news ul li{ line-height:30px; height:30px; background:url(../images/fenge.jpg) bottom repeat-x; color:#3d2915;}.news ul li a{ float:left; display:block; line-height:30px; height:30px; background:url(../images/lvdian.jpg) left center no-repeat; color:#3d2915; padding-left:20px; }.news ul li a:hover{ color:#000;}.news ul li span{ float:right; color:#666; line-height:30px;}.danye{ color:#666; font-size:14px; line-height:25px;}.danye b{ font-size:18px; display:block; text-align:center;}.danye img{ margin:0 auto; display:block;}.biaoti{ color:#3d2915; font-weight:bold; font-size:16px; line-height:40px; background:url(../images/fenge.jpg) bottom repeat-x; text-align:center; margin-bottom:10px; _margin-bottom:10px;}.neirong{ padding:0px 15px 15px 15px;}.neirong img{ margin:0 auto;display: block; margin-top:20px; margin-bottom:20px;}.xm{ width: 840px; height:200px; margin: 0 auto; margin-top: 30px; margin-bottom: 20px;}.xm img {width: 428px; height: 200px; float: left;}.xm .xm-right{ width: 375px;height: 168px;padding-left: 35px;padding-top: 30px;float: left;border: #cfcdcd 1px solid; border-left:none;}.xm .xm-right h1{ font-size: 16px;}.xm .xm-right p{ color: #787676; font-size: 14px; line-height: 30px;}.lianxi{ width:600px; margin:0 auto; text-align:center; font-size:16px; line-height:30px;}.bx1{height: 220px;padding: 20px;margin-bottom: 20px;}.bx1 img {width: 300px;height: 160px;float: left;margin-top: 20px;margin-right: 20px;}.bx1 h1{ font-size: 16px; height: 40px; line-height: 40px; padding-left: 10px; background:#75b980;}.bx1 p{ color: #787676; font-size: 14px; line-height: 30px; text-indent: 2em;}.left { width: 279px; height: 615px; float: left; margin-right: 15px; overflow: hidden;}.left .title { width: 279px; height: 45px; background: #046a43;}.left .title h1 { height: 46px; line-height: 46px; font-size: 14px; font-family: "宋體"; color: #FFF; padding-left: 10px; float: left;}.left .left-box { width: 279px; height: 323px; margin-bottom: 10px; background: #f8f8f8; padding: 20px 0px;}.left .left-box ul { padding: 0px; margin: 0px;}.left .left-box ul li { width: 249px; height: 30px; float: left; border-bottom: none; padding: 0px 15px;}.left .left-box ul li h2 { height: 30px; line-height: 20px; font-size: 14px; font-weight: lighter;}.right { width: 678px;padding: 25px;float: left;background: #f8f8f8;overflow: hidden;text-align:center;}.right .luj{ height:30px; text-align:right; font-size:14px;}.right .title { width: 100%; color: #141414; font-size: 30px; line-height: 50px; text-align: center;}.right img{ margin:20px 0px;}.right p { text-align: left; text-indent:2em;}/*---bottom結(jié)束-----*/.bottom{ width: 1024px;margin: 0 auto;margin-top: 20px; }.bottom img{float:left;}.bottom p{ width:100%; height:30px; font-size:14px; text-align:center; font-weight:bold; margin-left:20px; float:left;}/*---bottom結(jié)束-----*/請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！關(guān)鍵詞：設(shè)計,杭州,師范,大學,泰州,學院,靜態(tài),課程
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
