使用html css js写一个个人介绍网页,包含一张个人照片
时间: 2023-09-08 08:11:46 浏览: 51
好的,我可以给你一些基本的代码示例,让你参考和学习。首先,你需要创建一个HTML文件,并在其中添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>个人介绍</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>个人介绍</h1>
</header>
<main>
<section>
<h2>个人信息</h2>
<dl>
<dt>姓名:</dt>
<dd>John Doe</dd>
<dt>出生日期:</dt>
<dd>1990年1月1日</dd>
<dt>联系方式:</dt>
<dd>john.doe@example.com</dd>
</dl>
</section>
<section>
<h2>个人照片</h2>
<img src="myphoto.jpg" alt="个人照片">
</section>
<section>
<h2>个人简介</h2>
<p>我是一名XXX,具有XXX年的从业经验。我热爱XXX,擅长XXX,曾在XXX公司任职XXX职位,负责XXX工作。我热爱生活,喜欢XXX,XXX。...</p>
</section>
</main>
</body>
</html>
```
在这个HTML文件中,我们定义了一个网页的基本结构,包括一个页眉(header)和一个主体(main)。主体中包含了三个部分:个人信息、个人照片和个人简介。你可以根据自己的需求修改这些部分的内容和样式。
接下来,我们需要创建一个CSS文件,并在其中添加以下代码:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
font-size: 36px;
}
section {
margin: 20px 0;
}
h2 {
font-size: 24px;
}
dl {
display: flex;
flex-wrap: wrap;
}
dt {
flex: 1;
font-weight: bold;
}
dd {
flex: 3;
margin: 0;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 50%;
}
p {
line-height: 1.5;
}
```
在这个CSS文件中,我们定义了一些基本的样式,包括页面的字体、页眉的背景颜色和文字颜色、标题的字体大小、列表的布局方式、图片的大小和形状、段落的行高等。
最后,我们需要将这两个文件保存在同一个文件夹中,并将个人照片命名为“myphoto.jpg”,放在同一文件夹中。然后,你可以在浏览器中打开这个HTML文件,查看你的个人介绍网页了。