Question

我正在做学校项目...所以我正在建立网站。但是我有问题，在实现便携式计算机并将simbol锁定到HTML代码中之后，CSS忽略了这两个simbol后面放置的元素中float或margin的任何变化。任何帮助都将实现。

Whole project folder - Google drive link

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="stil.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Thasadith" rel="stylesheet">
</head>

<body>
<header>
  <div class="container"> <img src="slike/glava.jpg" alt="Snow" style="width:100%;">
    <div class="top-left">Logo</div>
    <div class="top-right">
      <div class="nav"> <a href="#section1">SERVICES</a> <a href="#section2">PORTFOLIO</a> <a href="#section3">ABOUT</a> <a href="#section4">CONTACT</a> </div>
    </div>
    <div class="centered">
      <p>Welcome To Our Studio!</p>
      <h1>IT'S NICE TO MEET YOU</h1>
      <button onclick="myFunction()" id="myBtn">TELL ME MORE</button>
    </div>
  </div>
</header>
<div class="services">
  <div class="main" id="section1"></div>
  <h2>SERVICES</h2>
  <h6>Lorem ipsum dolor sit amet consectetur.</h6>
  <div class="services_slike">
    <article> <span><i class="fas fa-laptop"> </i> </span>
      <h3>Responsive Design</h3>
      <h7>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h7>
    </article>
    <article> <span> <i class="fas fa-lock"></i> </span>
      <h3>Web Security</h3>
      <h7>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h7>
    </article>
  </div>
</div>
<div class="main" id="section2">
  <h8>PORTFOLIO</h8>
</div>
<!--<div class="main" id="section3">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section1">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="main" id="section4">
  <h2>Section 5</h2>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>-->
</body>
</html>

和CSS

@charset "utf-8";
top-right {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    background-color: #333;
}
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
}
.nav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Lato', sans-serif;
}
.nav a:hover {
    color: #E0CD36;
}
.nav a.active {
    color: #E0CD36;
}
.container {
    position: relative;
    text-align: center;
    color: white;
}
/* Top left text */
.top-left {
    position: absolute;
    top: 8px;
    left: 150px;
    font-family: 'Courgette', cursive;
    font-size: 50px;
}
/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 130px;
    float: right;
}
/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
headder {
    width: 98%;
    padding: 1%;
    float: right;
}
button {
    background-color: #FEC503;
    padding: 2%;
    color: white;
    width: 25%;
    border: none;
}
p {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
}
h1 {
    font-family: 'Lato', sans-serif;
    font-size: 70px;
}
html {
    scroll-behavior: smooth;
}
h2 {
    text-align: center;
    font-size: 50px;
    font-family: 'Lato', sans-serif;
}
h6 {
    font-size: 20px;
    color: #777777;
    text-align: center;
    margin-top: -1%;
    font-family: 'Thasadith', sans-serif;
}
span {
    font-size: 100px;
    margin-left: 28%;
}
h3 {
    margin-left: 24%;
    font-family: 'Lato', sans-serif;
}
h7 {
    color: #777777;
    margin-top: -1%;
    text-align: center;
}
article {
    width: 30%;
    float: left;
    margin-left: 15%;
}
h8 {
    font-family: 'Lato', sans-serif;
    margin-top: 10px;
    font-size: 50px;
}
.services_slike {
    width: 100%;
}

Answer 1

从Float on w3school开始不设置浮点数，您可以将无设置为浮点数。

示例：float: none;

与浮动一样，您可以为每个边距设置无

margin-left:none;

如果未为您设置，则可以为该样式设置！重要。

Answer 2

看，在您的html代码块文章中，元素有h7。 HTML没有该元素。它只有h1，h2，h3，h4，h5和h6。这是正确的代码。

<article> <span><i class="fas fa-laptop"> </i> </span>
      <h3>Responsive Design</h3>
      <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h6>
    </article>
    <article> <span> <i class="fas fa-lock"></i> </span>
      <h3>Web Security</h3>
      <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</h6>
    </article>

我能正确理解你吗？

忽略保证金和浮动

2 个答案: