整合營銷服務商

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

          免費咨詢熱線:

          第二期html基礎 驚!學習了這些知識居然可以做網頁啦

          高興鐵鐵們能來看html網頁設計第二期~~~~撒花~~~~~

          哎呀呀~實在是抱歉備注標簽我記錯了QAQ

          <!--內容打這里-->這個才是備注標簽不是//

          首先我們先來學習上節課留下的劇透,分別是:

          1.標題標簽h1~h6

          有人就說了標題標簽上次劇透不就只有h1標簽嗎?

          嘿嘿,其實他還有兄弟姐妹啦~

          看圖,代碼是從上往下從左往右執行的請記住這個順序哦~

          還有,左邊是代碼右邊是網頁上面的效果哦~


          源代碼:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>頁面標題</title>

          </head>

          <body>

          <!--標題標簽是h1~h6-->

          <h1>1</h1><!--最大-->

          <h2>2</h2>

          <h3>3</h3>

          <h4>4</h4>

          <h5>5</h5>

          <h6>6</h6><!--最小-->

          </body>

          </html>

          如圖所示,h1標簽是最大的,h6標簽是最小的

          是不是很簡單呀,現在已經學會了一個知識點了哦~


          2.段落標簽 p標簽

          源代碼:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title></title>

          </head>

          <body>

          <!--千萬要記住內容是寫在標簽里面的哦~-->

          <!--段落標簽是獨占一條的哦-->

          <p>第一條p標簽</p>

          <p>第二條p標簽</p>

          <p>第三條p標簽</p>

          </body>

          </html>

          3.鏈接標簽 a標簽

          鏈接標簽是什么?顧名思義就是一個鏈接看代碼:

          <a href="https://www.baidu.com">百度</a>

          href是什么東西啊?是a標簽的屬性啦~里面用來輸入你需要跳轉到的網頁的鏈接

          屬性里面的東西是不會出現在網頁上面的出現的只有在a標簽里面的內容哦

          當我點擊百度這兩個字后就給我跳轉到了我們href屬性里面的https://www.baidu.com

          當然我們也可以跳轉到我們自己制作的網頁上面但要求是同一個項目下面的網頁

          是不是很有趣~

          看視頻:

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

          視頻中我們點擊鏈接后就跳轉到了山這個網頁出現了一張山的圖片,是不是有點小意思~


          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title></title>

          </head>

          <body>

          <a href="new_file3.html">跳轉到山的網頁</a><!--只有同一個項目下面的網頁才能相互跳轉-->

          </body>

          </html>


          4.圖像標簽 img標簽

          圖像標簽標簽如其意,就是用來上傳圖像的一個標簽~~

          我們這里介紹一下img的兩個屬性:

          <img src="img/OIP-C.jpg" alt="山"/>

          src就是用來放圖片的地址的,他會根據地址去找圖片然后把圖片放到網頁上面。

          alt有什么用啊就是當圖片顯示失敗的時候就會顯示alt里面的文字

          看視頻:

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

          我們把圖片的地址破壞后,就會顯示一個圖片錯誤的圖標和alt里面的內容

          怎么拖圖片到img文件下,老師~~~我不知道

          看視頻

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

          嘿嘿就直接把文件拖進來就ok了是不是很簡單~

          okk,好快啊怎么一下就學完了今天的知識點~~~

          嘻嘻今天可是有作業的~

          請根據下面的網頁仿寫一下:

          完成后作業發再評論區哦,有什么不懂的可以留言包回答的。

          加油呀,每天學一點爭取做出屬于自己的一個網頁~

          上一期

          把圖像的左邊緣設置在其包含元素左邊緣向右5像素的位置:

          img

          {

          position:absolute;

          left:5px;

          }


          屬性定義及使用說明

          left 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

          如果 "position" 屬性的值為 "static",那么設置 "left" 屬性不會產生任何效果。

          注意: If "position:static", the left property has no effect.

          默認值:auto
          繼承:no
          版本:CSS2
          JavaScript 語法:object.style.left="50px"

          瀏覽器支持

          表格中的數字表示支持該屬性的第一個瀏覽器版本號。

          屬性
          left1.05.51.01.05.0

          屬性值

          描述
          auto默認值。通過瀏覽器計算左邊緣的位置。
          %設置以包含元素的百分比計的左邊位置。可使用負值。
          length使用 px、cm 等單位設置元素的左邊位置。可使用負值。
          inherit規定應該從父元素繼承 left 屬性的值。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          ackground屬性

          屬性解釋

          background屬性是css中應用比較多,且比較重要的一個屬性,它是負責給盒子設置背景圖片和背景顏色的,background是一個復合屬性,它可以分解成如下幾個設置項:

          background-color 設置背景顏色

          background-image 設置背景圖片地址

          background-repeat 設置背景圖片如何重復平鋪

          background-position 設置背景圖片的位置

          background-attachment 設置背景圖片是固定還是隨著頁面滾動條滾動

          實際應用中,我們可以用background屬性將上面所有的設置項放在一起,而且也建議這么做,這樣做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,這里面的“#00ff00”是設置background-color;“url(bgimage.gif)”是設置background-image;“no-repeat”是設置background-repeat;“left center”是設置background-position;“fixed”是設置background-attachment,各個設置項用空格隔開,有的設置項不寫也是可以的,它會使用默認值。

          舉例:

          下面這些例子使用下面這張圖片做為背景圖:

          1、“background:url(bg.jpg)”,默認設置一個圖片地址,圖片會從盒子的左上角開始將盒子鋪滿。

          2、“background:cyan url(bg.jpg) repeat-x”,橫向平鋪盒子,盒子其他部分顯示背景顏色“cyan”。

          3、“background:cyan url(bg.jpg) repeat-y”,縱向平鋪盒子,盒子其他部分顯示背景顏色“cyan”。

          4、“background:cyan url(bg.jpg) no-repeat”,背景不重復,背景和盒子左上角對齊,盒子其他部分顯示背景顏色“cyan”。

          5、“background:cyan url(bg.jpg) no-repeat left center”,背景不重復,背景和盒子左中對齊,盒子其他部分顯示背景顏色“cyan”。

          6、“background:cyan url(bg.jpg) no-repeat right center”,背景不重復,背景和盒子右中對齊,也就是背景圖片的右邊對齊盒子的右邊,盒子其他部分顯示背景顏色“cyan”。

          相關代碼:

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <title>test background</title>
           <style type="text/css">
           .backshow{
           width:320px;
           height:160px;
           border:3px solid #333;
           float:left;
           margin:10px; 
           }
           .bg1{background:cyan url(bg.jpg);}
           .bg2{background:cyan url(bg.jpg) repeat-x;}
           .bg3{background:cyan url(bg.jpg) repeat-y;}
           .bg4{background:cyan url(bg.jpg) no-repeat;}
           .bg5{background:cyan url(bg.jpg) no-repeat left center;}
           .bg6{background:cyan url(bg.jpg) no-repeat right center;}
           </style>
          </head>
          <body>
           <div class="backshow bg1"></div>
           <div class="backshow bg2"></div>
           <div class="backshow bg3"></div>
           <div class="backshow bg4"></div>
           <div class="backshow bg5"></div>
           <div class="backshow bg6"></div>
          </body>
          </html>
          

          例子說明:

          background-position的設置,可以在水平方向設置“left”、“center”、“right”,在垂直方向設置“top”、“center”、“bottom”,除了設置這些方位詞之外,還可以設置具體的數值。

          比如說,我們想把下邊的盒子用右邊的圖片作為背景,并且讓背景顯示圖片中靠近底部的那朵花:

          用上面中間那張圖片作為左邊那個比它尺寸小的盒子的背景,上面右邊的實現效果設置為:“background:url(location_bg.jpg) -110px -150px”,第一個數值表示背景圖相對于自己的左上角向左偏移110px,負值向左,正值向右,第二個數值表示背景圖相對于自己的左上角向上偏移150px,負值向上,正值向下。

          實現原理示意圖:

          對應代碼:

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <title>test background</title>
           <style type="text/css">
           .backshow{
           width:320px;
           height:160px;
           border:3px solid #333;
           float:left;
           margin:10px; 
           } 
           .bg{width:94px;
           height:94px;
           border:3px solid #666;
           background:url(location_bg.jpg) -110px -150px;
           }
           </style>
          </head>
          <body>
           <div class="bg"></div>
          </body>
          </html>
          

          理解練習:

          通過雪碧圖制作如下布局:


          主站蜘蛛池模板: 日韩精品中文字幕无码一区 | 亚洲国产成人久久一区WWW| 国产精品无码一区二区三区不卡| 国产suv精品一区二区6| 精品无码人妻一区二区三区品| 一区二区三区四区在线观看视频| 国产精品视频一区麻豆| 国产a∨精品一区二区三区不卡| 国产一区美女视频| 天堂va视频一区二区| 亚洲一区二区三区成人网站| 国产亚洲无线码一区二区| 国产观看精品一区二区三区| 日本美女一区二区三区| 国产精品一区二区AV麻豆 | 亚洲一区二区三区在线视频| 日韩精品免费一区二区三区| 亚洲AV无码国产一区二区三区 | 色噜噜AV亚洲色一区二区| 国产一区二区精品久久91| 在线播放精品一区二区啪视频| 99久久精品国产一区二区成人 | 久久99精品一区二区三区| 成人精品一区二区三区不卡免费看| 杨幂AV污网站在线一区二区| 一区五十路在线中出| 亚洲成人一区二区| 中文字幕国产一区| 国产在线无码一区二区三区视频| 国产亚洲欧洲Aⅴ综合一区| 在线观看免费视频一区| 日韩欧国产精品一区综合无码| 蜜桃传媒视频麻豆第一区| 激情内射亚洲一区二区三区| 一区二区亚洲精品精华液| 精品国产一区二区三区久久影院| 国产乱码精品一区二区三区四川 | 日韩电影在线观看第一区| 一区二区三区久久精品| 亚洲熟妇av一区二区三区| 色妞色视频一区二区三区四区 |