生活随笔
收集整理的這篇文章主要介紹了
《博客页面制作》教程
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
《博客頁(yè)面制作》教程
一、《博客頁(yè)面制作》第一部分
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第一部分
</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}#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;}#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>
二、《博客頁(yè)面制作》第二部分
<!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>關(guān)于我
</h1><p>嘿！我是
<strong>W3Cschool小師妹
</strong>。編碼改變了我的世界。它不僅僅是應(yīng)用程序。學(xué)習(xí)代碼給了我解決問(wèn)題的技能和在技術(shù)層面與他人溝通的途徑。我也可以開(kāi)發(fā)網(wǎng)站，并使用我的編程技術(shù)來(lái)獲得更好的工作。我是在
<strong>W3Cschool
</strong>學(xué)到了所有這些，這讓我也保持了對(duì)學(xué)習(xí)編程的積極性。加入我這個(gè)有益的學(xué)習(xí)旅程。沿途你會(huì)獲得樂(lè)趣，得到幫助，學(xué)習(xí)更多知識(shí)！
</p><p class="english">"I love coding, I love W3Cschool!"
</p></div></body>
</html>
三、《博客頁(yè)面制作》第三部分
<!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>我的時(shí)間表
</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>
四、《博客頁(yè)面制作》第四部分
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第四部分
</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}#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>
五、《博客頁(yè)面制作》第五部分
<!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>
六、《博客頁(yè)面制作》第六部分
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第六部分
</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}#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>聯(lián)系我
</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>
七、《博客頁(yè)面制作》第七部分
<!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;}#way{width: 100%;text-align: center;}#way img{width: 40px;margin-left: 10px;margin-right: 10px;}</style></head><body><div id="seven"><h1>關(guān)注我
</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>
八、《博客頁(yè)面制作》第八部分
<!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>
總結(jié)
以上是生活随笔為你收集整理的《博客页面制作》教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
