只使用html和css写一段大学生个性介绍网页
时间: 2023-07-15 16:12:58 浏览: 49
好的,以下是一个简单的大学生个性介绍网页的HTML和CSS代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个性介绍</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
#photo {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}
p {
text-align: justify;
margin: 20px 50px;
line-height: 1.5;
}
ul {
list-style: none;
margin: 20px;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
.social-icon {
display: block;
width: 30px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 50%;
line-height: 30px;
font-size: 20px;
text-decoration: none;
}
.social-icon:hover {
background-color: #666;
}
</style>
</head>
<body>
<h1>个性介绍</h1>
<img src="https://via.placeholder.com/200x200" alt="照片" id="photo">
<p>我叫张三,是一名大学生。我喜欢听音乐、看电影和打游戏。我的梦想是成为一名优秀的软件工程师,为社会做出贡献。</p>
<ul>
<li><a href="#" class="social-icon">F</a></li>
<li><a href="#" class="social-icon">T</a></li>
<li><a href="#" class="social-icon">I</a></li>
<li><a href="#" class="social-icon">L</a></li>
</ul>
</body>
</html>
```
你可以将上述代码保存为一个HTML文件,然后在浏览器中打开该文件,就可以看到一个简单的个性介绍网页了。其中,`<head>`标签中的`<style>`标签定义了网页的样式,包括字体、背景色、图片样式、段落样式、列表样式、社交媒体图标样式等。`<body>`标签中包含了网页的内容,包括标题、照片、段落、社交媒体图标等。你可以根据自己的需要修改这些内容和样式。