简洁风个人主页（2） css样式设置

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38177305/article/details/80937267

时间太久，差点忘记跟新了。

静态页面完成之后，用css设置样式。样式主要分为两大块——背景图设置、中间半透明标签。

1.背景图设置。

背景图片的设置，主要是将图片能够铺满整个屏幕。并且后期实现图片切换的效果，将图片路径写在background:url()内。

body
{
	background:url(../img/images/8.jpg);
	background-size:100%;
	background-repeat: no-repeat;
}

2.设置把透明框体。

透明框体的设置，主要是框体内部元素的位置排列，以及框体圆角化和透明度的样式设置。

body #container
{
	background-color:black;
	opacity: 0.2;
	width:500px;   
	height: 250px;   
	margin:0 auto;
	margin-top:200px;
        border-radius:20px;
}

body #header
{
  height:160px;	
  text-align:center;
  margin:0px;
}

body #header-content
{
	color:white;
	height:75px;
	
}

body #header-content a
{
	font-family: "楷体";
	color:white;
	text-decoration:none;
	font-size:22px;
	letter-spacing:10px;
}

body #header-content a:hover
{
	text-decoration: underline;
}

body #header-content p
{
	font-size:15px;
}

body #content
{
    height:140px;	
    margin:0px;
    text-align: center;
    vertical-align: middle;
}

body #content #main-content a
{
	
	color:white;
	text-decoration: none;
}

body #content #main-content a:hover
{
	text-decoration: underline;
	color:white;
}

body #footer hr2
{
	margin-top:300px;
}

body #footer #footer-content button
{
	border:0;
	background-color:#000000;
	font-size:20px;
	color:white;
	border-radius: 10px;
	float: right;
	margin-right: 25px;
}

这样，样式效果就做好了。