《博客页面制作》教程

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

效果图：
参考代码：

<!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">&copy;2019 My Blog. All rights reserved.</div></body>
</html>

《博客页面制作》教程相关推荐

自己动手做聊天机器人教程
GitHub链接: https://github.com/warmheartli/ChatBotCourse
《自己动手做聊天机器人》教程
开篇在: http://www.shareditor.com/blogshow/?blogId=63 http://www.shareditor.com/blogshow/?blogId=65 htt ...
自己动手做聊天机器人一-涉及知识【转】
转自:http://www.shareditor.com/blogshow/?blogId=63 人工智能一直以来是人类的梦想,造一台可以为你做一切事情并且有情感的机器人,像哆啦A梦一样,现在这已经不 ...
自己动手做聊天机器人一-涉及知识
人工智能一直以来是人类的梦想,造一台可以为你做一切事情并且有情感的机器人,像哆啦A梦一样,现在这已经不是一个梦了:iPhone里会说话的siri.会下棋的阿法狗.小度机器人.大白......,他们都能 ...
自己动手做聊天机器人二十九-重磅：近1GB的三千万聊天语料供出
Reference: http://www.shareditor.com/blogshow/?blogId=112 经过半个月的倾力打造,建设好的聊天语料库包含三千多万条简体中文高质量聊天语料,近1G ...
自己动手做聊天机器人三-语料与词汇资源
当代自然语言处理都是基于统计的,统计自然需要很多样本,因此语料和词汇资源是必不可少的,本节介绍语料和词汇资源的重要性和获取方式请尊重原创,转载请注明来源网站www.shareditor.com以及原 ...
做聊天机器人平台就是赌博
最开始并没有操作系统,软件运行时都是竞争的:直接请求硬件资源,造成竞争.而且多人用一个计算机时,这种情况更容易发生.然后人家开始做操作系统,你觉得不可能,那怎么可能呢. 后来操作系统使用很麻烦,面对冷 ...
Rasa Stack：创建支持上下文的人工智能助理和聊天机器人教程
相关概念 Rasa Stack 是一组开放源码机器学习工具,供开发人员创建支持上下文的人工智能助理和聊天机器人: • Core = 聊天机器人框架包含基于机器学习的对话管理 • NLU = 用于自然语 ...
PyTorch 1.0 中文官方教程：聊天机器人教程
译者:毛毛虫作者: Matthew Inkawhich 在本教程中,我们探索了一个好玩和有趣的循环序列到序列的模型用例.我们将用 Cornell Movie-Dialogs Corpus处的电影剧本 ...
实践：动手搭建聊天机器人
什么是聊天机器人? 聊天机器人是一种人工智能系统,可以用文字或者语音和人类交流互动.简单的如询问现在的天气怎么样.最新的新闻是什么,复杂一点的如手机出问题了询问一下要如何解决等等. 不过聊天机器人现 ...

《博客页面制作》教程

《博客页面制作》教程

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

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

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

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

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

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

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

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

《博客页面制作》教程相关推荐

最新文章

热门文章