溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“靜態HTML CSS網站制作代碼怎么寫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我的英雄學院</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="main"> <div class="top"> <div class="logo"> <img src="img/logo.jpg" /> </div> <div class="nav"> <ul > <li><a class="hoo" href="index.html" >首頁</a></li> <li><a href="renwu.html" >經典人物</a></li> <li><a href="zuhe.html" >英雄組合</a></li> <li><a href="zhuce.html" >用戶注冊</a></li> <li><a href="pinglun.html" >評論專區</a></li> </ul> </div> </div> <div class="box"> <img src="img/banner.jpg" > </div> <div class="nr"> <div class="box1"> <div class="box1-left"><img src="img/gr.jpg"></div> <div class="box1-right"> <div class="box1-right-tit">我的英雄學院簡介</div> <p>《我的英雄學院》為日本漫畫家堀越耕平在《周刊少年JUMP》上推出的第三部連載作品，講述了一個天生無能力的少年綠谷出久追隨憧憬的偶像英雄歐爾麥特，在以培養未來英雄為目的的雄英學院中求學、成長的故事。</p> <p>《我的英雄學院》為日本漫畫家堀越耕平在《周刊少年JUMP》上推出的第三部連載作品，講述了一個天生無能力的少年綠谷出久追隨憧憬的偶像英雄歐爾麥特，在以培養未來英雄為目的的雄英學院中求學、成長的故事。</p> <p>折寺中學篇(第1-2話)、雄英高中入學考試篇(第3-4話)、個性掌握測試篇(第5-7話)、對人戰斗訓練篇(第8-11話)、敵人聯軍入侵USJ篇(第12-21話)、雄英體育季篇(第22-44話)、職場體驗與英雄殺手襲來篇(第45-58話)、期末考試篇(第58-67話)、林間合宿與敵人聯軍再襲來篇(第68-83話)、救出爆豪篇(第84話-95話)、家訪與住校篇(第96話-99話)、必殺技訓練篇(第100話-102話)、英雄執照考試篇(第103話-114話)、All Might與All For One對話篇(第115話-116話)、出久與小勝沖突篇(第117話-121話)、雄英三巨頭登場篇(第122話-126)、Sir.Nighteye事務所實習篇(第127話-131話)、【死穢八齋會】調查篇(第132話-137話)、【死穢八齋會】進攻篇(第138話-159話)、【死穢八齋會】善后篇(第160話-162話)</p> </div> </div> <div class="tit">英雄職業</div> <div class="box2"> <p>隨著濫用個性而為非作歹的人數爆炸性的飛升，有勇氣的人就學著漫畫故事中那樣開始為打擊犯罪而挺身而出對抗敵人，于是出現了這種以往只能空想憧憬的職業。當前英雄以事務所為中心接受工作，獨自或是偕同伙伴一起執行任務。成為優秀的英雄除了人氣翻升之外還有高額金錢收入。目前就職英雄的人數處于飽和狀態。</p> </div> <div class="tit">雄英高校</div> <div class="box2"> <p>國立的名門高校，學生平均偏差值高達79。在此的教師全都是職業級的英雄。每個學年的學生分成英雄科A、B班、普通科C、D、E班、輔助科F、G、H班、經營科I、J、K班，總計11班。許多知名英雄都是從雄英英雄科畢業的，NO.1英雄.歐爾邁特和NO.2英雄.安德魯皆是這學校的校友，想成為偉大的英雄的話，從雄英畢業是公認的必需條件。 </p> <p>人氣最高的英雄科每年的錄取比例低于1/300，因為入學名額通常只有36名外加推薦入學者4名，總計40名學生。校訓為"Plus Ultra(不懈進取，永無止境)"，有勉勵學生越過苦難更上前進的意思，而能力越強的學生則會被給予更強的試煉。 </p> <p> 校風相當自由，能夠在學校中自由地使用個性。與普通學校不同，并沒有所謂的入學典禮或參觀校園，對于就讀英雄科的學生們的教導會注重于實踐演習的部份。校舍俯瞰是個巨大的H字，校門還有安裝著由厚重的鐵板合金構成的閘門"雄英防護壁"。 </p> </div> <div class="box3"> <img src="img/in01.jpg"> <img src="img/in02.jpg"> <img src="img/in03.jpg"> </div> </div> <div class="foot"> <P>Copyight@我的英雄學院</P> <p>Rights Reserved.</p> </div> </div> </body> </html>
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
font-size: 12px;
font-family: "微軟雅黑",arial;
line-height: 22px;
background: #fbf1da;
}
div,p,input,ul,li,h2,h3,h4 {
height: auto;
margin: 0;
padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
a:link {
color: #333;
}
a:hover {
color: #629705;
text-decoration: none;
overflow: hidden;
}
img {
border: 0;
margin: 0;
padding: 0;
}
.main {
width: 1024px;
height: auto;
margin: 0 auto;
background: #FFF;
}
.top {
height: 88px;
padding-top: 16px;
}
.logo {
width: 66px;
height: 72px;
float: left;
margin-left: 25px;
}
.nav {
width: 550px;
height: 55px;
float: right;
padding-top: 10px;
}
.nav ul {
padding: 0px
}
.nav ul li {
line-height: 55px;
float: left;
text-align: center;
display: inline-block;
position: relative;
width: 110px;
}
.nav ul li a {
color: #221e1f;
font-size: 18px;
}
.nav ul li a:hover {
color: #faab18;
}
.hoo {
color: #faab18 !important;
}
.box {
width: 1024px;
height: 418px;
}
.nr {
width: 1000px;
height: auto;
overflow: hidden;
background: #FFF;
padding-top: 20px;
padding-bottom: 20px;
}
.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;
}
.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;
}
.box3 {
width: 1000px;
height: 190px;
}
.box3 img {
width: 256px;
height: 165px;
float: left;
margin: 20px 38px;
}
.mdi {
height: 570px;
width: 1000px;
margin: 0 auto;
margin-bottom: 15px;
margin-top: 20px;
}
.mdi ul {
margin: 0px;
}
.mdi ul li {
width: 230px;
height: 230px;
float: left;
text-align: center;
margin: 10px;
}
.mdi ul li img {
width: 230px;
}
.mdi ul li h3 {
text-align: center;
line-height: 30px;
font-size: 14px;
}
.xq-box01 {
width: 1000px;
height: 600px;
padding: 20px;
}
.xq-box01 ul {
padding: 0px;
}
.xq-box01 ul li {
width: 480px;
float: left;
padding: 10px;
}
.xq-box01 ul li img {
width: 460px;
height: 300px;
display: block;
}
.xq-box01 .xiangq {
width: 420px;
height: 200px;
padding: 20px;
border-top: none;
background: #e5e4e2;
}
.xq-box01 .xiangq h2 {
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;
}
.huiy {
width: 100%;
height: 650px;
}
.mc {
float: left;
width: 360px;
margin-left: 100px;
padding-top: 100px;
}
.reg-other {
float: left;
margin-left: 60px;
height: 500px;
padding-left: 60px;
border-left: solid 1px #e6e6e6;
padding-top: 100px;
}
.reg-other .phone-fast-reg {
background: url(../img/wz-01.png) no-repeat;
width: 300px;
height: 355px;
}
.one {
margin: 20px 0
}
.one label {
width: 100px;
float: left;
text-align: right;
height: 20px;
line-height: 20px;
}
.one input {
border: 1px solid #ccc;
height: 20px
}
.two {
padding-left: 100px
}
.reda {
color: red
}
.a2 {
width: 100px;
margin-left: 5px;
padding: 2px;
background: #ccc
}
.btn {
background: #ffb72f;
width: 50px;
border: none;
padding: 3px;
color: #fff;
}
.da {
width: 980px;
margin: 0 auto;
margin-top: 20px;
padding: 20px;
}
.da h3 {
width: 980px;
height: 30px;
border-bottom: 1px solid #333;
line-height: 30px;
}
.foot {
height: 70px;
background: #101211;
}
.foot p {
text-align: center;
font-size: 14px;
color: #FFF;
line-height: 20px;
padding-top: 5px;
}“靜態HTML CSS網站制作代碼怎么寫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
