小贝子编程

在较小的屏幕上显示导航条



仅适用于@media(手机，平板电脑)。

-只有当页面的大小变小，在更小的屏幕上，除了PC!

我想在中上方显示我的徽标，(当屏幕变小时)
徽标下的导航栏作为一个完整的行，
和订阅按钮在导航栏和徽标的右上角
(在他们之间在右边)，但我似乎不能做到这一点!

我正确设置了PC显示器上的所有内容，但是当涉及到"@媒体屏幕"我不知道我做错了什么

请帮助。下面是我的代码!
注意:我不知道我是应该改变整个DIV还是只改变导航来产生效果!

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
width: device-width;
}
body {
height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
padding-left: 10%;
padding-right: 10%;
}
@media screen and (max-width: 500px) {
.hero {
width: 100%;
background: #F00;
display: inline-block;
}
ul {
list-style: none;
width: 100%;
background: #FF0;
}
li {
float: left;
margin-right: 10px;
background: #FF0;
}
.button1 {
position: absolute;
display: inline-block;
top: 70px;
right: 10px;
}
}
.logo {
color: white;
font-size: 28px;
}
.span1 {
color: white;
font-size: 20px;
background-color: #ea1538;
border-radius: 30px;
padding: 5px 8px;
}
span {
color: #ea1538;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
transition: 0.5s;
}
nav ul li a:hover {
color: white;
transition: 0.3s;
border-radius: 30px;
background-color: #ea1538;
padding: 8px 12px;
}
#active {
color: white;
background: #ea1538;
padding: 5px 8px;
border-radius: 30px;
}
.button1 {
border: none;
background: #ea1538;
padding: 12px 20px;
border-radius: 30px;
color: white;
font-weight: bold;
font-size: 15px;
transition: 0.5s;
text-align: center;
color: white;
text-decoration: none;
font-weight: bold;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.button1:hover {
transform: scale(1.2);
transition: ease 0.5s;
cursor: pointer;
}
.footer {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-flow: row wrap;
padding: 50px;
color: white;
background: #262626;
}
.footer>* {
flex: 1 100%;
}
.l-footer {
margin-right: 1.25em;
margin-bottom: 2em;
}
h2 {
font-weight: 900;
font-size: 16px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer li {
line-height: 2em;
}
.footer a {
text-decoration: none;
transition: ease 0.3s;
}
.footer a:hover {
background-color: #ea1538;
padding: 3px 5px;
border-radius: 30px;
transition: ease 0.3s;
color: white;
font-weight: bold;
letter-spacing: 0.5px;
}
.r-footer {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-flow: row wrap;
}
.r-footer>* {
flex: 1 50%;
margin-right: 1.25em;
}
.box a {
text-decoration: none;
color: #999;
}
.h-box {
column-count: 2;
column-gap: 1.25em;
}
.b-footer {
text-align: center;
color: #999;
padding-top: 50px;
}
.l-footer p {
padding-right: 20%;
color: #999;
}
@media screen and (min-width: 600px) {
.r-footer>* {
flex: 1;
}
.features {
flex-grow: 2;
}
.l-footer {
flex: 1 0px;
}
.r-footer {
flex: 2 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
<link rel="icon" type="images" href="/images/favicon.ico" />
<link rel="stylesheet" href="Styles/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />
<title>myPage</title>
</head>
<body>
<!-- Navbar and Logo -->
<div class="hero">
<nav>
<center>
<h2 class="logo">
Be <span>Smart</span> <br />
<span class="span1">Technologies</span>
</h2>
</center>
<ul>
<li><a href="index.html" id="active">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<button type="button" class="button1">
Subscribe
</button>
</nav>
</div>
<!-- Main Page Goes Below -->
<!-- End Of Main Page-->
<!-- BR Page Space (Give more space below) -->
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<!-- Footer and Properties -->
<footer class="footer">
<div class="l-footer">
<h1>
Be <span>Smart</span> <br /><span class="span1">Technologies</span>
</h1>
<br />
<p>
Be Smart Technologies or <em>BST</em> is a company that creates websites, portfolios, responsive pages and designs! Feel free to join us and contact us if you have any questions or new ideas! You can be our next partner!
</p>
</div>
<ul class="r-footer">
<li>
<h2>Explore</h2>
<ul class="box">
<li><a href="#bottom">Home</a></li>
<li><a href="#bottom">Portfolio</a></li>
<li><a href="#bottom">About</a></li>
<li><a href="#bottom">Contact</a></li>
</ul>
</li>
<li class="features">
<h2>Need Help?</h2>
<ul class="box h-box">
<li><a href="#bottom">Blog</a></li>
<li><a href="#bottom">Pricing</a></li>
<li><a href="#bottom">Sales</a></li>
<li><a href="#bottom">Certifications</a></li>
<li><a href="#bottom">Customer Services</a></li>
</ul>
</li>
<li>
<h2>Legal</h2>
<ul class="box">
<li><a href="#bottom">Privacy Policy</a></li>
<li><a href="#bottom">Terms of Use</a></li>
<li><a href="#bottom">Contract</a></li>
</ul>
</li>
</ul>
<div class="b-footer">
<p>All Rights Reserved by &copy;BeSmart Technologies 2022</p>
</div>
</footer>
</body>
</html>

您将需要将nav设置为flex-direction: column;，以使徽标在顶部，导航条在下方显示全宽度。然后，您可以将button1定位在相同的媒体查询中。

见下文:

@media screen and (max-width: 800px) {
nav {
flex-direction: column;
}
.button1 {
position: absolute;
display: inline-block;
top: 30px;
right: 10px;
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
width: device-width;
}
body {
height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
padding-left: 10%;
padding-right: 10%;
}
.logo {
color: white;
font-size: 28px;
}
.span1 {
color: white;
font-size: 20px;
background-color: #ea1538;
border-radius: 30px;
padding: 5px 8px;
}
span {
color: #ea1538;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
transition: 0.5s;
}
nav ul li a:hover {
color: white;
transition: 0.3s;
border-radius: 30px;
background-color: #ea1538;
padding: 8px 12px;
}
#active {
color: white;
background: #ea1538;
padding: 5px 8px;
border-radius: 30px;
}
.button1 {
border: none;
background: #ea1538;
padding: 12px 20px;
border-radius: 30px;
color: white;
font-weight: bold;
font-size: 15px;
transition: 0.5s;
text-align: center;
color: white;
text-decoration: none;
font-weight: bold;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.button1:hover {
transform: scale(1.2);
transition: ease 0.5s;
cursor: pointer;
}
.footer {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-flow: row wrap;
padding: 50px;
color: white;
background: #262626;
}
.footer>* {
flex: 1 100%;
}
.l-footer {
margin-right: 1.25em;
margin-bottom: 2em;
}
h2 {
font-weight: 900;
font-size: 16px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer li {
line-height: 2em;
}
.footer a {
text-decoration: none;
transition: ease 0.3s;
}
.footer a:hover {
background-color: #ea1538;
padding: 3px 5px;
border-radius: 30px;
transition: ease 0.3s;
color: white;
font-weight: bold;
letter-spacing: 0.5px;
}
.r-footer {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-flow: row wrap;
}
.r-footer>* {
flex: 1 50%;
margin-right: 1.25em;
}
.box a {
text-decoration: none;
color: #999;
}
.h-box {
column-count: 2;
column-gap: 1.25em;
}
.b-footer {
text-align: center;
color: #999;
padding-top: 50px;
}
.l-footer p {
padding-right: 20%;
color: #999;
}
@media screen and (min-width: 600px) {
.r-footer>* {
flex: 1;
}
.features {
flex-grow: 2;
}
.l-footer {
flex: 1 0px;
}
.r-footer {
flex: 2 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
<link rel="icon" type="images" href="/images/favicon.ico" />
<link rel="stylesheet" href="Styles/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />
<title>myPage</title>
</head>
<body>
<!-- Navbar and Logo -->
<div class="hero">
<nav>
<center>
<h2 class="logo">
Be <span>Smart</span> <br />
<span class="span1">Technologies</span>
</h2>
</center>
<ul>
<li><a href="index.html" id="active">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<button type="button" class="button1">
Subscribe
</button>
</nav>
</div>
<!-- Main Page Goes Below -->
<!-- End Of Main Page-->
<!-- BR Page Space (Give more space below) -->
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<!-- Footer and Properties -->
<footer class="footer">
<div class="l-footer">
<h1>
Be <span>Smart</span> <br /><span class="span1">Technologies</span>
</h1>
<br />
<p>
Be Smart Technologies or <em>BST</em> is a company that creates websites, portfolios, responsive pages and designs! Feel free to join us and contact us if you have any questions or new ideas! You can be our next partner!
</p>
</div>
<ul class="r-footer">
<li>
<h2>Explore</h2>
<ul class="box">
<li><a href="#bottom">Home</a></li>
<li><a href="#bottom">Portfolio</a></li>
<li><a href="#bottom">About</a></li>
<li><a href="#bottom">Contact</a></li>
</ul>
</li>
<li class="features">
<h2>Need Help?</h2>
<ul class="box h-box">
<li><a href="#bottom">Blog</a></li>
<li><a href="#bottom">Pricing</a></li>
<li><a href="#bottom">Sales</a></li>
<li><a href="#bottom">Certifications</a></li>
<li><a href="#bottom">Customer Services</a></li>
</ul>
</li>
<li>
<h2>Legal</h2>
<ul class="box">
<li><a href="#bottom">Privacy Policy</a></li>
<li><a href="#bottom">Terms of Use</a></li>
<li><a href="#bottom">Contract</a></li>
</ul>
</li>
</ul>
<div class="b-footer">
<p>All Rights Reserved by &copy;BeSmart Technologies 2022</p>
</div>
</footer>
</body>
</html>

正如cameron的评论所说，不太清楚它应该是什么样子的。但我已经试过了。

/*@media screen and (max-width: 500px) {*/
.hero {
width:100%;
background:#F00;
display: inline-block;
}
ul {
list-style:none;
width:100%;
background:#FF0;
}
li {
float:left;
margin-right:10px;
background:#FF0;
}
.button1 {
position:absolute;
display:inline-block;
top:70px;
right:10px;
}
/*}*/
<div class="hero">
<nav>
<center><h2 class="logo">
Be <span>Smart</span> <br />
<span class="span1">Technologies</span>
</h2></center>
<ul>
<li><a href="index.html" id="active">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<button type="button" class="button1">
Subscribe
</button>
</nav>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium