整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
高興鐵鐵們能來看html網頁設計第二期~~~~撒花~~~~~
哎呀呀~實在是抱歉備注標簽我記錯了QAQ
<!--內容打這里-->這個才是備注標簽不是//
首先我們先來學習上節課留下的劇透，分別是:
有人就說了標題標簽上次劇透不就只有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標簽是最小的
是不是很簡單呀,現在已經學會了一個知識點了哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千萬要記住內容是寫在標簽里面的哦~-->
<!--段落標簽是獨占一條的哦-->
<p>第一條p標簽</p>
<p>第二條p標簽</p>
<p>第三條p標簽</p>
</body>
</html>
鏈接標簽是什么?顧名思義就是一個鏈接看代碼：
<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>
圖像標簽標簽如其意，就是用來上傳圖像的一個標簽~~
我們這里介紹一下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" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| left | 1.0 | 5.5 | 1.0 | 1.0 | 5.0 |
屬性值
| 值 | 描述 |
|---|---|
| auto | 默認值。通過瀏覽器計算左邊緣的位置。 |
| % | 設置以包含元素的百分比計的左邊位置。可使用負值。 |
| length | 使用 px、cm 等單位設置元素的左邊位置。可使用負值。 |
| inherit | 規定應該從父元素繼承 left 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
屬性解釋
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>
理解練習：
通過雪碧圖制作如下布局：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
