Question

我正在尝试为我的网站创建一个导航栏。我已经浏览了CSS并试图调整导航栏的大小并对齐文本。我不知道自己哪里出错了。

这是css的一部分。

    .nav {
font-family: "Indie Flower", serif;
font-size: larger;
color: white;
}

#navwrapper{
width = 100%
float: left;
margin: 0 auto;
list-style : none
font-family: "Indie Flower", Arial;
background-color: red;
height = 10px;
text-align = "center";
}

还有HTML

<body>

<div id="main" class="main" style ="text-align = center">
</div>

<div id = "navwrapper">
    <p class = "nav">Holder</>
</div>
<br>
<iframe src = "http://chrisfoose.blogspot.com" width = "100%" height = "300" frameborder = "0">
<p>Unfortunately your browser does not support dynamic content.</p>
</iframe>   

</div>
</body>

此外，还有指向当前结果的链接：

Codepen Link

Answer 1

var imgSrcArr = ["http://www.hdwallpapers.in/walls/running_horse-wide.jpg", "http://www.hdwallpapers.in/walls/colorful_background-wide.jpg", "http://www.hdwallpapers.in/walls/moonlight_cruise-wide.jpg"]

var imgSrcArr = ["background/000.jpg", "background/001.jpg", "background/002.jpg", "background/003.jpg", "background/004.jpg"]

window.onload = function() {
  var randNum = Math.floor(Math.random() * 4);
  document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')"
}

@import url(http://fonts.googleapis.com/css?family=Russo+One);
@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Share+Tech+Mono);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
 svg {
  width: 600px;
  height: 120px;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  background: black;
}
a {
  text-decoration: none;
  color: white;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  float: center;
}
div.main {
  margin: auto;
  ;
  height: 500px;
  ;
  width: 1000px;
  background-position: center;
  backgroud-repeat: no-repeat border: 1px solid black;
}
body {
  background-color: black;
}
#main {
  width: 1000px;
  margin: 0 auto;
}
#vid {
  width: 1200px;
  text-align: center;
}
#circle {
  position: fixed;
  z-index: 1;
}
#buttonred {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #8A0808;
  border-style: solid;
  text-align: center;
}
#buttonblue {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #4000FF;
  border-style: solid;
  text-align: center;
}
#buttongreen {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #088A08;
  border-style: solid;
  text-align: center;
}
#buttonpink {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: pink;
  border-style: solid;
  text-align: center;
}
#buttonorange {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: orange;
  border-style: solid;
  text-align: center;
}
#buttonback {
  witdth: 100px;
  height 100px;
  border-radius: 100%;
  background-color: red;
  border-style: solid;
  text-align: center;
}
;
table.center {
  ;
  background-color: white;
  ;
  margin.left: auto;
  ;
  margin.right: auto;
  ;
}
table.center {
  width: 70%;
  margin-left: 200px;
  margin-top: 300px;
  color: white;
}
p {
  font-family: Arial, Terminal, Times New Roman;
  margin-top: 30px;
  font-color: white;
  line-height: 100px;
  margin: 0;
}
p.bio {
  background-color: white;
  font-family: 'Russo One', sans-serif;
  color: black;
  margin-top: 50px margin-left: 50px
}
div.enclose {
  margin-top: 50px margin-left: 50px
}
td.bio {
  padding: 15px;
  border-radius: 25px;
}
table.bio {
  width: 70%;
  margin-left: 300px;
  margin-top: 150px;
  padding: 50px;
}
table.video {
  width: 85%;
  margin-left: 150px;
  margin-top: 200px;
}
table.graphics {
  width: 85%;
  margin-left: 50px;
  margin-top: 150px;
  background-color: black;
  border: 1px border-color: white;
}
td.graphics {
  border: 1px solid white;
  align: center;
}
#videobanner {
  width: 150px;
  height: 50px;
  background-color: grey;
  text-align: center;
  margin-top: 1px;
  margin-bottom: 20px;
  color: white;
}
p.video {
  font-family: Arial;
  font-size: large;
  color: white;
  text-align: center;
  font-size: 18px;
  margin-top: 5px;
}
p.menu {
  font-family: "Indie Flower", serif;
  font-color: white font-size: medium;
  font-weight: 700;
}
.nav {
  font-family: "Indie Flower", serif;
  font-size: larger;
  color: white;
}
#navwrapper {
  width=100% float: left;
  margin: 0 auto;
  list-style: none font-family: "Indie Flower", Arial;
  background-color: red;
  height=10px;
  text-align="center";
}

<body>

  <div id="main" class="main" style="text-align = center">


    <div id="navwrapper">
      <p class="nav">Holder
        </>
    </div>
    <br>
    <iframe src="http://chrisfoose.blogspot.com" width="100%" height="300" frameborder="0">
      <p>Unfortunately your browser does not support dynamic content.</p>
    </iframe>
  </div>
  </div>
</body>

</html>

您过早地关闭了主div，而您的css格式不正确。使用冒号不等于css中的符号。

以下是更新后的codepen。

尝试调整导航栏的大小，更改字体大小以及居中文本

1 个答案: