當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

静态网页简单设计

發布時間：2024/3/12 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了静态网页简单设计小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

應同學要求，幫忙簡單設計一個靜態網頁。我就愉快的答應了，其實我心里挺沒底的，但是基于我前段時間有過微信小程序的基礎學習，在部分css代碼上還是差不多的。
幫同學做的這個網頁是《傳聞中的陳芊芊》這個電視劇的部分相關內容。
下面是最終的網頁界面。

網頁界面最終效果：

源代碼：

下面只是展示了部分的源代碼，相關素材及全部代碼可以點擊此處鏈接下載
🤭🤭🤭
index.html

<html><head><meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>傳聞中的陳芊芊</title><link rel="stylesheet" href="style.css" type="text/css" /> </head><body><div class="logo" id="main"><div class="list"><ul><li class="p7"><a href="#"><img class="img1" src="img/chenchuchu01.png" alt="" /></a></li><li class="p6"><a href="#"><img class="img1" src="img/chenqianqian01.png" alt="" /></a></li><li class="p5"><a href="#"><img class="img1" src="img/chenyuanyuan01.png" alt="" /></a></li><li class="p4"><a href="#"><img class="img1" src="img/hanshuo01.png" alt="" /></a></li><li class="p3"><a href="#"><img class="img1" src="img/peiheng01.png" alt="" /></a></li><li class="p2"><a href="#"><img class="img1" src="img/sumu01.png" alt="" /></a></li><li class="p1"><a href="#"><img class="img1" src="img/chenqianqian01.png" alt="" /></a></li></ul></div></div><script type="text/javascript" src="js/jquery-3.1.1.min.js"></script><script type="text/javascript">var $a = $(".buttons a");var cArr = ["p7", "p6", "p5", "p4", "p3", "p2", "p1"];var index = 0;$(".next").click(function () {nextimg();})$(".prev").click(function () {previmg();})//上一張function previmg() {cArr.unshift(cArr[6]);cArr.pop();//i是元素的索引，從0開始//e為當前處理的元素//each循環，當前處理的元素移除所有的class，然后添加數組索引i的class$("li").each(function (i, e) {$(e).removeClass().addClass(cArr[i]);})index--;if (index < 0) {index = 6;}show();}//下一張function nextimg() {cArr.push(cArr[0]);cArr.shift();$("li").each(function (i, e) {$(e).removeClass().addClass(cArr[i]);})index++;if (index > 6) {index = 0;}show();}//通過底下按鈕點擊切換$a.each(function () {$(this).click(function () {var myindex = $(this).index();var b = myindex - index;if (b == 0) {return;}else if (b > 0) {/** splice(0,b)的意思是從索引0開始,取出數量為b的數組* 因為每次點擊之后數組都被改變了,所以當前顯示的這個照片的索引才是0* 所以取出從索引0到b的數組,就是從原本的這個照片到需要點擊的照片的數組* 這時候原本的數組也將這部分數組進行移除了* 再把移除的數組添加的原本的數組的后面*/var newarr = cArr.splice(0, b);cArr = $.merge(cArr, newarr);$("li").each(function (i, e) {$(e).removeClass().addClass(cArr[i]);})index = myindex;show();}else if (b < 0) {/** 因為b<0,所以取數組的時候是倒序來取的,也就是說我們可以先把數組的順序顛倒一下* 而b現在是負值,所以取出索引0到-b即為需要取出的數組* 也就是從原本的照片到需要點擊的照片的數組* 然后將原本的數組跟取出的數組進行拼接* 再次倒序,使原本的倒序變為正序*/cArr.reverse();var oldarr = cArr.splice(0, -b)cArr = $.merge(cArr, oldarr);cArr.reverse();$("li").each(function (i, e) {$(e).removeClass().addClass(cArr[i]);})index = myindex;show();}})})//點擊class為p2的元素觸發上一張照片的函數$(document).on("click", ".p2", function () {previmg();return false;//返回一個false值，讓a標簽不跳轉});//點擊class為p4的元素觸發下一張照片的函數$(document).on("click", ".p4", function () {nextimg();return false;});// 鼠標移入box時清除定時器$(".box").mouseover(function () {clearInterval(timer);})// 鼠標移出box時開始定時器$(".box").mouseleave(function () {timer = setInterval(nextimg, 4000);})// 進入頁面自動開始定時器timer = setInterval(nextimg, 4000);</script><div class="jianxi1"></div><div class="Navigation"><a href="index.html#main" target="_parent">基本介紹</a> <a href="actors.html#actor" target="_parent">參演演員</a><a href="fans.html#fans" target="_parent">粉絲見面會</a><a href="wonderful_moments.html#video" target="_parent">精彩瞬間</a><a href="talk_over.html#form" target="_parent">留言討論</a></div><div class="jianxi2"></div><div class="content"><div class="contentone"><div class="lanmuyi"><div class="lanmuheadyi"><div class="lanmunameyi"><span class="nameyi"></span></div><div class="lanmumoeryi"><span class="moreyi"></span></div></div><div class="lanmucontent"><img src="img/lanmu01_img.png" width="250" height="270" alt="" /></div></div><div class="lanmuer"><div class="lanmuheader"><div class="lanmunameer"><span class="nameer">基本介紹</span></div><div class="lanmumoerer"><span class="moreer">更多...</span></div></div><p>《傳聞中的陳芊芊》根據同名影視劇改編。是趙露思、丁禹兮等主演的古裝愛情劇，由騰訊視頻全網獨播。母胎單身七流編劇陳小千嘔心瀝血寫了一部女尊題材大劇，原可順利開機，卻因為演員韓明星對劇本感情戲質疑過多而崩盤。憤懣難平發誓要證明自己能力的她，意外卡進了自己的劇本，變身東梁女國地位尊貴但惡評滿國的三公主。原本一個活不過三集的小女配，為了活命開編劇副本，逆轉荒唐人生，在不懂套路的犬系世子韓爍和人設完美外貌滿分的太學院少傅裴恒之間，最終學會愛與成長</p><div class="lanmucontent"></div></div><div class="lanmusan"><div class="lanmuheadsan"><div class="lanmunameyi"><span class="nameyi"></span></div><div class="lanmumoeryi"><span class="moreyi"></span></div></div><div class="lanmucontent"><img src="img/lanmu03_bg.png" width="250" height="270" alt="" /></div></div></div><div class="jianxi3"></div><div class="contenttwo"><div class="lanmusi"><div class="lanmuheadsi"><div class="lanmunamesi"><span class="namesi"></span></div><div class="lanmumoersi"><span class="moresi"></span></div></div><div class="lanmucontent"><img src="img/lanmusi_img.png" width="466" height="270" alt="" /></div></div><div class="lanmuwu"><div class="lanmuheadwu"><div class="lanmunamewu"><span class="namewu"></span></div><div class="lanmumoerwu"><span class="morewu"></span></div></div><div class="lanmucontent"><img src="img/lanmu5.jpg" width="466" height="270" alt="" /></div></div></div></div><div class="jianxi2"></div><div class="footerX">CopyRight@copy2020 </div><script src="js/jquery-2.2.0.min.js"></script><script>function o(w, v, i) {return w.getAttribute(v) || i}function j(i) {return document.getElementsByTagName(i)}function l() {var i = j("script"), w = i.length, v = i[w - 1];return { l: w, z: o(v, "zIndex", -1), o: o(v, "opacity", 0.5), c: o(v, "color", "0,0,0"), n: o(v, "count", 99) }}function k() {r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight}function b() {e.clearRect(0, 0, r, n);var w = [f].concat(t);var x, v, A, B, z, y;t.forEach(function (i) {i.x += i.xa,i.y += i.ya,i.xa *= i.x > r || i.x < 0 ? -1 : 1,i.ya *= i.y > n || i.y < 0 ? -1 : 1,e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);for (v = 0; v < w.length; v++) {x = w[v];if (i !== x && null !== x.x && null !== x.y) {B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())}}w.splice(w.indexOf(i), 1)}), m(b)}var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n,m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {window.setTimeout(i, 1000 / 45)},a = Math.random, f = { x: null, y: null, max: 20000 };u.className = "particle_canvas";var browserName = navigator.userAgent.toLowerCase();if (/msie/i.test(browserName) && !/opera/.test(browserName)) {u.className += ' ie10_gte';};u.id = c;u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;j("body")[0].appendChild(u);k(), window.onresize = k;window.onmousemove = function (i) {i = i || window.event,f.x = i.clientX,f.y = i.clientY},window.onmouseout = function () {f.x = null,f.y = null};for (var t = [], p = 0; s.n > p; p++) {var h = a() * r,g = a() * n,q = 2 * a() - 1,d = 2 * a() - 1;t.push({ x: h, y: g, xa: q, ya: d, max: 6000 })}setTimeout(function () { b() }, 100)</script><style>.github-corner:hover .octo-arm {animation: octocat-wave 560ms ease-in-out}@keyframes octocat-wave {0%,100% {transform: rotate(0)}20%,60% {transform: rotate(-25deg)}40%,80% {transform: rotate(10deg)}}@media (max-width:500px) {.github-corner:hover .octo-arm {animation: none}.github-corner .octo-arm {animation: octocat-wave 560ms ease-in-out}}</style></body></html>

