html - 如何在屏幕右上角添加个人资料图标?

标签 html css

我想在右上角添加一个配置文件图标,该图标应该有“我的帐户”和“注销”选项,如图所示。请告诉我如何将其添加到下面的代码中。

<style type="text/css">


ul {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}
#nav {
    display: table;
    table-layout: fixed;
    text-align: center;
}
#nav li {
    display: table-cell;
    width: 25%;
    padding-right: 1px;
    height: auto;
    vertical-align: bottom;
}
#nav a {
    display: block;
    min-height: 100%;
    padding: 12px 50px;
    background-color: #222;
    color: white;
    border-radius: 6px 6px 0 0;
}

.logoutLblPos{

   position:fixed;
   right:10px;
   top:5px;
}
</style>

<body>
<div class="container">
  <div class="row">
    <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
      <h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Welcome</h1>
      <p class="lead text-center" style="font-size:20px;color:DarkSalmon;"><i>"This is caption"</i></p>

       <label class="logoutLblPos">
       <span class="glyphicon glyphicon-user" style="height:50px;width:20px"></span> User
       <input name="submit2" type="submit" id="submit2" value="log out">
  </label>

    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#"> tab2</a></li>
      <li><a href="#">tab3</a></li>
      <li><a href="#">tab4</a></li>
    </ul>

      </div>
  </div>
</div>
</div>

此外,我需要在个人资料图标旁边添加“发布您的广告”。

最佳答案

请看例子fiddle

HTML

<div style="background:color:#fff; border:solid 1px #333; float:left; text-align:center; padding:5px;">
   <i class="fa fa-user"></i><br>
   User
</div>

关于html - 如何在屏幕右上角添加个人资料图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35843030/

相关文章:

php - 设计分页界面的最佳方式

javascript - 无法使用 jquery 设置选择的选定值

html - 为什么字体不适合带有省略号的容器

html - HTML 格式的李克特量表

html - 使用 Bootstrap 对齐 HTML 中的文本

html - 移除 CSS 框阴影 Chrome/Safari, Firefox 已经可以了

javascript - 在子元素高度上更改父 div 高度

javascript - 滚动条不可见且 CSS3 过渡在 MOZ 中不起作用

html - Chrome 检查工具不反射(reflect)浏览器窗口,对齐 Div

javascript - 鼠标悬停在弹出菜单上