固定他在屏幕中的位置: <div class="navbar"> <div class="title" :style='{"display":"block",}'> <span class="title-name" :style='{"cursor":"default","padding":"0 0 0 12px","lineHeight":"44px","fontSize":"38px","color":"#fff","font-family": "楷体","float":"left","fontWeight":"600","textShadow": "4px 4px 2px rgba( 0, 0, 0, .5)"}'>{{this.$project.projectName}}</span> </div> <div class="right" :style='{"position":"absolute","right":"20px","top":"8px","fontWeight":"600","display":"flex"}'> <div :style='{"cursor":"default","margin":"0 5px","lineHeight":"120px","color":"#fff","margin-right":"20px"}' class="nickname" >{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div> <!-- <div :style='{"cursor":"pointer","margin":"0 30px","lineHeight":"120px","color":"#000"}' v-if="this.$storage.get('role')!='管理员'" class="logout" @click="onIndexTap">退出到前台</div> --> <div :style='{"cursor":"pointer","margin":"0 5px","lineHeight":"120px","color":"#fff","margin-right":"30px"}' class="logout" @click="onLogout" >退出登录</div> </div> </div>
时间: 2023-07-02 12:20:21 浏览: 100
这段代码是一个网站的导航栏,其中的标题和右侧的用户信息是放在同一个父级元素下的。如果想要固定这个导航栏在屏幕的位置,可以在父级元素 `.navbar` 上添加 `position: fixed` 样式,并设置 `top` 和 `left` 属性来确定它在屏幕的位置。例如:
```
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
/* 其他样式 */
}
```
这样就可以使导航栏一直保持在屏幕的顶部,不随页面滚动而移动。需要注意的是,由于 `position: fixed` 可能会导致元素脱离文档流,可能会影响其他元素的布局。在具体使用中需要注意这一点。
相关问题
<div class="container navbar-content"> <a href="cs.php">测试</a> <a href="inquiry.php">查询</a> <a href="add.php">添加</a> <a href="List.php">查看</a> </div>将这些居中
要将这些链接居中,可以在样式中给`.navbar-content`元素添加`text-align: center;`属性,如下所示:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
.navbar {
/*background: url(../images/header.png) no-repeat left top;*/
background-size: 100% 54px;
}
.navbar .navbar-content {
text-align: center;
}
.navbar .navbar-content a {
color: #ffffff;
line-height: 54px;
display: inline-block;
width: 100px;
text-align: center;
}
.navbar .navbar-content a:hover {
color: #cccccc;
}
h1 {
text-align: center;
}
</style>
</head>
<body background="images/mm.png" style="background-size: 100% 100%;background-attachment: fixed;">
<h1>宠物医院管理平台</h1>
<nav class="navbar">
<div class="container navbar-content">
<a href="cs.php">测试</a>
<a href="inquiry.php">查询</a>
<a href="add.php">添加</a>
<a href="List.php">查看</a>
</div>
</nav>
</body>
</html>
```
这样就可以使页面中的导航栏链接居中了。
阅读全文