actors.html關鍵代碼：

<div class="content03"><div class="lanmu6"><div class="lanmu6_01"></div><div class="lanmu6_middle"></div><div class="lanmu6_02" ><h3>陳芊芊</h3>傳聞中囂張跋扈、在花垣城中肆意妄為的三郡主，讓別人叫自己三公主，在現實生活當中是一名編劇，無意中穿越到自己女尊的劇本當中，為了活下去用著三郡主的角色努力生活下去，一邊與韓爍斗智斗法，一邊嘗試撮合原來的女主陳楚楚和韓爍，不料韓爍卻反倒對她情根深種。</div></div><div class="lanmu7"><div class="lanmu701"><h3>陳楚楚</h3>花垣城二郡主，本是下任女帝的最佳人選，正直善良、樂觀漂亮，卻因陳芊芊搶走戲份后，漸漸黑化，后來成為女主陳芊芊的最大勁敵，殊不知，她也并非花垣女帝的親生女兒。</div><div class="lanmu702"></div><div class="lanmu703"></div></div><div class="lanmu8"><div class="lanmu801"></div><div class="lanmu802"></div><div class="lanmu803"><h3>陳沅沅</h3>花垣城大郡主，身負殘疾，終日坐在輪椅上。她悲觀但堅強，一邊說著悲春傷秋的話，一邊卻各處搜羅各種大補食材。久病成良醫，她醫術非常高明，什么病都能治，除了自己的腿。表面上冷漠孤僻，實際內心渴望別人的關懷，更想像正常人一樣談一段刻骨銘心的戀愛。</div></div><div class="lanmu9"><div class="lanmu901"></div><div class="lanmu902"><h3>韓爍</h3>玄虎城的少主，北夏王子，是個病弱腹黑、傲嬌帥氣的美男子，文韜武略且容顏絕美，見過的人無不贊嘆，可惜天生心疾，注定活不過二十，他同時是陳芊芊的夫婿，他為了傳說中那個龍骨來到了花垣城，表面上柔弱多病，實際上是隱藏實力，在尋找龍骨的過程中愛上了陳芊芊，放棄了仇恨。</div><div class="lanmu903"></div></div><div class="lanmu10"><div class="lanmu1001"></div><div class="lanmu1002"></div><div class="lanmu1003"><h3>裴恒</h3>花垣城的第一美男子，家世、才學都近乎完美，是花垣少女心中的優質偶像，與陳芊芊有婚約，起初對其排斥，但在女主小千進入劇情后，卻漸漸被其吸引。</div></div><div class="lanmu11"><div class="lanmu1101"><h3>蘇沐</h3>花垣城教坊司“頭牌”，有“萬人空巷看蘇郎'的評價。他最擅長討好女人，是婦女之友，非常會察言觀色。做事穩妥，風流浪蕩的外表下隱藏著一顆細膩體貼有擔當的心，所以他很快發現沅沅脆弱又敏感的一面。蘇沐感恩于沅沅對他沒有偏見，所以他很用心地去對大公主，精準把握住她的脾氣。漸漸兩人互生好感。</div><div class="lanmu1102"></div><div class="lanmu1103"></div></div></div>

