我試圖做一些事情,我已經搜索論壇,並瀏覽了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」的問題尚不清楚。它是一個對象,就像任何其他對象一樣,它的引用可以從一個類傳遞到另一個類,就像您對其他引用類型的引用一樣,例如通過方法或構造函數參數。 –