用html和css怎么制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)
時(shí)間：2022-07-28 15:06:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2022-07-28 15:06:01 來源：網(wǎng)站運(yùn)營(yíng)
前面發(fā)的兩篇關(guān)于html和css的文章，不知道大家看會(huì)了沒有呢，私下有沒有操作呢。俗話說，學(xué)以致用，只學(xué)不用和沒學(xué)沒什么區(qū)別。
今天就用前兩節(jié)的知識(shí)教大家一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)制作，可能有些陌生的知識(shí)，自行百度哦。
今天制作的就是關(guān)于茉莉花的，上面是圖片下面是詩(shī)歌，先不給大家展示結(jié)果圖片哦，嘿嘿嘿......（留一點(diǎn)神秘感），在文章的最后展示效果圖。
教程：
1，打開記事本，并在其中輸入必要信息，完整代碼如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title>
<body><header><img src="molihua.jpg"width="412" height="291"</header> <article> <header> <h2>茉莉花</h2> <p>作者：宋 · 劉克莊 </p> </header> <hr/> <p>曾與瑤姬約。恍相逢、翠裳搖曳，珠韝聯(lián)絡(luò)。風(fēng)露青冥非人世，攬結(jié)玉龍驂鶴。
愛萬(wàn)朵、千條纖弱。
禱?；ㄉ駪z惜取，問開時(shí)、晴雨須斟酌。枝上雪，莫消卻。
惱人匹似中狂藥。
憑危欄、燭光交映，樂聲遙作。身上春衫香薰透，看到參橫月落。
算茉莉、猶低一著。坐有緱山王郎子，倚玉簫、度曲難為酢。君不飲，鑄成錯(cuò)。</p> <h3>清平樂</h3> <p>冰輪萬(wàn)里。云卷天如洗。先向海山生大士。卻誕卯金之子。冰盆荔子堪嘗。膽瓶茉莉尤香。震旦人人炎熱，補(bǔ)陀夜夜清涼。</p><dl> <dt>《浣溪沙》</dt> <dd>南國(guó)幽花比并香。直從初夏到秋涼</dd> <dt>《鷓鴣天》</dt> <dd>攜靚侶，泛輕航。棹歌驚起野鴛鴦</dd> <dt>《真珠簾》</dt><dd>茉莉芰荷香，拍滿笙簫院。</dd>
</dl></article> <footer>2019.9.6</footer> </body></html>
啟動(dòng)瀏覽器運(yùn)行后，大家會(huì)發(fā)現(xiàn)界面并不美觀，文字看著也比較亂。
為了解決這個(gè)問題，可以在界面添加css規(guī)則，讓界面更好看，更標(biāo)準(zhǔn)化，將下面的代碼塊添加到記事本中，位置在<head>和<head/>也就是頭部之間：
<style type="text/css">body{ background:gray;} h2{ text-align:center;} header{ text-align:center; } article p{ text-indent:2em; } footer{ font-size:12px; font-align:center; } </style>
再次保存和預(yù)覽，是不是看著美觀多了
是不是非常簡(jiǎn)單呢，大家可以嘗試一下。不懂的可以在下面評(píng)論中問哦
在線咨詢