fans.html關鍵代碼：

<div class="jianxi2"></div><div class="footer"><a id="fans">粉絲見面會</a></div><div class="fans_content"><div style="width: 438;height: 2200;float: left;margin-top: 20px;"><divstyle="width: 400; height: 224; float: left;border-radius: 20px;BORDER-RIGHT: #44ffff 18pt ridge; BORDER-TOP: #44ffff 18pt ridge; BORDER-LEFT: #44ffff 18pt ridge; BORDER-BOTTOM: #44ffff 18pt ridge"><img src="img/jmh01.jpg" width="400" height=224/></div><divstyle="width: 400; height: 600; float: left;margin-top: 20px;border-radius: 20px;BORDER-RIGHT: #2ae964c9 18pt ridge; BORDER-TOP: #2ae964c9 18pt ridge; BORDER-LEFT: #2ae964c9 18pt ridge; BORDER-BOTTOM: #2ae964c9 18pt ridge"><img src="img/jmh02.jpg" width="400" height=600/></div><divstyle="width: 400; height: 711; float: left;margin-top: 20px;border-radius: 20px;BORDER-RIGHT: #e6d00f 18pt ridge; BORDER-TOP: #e6d00f 18pt ridge; BORDER-LEFT: #e6d00f 18pt ridge; BORDER-BOTTOM: #e6d00f 18pt ridge"><img src="img/jmh03.jpg" width="400" height=711/></div><divstyle="width: 400; height: 271; float: left;border-radius: 20px;margin-top: 20px;BORDER-RIGHT: #e06227 18pt ridge; BORDER-TOP: #e06227 18pt ridge; BORDER-LEFT: #e06227 18pt ridge; BORDER-BOTTOM: #e06227 18pt ridge"><img src="img/jmh04.jpg" width="400" height=271/></div></div><div style="width: 438;height: 1800;float:right;margin-top: 20px;"><divstyle="width: 400; height: 2010; float:right;BORDER-RIGHT: #ac77e9 18pt ridge; BORDER-TOP: #ac77e9 18pt ridge; BORDER-LEFT: #ac77e9 18pt ridge; BORDER-BOTTOM: #ac77e9 18pt ridge"><div style="width: 400; height: 502.5;background: url(img/cptext_bg01.png);"><div style="font-size: 28;"><br/>[cp]今天看了《傳聞中的陳芊芊》粉絲見面會直播回放，感覺他們之間的關系比較真誠，不僅是工作同事，更像是朋友，或許是因為趙露思比較會搞氣氛，感覺他們之間很和諧，還有因為在看劇的時候，陷入他們演的角色，看直播時會發現他們也是現實生活中的人啊，會像普通人一樣在臺上緊張，給我的感覺特別真實，總之非常開心看到他們，[可愛][/cp]</div></div><div style="width: 400; height: 1005;background: url(img/cptext_bg02.png);"><div style="font-size: 29;"><br/><br/><br/><br/>[cp]#傳聞中的陳芊芊[超話]##傳聞中的陳芊芊[超話]#真的想說一下傳聞中的陳芊芊這部劇一開始沒被所有人看好連見面會跟售后都是劇粉每天催命似的催官博催出來的慶祝蛋糕還是貼片還只貼一半兩位主演也是小演員沒有很大的粉絲基礎我們從來沒有污蔑過別人甚至被別人超過也只是“果然jynn就是jynn 我們也要努力” 很長時間也以沖一保二作為目標<br/>理解你們的心情但這不是否認我們努力的理由 <br/>偉大的玄虎醋王八曾經說過：“你讓的？明明是我們自己爭取的！”[/cp]</div></div><div style="width: 400; height: 502.5;background: url(img/cptext_bg03.png);"><div style="font-size: 29;"><br/>[cp]#視頻創作者##傳聞中的陳芊芊#傳聞中的陳芊芊「粉絲見面會直播」托盤抱還是公主抱？異口同聲：公主抱！拍托盤抱的時候什么感受？露思：我吸了口氣，憋住……顫抖著祈禱，抱起我抱起我！丁禹兮一定要抱起我！球球！女演員真的是不容易「允悲」趙露思陳芊芊,丁禹兮韓爍 http://t.cn/A6LVwY1Y ?[/cp]</div></div></div></div></div></div>

