整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          新手也能學(xué)編程,教你做一個(gè)簡(jiǎn)單的html頁面

          新手也能學(xué)編程,教你做一個(gè)簡(jiǎn)單的html頁面

          家好,我是有聞愛學(xué),一名標(biāo)準(zhǔn)的程序員。我主要從事的是javaweb開發(fā),有些朋友可能不了解什么是javaweb。簡(jiǎn)單地說就是瀏覽器訪問的網(wǎng)站,javaweb大部分都可以做。

          做了這么多年的開發(fā),真心覺得這一行真的不錯(cuò),除非遇到某些996的公司。

          那么接下來我就為有興趣進(jìn)入這一行的或者想用這一行做個(gè)兼職的朋友們做一個(gè)簡(jiǎn)單的入門指導(dǎo)。我們今天的目標(biāo)是做一個(gè)簡(jiǎn)單的html頁面。高手請(qǐng)忽略。

          第一步:

          準(zhǔn)備一臺(tái)電腦(win7/10最好),在桌面新建一個(gè)文本文件如下圖(文件展示擴(kuò)展名請(qǐng)自行百度):

          第二步:

          打開此文件輸入如下內(nèi)容,如圖:

          第三步:

          關(guān)閉 編輯器,將此文件的擴(kuò)展名改為.html,保存如下圖:

          第四:

          雙擊index.html打開,出現(xiàn)如下效果就代表你的第一個(gè)html頁面制作成功啦!

          是不是很簡(jiǎn)單,但這只是最簡(jiǎn)單的一個(gè)靜態(tài)頁面,我們平時(shí)訪問的網(wǎng)站要比這復(fù)雜的多。

          以后我將繼續(xù)為大家講解更深層次的知識(shí)。


          面效果展示


          <script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


          頁面完整代碼

          <!DOCTYPE HTML>
          <html>
          <head> 
          <title>文內(nèi)鏈接</title>
          <style>
          a:hover
          {
          background-color:yellow;
          }
          </style>
          </head> 
          <body >
          <div style="width:50%;margin:auto;"><!--使頁面居中顯示,并展視窗50%寬度-->
          <div style="position:fixed; top:0px;"><!--使導(dǎo)航菜單懸停在頂端-->
          <a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進(jìn)程</a>
          <a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
          <a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動(dòng)態(tài)</a>
          <a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評(píng)價(jià)</a>
          </div><!--使導(dǎo)航菜單懸停在頂端(結(jié)尾)-->
          <div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動(dòng)條-->
          <div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
          <p><!--小div-->
          <h2><a id="chapter1" >試飛進(jìn)程</a></h2>
          殲-20隱形戰(zhàn)斗機(jī)首架技術(shù)驗(yàn)證機(jī)于2011年1月11日中午12時(shí)50分左右進(jìn)行首次升空飛行測(cè)試,13時(shí)08分成功著陸,歷時(shí)18分鐘。<br>
          整個(gè)首飛過程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 。
          2016年10月28日,首次發(fā)布“空軍試飛員將駕殲-20飛機(jī)亮相中國(guó)航展”后,還陸續(xù)發(fā)布了“殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)”“空軍殲-20戰(zhàn)機(jī)首次開展海上方向?qū)崙?zhàn)化訓(xùn)練”等。
          <h2><a id="chapter2">研制情況</a></h2>
          在2016年11月1日,第十一屆珠海航展,殲-20首次進(jìn)行空中飛行展示。兩架殲-20做了公開飛行,不僅在現(xiàn)場(chǎng)引起轟動(dòng),也立刻被西方媒體大量報(bào)道。殲-20是中國(guó)現(xiàn)代空中力量的代表作,也進(jìn)入了世界最先進(jìn)的第五代戰(zhàn)斗機(jī)行列,它是中國(guó)國(guó)防能力高速發(fā)展的一個(gè)象征。<br>
          2018年11月11日,第十二屆中國(guó)航展在珠海迎來“高光時(shí)刻”:殲-20戰(zhàn)機(jī)在公開飛行展示中掛彈開倉,震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>
          2019年10月13日,慶祝人民空軍成立70周年航空開放活動(dòng)新聞發(fā)布上,空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍“王牌部隊(duì)”
          <h2><a id="chapter3" >服役動(dòng)態(tài)</a></h2>
          2017年3月9日,中央電視臺(tái)報(bào)道殲-20戰(zhàn)斗機(jī)正式進(jìn)入空軍序列。<br>
          2017年3月13日,《中國(guó)日?qǐng)?bào)》發(fā)布消息稱,中國(guó)自主研制的殲-20近期將裝配國(guó)產(chǎn)發(fā)動(dòng)機(jī)。<br>
          2017年7月30日,殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國(guó)人民解放軍成立90周年閱兵。殲擊機(jī)梯隊(duì)飛來,3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過。<br>
          2017年9月28日,在中國(guó)國(guó)防部行記者會(huì)上,國(guó)防部新聞發(fā)言人吳謙大校介紹殲-20飛機(jī)已經(jīng)列裝部隊(duì)。<br>
          2017年11月10日上午,中國(guó)空軍發(fā)言人申進(jìn)科大校表示,殲-20 列裝部隊(duì)后,已經(jīng)開展編隊(duì)訓(xùn)練。<br>
          2018年2月9日,中國(guó)空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息,殲-20開始列裝空軍作戰(zhàn)部隊(duì)。<br>
          2018年10月30日,中國(guó)空軍4架殲-20隱形戰(zhàn)斗機(jī)現(xiàn)身珠海金灣機(jī)場(chǎng)上空。<br>
          2019年10月1日,殲-20現(xiàn)身慶祝中華人民共和國(guó)成立70周年閱兵式;閱兵中,殲-20與殲-16、殲-10C三型飛機(jī)分別以5機(jī)楔隊(duì)組成戰(zhàn)斗隊(duì)形接受檢閱;該三款殲擊機(jī)被譽(yù)為中國(guó)空軍殲擊機(jī)家族的“三劍客”,是未來聯(lián)合作戰(zhàn)的骨干力量
          <h2><a id="chapter4" >總體評(píng)價(jià)</a></h2>
          殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī),這讓中國(guó)空軍在面對(duì)日本、韓國(guó)與印度等國(guó)家的空軍時(shí)占有顯著優(yōu)勢(shì)。外媒將殲-20與其他國(guó)家戰(zhàn)機(jī)進(jìn)行了對(duì)比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機(jī)由于研制進(jìn)度幾度推遲,尚未正式交付入役;美國(guó)F-35戰(zhàn)斗機(jī)也多次出現(xiàn)飛機(jī)供氧不足的問題,大面積停飛,出口受阻;韓國(guó)KF-X隱形戰(zhàn)機(jī)先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機(jī)的情況,后又傳出了合作方印尼打算撤資并已告知韓國(guó)的消息。因此,中國(guó)殲-20戰(zhàn)機(jī)成為亞太區(qū)域領(lǐng)跑的優(yōu)勢(shì)戰(zhàn)機(jī)。<br>
          中國(guó)空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn),成為有效塑造態(tài)勢(shì)、管控危機(jī)、遏制戰(zhàn)爭(zhēng)、打贏戰(zhàn)爭(zhēng)的重要力量。殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì),將進(jìn)一步提升空軍綜合作戰(zhàn)能力,有助于空軍更好的肩負(fù)起維護(hù)國(guó)家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>
          殲20是我國(guó)自主研制的第五代戰(zhàn)斗機(jī),它的研制實(shí)現(xiàn)了既定的四大目標(biāo)——打造跨代新機(jī)、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團(tuán)隊(duì)。打造跨代新機(jī),是按照性能、技術(shù)和進(jìn)度要求,研制開發(fā)我國(guó)自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展,指通過自主創(chuàng)新實(shí)現(xiàn)強(qiáng)軍興軍的目標(biāo)。殲20在態(tài)勢(shì)感知、信息對(duì)抗、協(xié)同作戰(zhàn)等多方面取得了突破,這是中國(guó)航空工業(yè)從跟跑到并跑,再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系,是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過一大批大國(guó)重器的研制,我們建立了具有我國(guó)特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì),是指通過型號(hào)研制,錘煉一支愛黨愛國(guó)的研制隊(duì)伍,這些擁有報(bào)國(guó)情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來發(fā)展的生力軍。未來,我們將在戰(zhàn)斗機(jī)的機(jī)械化、信息化、智能化發(fā)展征程上不斷前行。
          </p>
          <img border="0" src="img/image1.jpg" usemap="#map" / >
          <map name="map" id="map">
          <area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="殲20氣動(dòng)外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致!-->
          </map>
          </div><!--小div(結(jié)尾)-->
          </div><!--小div套大div隱藏滾動(dòng)條(結(jié)尾)-->
          </div><!--使頁面居中顯示,并展視窗50%寬度(結(jié)尾)-->
          </body> 
          </html>

          頁面制作技術(shù)解析

          1.頁面內(nèi)容居中顯示方法

          2.導(dǎo)航欄懸停頂端方法

          3.鼠標(biāo)滑過導(dǎo)航標(biāo)題或鏈接時(shí)改變背景色提示

          3.隱藏滾動(dòng)條方法

          4.圖片區(qū)域鏈接

          大家結(jié)合代碼和技術(shù)解析,先自行分析一下每段代碼的作用,以及它們之間的前后關(guān)系。這一步練習(xí)對(duì)培養(yǎng)代碼閱讀能力很有好處,希望大家可以先自行閱讀分析。

          下一次,我會(huì)逐步演示“頁面制作技術(shù)解析”中的五個(gè)步驟以及一些注意事項(xiàng)。

          使用碎片時(shí)間,學(xué)習(xí)完整知識(shí)!關(guān)注大魚師兄,一起精研技藝。

          目錄

          HTML序章(學(xué)習(xí)目的、對(duì)象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          第一個(gè)HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的圖片區(qū)域鏈接方法詳解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML圖片區(qū)域鏈接注意事項(xiàng)與Gimp基本用法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          用HTML制作一個(gè)簡(jiǎn)單頁面(詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作(完結(jié)篇)

          疊樣式表(Cascading Style Sheet,簡(jiǎn)稱:CSS)是為網(wǎng)頁添加樣式的代碼。本節(jié)將介紹 CSS 的基礎(chǔ)知識(shí),并解答類似問題:怎樣將文本設(shè)置為黑色或紅色?怎樣將內(nèi)容顯示在屏幕的特定位置?怎樣用背景圖片或顏色來裝飾網(wǎng)頁?

          CSS 究竟什么來頭?

          和 HTML 類似,CSS 也不是真正的編程語言,甚至不是標(biāo)記語言。它是一門樣式表語言,這也就是說人們可以用它來選擇性地為 HTML 元素添加樣式。舉例來說,要選擇一個(gè) HTML 頁面里所有的段落元素,然后將其中的文本改成紅色,可以這樣寫 CSS:

          p {
            color: red;
          }

          不妨試一下:首先新建一個(gè) styles 文件夾,在其中新建一個(gè) style.css 文件,將這三行 CSS 保存在這個(gè)新文件中。

          然后再將該 CSS 文件連接至 HTML 文檔,否則 CSS 代碼不會(huì)對(duì) HTML 文檔在瀏覽器里的顯示效果有任何影響。(如果你沒有完成前幾節(jié)的實(shí)踐,請(qǐng)復(fù)習(xí)處理文件 和 HTML 基礎(chǔ)。在筆記本里有這個(gè)方面的內(nèi)容!)

          1、打開 index.html 文件,然后將下面一行粘貼到文檔頭(也就是 <head></head> 標(biāo)簽之間)。

          <link href="styles/style.css" rel="stylesheet">

          2、保存 index.html 并用瀏覽器將其打開。應(yīng)該看到以下頁面:

          如果段落文字變紅,那么祝賀你,你已經(jīng)成功地邁出了 CSS 學(xué)習(xí)的第一步。

          “CSS 規(guī)則集”詳解

          讓我們來仔細(xì)看一看上述CSS:

          整個(gè)結(jié)構(gòu)稱為 規(guī)則集(通常簡(jiǎn)稱“規(guī)則”),各部分釋義如下:

          • 選擇器(Selector
          • HTML 元素的名稱位于規(guī)則集開始。它選擇了一個(gè)或者多個(gè)需要添加樣式的元素(在這個(gè)例子中就是 p 元素)。要給不同元素添加樣式只需要更改選擇器就行了。
          • 聲明(Declaration
          • 一個(gè)單獨(dú)的規(guī)則,比如說 color: red; 用來指定添加樣式元素的屬性
          • 屬性(Properties
          • 改變 HTML 元素樣式的途徑。(本例中 color 就是 `` 元素的屬性。)CSS 中,由編寫人員決定修改哪個(gè)屬性以改變規(guī)則。
          • 屬性的值(Property value
          • 在屬性的右邊,冒號(hào)后面即屬性的值,它從指定屬性的眾多外觀中選擇一個(gè)值(我們除了 red 之外還有很多屬性值可以用于 color )。

          注意其他重要的語法:

          • 每個(gè)規(guī)則集(除了選擇器的部分)都應(yīng)該包含在成對(duì)的大括號(hào)里({})。
          • 在每個(gè)聲明里要用冒號(hào)(:)將屬性與屬性值分隔開。
          • 在每個(gè)規(guī)則集里要用分號(hào)(;)將各個(gè)聲明分隔開。

          如果要同時(shí)修改多個(gè)屬性,只需要將它們用分號(hào)隔開,就像這樣:

          p {
            color: red;
            width: 500px;
            border: 1px solid black;
          }

          多元素選擇

          也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號(hào)分開。例如:

          p, li, h1 {
            color: red;
          }

          不同類型的選擇器

          選擇器有許多不同的類型。上面只介紹了元素選擇器,用來選擇 HTML 文檔中給定的元素。但是選擇的操作可以更加具體。下面是一些常用的選擇器類型:

          選擇器名稱

          選擇的內(nèi)容

          示例

          元素選擇器(也稱作標(biāo)簽或類型選擇器)

          所有指定(該)類型的 HTML 元素

          p 選擇 <p>

          ID 選擇器

          具有特定 ID 的元素(單一 HTML 頁面中,每個(gè) ID 只對(duì)應(yīng)一個(gè)元素,一個(gè)元素只對(duì)應(yīng)一個(gè) ID)

          #my-id 選擇 <p id="my-id"><a id="my-id">

          類選擇器

          具有特定類的元素(單一頁面中,一個(gè)類可以有多個(gè)實(shí)例)

          .my-class 選擇 <p class="my-class"><a class="my-class">

          屬性選擇器

          擁有特定屬性的元素

          img[src] 選擇 <img src="myimage.png"> 而不是 <img>

          偽(Pseudo)類選擇器

          特定狀態(tài)下的特定元素(比如鼠標(biāo)指針懸停)

          a:hover 僅在鼠標(biāo)指針懸停在鏈接上時(shí)選擇 <a>

          選擇器的種類遠(yuǎn)不止于此,更多信息請(qǐng)參閱 選擇器。

          字體和文本

          譯注:再一次說明,中文字體文件較大,不適合直接用于 Web Font。

          在探索了一些 CSS 基礎(chǔ)后,我們來把更多規(guī)則和信息添加至 style.css 中,從而讓示例更美觀。首先,讓字體和文本變得更漂亮。

          第一步:找到之前Google Font 輸出的地址。并以<link>元素的形式添加進(jìn)index.html文檔頭(<head></head>之間的任意位置)。代碼如下:

           <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css"> 

          以上代碼為當(dāng)前網(wǎng)頁下載 Open Sans 字體,從而使自定義 CSS 中可以對(duì) HTML 元素應(yīng)用這個(gè)字體。

          第二步:接下來,刪除 style.css 文件中已有的規(guī)則。雖然測(cè)試是成功的了,但是紅字看起來并不太舒服。

          第三步:將下列代碼添加到相應(yīng)的位置,用你在 Google Fonts 找到的字體替代 font-family 中的占位行。( font-family 意味著你想要你的文本使用的字體。)這條規(guī)則首先為整個(gè)頁面設(shè)定了一個(gè)全局字體和字號(hào)(因?yàn)?<html> 是整個(gè)頁面的父元素,而且它所有的子元素都會(huì)繼承相同的 font-sizefont-family):

          html {
            /* px 表示 “像素(pixels)”: 基礎(chǔ)字號(hào)為 10 像素 */
            font-size: 10px;
            /* Google fonts 輸出的 CSS */
            font-family: 'Open Sans', sans-serif;
          }

          注:CSS 文檔中所有位于 /**/ 之間的內(nèi)容都是 CSS 注釋,它會(huì)被瀏覽器在渲染代碼時(shí)忽略。你可以在這里寫下對(duì)你現(xiàn)在要做的事情有幫助的筆記。

          譯注:/*``*/ 不可嵌套,/*這樣的注釋是/*不行*/的*/。CSS 不接受 // 注釋。

          接下來為文檔體內(nèi)的元素(<h1> (en-US)、<li><p>)設(shè)置字號(hào)。將標(biāo)題居中顯示,并為正文設(shè)置行高和字間距,從而提高頁面的可讀性。

             h1 {
               font-size: 60px;
               text-align: center;
             }
             
             p, li {
               font-size: 16px;
               /* line-height 后而可以跟不同的參數(shù),如果是數(shù)字,就是當(dāng)前字體大小乘上數(shù)字 */
               line-height: 2;
               letter-spacing: 1px;
             }

          可以隨時(shí)調(diào)整這些 px 值來獲得滿意的結(jié)果,以下是大體效果:

          一切皆盒子

          編寫 CSS 時(shí)你會(huì)發(fā)現(xiàn),你的工作好像是圍繞著一個(gè)一個(gè)盒子展開的——設(shè)置尺寸、顏色、位置,等等。頁面里大部分 HTML 元素都可以被看作若干層疊的盒子。



          并不意外,CSS 布局主要就是基于盒模型的。每個(gè)占據(jù)頁面空間的塊都有這樣的屬性:

          • padding:即內(nèi)邊距,圍繞著內(nèi)容(比如段落)的空間。
          • border:即邊框,緊接著內(nèi)邊距的線。
          • margin:即外邊距,圍繞元素外部的空間。



          這里還使用了:

          • width :元素的寬度
          • background-color :元素內(nèi)容和內(nèi)邊距底下的顏色
          • color :元素內(nèi)容(通常是文本)的顏色
          • text-shadow :為元素內(nèi)的文本設(shè)置陰影
          • display :設(shè)置元素的顯示模式(暫略)

          開始在頁面中添加更多 CSS 吧!大膽將這些新規(guī)則都添加到頁面的底部,而不要糾結(jié)改變屬性值會(huì)帶來什么結(jié)果。

          更改頁面顏色

          html{
            background-color:#00539f;
          }

          這條規(guī)則將整個(gè)頁面的背景顏色設(shè)置為 所計(jì)劃的顏色。

          文檔體格式設(shè)置

          body{
             width:600px;
             margin:0 auto;
             background-color:#ff9500;
             padding:0 20px 20px 20px;
             border:5px solid black;
          }

          現(xiàn)在是 <body> 元素。以上條聲明,我們來逐條查看:

          • width: 600px; —— 強(qiáng)制頁面永遠(yuǎn)保持 600 像素寬。
          • margin: 0 auto; —— 為 marginpadding 等屬性設(shè)置兩個(gè)值時(shí),第一個(gè)值代表元素的上方下方(在這個(gè)例子中設(shè)置為 0),而第二個(gè)值代表左邊右邊(在這里,auto 是一個(gè)特殊的值,意思是水平方向上左右對(duì)稱)。你也可以使用一個(gè),三個(gè)或四個(gè)值,參考 這里 。
          • background-color: #FF9500; —— 如前文所述,指定元素的背景顏色。我們給 body 用了一種略微偏紅的橘色以與深藍(lán)色的 `` 元素形成反差,你也可以嘗試其它顏色。
          • padding: 0 20px 20px 20px; —— 我們給內(nèi)邊距設(shè)置了四個(gè)值來讓內(nèi)容四周產(chǎn)生一點(diǎn)空間。這一次我們不設(shè)置上方的內(nèi)邊距,設(shè)置右邊,下方,左邊的內(nèi)邊距為20像素。值以上、右、下、左的順序排列。
          • border: 5px solid black; —— 直接為 body 設(shè)置 5 像素的黑色實(shí)線邊框。

          定位頁面主標(biāo)題并添加樣式

          h1{
            margin: 0;
            padding:20px 0;
            color: #00539f;
            text-shadow:3px 3px 1px black
          }

          你可能發(fā)現(xiàn)頁面的頂部有一個(gè)難看的間隙,那是因?yàn)闉g覽器會(huì)在沒有任何 CSS 的情況下 給 <h1>en-US等元素設(shè)置一些默認(rèn)樣式。但這并不是個(gè)好主意,因?yàn)槲覀兿M粋€(gè)沒有任何樣式的網(wǎng)頁也有基本的可讀性。為了去掉那個(gè)間隙,我們通過設(shè)置margin: 0;來覆蓋默認(rèn)樣式。

          至此,我們已經(jīng)把標(biāo)題的上下內(nèi)邊距設(shè)置為 20 像素,并且將標(biāo)題文本與 HTML 的背景顏色設(shè)為一致。

          需要注意的是,這里使用了一個(gè) text-shadow 屬性,它可以為元素中的文本提供陰影。四個(gè)值含義如下:

          • 第一個(gè)值設(shè)置水平偏移值 —— 即陰影右移的像素?cái)?shù)(負(fù)值左移)。
          • 第二個(gè)值設(shè)置垂直偏移值 —— 即陰影下移的像素?cái)?shù)(負(fù)值上移)。
          • 第三個(gè)值設(shè)置陰影的模糊半徑 —— 值越大產(chǎn)生的陰影越模糊。
          • 第四個(gè)值設(shè)置陰影的基色。

          不妨嘗試不同的值看看能得出什么結(jié)果。

          圖像居中

          img{
            display:block;
            margin:0 auto;
          }

          最后,我們把圖像居中來使頁面更美觀。可以復(fù)用 body 的margin: 0 auto,但是需要一點(diǎn)點(diǎn)調(diào)整。<body>元素是塊級(jí)元素,意味著它占據(jù)了頁面的空間并且能夠賦予外邊距和其他改變間距的值。而圖片是內(nèi)聯(lián)元素,不具備塊級(jí)元素的一些功能。所以為了使圖像有外邊距,我們必須使用display: block 給予其塊級(jí)行為。

          注:以上說明假定所選圖片小于頁面寬度(600 pixels)。更大的圖片會(huì)溢出 body 并占據(jù)頁面的其他位置。要解決這個(gè)問題,可以:

          1)使用 圖片編輯器 來減小圖片寬度; 2)用 CSS 限制圖片大小,即減小 <img> 元素 width 屬性的值(比如 400 px)。

          注:如果你暫時(shí)不能理解 display: block 和塊級(jí)元素與行內(nèi)元素的差別也沒關(guān)系;隨著你對(duì) CSS 學(xué)習(xí)的深入,你將明白這個(gè)問題。

          小結(jié)

          如果你按部就班完成本文的實(shí)踐,那么最終可以得到以下頁面


          相關(guān)推薦:

          前端新手看過來,手把手帶你輕松上手html的實(shí)操


          主站蜘蛛池模板: 色精品一区二区三区| 色欲AV蜜臀一区二区三区 | 国产精品美女一区二区视频| 中文字幕一区二区三区人妻少妇| 久久99国产精品一区二区| 国产福利91精品一区二区| 亚洲av日韩综合一区久热 | 日本高清一区二区三区| 午夜视频在线观看一区| 美女毛片一区二区三区四区| 国产伦精品一区二区三区四区| 精品在线视频一区| 无码少妇一区二区性色AV| 亚洲日韩国产一区二区三区| 亚洲熟妇AV一区二区三区浪潮| 日本中文字幕一区二区有码在线| 波多野结衣在线观看一区二区三区| 久久精品午夜一区二区福利| 中文字幕在线观看一区二区| 国产a久久精品一区二区三区| 国产精品一区二区久久精品涩爱| 中文字幕在线精品视频入口一区| 亚洲AV无码一区二区三区在线观看 | 北岛玲在线一区二区| 国产伦精品一区二区三区无广告| 亚洲av日韩综合一区久热 | 狠狠做深爱婷婷久久综合一区| 在线视频一区二区| 国产成人精品一区二区A片带套 | 久久精品午夜一区二区福利 | 国产精品第一区揄拍| 一区一区三区产品乱码| 国产一区二区草草影院| 国产精品日韩一区二区三区| 无码日韩人妻AV一区二区三区| 国产成人一区在线不卡| 蜜臀AV一区二区| 久久久精品人妻一区二区三区蜜桃| 国产一区二区三区91| 日本精品视频一区二区| 丰满爆乳一区二区三区|