web程序设计（5）——个人主页（布局）

最新推荐文章于 2024-06-04 13:04:19 发布

My_summers

最新推荐文章于 2024-06-04 13:04:19 发布

阅读量1.5w

点赞数 22

分类专栏： Web 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44164249/article/details/103928643

版权

Web 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

实验要求

借鉴学院教师个人主页的布局，创建一个个人主页，要求：
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>

设置以上的CSS样式，使用margin:0 auto；使div层居中对齐。设置width, 采用百分比度量单位来适应用户的分辨率,利用流动布局。

.container{
        width:80%;  
        margin: 0 auto;
    }

设置header背景

.header{
    background-color:gray;
        }

设置main的高度

.main{
        height:70%; 
    }

设置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%;
    }

设置content的样式，同样要设置float属性，否则会发生高度坍塌现象

.content{
        height: 80%;
        float: right;
        width: 75%;
        }

设置footer的样式，记得加clear属性，防止被前面的浮动div覆盖

.footer{
            margin: 0 auto;
            background-color:darkseagreen;
            height: 80px;
            text-align: center;
            clear:both;/*不加这个会被盖住*/
        }

注意上面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>

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
    }

效果图：
在这里插入图片描述

同样地，在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>

CSS；

.word{
        font-family:黑体;
        font-size:20px;
        text-align:left;
        width: 85%;
        text-indent: 2em;
    }

效果图：
在这里插入图片描述
6. 在footer中写入简单的文字

<div class="footer">
        <p style="font-family: cursive;font-size: xX-large;">@朱砂痣</p>
    </div>

效果图：
在这里插入图片描述
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>&nbsp;&nbsp;     王一博</h2>
                      <p>&nbsp;     &nbsp;     四川大学网络空间安全学院</p>
                      <p>&nbsp;     &nbsp;     年级：本科二年级</p>
		              <p>&nbsp;     &nbsp;     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>

My_summers

关注

22
点赞
踩
188

收藏

觉得还不错? 一键收藏
1
评论
web程序设计（5）——个人主页（布局）

实验要求借鉴学院教师个人主页的布局，创建一个个人主页，要求：1、在header部分包含学院logo，和个人主页各个部分的页面索引，针对索引的link,visited,hover,active四种状态进行设置；2、中间部分包含sidebar 和内容两个部分；3、内容部分包含内容header 和主要内容两部分，主要内容采用1-n的布局方式，n为内容的标题数目，n可以是分栏，也可以堆叠显示。...
复制链接

扫一扫

专栏目录