Question

这可能有点笨重，

基本上，我喜欢我如何布置这个页面，但是当我调整窗口大小时，因为我使用了position：relative，所以当窗口足够小时，很多元素会重叠。此外，它通常是标准的（基于我访问过的网站），在调整大小时，元素是固定的，您只需滚动即可到达屏幕外的元素，但在这种情况下，我使用窗口大小缩放所有内容。我不确定使用屏幕缩放的元素是一个好的或坏的设计，但我想解决重叠的问题。如果缩放元素的设计很差，我会很感激任何关于在没有缩放的情况下实现相同结果的建议。

我用纯色替换了大部分背景内容。此外，我知道我可能已经和将来会做的很多事情可能会被JavaScript缩短，但我还是需要学习它：）

关于类，标题，标签等结构的任何建议都会非常有用，这只是我html / css的第二天。我目前正在寻找有关这些主题的在线资源！

＆＃13;

func makeRequestPost<T>(endpoint: String,
                    requestType: String = "GET",
                    requestBody: Data,
                    view: UIView,
                    completionHandler: @escaping (ApiContainer<T>?, Error?) -> ()) {

ViewControllerUtils().showActivityIndicator(uiView: view)

guard let url = URL(string: endpoint) else {
    print("Error: cannot create URL")
    let error = BackendError.urlError(reason: "Could not create URL")
    completionHandler(nil, error)
    return
}

var urlRequest = URLRequest(url: url)
let session = URLSession.shared
urlRequest.httpMethod = "POST"
urlRequest.httpBody = requestBody
urlRequest.addValue("application/json", forHTTPHeaderField: "Content-Type")
urlRequest.addValue("application/json", forHTTPHeaderField: "Accept")

let task = session.dataTask(with: urlRequest, completionHandler: {
    (data, response, error) in

    ViewControllerUtils().hideActivityIndicator(uiView: view)
    guard let responseData = data else {
        print("Error: did not receive data")
        completionHandler(nil, error)
        return
    }
    guard error == nil else {
        completionHandler(nil, error!)
        return
    }

    do {
        let response = try JSONDecoder().decode(ApiContainer<T>.self, from: responseData)
        completionHandler(response, nil)
    }
    catch {
        print("error trying to convert data to JSON")
        print(error)
        completionHandler(nil, error)
    }

})

task.resume()

}

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  position: fixed;
  background: black;
  font-family: Open Sans;
  color: #FFFFFF;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

a {
  text-decoration: none;
  color: #FFFFFF;
  opacity: 0.6;
}

a:hover {
  opacity: 1;
}

h1 {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  opacity: 0.5;
  font-size: 3vw;
  padding: 0;
  margin: 0;
}

nav ul {
  padding: 0;
  border: 0;
  margin: 0;
}

nav ul li {
  list-style-type: none;
  display: inline;
  margin-left: 10px;
}

footer {
  position: fixed;
  bottom: 5vh;
  right: 1.5vw;
}

#background-div {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background: green;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
  transition: ease-in 0.3s;
}

#background2-div {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
  transition: ease-in 0.3s;
}

#intro .button {
  position: fixed;
  padding: 0;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 12px;
  top: 50%;
  transform: translate(0%, -50%);
  width: 20vw;
  height: 25vh;
  transition: all 0.3s ease 0s;
  opacity: 0.5;
  border-color: black;
  border-style: solid;
}

.button.english {
  background-image: url('../images/uk_flag.png');
  left: 15vw;
}

.button.portuguese {
  background-image: url('../images/angola_flag.png');
  right: 15vw;
}

.button.english div {
  position: absolute;
  top: 100%;
  left: 48%;
  transform: translate(-50%, 0);
  color: white;
  font-size: 4vw;
}

.button.portuguese div {
  position: absolute;
  top: 100%;
  left: 49%;
  transform: translate(-50%, 0);
  color: white;
  font-size: 3.5vw;
}

#welcome .button {
  position: fixed;
  padding: 0;
  background-position: center center;
  opacity: 0.7;
  border-color: rgba(255, 255, 255, 0.5);
  border-color: white;
  border-style: solid;
  border-radius: 12px;
  width: 20vw;
  height: 25vh;
  top: 50%;
  transform: translateY(-50%);
  max-height: 80px;
  max-width: 20vw;
}

.button.buy {
  left: 15vw;
}

.button.sell {
  right: 15vw;
}

.button.buy div,
.button.sell div {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4vw;
}

#intro .button:hover,
#welcome .button:hover {
  opacity: 1;
  border-color: white;
}

.button.buy:hover~#background-div {
  opacity: 1;
  border-color: white;
  transition: ease-out 0.7s;
}

.button.sell:hover~#background2-div {
  opacity: 1;
  border-color: white;
  transition: ease-out 0.7s;
}

#videoback {
  position: fixed;
  top: -64px;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -2;
  opacity: 0.2;
}

＆＃13;

Answer 1

如果我理解正确，你可以使用bootstrap来解决你的问题：

将其链接到您的html中： link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

使用bootstrap定义行及其列大小：

<!-- this is necessary container to contain all your rows
note that you can have multiple containers per website, or even within
each other -->

<div class="container">
<!-- elements that will be displayed next to each other -->
  <div class="row">
<!-- two elements that will divide the row by half until MD size: >=992px -->
    <div class="col-md-6">content</div>
    <div class="col-md-6">content</div>
  </div>
  <div class="row">
<!-- three elements that will always be shown next to each other-->
    <div class="col-xs-4">content</div>
    <div class="col-xs-4">content</div>
    <div class="col-xs-4">content</div>
  </div>
...
</div>

了解有关bootstrap的更多信息：

重叠内容（包含代码）

1 个答案: