html代码
<body>
<div class="header">
<div class="left">
<a href=" #">按钮一</a>
<a href="#">按钮二</a>
<a href="#">按钮三</a>
<a href="#">按钮四</a>
</div>
<div class="right">
<img src="images/mario.png">
</div>
</div>
</body>
css代码
<style>
/* 背景 */
body {
width: 100%;
height: 100%;
background-color: #fff;
background-image: url('images//4.jpg');
background-repeat: no-repeat;
background-size: cover;
}
a {
color: #fff;
text-decoration: none;
background-color: transparent;
display: block;
/* 文字垂直居中 */
line-height: 100px;
text-align: center;
font: 700 60px FZCuYuan-M03S;
}
a:hover {
background: #fff url('images/cap.png')no-repeat;
color: gray;
/* 文字阴影 */
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
text-shadow: 5px 5px 2px rgba(0, 0, 0, .3);
}
.header {
width: 900px;
height: 200px;
/* 盒子水平居中 */
margin: 100px auto;
}
.left {
float: left;
width: 450px;
height: 100px;
/* 盒子水平居中 */
margin: auto;
margin-top: 200px;
}
.right {
float: right;
width: 450px;
height: 100px;
/* 盒子水平居中 */
margin: auto;
margin-top: 40px;
background: url('images/mario.png');
background-size: 100%;
}
.right img {
width: 100%;
}
</style>
