个人名片
<!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.com/">腾讯</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，就可以看到成果。