當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

静态网页简单设计

發(fā)布時間：2024/3/12 编程问答 25 豆豆

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

應(yīng)同學(xué)要求，幫忙簡單設(shè)計一個靜態(tài)網(wǎng)頁。我就愉快的答應(yīng)了，其實我心里挺沒底的，但是基于我前段時間有過微信小程序的基礎(chǔ)學(xué)習(xí)，在部分css代碼上還是差不多的。
幫同學(xué)做的這個網(wǎng)頁是《傳聞中的陳芊芊》這個電視劇的部分相關(guān)內(nèi)容。
下面是最終的網(wǎng)頁界面。

網(wǎng)頁界面最終效果：

源代碼：

下面只是展示了部分的源代碼，相關(guān)素材及全部代碼可以點擊此處鏈接下載
🤭🤭🤭
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為當(dāng)前處理的元素//each循環(huán)，當(dāng)前處理的元素移除所有的class，然后添加數(shù)組索引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開始,取出數(shù)量為b的數(shù)組* 因為每次點擊之后數(shù)組都被改變了,所以當(dāng)前顯示的這個照片的索引才是0* 所以取出從索引0到b的數(shù)組,就是從原本的這個照片到需要點擊的照片的數(shù)組* 這時候原本的數(shù)組也將這部分?jǐn)?shù)組進(jìn)行移除了* 再把移除的數(shù)組添加的原本的數(shù)組的后面*/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,所以取數(shù)組的時候是倒序來取的,也就是說我們可以先把數(shù)組的順序顛倒一下* 而b現(xiàn)在是負(fù)值,所以取出索引0到-b即為需要取出的數(shù)組* 也就是從原本的照片到需要點擊的照片的數(shù)組* 然后將原本的數(shù)組跟取出的數(shù)組進(jìn)行拼接* 再次倒序,使原本的倒序變?yōu)檎?/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的元素觸發(fā)上一張照片的函數(shù)$(document).on("click", ".p2", function () {previmg();return false;//返回一個false值，讓a標(biāo)簽不跳轉(zhuǎn)});//點擊class為p4的元素觸發(fā)下一張照片的函數(shù)$(document).on("click", ".p4", function () {nextimg();return false;});// 鼠標(biāo)移入box時清除定時器$(".box").mouseover(function () {clearInterval(timer);})// 鼠標(biāo)移出box時開始定時器$(".box").mouseleave(function () {timer = setInterval(nextimg, 4000);})// 進(jìn)入頁面自動開始定時器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>《傳聞中的陳芊芊》根據(jù)同名影視劇改編。是趙露思、丁禹兮等主演的古裝愛情劇，由騰訊視頻全網(wǎng)獨播。母胎單身七流編劇陳小千嘔心瀝血寫了一部女尊題材大劇，原可順利開機(jī)，卻因為演員韓明星對劇本感情戲質(zhì)疑過多而崩盤。憤懣難平發(fā)誓要證明自己能力的她，意外卡進(jìn)了自己的劇本，變身東梁女國地位尊貴但惡評滿國的三公主。原本一個活不過三集的小女配，為了活命開編劇副本，逆轉(zhuǎn)荒唐人生，在不懂套路的犬系世子韓爍和人設(shè)完美外貌滿分的太學(xué)院少傅裴恒之間，最終學(xué)會愛與成長</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關(guān)鍵代碼：

