html实现个⼈简历代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个⼈简历</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<!--    container叫做整体,⼀般⽤在最⼤的那个div-->html个人网页完整代码顺序
<h1>⼈物简历-zml</h1>
<div class="nav">
<!--        nav是导航的缩写，这⾥⽤的是⽆序列表，然后把块级元素换成⾏内元素-->
<ul>
<li>
<a href="#info">基本信息</a>
<!--                a标签⼀般都是指定id属性的-->
</li>
<li>
<a href="#early">早年经历</a>
</li>
<li>
<a href="#career">演艺经历</a>
</li>
<li>
<a href="#honer">获奖记录</a>
</li>
<li>
<a href="#action">社会活动</a>
</li>
<li>
<a href="#contact">联系⽅式</a>
</li>
</ul>
</div>
<div class="center">
<img src="images/吴彦祖.jpg" width="200px" height="280px">
<video src="video/肖申克的救赎.mp4" height="280px" controls></video>
</div>
<div class="margin">
<!--        因为下⾯都要加边距，所以我在这⾥统⼀加了-->
<!--        基本信息-->
<div id="info">
vb编程100以内奇数和<h2>基本信息</h2>
<!--            ⽂本段落的话，就⽤p标签-->
<p>我和我的祖国</p>
<!--            缩进的话，我们就不⽤空格了，太⿇烦，直接统⼀加样式
选中这个p标签.然后缩进-->
</div>
<!--        早年经历-->
type c接口
<div id="early">
<h2>早年经历</h2>
</div>
<!--        演艺经历-->
<div id="career">
<h2>演艺经历</h2>
<table border="1" align="center" cellspacing="0">
<!--                border是边框,是合并边框-->
<tr>
<!--                    th是表头的意思，它⾃带加粗和居中样式-->
<!--                    如果没有指定宽度，那么它是根据你的内容来指定宽度的-->
<th width="100px">时期</th>
<th width="500px">经历</th>
</tr>
<tr>
<td>asd</td>
<td>......................</td>
</tr>
</table>
</div>
<!--        获奖记录-->
<div id="honer">
<h2>获奖记录</h2>
</div>
<!--        社会活动-->
<div id="action">
<h2>社会活动</h2>
</div>
<!--        联系信息，就是说每⼀部分都给⼀个div-->
<div id="contact">
<h2>联系⽅式</h2>
<p>请你将想告诉我的话放送⾄我的邮箱:</p>
<form action="mailto://123@qq" method="get">
<textarea></textarea><br/>
<!--                这⾥的⽂本域不够宽，那么因为只有⼀个textarea，所以
你可以直接写这个标签名选中它-->
<!--                如果你的宽度设置成百分之多少的话，那么这个都是基于⽗元素的-->
<button type="submit">提交</button>
<!--                ⽂本域，就是有三根下划线的那个-->
java开始语句
</form>
</div>
<div>
<p class="top">
<a href="#">回到顶部</a>
</p>
</div>
<!--        版权信息；每⼀个不同的地⽅都给⼀个div，这样就会有条理⼀点-->
<div id="copyright">
<p>©asd</p>
</div>
</div>
</div>
</body>
</html>
.container{
background: #f0f0f0;
margin: 0 15%;
表单提交是什么意思}
h1{
background: cornflowerblue;
color: white;
height: 70px;
line-height: 70px;
text-indent: 70px;
}
.nav{
text-align: center;
}
.nav li{
display: inline-block;
background: cornflowerblue;
height: 30px;
width: 100px;
line-height: 30px;
border: 1px solid cornflowerblue;
border-radius: 0 10px;
织梦cms教程网text-align: center;
}
.nav li a{
color: white;
text-decoration: none;
}
.
nav li a:hover{
font-weight: bold;
}
.center{
text-align: center;
}
.center img{
margin: 0 30px;
}
.margin{
margin: 0 30px;
}
.margin p{
text-indent: 30px;
}
textarea{
width: 100%;
height: 100px;
}
#copyright{
background: cornflowerblue;
height: 70px;
line-height: 70px;
color: white;
text-align: center;
text-indent: 30px;
font-size: 16px;
}
.top{
text-align: center;
}
.top a{
color: cornflowerblue;
text-decoration: none;
}
.top a:hover{
font-weight: bold;
}
笔记:
container 整体,⼀般⽤在最⼤的div那⾥
margin: 0(这⾥代表上下没有边距) 15%(占它⽗元素15%的⼀个缩进效果); nav: 导航的缩写
text-indent: ⽂本缩进
text-align: 居中，什么都可以居中
:hover: xx的伪列选择器
font-weight: bold；加粗是字体权重
margin就是边距的意思，上下左右都可以设置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。