當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

《博客页面制作》教程

發布時間：2023/12/14 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了《博客页面制作》教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

《博客頁面制作》教程

一、《博客頁面制作》第一部分

效果圖：
參考代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>博客制作-第一部分</title><style type="text/css">/*清除瀏覽器默認的邊距*/*{margin: 0px;padding: 0px;}/*設置整個頁面的背景顏色*/body{background-color: gainsboro;}/*設置第一部分div盒子的樣式*/#one{background-image: url(img/head.png);padding-top: 20px;padding-bottom: 20px;margin: 10px;border-radius: 15px;}/*設置第一部分圖片的樣式*/#one img{width: 70px;border: 5px solid white;/*當圓角邊框與圖片大小一致時，就生成一個圓環*/border-radius: 70px;/*設置圖片居中*/display: block;margin: 0px auto;}/*設置第一部分p標簽的樣式*/#one p{margin-top: 10px;text-align: center;font: bold 25px "微軟雅黑";color: white;}</style></head><body><div id="one"><img src="img/avatar.png" /><p>W3Cschool小師妹</p></div></body> </html>

二、《博客頁面制作》第二部分

效果圖：
參考代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>博客制作-第二部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*設置第二部分盒子樣式*/#two{background-color: white;margin: 10px;padding: 35px 10px 15px 10px;border-radius: 15px;}/*設置第二部分標題樣式*/#two h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*設置第二部分段落樣式*/#two p{font-size: 14px;line-height: 25px;font-family: "微軟雅黑";}/*設置段落對齊方式*/.english{text-align: right;}</style></head><body><div id="two"><h1>關于我</h1><p>嘿！我是<strong>W3Cschool小師妹</strong>。編碼改變了我的世界。它不僅僅是應用程序。學習代碼給了我解決問題的技能和在技術層面與他人溝通的途徑。我也可以開發網站，并使用我的編程技術來獲得更好的工作。我是在<strong>W3Cschool</strong>學到了所有這些，這讓我也保持了對學習編程的積極性。加入我這個有益的學習旅程。沿途你會獲得樂趣，得到幫助，學習更多知識！</p><p class="english">"I love coding, I love W3Cschool!"</p></div></body> </html>

三、《博客頁面制作》第三部分

效果圖：
參考代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>博客制作-第三部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*設置第三部分盒子樣式*/#three{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*設置第三部分標題樣式*/#three h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*設置表格樣式*/table{width: 100%;height: 180px;border-color: gainsboro;text-align: center;font-family: "微軟雅黑";}/*設置表格列寬*/td{width: 16.66%;}/*設置表格的背景顏色*/.selected{background-color: orange;color: white;}</style></head><body><div id="three"><h1>我的時間表</h1><table border="1px" cellspacing="0px"><tr><th>Day</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th></tr><tr><td>8:00-8:30</td><td class="selected">Learn</td><td></td><td></td><td></td><td></td></tr><tr><td>9:00-10:00</td><td></td><td class="selected">Practice</td><td></td><td></td><td></td></tr><tr><td>10:00-13:30</td><td></td><td></td><td class="selected">Play</td><td></td><td></td></tr><tr><td>15:45-17:00</td><td></td><td></td><td></td><td class="selected">Code</td><td></td></tr><tr><td>18:00-18:15</td><td></td><td></td><td></td><td></td><td class="selected">Discuss</td></tr></table></div></body> </html>

四、《博客頁面制作》第四部分

效果圖：
參考代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>博客制作-第四部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*設置第四部分div盒子樣式*/#four{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*設置第四部分標題樣式*/#four h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*設置第四部分列表樣式*/ul{margin-left: 30px;line-height: 35px;font-weight: bold;}</style></head><body><div id="four"><h1>我的技能</h1><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div></body> </html>

五、《博客頁面制作》第五部分

效果圖：
參考代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>博客制作-第五部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*設置第五部分盒子樣式*/#five{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*設置第五部分標題樣式*/#five h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*設置第五部分視頻樣式*/video{display: block;margin: auto;}</style></head><body><div id="five"><h1>我的媒體</h1><video src="img/movie.mp4" controls="controls"></video></div></body> </html>

六、《博客頁面制作》第六部分

效果圖：
參考代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>博客制作-第六部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*設置第六部分div盒子樣式*/#six{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*設置第六部分標題樣式*/#six h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*設置第六部分文本框及提交按鈕的樣式*/input{height: 50px;width: 60%;display: block;margin: auto;background-color: gainsboro;border: 1px solid gray;border-radius: 5px;padding-left: 10px;}/*設置第六部分文本域樣式*/textarea{height: 100px;width: 60%;display: block;margin: auto;margin-bottom: 15px;background-color: gainsboro;padding-left: 10px;}/*設置第六部分提交按鈕樣式*/#submit{background-color: #d9534f;color: white;font-size: 20px;}</style></head><body><div id="six"><h1>聯系我</h1><form action="#" method="post"><input type="text" id="name" placeholder="Name"/><br /><input type="text" id="email" placeholder="Email"/><br /><textarea placeholder="Message"></textarea><input type="submit" id="submit" value="提交" /></form></div></body> </html>

七、《博客頁面制作》第七部分

效果圖：
參考代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>博客制作-第七部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*設置第七部分盒子樣式*/#seven{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*設置第七部分標題樣式*/#seven h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*設置第七部分裝圖片的div盒子的對齊方式*/#way{width: 100%;text-align: center;}/*設置第七部分圖片樣式*/#way img{width: 40px;margin-left: 10px;margin-right: 10px;}</style></head><body><div id="seven"><h1>關注我</h1><div id="way"><a href="#"><img src="img/qq.png"/></a><a href="#"><img src="img/weixin.png"/></a><a href="#"><img src="img/weibo.png"/></a></div></div></body> </html>

八、《博客頁面制作》第八部分

效果圖：
參考代碼：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>博客制作-第八部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*設置第八部分邊距、文字樣式*/#eight{padding: 15px 10px 20px 10px;text-align: center;font-family: "微軟雅黑";color: gray;}</style></head><body><div id="eight">©2019 My Blog. All rights reserved.</div></body> </html>

總結

以上是生活随笔為你收集整理的《博客页面制作》教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。