Question

我编写了一个基本的网站骨架（如果有人需要知道，我在HTML方面技术水平相当，但在div时遇到问题，而且我正在学习CSS ），以及链接到谷歌网站上的链接和链接的问题，如＆＃34;联系＆＃34;和＆＃34;新闻＆＃34;继承整个固定横幅的大小，名为thing。（横幅在代码片段中看起来有点奇怪，因为它已修复并适用于桌面。）

我的代码：

＆＃13;

::-moz-selection {
  color: #ffffff;
  background: #00ffaa;
}
::selection {
  color: #ffffff;
  background: #00ffaa;
}
a:link {
  text-decoration: none;
  color: #00ffaa;
}
a:visited {
  text-decoration: none;
  color: #00D486;
}
a:hover {
  text-decoration: none;
  color: #ADFFE2;
}
a:active {
  text-decoration: none;
  color: #00ffaa
}
.thing {
  background: #141414;
  position: fixed;
  left: -2%;
  top: -10px;
  z-index: 100;
  width: 200%;
  height: 10%;
}
.Header {
  color: #aaaaaa;
  position: relative;
  left: 200px;
  top: -15px;
  font-size: 300%;
}
.Header:hover {
  transition: .2s;
  color: #dbdbdb;
  position: relative;
  left: 200px;
  top: -15px;
  font-size: 300%
}
#link1 {
  position: relative;
  left: 600px;
  top: -85px;
}
#link2 {
  position: relative;
  top: -37px;
  left: 150px;
}
#link3 {
  position: relative;
  top: -37px;
  left: 150px;
}
#link4 {
  position: relative;
  top: -37px;
  left: 150px;
}
#link5 {
  position: relative;
  top: -37px;
  left: 150px;
}
#bodycontainer {
  position: relative;
  background-color: #191919;
  height: 200%;
  width: 65%;
}

＆＃13;

<html>

<head>
  <link rel="shortcut icon" type="image x-icon" href="http://i.imgur.com/umSIVuQ.png?1" />
  <title>Title</title>
</head>

<body background="http://i.imgur.com/6PQ1Mtl.png">
  <center>
    <div id="bodycontainer">
    </div>
  </center>

  <div class="thing"> <font face="Franklin Gothic Demi"><a href="https://google.com"><h1 class="Header">Site Logo</h1></a>
	
	<div id="link1"><a href="https://google.com"><p>News</p>
	<div id="link2"><a href="https://google.com"><p>Art</p>
	<div id="link3"><a href="https://google.com"><p>Comics</p>
	<div id="link4"><a href="https://google.com"><p>About</p>
	<div id="link5"><a href="https://google.com"><p>Contact</p>
	</a></a></a></a></a></div></div></div></div></div></div>
	
</body>
</html>

＆＃13;

（P.S，如果有人能帮助我提供顶级横幅的帮助，那就太棒了：3）

Answer 1

试试这个https://jsfiddle.net/2Lzo9vfc/1/

HTML

<body background="http://i.imgur.com/6PQ1Mtl.png">
    <center>
        <div id="bodycontainer">
        </div>
    </center>

    <div class="thing"> <font face="Franklin Gothic Demi">
        <a class="Header" href="">Header</a>

        <ul class="navigation">
            <li><a href="https://google.com">News</a></li>
            <li><a href="https://google.com">Art</a></li>
            <li><a href="https://google.com">Comics</a></li>
            <li><a href="https://google.com">About</a></li>
            <li><a href="https://google.com">Contact</a></li>
        </ul>
    </div>
</body>

CSS

:-moz-selection {
color: #ffffff;
background: #00ffaa;
}
::selection {
color: #ffffff;
background: #00ffaa;
}
a:link {
text-decoration: none;
color: #00ffaa;
}
a:visited {
text-decoration: none;
color: #00D486;
}
a:hover {
text-decoration: none;
color: #ADFFE2;
}
a:active {
text-decoration: none;
color: #00ffaa
}
.thing {
background: #141414;
position: fixed;
z-index: 100;
width: 100%;
}
a.Header {
color: #aaaaaa;
float:left;
display: inline-block;
vertical-align: middle;
font-size: 30px;
margin-right: 15px;
}

.Header:hover {
color: #dbdbdb;
transition: all 0.3s ease-in;
}

#bodycontainer {
position: relative;
background-color: #191919;
height: 200%;
width: 65%;
}

.navigation {
float: right;
display: inline-block;
vertical-align: middle;
}

.navigation li {
display: inline-block;
padding: 15px;
}

ul {
margin-bottom: 0;
}

.navigation li a {
color: #00ffaa;
}

.navigation li a:hover {
color: #adffe2;
transition: all 0.3s ease-in;
}

继承div大小的链接

1 个答案: