Question

如何在无序列表中添加徽标，以便将整个条形图转换为粘性导航栏？我一直在互联网上搜索如何做到这一点，并放弃了。我转向你寻求建议。

我在当前页面上设置了基本导航，只有三个链接（徽标尚未点击），我想让它们成为导航栏的一部分。现在，三个要点与徽标分开。我希望他们都能移动并充当一个酒吧。当您向下滚动页面时，我想要固定此栏。我该如何做到这一点？ HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta      name="keywords" content="critical theory, mass media, marketing online, mass marketing, social media marketing, viral marketing, viral coefficient, new media, social media" />
<meta name="description" content="Tips & Tricks in Social Media Marketing: A Guide to Viral Marketing" />
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
<title> Viral Marketing A-Z | A Critical Guide to New Media</title>
<link href="newmedia.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--style1 {font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, Myriad Pro', Helvetica, Arial, sans-serif}-->
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<p align="left"><img src="C:\Users\user\Desktop\virael\assets\virael-logo.jpg" 
alt="logo"/></p>
</div>
<div id="menu">
<ul><p align="right">
<li><a class="button" href="#">Media</a></li>
<li><a class="button" href="#">Resources</a></li>
<li><a class="button" href="#">Blog</a></li>
</p>
</div>
</ul>

CSS：

#logo{
background-repeat: no-repeat;
background-position: right top;
margin-left: auto;
margin-right: auto;
float: left;
margin: 0px 30px 0px 25px;
overflow: hidden;

}

#menu {
float: both; 
overflow: hidden;

}

ul {
float: left;
list-style-type:none;
text-align:center;
margin: 0;
padding: 0;

}

li {
display: inline-block;
text-align: center;

}

a:link, a:visited {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,             

'Myriad Pro', Arial, sans-serif;
display: block;
font-size: 18pt;
font-weight: bold;
width: 256px;
color: black;
background-color: white;
text-align: center;
padding: 16px;
text-decoration: none;
text-transform: capitalize;

}

a:hover, a:active {
color: purple;

}

Answer 1

这是怎么回事：

HTML

<div id="menu" class="sticky">
    <div class="inner">
        <a href="index.html" class="logo"><img src="C:\Users\user\Desktop\virael\assets\virael-logo.jpg" alt="logo"/></a>
        <ul>
            <li><a class="button" href="#">Media</a></li>
            <li><a class="button" href="#">Resources</a></li>
            <li><a class="button" href="#">Blog</a></li>
        </ul>
    </div>
</div>

CSS

.sticky { position:fixed; height:75px; width:100%; top:0; left:0;}
.sticky .inner { width:75%; margin:0 auto;}
.inner:after    { clear:both; content:""; height:0px; visibility: hidden; display:block;}
.sticky .logo   { float:left;}
.sticky ul      { float:right;}
.sticky ul li   { display:inline-block;}

请注意，这将使您的屏幕粘贴在屏幕上，而内部将是一个布局块，它会根据您的需要改变样式和宽度。如果您有任何问题，请与我联系。

如果左侧有可点击的徽标，我还可以粘贴（固定）水平导航栏吗？

1 个答案:

HTML

CSS