这套源代码来自W3C,我们只是在解释,而不是代码创建者! 我们在手机上使用html5 css3。 复制并运行代码时,建议您选择要运行的手机,或将浏览器大小调整为手机大小。 这次发布的代码是演示代码,是成品。 稍后将发布四篇单独的文章,以详细介绍这四个模块代码的编写。 四个主要模块是“关于我”模块,“我的技能模块”,“我的日程安排”和“联系表模块”等等!


image.png


代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>个人博客网站单页开发---宗波尘客www.zbck123.com</title>
    <style>
 html {
            margin: 0;
 padding: 0;
 }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
 font-size: 14px;
 color: #333;
 background-color: #efefef;
 padding: 10px;
 margin: 0;
 }
        h2 {
            font-size: 20px;
 color: #d9534f;
 text-align: center;
 padding: 18px 0 18px 0;
 margin: 0 0 10px 0;
 }
        p {
            padding: 0;
 margin: 0;
 line-height: 24px;
 }
        .img-circle {
            border: 3px solid #fff;
 border-radius: 50%;
 }
        .section {
            background-color: #fff;
 padding: 20px;
 margin-bottom: 10px;
 border-radius: 8px;
 }
        #header {
            background-color: yellow;
 background-size: cover;
 }
        #header img {
            display: block;
 width: 80px;
 height: 80px;
 margin: auto;
 }
        #header p {
            font-size: 24px;
 color: #fff;
 padding-top: 10px;
 margin: 0;
 font-weight: bold;
 text-align: center;
 }
        .quote {
            font-size: 16px;
 text-align: right;
 margin-top: 10px;
 }
        table {
            width: 100%;
 font-size: 14px;
 }
        table, th, td {
            border: 2px solid #cecece;
 border-collapse: collapse;
 text-align: center;
 table-layout: fixed;
 }
        .selected {
            background-color: #fdc602;
 font-weight: bold;
 color: #fff;
 }
        li {
            margin-bottom: 15px;
 font-weight: bold;
 }
        iframe,audio,video {
            display: block;
 margin: 0 auto;
 }
        form {
            text-align: center;
 margin-top: 0;
 }
        .submit {
            background-color: #d9534f;
 padding: 12px 45px;
 border-radius: 5px;
 cursor: pointer;
 color: #ffffff;
 border: none;
 outline: none;
 margin: 0;
 font-weight: bold;
 }
        .submit:hover {
            background-color: #d2322d;
 }
        textarea {
            height: 100px;
 }
        input, textarea {
            margin-bottom: 10px;
 font-size: 14px;
 padding: 15px 10px 10px;
 border: 1px solid #cecece;
 background-color: #efefef;
 color: #787575;
 border-radius: 4px;
 width: 70%;
 outline: none;
 }
        #follow img {
            height: 50px;
 width: 50px;
 margin-left: 7px;
 margin-right: 7px;
 }
        #follow a {
            text-decoration: none;
 }
        #follow img:hover {
            opacity: 0.8;
 }
        #follow {
            text-align: center;
 }
        .copyright {
            font-size: 13px;
 text-align: center;
 padding-bottom: 10px;
 color: #666;
 }
    </style>
</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>宗九尘博客www.jiuxuan.xyz</p>
</div>
<!-- header end -->

<!-- About Me section start -->
<div class="section">
    <h2><span>关于我</span></h2>
    <p>嘿!我是<strong>宗九尘</strong>。编码改变了我的世界。它不仅仅是应用程序。学习代码给了我解决问题的技能和在技术层面与他人沟通的途径。我也可以开发网站,并使用我的编程技术来获得更好的工作。我是在 <strong>宗九尘博客www.jiuxuan.xyz</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">
 &copy; 2019 My Blog. All rights reserved.
</div>
</body>
</html>

个人博客网站页面开发代码注:
  上面的代码可以直接复制和使用。 我将CSS和html文件代码合并为一个文件代码。 有三种在html中使用CSS代码的方法。 一种是嵌入式CSS样式,另一种是嵌入式CSS样式,另一种是外部CSS样式。 我在这里使用内联样式。
  效果图片和代码表明存在差异。 差异是顶部标头标签的背景色。 原来是W3C中的背景图片。 我为自己修改了背景色,并将图片和视频文件嵌入W3C中。 视频!


国民老实人-九轩博客-宗九尘博客-www.jiuxuan.xyz