給一個框架
這些會了你就可以搞一下小的頁面模板
1.CSS選擇器定義標籤
inline style內聯樣式
<h2 style="color: red">CatPhotoApp</h2>
Cascading Style Sheets層疊樣式表
<style>
選擇器 {屬性名稱: 屬性值;}
h2 {color: red;}
</style>
2.CSS選擇器使不包含 red-text類的p元素都使用Monospace字體
p:not(.red-text){
font-family: Monospace;
}
3.引入外來字體
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
這裏引入的是Google的字體
4.文字降級
h2 {
font-family: Lobster, Monospace;
}
5.添加圖片
<img src="https://www.your-image-source.com/your-image.jpg" alt="your-image">
PS:alt屬性就是在加載不出來的時候顯示屬性後面的引號內容
像下面這樣
6.調整網頁裏圖片大小
<style>
.larger-image {
width: 500px;
}
</style>
7.標籤增加邊框
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
邊框顏色爲紅色、邊框寬度爲5像素(px)、邊框樣式爲實線(solid)
若要增加圓角邊框
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius:10px;
}
或者
.smaller-image {
width: 100px;
border-radius:10px;
}
均可
只需要在img圖片的class類中的css類屬性中加上即可
效果是這樣的
當然,圓角邊框還可以這樣
是這樣寫的,可以很清晰的看到,我們使用了百分比而不是像素值
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
8.設置鏈接錨元素外部頁面
<p><a href="https://www.baidu.com">baidu.com</a></p>
我在試的時候,發現沒有<p></p>
也是可以的
那樣的話就這樣
<a href="https://www.baidu.com">baidu.com</a>
你能看到=後面被引的是目標地址,後面是錨文本,也就是a標籤要顯示的文本
那麼,如果我想把純文本和那個有超鏈接感覺的文本放一塊呢?
這個時候要Nesting(嵌套),把a元素嵌套進p元素裏面
<p>搜索引擎: <a href="https://www.baidu.com">baidu.com</a></p>
效果是這個樣子的
看起來還不錯吧!
讓我再接着寫點,滿十個就結束。
9.爲圖片創建鏈接
還記着上面的小貓嗎?
下面我們爲它創建一個鏈接,創建之前是這個樣子的:
<p>Click here for <a href="#">cat photos</a>.</p>
<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">
有的同學一看,不對呀,你前面寫的的a標籤後面的鏈接哪裏去了呢?
可以看到,它成這樣子了
<p>Click here for <a href="#">cat photos</a>.</p>
等號後面的鏈接變成了#,#是什麼呢?
是這樣的
有時你想要在你的網站上添加一個 a 元素,但你還不知道將它鏈接到哪裏,這時你可以使用固定連接。
當你使用 jQuery 更改鏈接的行爲時,這也很方便,以後我們會說到。
把 a 元素的 href 屬性的值替換爲一個 # (# 也稱爲哈希符號),可以將其轉換爲一個固定鏈接。
而我們的小貓可以通過嵌套在a元素中使其變爲一個鏈接。
圖片後面記得加alt屬性嗷,這是一個好習慣。
不記得的話看看第五點。
要開會了,今天就只學這麼多了,本來還想寫夠10條來着orz
今天寫了這麼多的結果在這裏
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg" alt="A cute orange cat lying on its back"></a>
<p class="red-text">在大家心目中,也許編程是一件非常困難的事情,其實也是一件非常有樂趣的事情,只要掌握好編程入門的方法,就能慢慢進入一個全新的創造世界。</p>
<p class="red-text">可以學習的編程語言有很多,包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程</p>