記錄一下自己第一次制作網頁學到的東西。
1.html連結css代碼：
<link href="Untitled-2.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
注：Untitled-2.css是連結的css文檔名，不固定
2.讓文字顯示在圖檔上面
法一：設定body的background屬性，讓圖檔成為背景圖檔
<body background="images/b1.jpg">
缺點：一個html文檔裡一般隻有一個body标簽，是以不能實作多個圖檔各自搭配文字的效果
ps.我試過用多個body設定background屬性，用不同的圖檔，結果背景圖檔仍然是第一個body的背景圖檔，其他body的背景圖檔根本不出現
法二：設定包含圖檔和文字的div的style="position:relative;"然後将文本的樣式設為position:absolute;left:xxx;top:xxx;(left和top是用來控制文本在圖檔中的位置
left 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移
top 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
注釋：如果 “position” 屬性的值為 “static”，那麼設定 “top”，“left” 屬性不會産生任何效果。
），将圖檔的寬度設為100%（同時最開始時要設定
*{ margin: 0px; padding: 0px; }
）
html
<div style="position: relative;">
<img src="images/3DC8B59D5D1C26657AC59F5BB136EABD.jpg" class="image">
<div class="wenzi">
<text class="wenzi1">Zoey</text><br>
<text class="wenzi2">For you,a thousand times over.</text><br>
<text class="wenzi3">生日快樂</text><br>
<text class="wenzi4">2020.3.13</text>
</div>
</div>
圖檔css
.image {
width: 100%;
height: 700px;
}
文字css示例
.wenzi1{
text-align: center;
position: absolute;
left: 42.5%;
top: 255px;
color:#FFFFFF;
font-size: 48px;
}
缺點：調文本的位置時比較麻煩
下面是我用第二種方法弄的
3.設定文本的淡入淡出效果
需要用到css的animation屬性和不透明度opacity屬性（值從0-1，值越大越不透明）
.wenzi{
animation: wenzi 5s;
}
定義animation名稱為wenzi，持續時間為5s
@keyframes wenzi{
0%{opacity: 0;}
50%{opacity: 0.5;}
100%{opacity: 1;}
}
用@keyframes來建立定義的wenzi動畫，并設定透明度的漸變程序
請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，等同于 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
為了得到最佳的浏覽器支援，您應該始終定義 0% 和 100% 選擇器。
4.設定文本的陰影效果
利用文本的text-shadow屬性
文法：text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水準陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊的距離。
color 可選。陰影的顔色。
我覺得這個需要自己慢慢摸索調整為好看的，下面是我調的顔色
留下文字的css代碼：
color: #78AF84; text-shadow:10px 0px 5px #FFFFCC
5.總結
并沒有考慮到在不同浏覽器中的一些屬性設定不同的問題，導緻在有些浏覽器中顯示的效果跟我預想的不同（如下面的ie浏覽器）
然後把我的完整代碼留在這，之後學得更多了以後想辦法解決ie浏覽器的問題
或者如果有人看到了代碼知道我的問題出現在了哪歡迎留言和私信
最後留下我的制作的第一個網頁的完整代碼
html：
css：
網頁效果：
ie浏覽器中：（跟我想象中的完全不一樣啊）
microsoft edge浏覽器中：（因為修改時就是用的這個浏覽器，是以這個的效果我還是比較滿意的）
在谷歌浏覽器也是這個效果