【发布时间】：2017-03-14 17:19:57
【问题描述】：
他们在左对齐，显然我不够聪明，无法弄清楚这一点。一般来说，我将如何改变它的对齐方式？例如，居中？
此外，如果我想在屏幕小于 950 像素的情况下扩大每个项目的大小，我会在我的 CSS 的相关媒体查询部分下将其作为条件格式来做，对吧？
$(document).ready(function() {
$(document).bind("contextmenu", function(e) {
if (e.target.nodeName == 'IMG') {
//context menu attempt on top of an image element
return false;
}
});
//dropdown nav
$("#nav").addClass("js");
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function() {
$("#nav").toggle();
});
$(window).resize(function() {
if (window.innerWidth > 950) {
$("#nav").removeAttr("style");
}
});
});html,
body {
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 12px;
color: #c5e8ea;
background-color: #000000;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.hidden {
display: none;
}
p {
text-align: justify;
}
#header {
position: fixed;
margin: 0;
padding: 4px;
float: left;
margin-top: 0px;
z-index: 1;
}
#navmain {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
margin-top: 0px;
font-family: 'Cedarville Cursive', cursive;
font-size: 25px;
color: #E5E5E5;
background-color: #000000;
box-shadow: ;
padding: 0px;
z-index: 1;
opacity: .8;
}
h1 {
margin: 0;
margin-left: 15px;
margin-top: 0px;
padding: 0;
float: left;
opacity: ;
color: #E5E5E5;
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
ul.navmain {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
li.navmain {
float: left;
}
a.navmain:link,
a.navmain:visited {
display: block;
height: 75px;
width: 110px;
font-family: 'Old Standard TT', serif;
font-size: 23px;
color: #E5E5E5;
background-color: #000000;
text-align: center;
line-height: 95px;
padding: 0px;
text-decoration: none;
text-transform: lowercase;
}
a.navmain:hover,
a.navmain:active {
background-color: #181818;
}
.active {
background-color: #0b0b0a;
}
#content1 {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-image: url("../img/bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-animation: fadein 6s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 6s;
/* Firefox < 16 */
-ms-animation: fadein 6s;
/* Internet Explorer */
-o-animation: fadein 6s;
/* Opera < 12.1 */
animation: fadein 6s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#content2 {
position: absolute;
width: 60%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top: 95px;
padding: 10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
#content2 p {
margin-top: 10px;
margin-left: 45px;
margin-right: 45px;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
float: left;
}
#content3 {
float: right;
width: 40%;
height: 100%;
}
#content3 img {}
#footer {
clear: both;
height: 15px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #E5E5E5;
border-top: 1 px solid #efefef;
padding: 8px 10px;
line-height: 15px;
background-color: #0b0b0a;
}
#footer a {
color: #E5E5E5;
text-decoration: none;
}
#footer a:hover {
Color: #db6d16
}
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}
/* dropdown nav */
@media screen and (max-width: 950px) {
#menu {
width: 1.4em;
display: block;
background: ;
font-size: 1.35em;
text-align: center;
float: right;
}
#nav.js {
display: none;
}
ul {
width: 100%;
overflow: hidden;
background-color: #000000;
}
li {
width: 100%;
border-right: none;
}
#content2 {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#content2 h1 {
margin-top: 95px;
padding: 10px;
font-size: 40px;
font-family: 'Source Sans Pro', sans-serif;
}
}
@media screen and (min-width: 950px) {
#menu {
display: none;
}
}
/* dropdown nav */<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');
</style>
<style>
@import url('https://fonts.googleapis.com/css?family=Cedarville+Cursive');
</style>
<style>
@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT:400i');
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="navmain">
<div id="header">
<a href="#">
<h1>Some Dude</h1>
</a>
</div>
<ul class="navmain" id="nav">
<li class="navmain"><a class="navmain" href="#">fauna</a></li>
<li class="navmain"><a class="navmain" href="#">flora</a></li>
<li class="navmain"><a class="navmain" href="#">scenic</a></li>
<li class="navmain"><a class="navmain" href="#">urban</a></li>
<li class="navmain"><a class="navmain" href="#">about</a></li>
<li class="navmain"><a class="navmain" href="#">contact</a></li>
</ul>
</div>
<div id="content1">
</div>【问题讨论】：
标签： javascript jquery html css drop-down-menu