我试图做一些事情,我已经搜索论坛,并浏览了4个多小时的网页。我也用很多不同的方式做了很多尝试和错误,但他们没有按照我所做的来做。我删除了所有的试验和错误,并将代码保留为最小。HTML-中心页面上的图像,并有div浮动左出标志中心徽标
我希望徽标位于页面中心不居中的区域,只有在左浮动后才应用。
这里是一个网站的现场演示: http://rissew.com/
这就是我要做的: WireFrame - What i want to look like
也许浮动不这样做的正确方法。这就是为什么我转向这里的人。
@charset "UTF-8";
html {
font-family: sans-serif;
}
body {
margin: 0
}
a {
color: #B90000;
text-decoration: none;
}
a:focus,
a:hover {
color: #15c;
outline: 0
}
a:hover {
color: #15c
}
*,
:after,
:before {
box-sizing: border-box
}
body {
font-family: "Titillium Web Regular", Helvetica, Arial, sans-serif;
line-height: 1.42857143;
color: #4d4d4d;
background-color: #f1f1f1;
overflow-x: hidden
}
.header {
background: #fff;
position: relative;
box-shadow: 0 10px 10px -6px rgba(0, 0, 0, .1)
}
.header .container {
padding-left: 0;
padding-right: 0;
width: 100%
}
.nav {
background-color: #fff;
border-top: 2px solid #f6f6f6;
position: relative;
z-index: 2
}
.nav:after,
.nav:before {
content: "";
display: table
}
.nav:after {
clear: both
}
.navlist {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center
}
@media screen and (min-width:767px) {
.page-nav__list {
width: 767px
}
}
@media screen and (min-width:989px) {
.navlist {
width: 989px
}
}
@media screen and (min-width:1199px) {
.navlist {
width: 1200px
}
}
.page-nav__item {
margin: 0;
padding: 0 5px;
display: block;
width: 16.666666667%;
line-height: 1;
float: left
}
.navlink {
font-size: .75rem;
font-family: "Titillium Web Semibold", "Open Sans Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .05em;
color: #666;
padding: 10px 0;
display: block;
border-bottom: 3px solid #ccc
}
.navlink:focus,
.navlink:hover {
color: #B90000;
border-color: #B90000
}
.navlink.active {
color: #B90000;
border-bottom: 3px solid #B90000
}
.sociallink{
display: block;
}
.sociallist {
list-style: none;
padding: 0;
max-width: 1450px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}
.sociallist li {
margin: 0;
padding: 0;
margin-left: 5px;
margin-right: 5px;
display: inline-block
}
.youtube{
display: block;
height: 26px;
width: 26px;
background-image: url('http://www.rissew.com/assets/images/youtube.png');
background-size: contain;
text-indent:-9999px;
}
.youtube:hover {
background-image: url('http://www.rissew.com/assets/images/youtubehover.png');
}
.facebook{
display: block;
height: 26px;
width: 26px;
background-image: url('http://www.rissew.com/assets/images/facebook.png');
background-size: contain;
text-indent:-9999px;
}
.facebook:hover {
background-image: url('http://www.rissew.com/assets/images/facebookhover.png');
}
.twitch{
display: block;
height: 26px;
width: 26px;
background-image: url('http://www.rissew.com/assets/images/twitch.png');
background-size: contain;
text-indent:-9999px;
}
.twitch:hover {
background-image: url('http://www.rissew.com/assets/images/twitchhover.png');
}
.twitter{
display: block;
height: 26px;
width: 26px;
background-image: url('http://www.rissew.com/assets/images/twitter.png');
background-size: contain;
text-indent:-9999px;
}
.twitter:hover {
background-image: url('http://www.rissew.com/assets/images/twitterhover.png');
}
<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <meta charset="utf-8" />
<title>Rissew Gaming - Where the Frag Happens</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
\t </head>
<body>
<header id="header" class="header">
<ul class="sociallist">
<li class="youtube"><a href="https://www.youtube.com/channel/UCyNi8D-XcpZnZAQVlzQj2RQ" class="sociallink">youtube</a></li>
<li class="facebook"><a href="http://www.facebook.com/RissewGaming" class="sociallink">facebook</a></li>
<li class="twitter"><a href="http://www.twitter.com/RissewGaming" class="sociallink">twitter</a></li>
<li class="twitch"><a href="http://www.twitch.tv/Rissew" class="sociallink">twitch</a></li>
</ul>
<img class ="headerbig" source="assets/images/headerbig.png"alt="Rissew Gaming">
<nav class="nav">
<ul class="navlist">
<li class="page-nav__item"><a href="index.html" title="" class="navlink active">Home</a></li>
<li class="page-nav__item"><a href="about.html" title="" class="navlink">About</a></li>
<li class="page-nav__item"><a href="guides.html" title="" class="navlink">Guides</a></li>
<li class="page-nav__item"><a href="forum.html" title="" class="navlink">Forum</a></li>
<li class="page-nav__item"><a href="shop.html" title="" class="navlink">Shop</a></li>
<li class="page-nav__item"><a href="watch.html" title="" class="navlink">Watch</a></li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
<p>
</p>
</footer>
</body>
当链接不符合标志的左侧应该发生什么? – LGSon
不知道你在这里试图达到什么 –
问题被删除,因为评论被输入:你不知道如何传递“整个JComboBox”的问题尚不清楚。它是一个对象,就像任何其他对象一样,它的引用可以从一个类传递到另一个类,就像您对其他引用类型的引用一样,例如通过方法或构造函数参数。 –