wonderful_moments.html關鍵代碼：

talk_over.html關鍵代碼：

<form id="form" action="" method="post" class="elegant-aero"><h1>留言版<span>留言討論，請填入相關內容并提交。</span></h1><label><span>姓名 :</span><input id="name" type="text" name="name" placeholder="Your Full Name" /></label><label><span>電子郵件 :</span><input id="email" type="email" name="email" placeholder="Valid Email Address" /></label><label><span>手機號 :</span><input id="number" type="text" name="number" placeholder="Your Phone Number" /></label><label><span>留言內容 :</span><textarea id="message" name="message" placeholder="Your Message to Us"></textarea></label><label><span> </span><input type="button" class="button" value="提交" /></label></form>

css代碼：

body{margin:0; padding:0;background-image: url(img/bg.png);background-repeat: repeat;background-attachment: fixed;/*背景圖片固定，不隨鼠標滾動而滾動*/ } /*logo*/ .logo{ background:url(img/logo_bg.png); margin:0 auto; width:960px; height:300px;padding-top: 15px;padding-bottom: 10px;background-repeat:repeat;border-radius:20px;/*圓角過渡*/ } /**##########滾動圖片設置#################**/ .box {margin-top: 80px;width: 100%;height: 340px;position: relative; }.list {width: 1200px;height: 300px;overflow: hidden;position: absolute;left: 50%;margin-left: -365px; }.btn {position: absolute;top: 50%;margin-top: -50px;width: 60px;height: 100px;line-height: 100px;font-size: 30px;color: white;text-decoration: none;text-align: center;background: rgba(0, 255, 0, .5);cursor: pointer; }.next {right: 0; }li {position: absolute;top: 0;left: 0;list-style: none;opacity: 0;transition: all 0.3s ease-out; }.img1 {width: 280px;height: 300px;border: none;float: left; }.p1 {transform: translate3d(-224px, 0, 0) scale(0.81); }.p2 {transform: translate3d(0px, 0, 0) scale(0.81);transform-origin: 0 50%;opacity: 0.8;z-index: 2; }.p3 {transform: translate3d(224px, 0, 0) scale(1);z-index: 3;opacity: 1; }.p4 {transform: translate3d(449px, 0, 0) scale(0.81);transform-origin: 100% 50%;opacity: 0.8;z-index: 2; }.p5 {transform: translate3d(672px, 0, 0) scale(0.81); }.p6 {transform: translate3d(896px, 0, 0) scale(0.81); }.p7 {transform: translate3d(1120px, 0, 0) scale(0.81); }.buttons {position: absolute;width: 1200px;height: 30px;bottom: 0;left: 50%;margin-left: -600px;text-align: center;padding-top: 10px; }.buttons a {display: inline-block;width: 35px;height: 5px;padding-top: 4px;margin: 50px;cursor: pointer; } /**####################################################################**//*導航欄*/ .Navigation{background: #e9a6d5;width: 960px;height: 40px;margin: 0 auto;text-align: center;font-family: "字魂27號-布丁體";font-size: 24px;border-radius:20px;/*圓角過渡*/ } /*內容*/ .content{ background:#ffffff; width:960px; height:645px; margin:0 auto} .content22{ background:#ffffff; width:960px; height:543px; margin:0 auto} /*第一版塊*/ .contentone{ background:#ffffff; width:960px; height:300px; margin:0 auto} /*欄目一*/ .lanmuyi{ background:#ffffff; width:250px; height:300px; float:left;border:2px solid rgb(144, 201, 150); margin:0 20 0 0} .lanmuheadyi{ background:rgb(144, 201, 150); width:250px;height:30px} .lanmunameyi{ width:135px;height:30px; float:left} .lanmumoreyi{ width:135px;height:30px; float:right;} .nameyi{text-align: left;color: #000000;font-size: 18px;margin: 0 0 0 10;font-family: "字魂27號-布丁體"; } .moreyi{text-align: right;color: #151414;font-size: 16px;margin: 0 0 0 60;font-family: "字魂27號-布丁體"; } /*欄目二*/ .lanmuer{ background:rgb(241, 173, 127); width:408px; height:300px; float:left;border:2px solid #f6c092; margin:0 20 0 0} .lanmuheader{ background:#f6c092; width:408px;height:30px} .lanmunameer{ width:180px;height:30px; float:left} .lanmumoreer{ width:180px;height:30px; float:right;} .nameer{text-align: left;color: #000000;font-size: 18px;margin: 0 0 0 10;font-family: "字魂27號-布丁體"; } .moreer{text-align: right;color: #000000;font-size: 16px;margin: 0 0 0 170;font-family: "字魂27號-布丁體"; } /*欄目三*/ .lanmusan{ background:#ffffff; width:250px; height:300px;float:left;border:2px solid #f7aea8; margin:0 0 0 0} .lanmuheadsan{ background:#f7aea8; width:250px;height:30px} .lanmunamsan{ width:135px;height:30px; float:left} .lanmumore{ width:135px;height:30px; float:right;} .namesan{text-align: left;color: #000000;font-size: 18px;margin: 0 0 0 10;font-family: "字魂27號-布丁體"; } .moresan{text-align: right;color: #000000;font-size: 16px;margin: 0 0 0 60;font-family: "字魂27號-布丁體"; } /*第二版塊*/ .contenttwo{ background:#ffffff; width:960px; height:300px; margin:0 auto} /*欄目四*/ .lanmusi{ background:#fff; width:466px; height:300px; float:left;border:2px solid #FF9900; margin:0 20 0 0} .lanmuheadsi{ background:#FF9900; width:466px;height:30px} .lanmunamesi{ width:240px;height:30px; float:left} .lanmumoresi{ width:240px;height:30px; float:right;} .namesi{text-align: left;color: #000000;font-size: 18px;margin: 0 0 0 10;font-family: "字魂27號-布丁體"; } .moresi{text-align: right;color: #000000;font-size: 16px;margin: 0 0 0 170;font-family: "字魂27號-布丁體"; } /*欄目五*/ .lanmuwu{ background:#fff; width:466px; height:300px; float:left;border:2px solid #FFCC00; margin:0 0 0 0} .lanmuheadwu{ background:#FFCC00; width:466px;height:30px} .lanmunamewu{ width:240px;height:30px; float:left} .lanmumorewu{ width:240px;height:30px; float:right;} .namewu{text-align: left;color: #000000;font-size: 18px;margin: 0 0 0 10;font-family: "字魂27號-布丁體"; } .morewu{text-align: right;color: #000000;font-size: 16px;margin: 0 0 0 170;font-family: "字魂27號-布丁體"; }/*底部*/ .footer{ background:#8df19b;width:960px; height:40px; margin:auto;text-align: center;font-family: "字魂27號-布丁體";font-size: 24px;border-radius:40px;/*圓角過渡*/ } .footerX{height: 30px;line-height: 30px;margin-left: 152px;position: inherit;bottom: 0;width: 960px;text-align: center;background: #333;color: #fff;font-family: Arial;font-size: 12px;letter-spacing: 1px; } /*間隙*/ .jianxi1{width: 960px;height: 10px;margin: 0 auto;} .jianxi2{width: 960px;height: 10px;margin: 0 auto;} .jianxi3{width: 960px;height: 10px;margin-bottom: 10; } .content03{width:960px; height:2600px; margin:0 auto} /*********************************************/ .lanmu6{width: 960px;height: 400px;margin: 0 auto;border:2px solid rgb(243, 68, 14);border-radius:20px;/*圓角過渡*/ } .lanmu6_01{width: 350px;height: 380px;margin-top: 10px;margin-left: 10px;background:url(img/Chenqianqian.png);border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/ } .lanmu6_middle{width: 205px;height: 380px;margin: 10px;background:url(img/m01.png);background-repeat: repeat;border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/ } .lanmu6_02{width: 350px;height: 380px;margin-top: 10px;margin-right: 10px;border:2px solid rgb(243, 68, 14);float:right;border-radius:20px;/*圓角過渡*/font-size: 25;font-family: KaiTi;} /********************************************/ .lanmu7{width: 960px;height: 400px;margin: 0 auto;border:2px solid rgb(243, 68, 14);border-radius:20px;/*圓角過渡*/ } .lanmu701{width: 350px;height: 380px;margin-top: 10px;margin-left: 10px;border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/font-size: 30;font-family: KaiTi; } .lanmu702{width: 350px;height: 380px;margin-top: 10px;margin-left: 10px;background:url(img/Chengchuchu.png);border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/ } .lanmu703{width: 205px;height: 380px;margin: 10px;background:url(img/m02.png);background-repeat: repeat;border:2px solid rgb(243, 68, 14);float:right;border-radius:20px;/*圓角過渡*/ } /*****************************/ .lanmu8{width: 960px;height: 400px;margin: 0 auto;border:2px solid rgb(243, 68, 14);border-radius:20px;/*圓角過渡*/ } .lanmu801{width: 205px;height: 380px;margin: 10px;background:url(img/m03.png);background-repeat: repeat;border:2px solid rgb(243, 68, 14);float: left;border-radius:20px;/*圓角過渡*/ } .lanmu802{width: 350px;height: 380px;margin-top: 10px;margin-left: 10px;background:url(img/Chenyuanyuan.png);border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/ } .lanmu803{width: 350px;height: 380px;margin-top: 10px;margin-right: 10px;border:2px solid rgb(243, 68, 14);float:right;border-radius:20px;/*圓角過渡*/font-size: 24;font-family: KaiTi; } /****************************/ .lanmu9{width: 960px;height: 400px;margin: 0 auto;border:2px solid rgb(243, 68, 14);border-radius:20px;/*圓角過渡*/ } .lanmu901{width: 350px;height: 380px;margin-top: 10px;margin-left: 10px;background:url(img/Hanshuo.png);border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/ } .lanmu902{width: 350px;height: 380px;margin-top: 10px;margin-left: 10px;border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/font-size: 24;font-family: KaiTi; } .lanmu903{width: 205px;height: 380px;margin: 10px;background:url(img/m04.png);background-repeat: repeat;border:2px solid rgb(243, 68, 14);float:right;border-radius:20px;/*圓角過渡*/ } /******************************/ .lanmu10{width: 960px;height: 400px;margin: 0 auto;border:2px solid rgb(243, 68, 14);border-radius:20px;/*圓角過渡*/ } .lanmu1001{width: 205px;height: 380px;margin: 10px;background:url(img/m05.png);background-repeat: repeat;border:2px solid rgb(243, 68, 14);float: left;border-radius:20px;/*圓角過渡*/ } .lanmu1002{width: 350px;height: 380px;margin-top: 10px;margin-left: 10px;background:url(img/Peiheng.png);border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/ } .lanmu1003{width: 350px;height: 380px;margin-top: 10px;margin-right: 10px;border:2px solid rgb(243, 68, 14);float:right;border-radius:20px;/*圓角過渡*/font-size: 30;font-family: KaiTi; } /**********************************/ .lanmu11{width: 960px;height: 400px;margin: 0 auto;border:2px solid rgb(243, 68, 14);border-radius:20px;/*圓角過渡*/ } .lanmu1101{width: 350px;height: 380px;margin-top: 10px;margin-left: 10px;border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/font-size: 22;font-family: KaiTi; } .lanmu1102{width: 205px;height: 380px;margin: 10px;background:url(img/m01.png);background-repeat: repeat;border:2px solid rgb(243, 68, 14);float:left;border-radius:20px;/*圓角過渡*/ } .lanmu1103{width: 350px;height: 380px;margin-top: 10px;margin-right: 10px;background:url(img/Sumu.png);border:2px solid rgb(243, 68, 14);float:right;border-radius:20px;/*圓角過渡*/ } /************************************************/ .elegant-aero {margin-left:auto;margin-right:auto;max-width: 800px;background: #D2E9FF;padding: 20px 20px 20px 20px;font: 12px Arial, Helvetica, sans-serif;color: #666;}.elegant-aero h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;padding: 10px 10px 10px 20px;display: block;background: #C0E1FF;border-bottom: 1px solid #B8DDFF;margin: -20px -20px 15px;}.elegant-aero h1>span {display: block;font-size: 11px;}.elegant-aero label>span {float: left;margin-top: 10px;color: #5E5E5E;}.elegant-aero label {display: block;margin: 0px 0px 5px;}.elegant-aero label>span {float: left;width: 20%;text-align: right;padding-right: 15px;margin-top: 10px;font-weight: bold;}.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {color: #888;width: 50%;padding: 0px 0px 0px 5px;border: 1px solid #C5E2FF;background: #FBFBFB;outline: 0;-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;box-shadow: inset 0px 1px 6px #ECF3F5;font: 200 12px/25px Arial, Helvetica, sans-serif;height: 30px;line-height:15px;margin: 2px 6px 16px 0px;}.elegant-aero textarea{height:100px;padding: 5px 0px 0px 5px;width: 50%;}.elegant-aero select {background: #fbfbfb url('down-arrow.png') no-repeat right;background: #fbfbfb url('down-arrow.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;}.elegant-aero .button{padding: 10px 30px 10px 30px;background: #66C1E4;border: none;color: #FFF;box-shadow: 1px 1px 1px #4C6E91;-webkit-box-shadow: 1px 1px 1px #4C6E91;-moz-box-shadow: 1px 1px 1px #4C6E91;text-shadow: 1px 1px 1px #5079A3;}.elegant-aero .button:hover{background: #3EB1DD;} /*####################################################*/ .fans_content{width: 960px;height: 2000px;margin: 0 auto; } .img_content{width: 460px;height: 436px;margin: 0 auto;float: left;border:2px solid rgb(243, 68, 14); }/* CSS Document */

總結

以上是生活随笔為你收集整理的静态网页简单设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：华为Android岗面经；群面+技术面+
下一篇： d3dcompiler_47.dll:

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

编程问答

静态网页简单设计

網頁界面最終效果：

源代碼：

總結