首页课程HTML趣味课堂博客项目“完成博客页面”

博客项目“完成博客页面”

目录列表

完成博客页面

要完成我们的博客页面,我们还需要使用一个框架来嵌入视频。接着,我们还将创建一个 “关注我” 部分,其中包含页面末尾的链接。

实例

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>我的博客</title>
        <link href="https://www.w3cschool.cn/statics/demosource/myblog/myblog.css" rel="stylesheet" type="text/css" />
    </head>   
    <body>
        <!-- header start -->
        <div id="header" class="section">
            <img src="https://www.w3cschool.cn/statics/demosource/myblog/avatar.png" alt="头像" class="img-circle" />
            <p>W3Cschool小师妹</p>
        </div>
        <!-- header end -->
        
        <!-- About Me section start -->
        <div class="section">
            <h2><span>关于我</span></h2>
            <p>嘿!我是<strong>W3Cschool小师妹</strong>。编码改变了我的世界。它不仅仅是应用程序。学习代码给了我解决问题的技能和在技术层面与他人沟通的途径。我也可以开发网站,并使用我的编程技术来获得更好的工作。我是在 <strong>W3Cschool</strong> 学到了所有这些,这让我也保持了对学习编程的积极性。加入我这个有益的学习旅程。沿途你会获得乐趣,得到帮助,学习更多知识!</p>
            <p class="quote">"I love coding, I love W3Cschool!"</p>
        </div>
        <!-- About Me section end -->

        <!-- My Schedule section start -->
        <div class="section">
            <h2><span>我的时间表</span></h2>
            <table>
                <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>
        <!-- My Schedule section end -->
                
        <!-- My Skills section start -->
        <div class="section">
            <h2><span>我的技能</span></h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </div>
        <!-- My Skills section end -->
                
         <!-- Media section start -->
        <div class="section">
            <h2><span>我的媒体</span></h2>
            <iframe height="240" width="320" src="https://www.w3cschool.cn/statics/demosource/movie.mp4" allowfullscreen frameborder="0"></iframe>
        </div>
        <!-- Media section end -->
        
        <!-- Contact section start -->
       <div class="section">
            <h2><span>联系我</span></h2>
            <form>
                <input name="name" placeholder="Name" type="text" required /><br/>
                <input name="email" placeholder="Email" type="email" required /><br/>
                <textarea name="message" placeholder="Message" required ></textarea>
                <input type="submit" value="发送" class="submit" />
            </form>
        </div>
        <!-- Contact section end -->
        
        <!-- Follow section start -->
        <div class="section" id="follow">
            <h2><span>关注我</span></h2>
            <div>
                <a href="#">
                    <img alt="qq" src="https://www.w3cschool.cn/statics/demosource/myblog/qq.png" />
                </a>
                <a href="#">
                    <img alt="weixin" src="https://www.w3cschool.cn/statics/demosource/myblog/weixin.png"/>
                </a>
                <a href="#">
                    <img alt="weibo" src="https://www.w3cschool.cn/statics/demosource/myblog/weibo.png" />
                </a>
            </div>
        </div>
        <!-- Follow section end -->
        
        <div class="copyright">
            © 2017 My Blog. All rights reserved.
        </div>
    </body>
</html>


任务:完成你的博客页面。


你已经完成了创建博客页面,做得不错!你可以与社区分享你创建的博客页面啦!


博客项目中的各节(部分)是使用以下什么标签创建的?

1/2