時間：2023-10-01 04:24:01 | 來源：網(wǎng)站運營
時間：2023-10-01 04:24:01 來源：網(wǎng)站運營
計算機畢業(yè)設(shè)計——簡單的網(wǎng)頁設(shè)計：HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。@TOC
在線咨詢
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>網(wǎng)站首頁</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><!----網(wǎng)站頭部開始----><div class="top"></div><div class="nav"> <ul class="nav_menu"> <li class="nav_menu-item"><a target="_blank" href="index.html" >網(wǎng)站首頁</a></li> <li class="nav_menu-item"><a target="_blank" href="about.html" >關(guān)于電影</a> <ul class="nav_submenu"> <li class="nav_submenu-item"> <a target="_blank" href="about.html" >電影簡介</a></li> <li class="nav_submenu-item"> <a target="_blank" href="fangkong.html" >劇情簡介</a></li> </ul> </li> <li class="nav_menu-item"><a target="_blank" href="xinwen.html" >電影資訊</a></li> <li class="nav_menu-item"><a target="_blank" href="yingxiong.html" >電影劇照</a></li> <li class="nav_menu-item"><a target="_blank" href="xiangce.html" >電影圖鑒</a></li> <li class="nav_menu-item"><a target="_blank" href="zhuce.html" >會員注冊</a></li> </ul></div><!-----網(wǎng)站頭部結(jié)束--------------><!------網(wǎng)站主體部分開始-----------------------><div class="main"><div class="banner"><img src="images/banner.jpg" /></div><div class="nr"><marquee scrolldelay="400" scrollamount="100" class="gundong">歡迎來到電影《鋼鐵俠3》網(wǎng)站。</marquee><div class="tit-s">電影簡介<span><a target="_blank" href="about.html">更多 > ></a></span></div><div class="box1"><div class="box1-left"><img src="images/gr.jpg" /></div><div class="box1-right"><P>《鋼鐵俠3》是2013年上映的超級英雄電影。改編自漫威同名經(jīng)典漫畫，是漫威電影宇宙的第七部影片，同時也是漫威電影宇宙第二階段的首部電影，由沙恩·布萊克執(zhí)導(dǎo)，小羅伯特·唐尼、格溫妮絲·帕特洛、唐·錢德爾、蓋·皮爾斯、Paul Bettany等參加演出?！朵撹F俠3》故事時間發(fā)生在《復(fù)仇者聯(lián)盟》紐約大戰(zhàn)結(jié)束半年之后，講述了托尼·斯塔克的生活被強敵毀滅殆盡，無路可退的他必須依靠精良的高科技裝備以及過人才智，保護自己和身邊最親近的人，同時揪出真正的幕后元兇。該片于2013年5月1日中國上映，同步登陸IMAX銀幕。</P><P>托尼·斯塔克遭遇到強敵挑戰(zhàn)，這個人毀壞了托尼·斯塔克的生活，斯塔克為前所未有的焦慮癥所困擾。與此同時，臭名昭著的恐怖頭目滿大人（本·金斯利 ben kingsley 飾）制造了一連串的爆炸襲擊事件，托尼當(dāng)年最忠誠的保鏢即在最近的一次襲擊中身負重傷。未過多久，托尼、佩珀以及曾與他有過一面之緣的女植物學(xué)家瑪雅（麗貝卡·豪爾rebecca hall 飾）在家中遭到猛烈的炮火襲擊，幾乎喪命，而這一切都與13年前那名偶然邂逅的科學(xué)家阿爾德里奇·基連（蓋·皮爾斯 guy pearce 飾）及其終極生物的研究有關(guān)。</P></div></div><div class="tit-s">電影圖鑒<span><a target="_blank" href="xiangce.html">更多 > ></a></span></div><div class="caiz"><ul><li><a target="_blank" href="xiangce.html"><img src="images/dg1.jpg"><p>圖一</p></a></li><li><a target="_blank" href="xiangce.html"><img src="images/dg2.jpg"><p>圖二</p></a></li><li><a target="_blank" href="xiangce.html"><img src="images/dg3.jpg"><p>圖三</p></a></li><li><a target="_blank" href="xiangce.html"><img src="images/dg4.jpg"><p>圖四</p></a></li></ul></div><div class="tit-s">電影資訊<span><a target="_blank" href="huodong.html">更多 > ></a></span></div><div class="news-box"><ul><li class="mar30"><a target="_blank" href="#.html"><img class="scm" src="images/neir01.jpg"><h1>鋼鐵俠的6個救命恩人，直接成就了他</h1><p>你拯救世界，我來拯救你，想要能夠成為超級英雄，除了自己本身的能力，還需要朋友的幫助，否則能力再大.....</p><p>2020-12-02 admin <span>548</span></p></a></li><li><a target="_blank" href="#.html"><img class="scm" src="images/neir02.jpg"><h1>《鋼鐵俠3》的絕境病毒是永生的關(guān)鍵？</h1><p>漫威電影宇宙中有相當(dāng)多奇奇怪怪的科技，只有你想不到，沒有他們倒騰不出來的。.....</p><p>2020-12-02 admin <span>642</span></p></a></li></ul></div></div></div><div class="foot"><div class="banq">版權(quán)所有 @鋼鐵俠3電影網(wǎng)站</div></div><embed src="images/hero.mp3" autostart="true" loop="true" hidden="true"></embed></body></html>body { margin: 0 auto; font-size: 14px; font-family: "微軟雅黑"; line-height: 22px; background: #fbf6d9}div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd { height: auto; margin: 0; padding: 0; vertical-align: middle;}li { list-style: none;}img { border: 0; margin: 0; padding: 0;}a { color: #333; text-decoration: none;}a:link { color: #333;}a:hover { color: #629705; text-decoration: none; overflow: hidden;}.top { width: 1000px; height: 179px; margin: 0 auto; padding-top: 10px; background: url(../images/top-bg.jpg) no-repeat;}.main { width: 1000px; margin: 0 auto; height: auto; overflow: hidden;}.gundong { height: 40px; line-height: 40px; font-size: 16px;}.banner { height: 382px; width: 1000px;}.nav { width: 1000px; margin: 0 auto; background: #b20300; color: #70142a; ;}.nav a { display: block; padding: 0 16px; line-height: inherit; color: #FFF;}.nav a:hover { color: #FFF;}.nav_menu { line-height: 45px; font-weight: 700;}.nav_menu-item { display: inline-block; position: relative; width: 163px; text-align: center;}.nav_menu-item:hover { background-color: #b20300;}.nav_menu-item:hover .nav_submenu { display: block;}.nav_submenu { font-weight: 300; text-transform: none; display: none; position: absolute; width: 163px; background-color: #b20300; text-align: left;}.nav_submenu-item:hover { background: #ce1b18;}.nr { width: 1000px; height: auto; overflow: hidden; background: #FFF; padding-top: 20px; padding-bottom: 20px;}.nr span { color: #900;}.wenzi { width: 854px; height: auto; overflow: hidden; margin: 0 auto;}.wenzi p { line-height: 25px; font-size: 14px; text-indent: 2em;}.box1 { width: 1000px; height: 260px;}.box1-left { width: 200px; height: 220px; padding: 20px; float: left;}.box1-right { width: 740px; margin-left: 20px; height: 220px; float: left; margin-top: 20px;}.box1-right-tit { font-size: 16px; color: #333; font-weight: bold; height: 40px; line-height: 40px;}.box1-right p { font-size: 14px; line-height: 22px; text-indent: 2em;}.tit { font-size: 16px; height: 40px; line-height: 40px; color: #333; margin-left: 20px; font-weight: bold;}.box2 { padding: 0px 20px;}.box2 p { font-size: 14px; line-height: 22px; text-indent: 2em;}.tit-s { font-size: 16px; height: 40px; line-height: 40px; color: #333; margin-left: 20px; font-weight: bold; border-bottom: #666 1px dashed; width: 960px;}.tit-s span { float: right; font-weight: normal; font-size: 12px;}.imgs { display: block; margin: 0 auto;}.xq-box01 { width: 1000px; height: 600px; margin: 0 auto;}.xq-box01 ul { padding: 0px;}.xq-box01 ul li { width: 460px; float: left; padding: 20px;}.xq-box01 ul li img { width: 460px; height: 300px; display: block;}.xq-box01 .xiangq { width: 420px; height: 200px; padding: 20px; border-top: none; background: #f0f1f2;}.xq-box01 .xiangq h1 { height: 40px; font-size: 16px; line-height: 40px; margin-bottom: 10px; border-bottom: #D8D7D7 1px solid;}.xq-box01 .xiangq p { font-size: 12px; text-indent: 2em;}.news { width: 100%; height: 600px; background: #FFF;}.news-ner { width: 1200px; height: 600px; margin: 0 auto; margin-top: 50px;}.news-box { width: 960px; height: auto; margin: 0 auto; margin-top: 0px; margin-top: 0px; margin-top: 30px;}.news-box ul li { width: 465px; height: 88px; margin-bottom: 25px; float: left;}.news-box ul li .scm { width: 144px; height: 88px; margin-right: 15px; float: left;}.news-box ul li h1 { height: 30px; line-height: 30px; color: #4a525a; font-size: 16px; font-weight: normal;}.news-box ul li p { font-size: 12px; color: #666;}.news-box ul li span { background: url(../images/ico01.jpg) 0px 0px no-repeat; padding-left: 20px; color: #666 !important;}.mar30 { margin-right: 30px;}.lv-box { width: 1000px; height: 225px; padding: 20px;}.lv-box img { width: 300px; height: 203px; float: left; margin-right: 20px;}.lv-box-r { width: 605px; height: 225px; float: left;}.lv-box .lv-tit { font-size: 16px; height: 40px; line-height: 40px; font-weight: bold;}.lv-box p { font-size: 14px; line-height: 30px; float: left; text-indent: 2em;}.lv-box-r span { color: #F00;}.xc { width: 854px; height: 387px; padding-top: 20px; font-size: 0; margin: 0 auto;}.xc img { float: left}.xcbtn { width: 854px; height: 349px; font-size: 0; padding-top: 9px; margin: 0 auto;}.caiz { width: 100%; height: auto; overflow: hidden;}.caiz ul { margin-top: 20px; padding: 0px 10px;}.caiz ul li { width: 233px; height: 250px; padding: 5px; float: left;}.caiz ul li img { width: 230px; height: 200px;}.caiz ul li p { font-size: 14px; line-height: 24px; text-align: center;}.geyan { padding: 20px;}.neirong { width: 960px; height: auto; overflow: hidden; background: #FFF; padding: 20px;}.neirong p { text-indent: 2em}.neirong img { display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px;}.title { font-size: 16px; height: 80px; line-height: 40px; width: 960px; margin: 0 auto; text-align: center; color: #333; margin-left: 20px; font-weight: bold; border-bottom: #CCC 1px dashed; margin-bottom: 20px;}.title2 { height: 30px; line-height: 30px; font-size: 12px; text-align: center; color: #999; font-weight: normal;}.title2 span { background: url(../images/ico01.jpg) 0px 0px no-repeat; padding-left: 20px; color: #666 !important; font-weight: normal;}.liuyan { padding: 0px 20px;}.liuyan { height: 696px; margin: 0 auto; margin-top: 30px;}.liuyan-left { width: 400px; height: 696px; float: left; background: url(../images/box12-1.jpg) no-repeat;}.liuyan-right { width: 540px; height: 600px; float: left;}.l-anniu { width: 150px; height: 40px; background: #da251c; text-align: center; line-height: 40px; font-size: 14px; color: #FFF; margin: 0 auto; margin-top: 45px; margin-bottom: 97px;}.l-liuyan { width: 520px; margin: 0 auto; height: auto; overflow: hidden;}.l-liuyan input { width: 330px; height: 30px; border: #cecccc 1px solid; float: left; margin-right: 30px; margin-bottom: 20px; padding-left: 30px; font-size: 16px; float: left;}.l-liuyan span { float: left; line-height: 30px; font-size: 18px; width: 120px;}.foot { width: 1000px; height: 83px; background: #b20300; margin: 0 auto; padding-top: 20px;}.banq { width: 1000px; height: 40px; line-height: 40px; color: #FFF; margin: 0 auto; text-align: center; font-family: "仿宋"; font-size: 12px;}【點贊收藏博文】 三連支持下吧，你的支持是我創(chuàng)作的動力, 【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】。關(guān)鍵詞：設(shè)計,簡單,畢業(yè),計算機
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
