Question

我试图建立一个网站但是标题和列表项合并或者在调整大小时彼此重叠我不确定为什么。有没有办法在没有JS或Bootstrap的情况下解决这个问题？

Screenshot of the problem 它在正常的全屏模式下看起来很好但是当我调整大小时会出现问题，我希望它们能够做出响应。

另一件事，我希望列表项为look like this，怎么样？喜欢这种波浪线的东西

＆＃13;

#main-header{
  font-size: 20px;
  font-family:monospace, Helvetica;
  text-align: center;
  line-height:0;
}
#main-header h1{
  font-family:'lobster', monospace;
  font-size: 80px;
  text-shadow: 2px 4px #72bcd4;
}
#main-header small{
font-style:italic;
text-decoration:underline;
text-decoration-color:#72bcd4;
text-align:right;
}
#navbar{
  text-align:center;
  margin-top: 90px;
  padding:100px;
  font-family:'Tangerine', cursive;
  font-size: 40px;
}
#navbar ul{
  word-spacing: 2%;

}
#navbar li{
  display:inline;
  line-height: 30px;
}
#navbar a{
  text-decoration:none;
  font-weight:bold;
  border-color:black;
  border-style:groove;
  border-radius: 70px;
  padding: 20px;
  word-spacing:inherit;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Bla Bla Bla</title>
  <link rel="stylesheet" type="text/css" href="./CSS/style.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
</head>
<body>
  <header id="main-header">
    <h1>.Bla Bla Bla.</h1>
    <small>
      Lorem ipsum dolor sit amet.
    </small>
  </header>
  <nav id="navbar">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  </nav>
  <footer>
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </footer>
</body>
</html>

＆＃13;

/*general header settings*/
#main-header{
  font-size: 20px;
  font-family:monospace, Helvetica;
  text-align: center;
  line-height:0;
}
#main-header h1{
  font-family:'lobster', monospace;
  font-size: 80px;
  text-shadow: 2px 4px #72bcd4;
}
#main-header small{
font-style:italic;
text-decoration:underline;
text-decoration-color:#72bcd4;
text-align:right;
}
#navbar{
  text-align:center;
  margin-top: 90px;
  padding:100px;
  font-family:'Tangerine', cursive;
  font-size: 40px;
}
#navbar ul{
  word-spacing: 2%;

}
#navbar li{
  display:inline;
  line-height: 30px;
}
#navbar a{
  text-decoration:none;
  font-weight:bold;
  border-color:black;
  border-style:groove;
  border-radius: 70px;
  padding: 20px;
  word-spacing:inherit;
}

＆＃13;

Answer 1

以下是您 Solution 的 first problem

#main-header{ font-size: 20px; font-family:monospace, Helvetica; text-align: center; line-height:0; } #main-header h1{ font-family:'lobster', monospace; font-size: 80px; text-shadow: 2px 4px #72bcd4; } #main-header small{ font-style:italic; text-decoration:underline; text-decoration-color:#72bcd4; text-align:right; } #navbar{ text-align:center; margin-top: 90px; padding:100px; font-family:'Tangerine', cursive; font-size: 40px; } #navbar ul{ word-spacing: 2%; } #navbar li{ display:inline; line-height: 30px; } #navbar a{ text-decoration:none; font-weight:bold; border-color:black; border-style:groove; border-radius: 70px; padding: 20px; word-spacing:inherit; display: inline-block; }

<!DOCTYPE html> <html> <head> <title>Bla Bla Bla</title> <link rel="stylesheet" type="text/css" href="./CSS/style.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> </head> <body> <header id="main-header"> <h1>.Bla Bla Bla.</h1> <small> Lorem ipsum dolor sit amet. </small> </header> <nav id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="bio.html">Bio</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <footer> Lorem ipsum dolor sit amet, consectetur adipisicing. </footer> </body> </html>

Answer 2

#main-header{
  font-family:monospace, Helvetica;
  text-align: center;
  line-height:0;
}
#main-header h1{
  font-family:'Lobster', monospace;
  font-size: 80px;
  text-shadow: 2px 4px #72bcd4;
  white-space: nowrap;
  word-spacing: -30px;
}
#main-header p{
  font-style:italic;
  text-decoration:underline;
  text-decoration-color:#72bcd4;
  text-align:center;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  text-transform: lowercase;
  font-style: "Pacifico", cursive;
}
ul a {
  text-decoration: none;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  line-height: 100px;
  text-align: center;
  color: #333;
}
ul li {
  background-color: #fff;
  border-radius: 100%;
  border: 1px solid #333;
}
ul li:nth-child(even){
  transform: translateY(-50px);
}
ul li:nth-child(1) {
  transform: translateX(50px);
}
ul li:nth-child(2) {
  transform: translateY(-50px) translateX(20px);
}
ul li:nth-child(3) {

}
ul li:nth-child(4) {
  transform: translateY(-50px) translateX(-20px);
}
ul li:nth-child(5) {
  transform: translateX(-50px);
}
footer {
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <title>Bla Bla Bla</title>
  <link rel="stylesheet" type="text/css" href="./CSS/style.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 
</head>
<body>
  <header id="main-header">
    <h1>.Bla Bla Bla.</h1>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
  </header>
  <nav id="navbar">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  </nav>
  <footer>
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </footer>
</body>
</html>

h1和列表项在调整大小时折叠

2 个答案: