<!DOCTYPE html>
<html lange="en"> <!-- 设置语音 -->
<head>
<meta charset="UFT-8"> <!-- 设置编码格式 -->
<title>Title</title>
<style>
.pg-head{
position:fixed;
right:0;
left:0;
top:0;
height:48px;
background-color:#dddddd;
line-height:48px; /*垂直居中*/
}
.pg-body{
margin-top:50px; /*局顶部的距离为50像素*/
}
.write{
width:980px;
margin:0 auto;
}
.pg-head .menu{
display:inline-block; /*同时包含块 行内标签的属性*/
padding:0 10px 0 10px; /*顺时针边距*/
color:white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-head .menu:hover{
background-color:red;
}
</style>
</head>
<body>
<div class="pg-head">
<div class="w">
<a class="menu">菜单1</a>
<a class="menu">菜单2</a>
<a class="menu">菜单3</a>
</div>
</div>
<div class="pg-body">
<h1>内容体</h1>
</div>
</body>
</html>
<html lange="en"> <!-- 设置语音 -->
<head>
<meta charset="UFT-8"> <!-- 设置编码格式 -->
<title>Title</title>
<style>
.pg-head{
position:fixed;
right:0;
left:0;
top:0;
height:48px;
background-color:#dddddd;
line-height:48px; /*垂直居中*/
}
.pg-body{
margin-top:50px; /*局顶部的距离为50像素*/
}
.write{
width:980px;
margin:0 auto;
}
.pg-head .menu{
display:inline-block; /*同时包含块 行内标签的属性*/
padding:0 10px 0 10px; /*顺时针边距*/
color:white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-head .menu:hover{
background-color:red;
}
</style>
</head>
<body>
<div class="pg-head">
<div class="w">
<a class="menu">菜单1</a>
<a class="menu">菜单2</a>
<a class="menu">菜单3</a>
</div>
</div>
<div class="pg-body">
<h1>内容体</h1>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
