整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          (HTML完結篇)制作一個簡單頁面(詳解)-零基礎自學網頁制作

          面制作技術詳解


          演示視頻在文章底部

          1.頁面內容居中顯示方法

          將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。

          將</div>放置在</body>之上。

          將全部內容包裹在這個div中,就可以實現整個頁面居中。

          內容顯示寬度為瀏覽器視窗寬度的50%。

          margin(外邊距)是在CSS布局中經常用到的屬性,它指定了該div元素距離四周的距離。使用“auto”值,可以實現居中。

          2.導航欄懸停頂端方法

          把四個a標簽裝到一個div中。

          將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。

          將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。

          position是css布局中指定位置的屬性,“fixed”值是讓該div懸停于固定位置。

          默認下,該div距離視窗頂端有10px左右的距離,因此為了讓它與視窗頂部對齊,添加top:0px。

          3.鼠標滑過導航標題或鏈接時改變背景色提示

          這就要介紹關于css的寫法了。

          簡單來說,就是在<head></head>標簽中添加

          <style>

          a:hover

          {

          background-color:#ffff00;

          }

          </style>

          學過HTML頁面中head標簽有啥用?——零基礎自學網頁制作的小伙伴應該知道,CSS腳本是可以添加在head元素中的。

          其中,a:hover中的a指的是所有<a></a>標簽。

          hover指的是:當鼠標懸停在a上面時的狀態

          使用:連接。

          這個狀態下要執行的內容在{}中。

          background-color:#ffff00;即背景色為黃色。

          3.隱藏滾動條方法

          首先,我們要明確一點,就是,滾動條是在內容長度超過視窗高度時產生的。

          如果要取消視窗最右側滾動條,就要控制內容高度。

          把<p></p>和<img/><map></map>全部裝進<div></div>中,控制該div的高度可以實現。

          在<p>標簽色上面添加<div>。

          在</map>標簽下面添加</div>。

          下面,為div規定尺寸,添加style="width:610px; height:530px;"。

          這樣,就不會超出視窗。但是代碼寫完后發現并不是,如圖:

          多出的文字內容超出div范圍,右側滾動條依然存在。

          這就要在div的style中再增加一條語句"overflow-y:scroll;"

          這句話的意思是“overflow-y”(超出最大高度)就顯示滾動條(scroll)。而不是讓內容超出div的邊框。

          <div style="width:610px; height:530px; overflow-y:scroll;" >

          如圖:

          因為圖片寬度的問題,下方的x軸的scroll也出現了,我們不想看到它,影響美觀。

          添加“overflow-x:hidden”即可,hidden(隱藏)。

          <div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >

          如圖:hidden之后,將無法滾動或拖動畫面。

          最后,我們要把右側的scroll也隱藏掉,因為點擊鼠標,滾動滾輪就夠了,滾動條實在礙眼。

          從前面的例子可知,hidden是不行的,有沒有別的辦法?

          那就是在蓋div的外部再添加一個div,讓這個div的寬度略小于里面div的寬度,小到剛剛擋住滾動條既可以。如圖:

          這個div這樣寫即可

          <div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">

          </div>

          同時還要給里面的div添加margin來讓它們對齊

          <div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">

          <div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >

          <!--省略了p img map 請自行腦補或參考源碼-->

          </div>

          </div>

          完整代碼:用HTML制作一個簡單頁面(代碼閱讀練習)——零基礎自學網頁制作

          是否好奇網頁制作么,只要打開查看元素就能夠看到網頁的代碼啦。

          <html>

          <head>

          </head>

          <body>

          <h1>靜夜思</h1>

          床前明月光,疑似地上霜。<br>

          舉頭望明月,低頭思故鄉

          </body>

          </html>

          這就是一個簡單的格式,網頁中屬于一個完整的存在,html在此相當于靈魂被識別,head是標簽相當于頭部,body也是身體事網頁顯示內容的地方。

          代碼寫出來一定要有結尾,這表示規范,當然也可以不用這么做,只是不會被太菜的瀏覽器識別。而且隨著版本的更新內容也更多了。

          新建文本文件,代碼復制后保存為.html的格式,雙擊點開就會被le瀏覽器檢測就能看到了,試試效果吧。

          lt;!DOCTYPE html>

          <html>

          <head>

          <title>我的網頁</title>

          </head>

          <body>

          <h1>歡迎來到我的網頁</h1>

          <p>這是一個簡單的 HTML 網頁設計。</p>

          <img src="https://picsum.photos/200" alt="隨機圖片">

          <ul>

          <li>項目 1</li>

          <li>項目 2</li>

          <li>項目 3</li>

          </ul>

          </body>

          </html>


          在這個例子中,我們創建了一個簡單的 HTML 網頁,其中包括以下元素:

          • <!DOCTYPE html>:告訴瀏覽器這是一個 HTML5 文件。
          • <html>:定義 HTML 文檔的根元素。
          • <head>:包含有關文檔的元數據,如標題等。
          • <title>:定義網頁標題,將顯示在瀏覽器標簽頁上。
          • <body>:定義網頁的主要內容。
          • <h1>:定義一個一級標題。
          • <p>:定義一個段落。
          • <img>:定義一個圖片,并指定圖片的源和替代文本。
          • <ul> 和 <li>:定義一個無序列表,并列出項目。

          主站蜘蛛池模板: 日本在线一区二区| 亚洲第一区二区快射影院| 熟女性饥渴一区二区三区| 无码人妻精品一区二区三区99仓本| 精品国产一区二区三区麻豆| 成人国内精品久久久久一区| 国产在线观看精品一区二区三区91 | 亚洲AⅤ视频一区二区三区| 无码人妻av一区二区三区蜜臀| 日韩精品无码一区二区三区免费 | 亚洲av鲁丝一区二区三区| 一区二区3区免费视频| 日本一区午夜爱爱| 国内精品一区二区三区在线观看| 亚洲国产视频一区| 亚洲AV本道一区二区三区四区| 中文字幕在线一区| 亚洲熟女少妇一区二区| 亚洲性日韩精品一区二区三区| 精品视频在线观看一区二区三区| 怡红院美国分院一区二区| 欧美成人aaa片一区国产精品 | 久久高清一区二区三区| 久久精品国产一区二区三区日韩| 国模私拍一区二区三区| 亚洲AV无码一区东京热| 亚洲午夜在线一区| 亚洲AV无码片一区二区三区| 无码av人妻一区二区三区四区| 中文字幕日韩一区二区不卡| 中文字幕无线码一区2020青青| 国产精品一区二区无线| 亚洲国产成人精品久久久国产成人一区二区三区综| 在线一区二区观看| 国产福利一区二区在线视频 | 亚洲AV乱码一区二区三区林ゆな| 亚洲视频一区二区在线观看| 国产一区二区好的精华液| 精品3d动漫视频一区在线观看| 精品国产不卡一区二区三区| 久久人妻内射无码一区三区|