版权声明:本文为博主原创文章,未经博主允许不得转载。 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;
}
这样,样式效果就做好了。