<div class="content03"><div class="lanmu6"><div class="lanmu6_01"></div><div class="lanmu6_middle"></div><div class="lanmu6_02" ><h3>陳芊芊</h3>傳聞中囂張跋扈、在花垣城中肆意妄為的三郡主，讓別人叫自己三公主，在現(xiàn)實生活當(dāng)中是一名編劇，無意中穿越到自己女尊的劇本當(dāng)中，為了活下去用著三郡主的角色努力生活下去，一邊與韓爍斗智斗法，一邊嘗試撮合原來的女主陳楚楚和韓爍，不料韓爍卻反倒對她情根深種。</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>花垣城大郡主，身負(fù)殘疾，終日坐在輪椅上。她悲觀但堅強(qiáng)，一邊說著悲春傷秋的話，一邊卻各處搜羅各種大補(bǔ)食材。久病成良醫(yī)，她醫(yī)術(shù)非常高明，什么病都能治，除了自己的腿。表面上冷漠孤僻，實際內(nèi)心渴望別人的關(guān)懷，更想像正常人一樣談一段刻骨銘心的戀愛。</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>花垣城的第一美男子，家世、才學(xué)都近乎完美，是花垣少女心中的優(yōu)質(zhì)偶像，與陳芊芊有婚約，起初對其排斥，但在女主小千進(jìn)入劇情后，卻漸漸被其吸引。</div></div><div class="lanmu11"><div class="lanmu1101"><h3>蘇沐</h3>花垣城教坊司“頭牌”，有“萬人空巷看蘇郎'的評價。他最擅長討好女人，是婦女之友，非常會察言觀色。做事穩(wěn)妥，風(fēng)流浪蕩的外表下隱藏著一顆細(xì)膩體貼有擔(dān)當(dāng)?shù)男?#xff0c;所以他很快發(fā)現(xiàn)沅沅脆弱又敏感的一面。蘇沐感恩于沅沅對他沒有偏見，所以他很用心地去對大公主，精準(zhǔn)把握住她的脾氣。漸漸兩人互生好感。</div><div class="lanmu1102"></div><div class="lanmu1103"></div></div></div>

fans.html關(guān)鍵代碼：

<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]今天看了《傳聞中的陳芊芊》粉絲見面會直播回放，感覺他們之間的關(guān)系比較真誠，不僅是工作同事，更像是朋友，或許是因為趙露思比較會搞氣氛，感覺他們之間很和諧，還有因為在看劇的時候，陷入他們演的角色，看直播時會發(fā)現(xiàn)他們也是現(xiàn)實生活中的人啊，會像普通人一樣在臺上緊張，給我的感覺特別真實，總之非常開心看到他們，[可愛][/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]#傳聞中的陳芊芊[超話]##傳聞中的陳芊芊[超話]#真的想說一下傳聞中的陳芊芊這部劇一開始沒被所有人看好連見面會跟售后都是劇粉每天催命似的催官博催出來的慶祝蛋糕還是貼片還只貼一半兩位主演也是小演員沒有很大的粉絲基礎(chǔ)我們從來沒有污蔑過別人甚至被別人超過也只是“果然jynn就是jynn 我們也要努力” 很長時間也以沖一保二作為目標(biāo)<br/>理解你們的心情但這不是否認(rèn)我們努力的理由 <br/>偉大的玄虎醋王八曾經(jīng)說過：“你讓的？明明是我們自己爭取的！”[/cp]</div></div><div style="width: 400; height: 502.5;background: url(img/cptext_bg03.png);"><div style="font-size: 29;"><br/>[cp]#視頻創(chuàng)作者##傳聞中的陳芊芊#傳聞中的陳芊芊「粉絲見面會直播」托盤抱還是公主抱？異口同聲：公主抱！拍托盤抱的時候什么感受？露思：我吸了口氣，憋住……顫抖著祈禱，抱起我抱起我！丁禹兮一定要抱起我！球球！女演員真的是不容易「允悲」趙露思陳芊芊,丁禹兮韓爍 http://t.cn/A6LVwY1Y ?[/cp]</div></div></div></div></div></div>

wonderful_moments.html關(guān)鍵代碼：

talk_over.html關(guān)鍵代碼：

css代碼：

body{margin:0; padding:0;background-image: url(img/bg.png);background-repeat: repeat;background-attachment: fixed;/*背景圖片固定，不隨鼠標(biāo)滾動而滾動*/ } /*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;/*圓角過渡*/ } /**##########滾動圖片設(shè)置#################**/ .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; } /**####################################################################**//*導(dǎo)航欄*/ .Navigation{background: #e9a6d5;width: 960px;height: 40px;margin: 0 auto;text-align: center;font-family: "字魂27號-布丁體";font-size: 24px;border-radius:20px;/*圓角過渡*/ } /*內(nèi)容*/ .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 */

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

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