Html/Css 背景和文本框问题

debugcn 发表于 Dev

朱利安福克斯

我只是在学习 HTML/CSS，我的背景和文本框有点问题我不明白为什么它不起作用有人可以告诉我问题是什么以及如何解决它？问候

我认为轮播的覆盖层有问题，但这只是猜测并用文字填充这个文件以便能够移植它......我的意思是为什么需要如此多的文字这是一个短代码我会而是只阅读代码而不是阅读这么长的无用文本......

body
{
background-color: black;
}
#Haupt
{
  color: yellow;
    align-content: center;
}

.header1
{

}
h1
{
}
/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
	
    width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
    
	overflow: hidden;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}
h1:hover
{
    background-color: dimgray;
}

 .tales {
width: 100%;
height: 100%;
}
.carousel-inner{
width:100%;
height: 10%;
max-height: 500px !important;
min-width: 1366px !important;
}


.textbox1 {
   position: abolute; /*position auf der Seite absolut */
   left:200px; /*position von links */
   top: 40px; /*position von oben */
   width: 300px; /*Breite der Box */
   font-family: Verdana, Geneva, sans-serif;
   font-size: 1.2em;
   text-align: center;
   height: 300px; /*Höhe der Box */
   border: solid blue 1px; /* Rand durchgezogen blau 1px stark */
   padding:20px; /* Innenabstand vom Text zum Rand */
   background-color:#fff; /* Hintergrundfarbe */
   border-radius:15px; /* Ecken mir Rundungsradius */
   box-shadow: 3px 3px 5px 1px #000; /*schatten Ausrichtung links, oben,      Abstand von der Box, Ausdehnung, Farbe */
   opacity:0.8; /* Transparenz */
}

   
/*Nav bar*/
.main {
    margin: 0px;
    width: 980px;
	height: 10px;
    }
.links {
    float:left;
    
}
.rechts {
	width: 200px;
right: 0px;
position: absolute;
top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
   
}

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
	
	margin:0;	   
	background-color: darkblue;
	}
	
	
	
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
	overflow: hidden;
  float: left;
  display: block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

</style>
	<link rel="stylesheet" href="Stylesheet.css">
  <h1>Bootstrap Example</h1>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

	
	
<div clas="textbox1">
	<a>sdf</a>
</div>
	
	
<div class="navbar">
     <div class="main">
        <div class="links">
            <a href="#Dafuq"> DFUQ </a>
			  <a href="#Dafuq"> DFUQ </a>
			  <a href="#Dafuq"> DFUQ </a>
        </div>
        <div class="rechts">
          <a href="#Dafuq"> Fuchs Julian </a>
        </div>
    </div>
</div>	
<div class="container-fluid">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="Bild1.jpg" alt="Los Angeles" width = "100%">
      </div>

      <div class="item">
        <img src="Bild2.jpg" alt="Chicago" width = "100%" >
      </div>
    
      <div class="item">
        <img src="Bild3.jpg" alt="New york" width = "100%">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</body>
</html>

嘉发科技

您已经准备好几个拼写错误clas="textbox1"使用class="textbox1"，并做一些修改为如下图所示

body {
  background-color: black;
}

#Haupt {
  color: yellow;
  align-content: center;
}

.header1 {}

h1 {}


/* The navigation bar */

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
}


/* Links inside the navbar */

.navbar a {
  overflow: hidden;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Main content */

.main {
  margin-top: 30px;
  /* Add a top margin to avoid content overlay */
}

h1:hover {
  background-color: dimgray;
}

.tales {
  width: 100%;
  height: 100%;
}

.carousel-inner {
  width: 100%;
  height: 10%;
  max-height: 500px !important;
  min-width: 1366px !important;
}

.textbox1 {
  position: absolute;
  left: 200px;
  top: 40px;
  width: 300px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.2em;
  text-align: center;
  height: 300px;
  border: solid blue 1px;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 3px 3px 5px 1px #000;
  opacity: 0.8;
}


/*Nav bar*/

.main {
  margin: 0px;
  width: 980px;
  height: 10px;
}

.links {
  float: left;
}

.rechts {
  width: 200px;
  right: 0px;
  position: absolute;
  top: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    body {
      margin: 0;
      background-color: darkblue;
    }
    
    .navbar {
      overflow: hidden;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    .navbar a {
      overflow: hidden;
      float: left;
      display: block;
      color: #f2f2f2;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
  </style>
  <link rel="stylesheet" href="Stylesheet.css">
  <h1>Bootstrap Example</h1>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>



  <div class="textbox1">
    <a>sdf</a>
  </div>


  <div class="navbar">
    <div class="main">
      <div class="links">
        <a href="#Dafuq"> DFUQ </a>
        <a href="#Dafuq"> DFUQ </a>
        <a href="#Dafuq"> DFUQ </a>
      </div>
      <div class="rechts">
        <a href="#Dafuq"> Fuchs Julian </a>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <h2>Carousel Example</h2>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="Bild1.jpg" alt="Los Angeles" width="100%">
        </div>

        <div class="item">
          <img src="Bild2.jpg" alt="Chicago" width="100%">
        </div>

        <div class="item">
          <img src="Bild3.jpg" alt="New york" width="100%">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。