<!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--> <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"> <h2>基本信息</h2> <!-- 文本段落的话,就用p标签--> <p>我和我的祖国</p> <!-- 缩进的话,我们就不用空格了,太麻烦,直接统一加样式 选中这个p标签.然后缩进--> </div> <!-- 早年经历--> <div id="early"> <h2>早年经历</h2> </div> <!-- 演艺经历--> <div id="career"> <h2>演艺经历</h2> <table border="1" align="center" cellspacing="0"> <!-- border是边框,cell...是合并边框--> <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.com" method="get"> <textarea></textarea><br/> <!-- 这里的文本域不够宽,那么因为只有一个textarea,所以 你可以直接写这个标签名选中它--> <!-- 如果你的宽度设置成百分之多少的话,那么这个都是基于父元素的--> <button type="submit">提交</button> <!-- 文本域,就是有三根下划线的那个--> </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;
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就是边距的意思,上下左右都可以设置