个人名片

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人名片</title>
    </head>
    <link rel="stylesheet" href="css/style.css">
    <body>
        <div>
            <h1 style="color:blue">姓名</h1>
            <img src="image/n.jpg" width="150" height="200">
            <p>sust学生</p>
        </div>

        <div>
            <h2>我的爱好</h2>
            <ul>
                <li id="hello">写代码</li>
                <li class="world">乒乓球</li>
                <img src="image/p.jpg" width="150" height="200">
                <li>看综艺</li>
                <li>玩游戏</li>
            </ul>
        </div>

        <div>
            <h2>我的学习经历和梦想</h2>
            <ol>
                <li>y中学</li>
                <li>sust大学</li>
                <li><a href="https://www.qq/">腾讯</a></li>
            </ol>
        </div>
    </body>
</html>

还需要的配置

css文件里面是

代码

/*元素选择器*/
h2{
    color: aquamarine;
}
/*id选择器*/
#hello{
    color: red;
}
/*类选择器*/
li.world{
    color: red;
}
h1{
    text-align: center;/*居中*/
    font-size: 100px;/*字体大小*/
}
body{
    background-image: url("../image/n.jpg");
}
div.hobby li:hover{
    color: blue;
}

image里面是一些图片(图片随便放，只要图片名称和代码中的一致即可)

最后就在tomcat/webapps目录下，放进去，启动tomcat，就可以看到成果。

更多推荐

HTML简单练习——个人名片