html之我的个人主页

最新推荐文章于 2024-06-03 15:08:14 发布

bruce-ji

最新推荐文章于 2024-06-03 15:08:14 发布

阅读量2.2k

点赞数 4

分类专栏： html 编程文章标签： http

本文链接：https://blog.csdn.net/qq_26010247/article/details/115360790

版权

编程同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

html之我的个人主页

导入
HTML是什么东西
- 范例代码([code.xueersi.com(本人原创）](https://code.xueersi.com/home/project/detail?lang=code&pid=17356422&version=offline&form=python&langType=python))
制作方法

导入

Grace:嗨，最近个人主页写不好，心烦意乱。。。
bruce(我）：你用什么写的？
Grace：tkinter

其实，主页要用html!
别和我说你不知道html！

HTML是什么东西

上表！

。
开始上基础代码

<html>


</html>

额，错了错了，是

<html>
<body>
</body>
</html>

范例代码(code.xueersi.com(本人原创）)

<!--请你完成今天的课堂巩固作品，完整的网页等你来挑战-->
<!--完成54行生成行内块状元素的代码-->
<!--完成81行右浮动的代码-->
<!--完成149和217行利用id选择器：#music跳转的语句-->
<!--发挥创造力，赶快创造属于你自己的网站吧！-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>bruce的主页</title>
    <style>
        * {
            box-sizing: border-box;
        }

        /*背景图片*/
        body {
            background: url(../static/images/背景图7.jpg);
        }

        /*链接点击变色*/
        a:link {
            color: #0c0c0c;
        }

        a:visited {
            color: #00FF00;
        }

        a:hover {
            color: #FF00FF;
        }

        a:active {
            color: #0000FF;
        }

        /* 头部标题 */
        .top {
            text-align: left;
            color: rgba(255, 254, 254, 0.8);
            font-family: YouYuan;
        }

        /* 导航条 */
        .nav {
            background-color: rgba(255, 255, 255, 0.8);
        }

        /* 导航条链接 */
        .nav a {
            /* 完成下行生成行内块状元素的代码 */
            display: inline;
            color: rgba(0, 0, 0, 0.8);
            padding: 20px;
        }

        /* 链接颜色修改 */
        .nav a:hover {
            background-color: rgba(23, 123, 216, 0.6);
            color: white;
        }

        .main {
            margin-top: 20px;
        }

        /* 创建两列 */
        /* Left column */
        .left {
            float:left;     
            width: 75%;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        /* 右侧栏 */
        .right {
            /* 完成下行右浮动的代码 */
            float: left;
            width: 20%;
            margin-right: 5px;
            margin-bottom: 20px;
        }

        /* 个人相册 */
        .imgset {
            background-color: rgba(255, 255, 255, 0.8);
            width: 100%;
            float: left;
            border-radius: 15px;
            padding: 10px;
        }

        /* 个人简介文字背景 */
        .bj {
            background-color: rgba(255, 255, 255, 0.8);
            width: 100%;
            border-radius: 15px;
            padding: 10px;
        }

        /* 个人简介头像 */
        .bj img {
            width: 70px;
            height: 70px;
            float: right;
        }

        /*编程作品的大小*/
        .bj iframe {
            width: 30%;
            height: 272%;
        }

        /* 相册图片大小 */
        img {
            width: 220px;
            height: 207px;
            padding: 10px;
        }

        /* 标题居中及背景 */
        h2 {
            text-align: center;
            font-family: KaiTi;
        }

        /*缩进字符*/
        .indent {
            text-indent: 30px;
        }

        audio {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="top">
        <h1>秃头管理员的主页</h1>
    </div>
<!--完成149和217行利用id选择器：#music跳转的语句-->
    <div class="nav">
        <a href="#introduce">个人简介</a>
        <a href="#photo">个人相册</a>
        <a href="#music">音乐播放器</a>
        <a href="#program">编程作品</a>
        <a href="#share">编程知识分享</a>
        <a href="#relax">轻松娱乐</a>
    </div>
    <div class="main">
        <!--个人相册-->
        <div class="left">
            <div class="imgset">
                <div id="photo">
                    <h2>个人相册</h2>
                </div>
                <p>这是传说中距离赤道最近的雪山，山上是常年积雪的皑皑白色，山下是绿树成荫的片片绿色，
                    雪域、冰川、森林、水景等从上而下的排列，是很美妙的一种景致。在这里，会经常讲到一个词：“高原反应”。
                    体质不太好的人，我建议可以出发前买好氧气瓶，穿厚点、舒服点的登山服，坐大索道到海拔为4506米的高度
                    再攀登雪山顶峰。高山雪域风景以险、奇、美、秀著称于世，随着时令和阴晴变化，有时云蒸霞蔚、时隐时现，
                    有时碧空如水、晶莹耀眼，有时云带束腰。
                </p>
                <img src="../static/images/雪山.jpg">
                <img src="../static/images/饭.jpg">
                <img src="../static/images/玩具熊.jpg">
                <img src="../static/images/鸭子.jpg">
                <img src="../static/images/二哈.jpg">
                <img src="../static/images/大海.jpg">
                <img src="../static/images/书店.jpg">
                <img src="../static/images/云朵.jpg">
            </div>
        </div>

        <!--个人简介-->
        <div class="right">
            <div class="bj">
                <div id="introduce">
                    <h2>个人简介</h2>
                </div>
                <p>Hello!
                    我是来自中国bruce，具有品学兼优，性格开朗，热爱生活的优良品质。
                    我有2年以上的学习编程课经验，喜欢在团队或个人中发挥自己。
                    我很享受那些努力学习的日子，
                    因为我在学习使用Photoshop、Python、ASP、PHP、JSP...
                    中激发了兴趣，然后越走越远....
                </p>
                <img src="../static/images/user.png">
                <p>姓名：bruce</p>
                <p>民族：汉族</p>
                <p>年龄：11岁</p>
                <p>生日：2010.04.04</p>
                <p>爱好:读书、看电影、学习、做网页</p>
                <p>优点：乐观开朗、善解人意</p>
                <p>技能：Python、Html、photoshop、C++、ASP...</p>
            </div>
        </div>
        <!--编程作品-->
        <div class="left">
            <div class="imgset">
                <div id="program">
                    <h2>编程作品</h2>
                </div>
                <img src="../static/images/吃金币.jpg">
                <img src="../static/images/线.jpg">
                <img src="../static/images/贪吃蛇.jpg">
                <img src="../static/images/骑士.jpg">
            </div>
        </div>
        <!--音乐播放器-->
        <div class="right">
            <div class="bj">
                <!--完成149和217行利用id选择器：#music跳转的语句-->
                <div id="music">
                    <h2>音乐播放器</h2>
                </div>
                BGM1:
                <audio controls="controls">
                    <source src="../static/music/bgm.mp3">
                </audio>
                BGM2:
                <audio controls="controls">
                    <source src="../static/music/buttercup.mp3">
                </audio>
                BGM2:
                <audio controls="controls">
                    <source src="../static/music/bgm3.mp3">
                </audio>
            </div>
        </div>

        <!--编程知识分享-->
        <div class="left">
            <div class="bj">
                <div id="share">
                    <h2>编程知识分享</h2>
                </div>
                <p class="indent">黑客工作室招人了</p>
                <p class="indent"> 只要你会两种编程语言（像 photoshop 也行）</p>
                <p class="indent">在微信输入 15656512989</p>
                <p class="indent">加我，写上你的简历</p>
                <p class="indent">你可能会入职哦</p>
            </div>
        </div>
        <!--娱乐专区-->
        <div class="right">
            <div class="bj">
                <div id="relax">
                    <h2>轻松娱乐(以下精选)</h2>
                </div>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=10893671&version=offline&form=python&langType=python">俄罗斯方块</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=12039937&version=offline&form=python&langType=python">元气骑士迷宫大冒险</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=11924310&version=hw_pocketcode&form=python&langType=python">欢乐打地鼠</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=12902937&version=python&form=python&langType=python">荒岛生存模拟器</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=11996424&version=python&form=python&langType=python">第五人格</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=13253797&version=python&form=python&langType=python">枪王荣耀</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=12722289&version=python&form=python&langType=python">我的世界</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=13135781&version=offline&form=python&langType=python">球球大作战</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=11278424&version=python&form=python&langType=python">井字格</a></p>
                <p><a href="https://code.xueersi.com/home/project/detail?lang=code&pid=10658873&version=webpy&form=webpy&langType=webpy">垃圾分类</a></p>            
            </div>
        </div>
    </div>
</body>

</html>

资料打包地址：https://code.xueersi.com/ide/code/17356422

制作方法

如果你是window用户(不支持mac)

先建一个文件夹，打开
再建一个.txt
写入html
在文件夹内装素材
将.txt改成.html

bruce-ji

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
html之我的个人主页

html之我的个人主页导入~~tkinter~~ HTML是什么东西范例代码([https://oj.czos.cn/problem.php?id=1228](https://oj.czos.cn/problem.php?id=1228))导入Grace:嗨，最近个人主页写不好，心烦意乱。。。bruce(我）：你用什么写的？Grace：tkinter大神，主页有要用tkinter html !别和我说你不知道html！tkinter HTML是什么东西上表！#mermaid-svg-H
复制链接

扫一扫