实验要求
借鉴学院教师个人主页的布局，创建一个个人主页，要求：
1、在header部分包含学院logo，和个人主页各个部分的页面索引，针对索引的link,visited,hover,active四种状态进行设置；
2、中间部分包含sidebar 和内容两个部分；
3、内容部分包含 内容header 和主要内容两部分，主要内容采用1-n的
布局方式，n为内容的标题数目，n可以是分栏，也可以堆叠显示。
4、设计页面尾部内容，可以根据自己想法自由设定；
5、内容主体使用流动布局
实验目的
掌握几种页面布局方式的使用，尤其是流动布局
实验内容
先设计基础的html页面，使用div+CSS方式进行布局
<body>
<div class="container">
<div class="header">
</div>
<div class="main">
<div class="sidebar">
</div>
<div class="content">
<div class="content_header">
个人简介
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>AI生成项目
yaml
设置以上的CSS样式，使用margin:0 auto；使div层居中对齐。设置width, 采用百分比度量单位来适应用户的分辨率,利用流动布局。
.container{
width:80%;
margin: 0 auto;
}AI生成项目
设置header背景
.header{
background-color:gray;
}AI生成项目
设置main的高度
.main{
height:70%;
}AI生成项目
yaml
设置sidebar的样式，记得设置float属性为left
.sidebar{
text-align: center;
float:left;
position: absolute;
border:1px black solid;
background-color: rgb(0, 255, 200);
height: 80%;
width: 15%;
}AI生成项目
设置content的样式，同样要设置float属性，否则会发生高度坍塌现象
.content{
height: 80%;
float: right;
width: 75%;
}AI生成项目
yaml
设置footer的样式，记得加clear属性，防止被前面的浮动div覆盖
.footer{
margin: 0 auto;
background-color:darkseagreen;
height: 80px;
text-align: center;
clear:both;/*不加这个会被盖住*/
}AI生成项目
yaml
注意上面width和height值的设置，sidebar和content的高度要设成一样的，若要移动元素的位置，除了修改这两个属性的值外，还可以考虑设置margin为负边距：margin-top,margin-left是负数时，元素本身朝上，朝左移动；
margin-bottom,margin-right是负数时，元素下面的元素朝下，朝右移动
3. 在header里面加入四川大学的logo图片，并加入各个部分的页面索引，并设置四种状态，不同的状态字体颜色不同。
<div class="link">
<a href="#experience" class="f1">个人经历</a>
<a href="#study" class="f1">学习经历</a>
<a href="#favorite" class="f1">爱好</a>
</div>AI生成项目
yaml
CSS：
.f1{
color: black;
position: relative;
font-size: 30px;
}
.f1:link{
color: black;
}
.f1:hover{
color: yellow;
}
.f1:active{
color:brown;
}
.f1:visited{
color:lime
}AI生成项目
yaml
效果图：
同样地，在sidebar中也加入索引，与上面一样。
效果图：
4. 在content中加入content_header的div，完善content结构
并在下面写入简单的个人简介
效果图：
5. 接着在content中写入个人经历，学习经历，个人爱好等，利用和div特点类似的span元素来进行布局，优点是较为简单，不用考虑width,height，因为这是由span里面的元素撑起来的，运用上节课的知识设置span中出现的文字word的属性，使用列表来排列文字
Html:
<h2>个人经历</h2><hr/>
<span class="word">
<ol>
<li>天天兄弟</li>
<li>《陈情令》主演</li>
<li>《人间有味是清欢》主演</li>
<li>红海尔扮演者</li>
</ol>
</span>AI生成项目
CSS；
.word{
font-family:黑体;
font-size:20px;
text-align:left;
width: 85%;
text-indent: 2em;
}AI生成项目
效果图：
6. 在footer中写入简单的文字
<div class="footer">
<p style="font-family: cursive;font-size: xX-large;">@朱砂痣</p>
</div>AI生成项目
yaml
效果图：
7.优化界面
实验效果
实验完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人主页</title>
<style type="text/css">
body{
height: 2000px;
padding: 0 5%;
}
.container{
width:80%;
margin: 0 auto;
}
.header{
background-color:gray;
}
.sidebar{
text-align: center;
float:left;
position: absolute;
/* border:1px black solid; */
background-color: rgb(0, 255, 200);
height: 86%;
width: 15%;
}
.main{
height:70%;
}
.content{
height: 80%;
float: right;
width: 75%;
}
.content_header{
background-color: rgb(0, 255, 200);
font-family:黑体;
font-size:30px;
text-align:center;
height:50px;
width: 100%;
margin-bottom: 20px;
}
.word{
font-family:黑体;
font-size:20px;
text-align:left;
width: 85%;
text-indent: 2em;
}
.link{
text-align: center;
width: 40%;
margin: 10px;
/* position:relative; */
color:black;
}
.h1{
font-size: 40px;
font-weight: bold;
float: right;
margin: 0 10%;
}
.link1{
font-size: 30px;
font-weight: bold;
}
.link2{
margin-left: 20px;
font-size: 30px;
font-weight: bold;
}
.link3{
margin-left: 20px;
font-size: 30px;
font-weight: bold;
}
.f1{
color: black;
position: relative;
font-size: 30px;
}
.f1:link{
color: black;
}
.f1:hover{
color: yellow;
}
.f1:active{
color:brown;
}
/* .f1:visited{
color:lime
} */
.f2{
text-decoration: none;
font-size: 16px;
color: black;
}
.f2:hover{
color: yellow;
}
.sidebar_head{
text-align: center;
font-size: 30px;
background-color:lightskyblue;
}
.sidebar_content{
text-align: center;
font-size: 15px;
}
img[alt="照片"]{
float: left;
}
.footer{
margin: 0 auto;
background-color:darkseagreen;
height: 80px;
text-align: center;
clear:both;/*不加这个会被盖住*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<img src="logo.png" height="40%" width="40%" alt="logo"/>
<div class="link">
<span class="link1"><a href="#experience" class="f1">个人经历</a></span>
<span class="link2"><a href="#study" class="f1">学习经历</a></span>
<span class="link3"><a href="#favorite" class="f1">爱好</a></span>
</div>
</div>
<div class="main">
<div class="sidebar">
<span class="sidebar_head">王一博的主页</span><br/>
<span class="sidebar_content">
<a href="" class="f2">张三</a><br/>
<a href="" class="f2">李四</a><br/>
<a href="" class="f2">赵五</a><br/>
<a href="" class="f2">黄六</a></span>
</div>
<div class="content">
<div class="content_header">
个人简介
</div>
<img src="wyb.jpg" alt="照片" width="25%"/>
<h2> 王一博</h2>
<p> 四川大学网络空间安全学院</p>
<p> 年级：本科二年级</p>
<p> QQ：111111111</p>
<!-- <p>电话：11111111</p> -->
<div id="experience">
<h2>个人经历</h2><hr/>
<span class="word">
<ol>
<li>天天兄弟</li>
<li>《陈情令》主演</li>
<li>《人间有味是清欢》主演</li>
<li>红海尔扮演者</li>
</ol>
</span>
</div>
<div id="study"><h2>学习经历</h2><hr/>
<span class="word">
<ol>
<li>2005-2011十堰市实验小学</li>
<li>2011-2014十堰市实验中学</li>
<li>2014-2017华中师范大学第一附属中学</li>
<li>2017至今四川大学</li>
</ol>
</span>
</div>
<div id="favorite">
<h2>个人爱好</h2><hr/>
<span class="word">
<ol>
<li>NBA十二年观众</li>
<li>滑板爱好者</li>
<li>摩托车非职业赛冠军</li>
<li>冷漠的爱豆</li>
</ol>
</span>
</div>
</div>
</div>
<div class="footer">
<p style="font-family: cursive;font-size: xX-large;">@朱砂痣</p>
</div>
</div>
</body>
</html>
AI生成项目
yaml
