小贝子编程

整个网页被水平滚动条破坏....除了等待，什么也做不了



我正在开发一个网页，但页面中有一个水平滚动条。我想删除它，但不能。我最近一直在从事网络开发，我为实践制作的大多数网页都面临着同样的问题。

我预计以下代码部分是错误的

.heading::before{border: 2px solid chocolate;

content: "";

height: 100vh;

background: url(....) no-repeat center ;

width: 100vw;

position: absolute;

top: 0px;

left: 0px;

z-index: -1; }

*{
margin: 0px;
padding: 0px;
}
nav{
position: sticky;
top: 0px;
left:0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading{
height: 90vh;

}
.heading::before{
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex{
display: flex;
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.wrap{
flex-wrap: wrap;
}
.al-cen{
align-items: center;
}
.ju-cen{
justify-content: center;
}
nav a{
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;


}
nav a:hover{
color: #15191f;
background-color: #e3ecf3;
}
#li1{
margin-left: 50px;
}
#a1{
margin: 0px 4px;
}
#a2{
margin: 0px 4px;
}
#a3{
margin: 0px 4px;
}
#a4{
margin: 0px 4px;
}
nav ul li{
list-style: none;
}
#logo{
width: 5vw;
border: 2px ;
border-radius:100mm;
}
/* -------------------------------------------------------------------- */
div ul{
margin: 0px 40px;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div{
margin: 20px 15px;
}
ol li{
margin: 0px 40px;
}
.block{
display:block;
}
.inline-block{
display: inline-block;
}
.border-red{
border: 3.5px solid red;
border-radius: 12px;
}
.border-green{
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue{
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height{
line-height: 8vh;

}
ol{
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width:300px
}
.text-cen{
text-align: center;
}
ol li{
margin-left: 40px;
}
input{
display: block;
}
option{
background-color:#15191f;
color:#e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select{
width: 85px;
background-color:#15191f;
color:#e3ecf3;
height:30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button{
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox{
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<b>This Bold<b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<br> Has been used here and here<br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
@gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder"><p>Just Testing</p>
Email<input type="email" value="@gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
&lt;
<!-- Less Than -->
&gt;
<!-- Greater Than -->
&pound;
<!-- pound -->
&copy;
<!-- copy -->
&rAarr;
<!-- Arrow -->
&frac12;
<!-- In form of fraction -->

</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>

<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>

特别是width: 100vw，如果我删除这一行，滚动条就会消失，但图像也会消失。CCD_ 11也使画面消失。

  1. 我想用这个代码显示背景图片(图片的地址在url中(。如果我删除此代码，水平滚动条将消失。使用边界表明这确实是个问题在整个屏幕上显示图像时，无论大小，如何隐藏滚动条。(我的意思是屏幕的任何部分都不应该被遗漏。(大多数答案都建议去掉100vw和100%的宽度，但这会去掉图片

如果可能的话，建议其他方式，使我能够在全屏显示图像，而不会对美观造成任何问题。图片应该在背景中，只针对特定的标签，而不是整个网页。

您需要专门为伪元素设置方框大小。

*, *::before, *::after{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position: sticky;
top: 0px;
left:0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading{
height: 90vh;

}
.heading::before{
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex{
display: flex;
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.wrap{
flex-wrap: wrap;
}
.al-cen{
align-items: center;
}
.ju-cen{
justify-content: center;
}
nav a{
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;


}
nav a:hover{
color: #15191f;
background-color: #e3ecf3;
}
#li1{
margin-left: 50px;
}
#a1{
margin: 0px 4px;
}
#a2{
margin: 0px 4px;
}
#a3{
margin: 0px 4px;
}
#a4{
margin: 0px 4px;
}
nav ul li{
list-style: none;
}
#logo{
width: 5vw;
border: 2px ;
border-radius:100mm;
}
/* -------------------------------------------------------------------- */
div ul{
margin: 0px 40px;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div{
margin: 20px 15px;
}
ol li{
margin: 0px 40px;
}
.block{
display:block;
}
.inline-block{
display: inline-block;
}
.border-red{
border: 3.5px solid red;
border-radius: 12px;
}
.border-green{
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue{
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height{
line-height: 8vh;

}
ol{
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width:300px
}
.text-cen{
text-align: center;
}
ol li{
margin-left: 40px;
}
input{
display: block;
}
option{
background-color:#15191f;
color:#e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select{
width: 85px;
background-color:#15191f;
color:#e3ecf3;
height:30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button{
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox{
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<b>This Bold<b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<br> Has been used here and here<br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
@gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder"><p>Just Testing</p>
Email<input type="email" value="@gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
&lt;
<!-- Less Than -->
&gt;
<!-- Greater Than -->
&pound;
<!-- pound -->
&copy;
<!-- copy -->
&rAarr;
<!-- Arrow -->
&frac12;
<!-- In form of fraction -->

</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>

<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>

在伪元素上，我添加了box-sizing: border-box，并将宽度更改为100%，而不是100vw。

box-sizing: border-box

这将更改在声明绝对宽度时使用的框。当我们将其设置为border-box时，这意味着边框被放置在声明的宽度内，而不是添加到其中。即，我有一个100px宽的框，有2px边框，我希望边框包含在100px中，而不是添加到它中。

width: 100%

百分比宽度相对于容器的宽度，而视口相对于视口。100%表示占用我所在容器的所有宽度，100vw表示占用视口的所有宽度(包括滚动条(。

* {
margin: 0px;
padding: 0px;
}
nav {
position: sticky;
top: 0px;
left: 0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading {
height: 90vh;
}
.heading::before {
box-sizing: border-box;
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.al-cen {
align-items: center;
}
.ju-cen {
justify-content: center;
}
nav a {
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover {
color: #15191f;
background-color: #e3ecf3;
}
#li1 {
margin-left: 50px;
}
#a1 {
margin: 0px 4px;
}
#a2 {
margin: 0px 4px;
}
#a3 {
margin: 0px 4px;
}
#a4 {
margin: 0px 4px;
}
nav ul li {
list-style: none;
}
#logo {
width: 5vw;
border: 2px;
border-radius: 100mm;
}

/* -------------------------------------------------------------------- */
div ul {
margin: 0px 40px;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div {
margin: 20px 15px;
}
ol li {
margin: 0px 40px;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.border-red {
border: 3.5px solid red;
border-radius: 12px;
}
.border-green {
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue {
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height {
line-height: 8vh;
}
ol {
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width: 300px
}
.text-cen {
text-align: center;
}
ol li {
margin-left: 40px;
}
input {
display: block;
}
option {
background-color: #15191f;
color: #e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select {
width: 85px;
background-color: #15191f;
color: #e3ecf3;
height: 30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button {
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}

/* .button: */
.checkbox {
/* background-color: #15191f; */
height: 25px;
width: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel="stylesheet" href="../CSS/home.css">
<script src="../JS/home.js"></script>
</head>
<body class="">
<nav class="flex row al-cen">
<img id="logo" src="../random_source" alt="Error loading image">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/home.html" target="_blank">Home</a></li>
<li id="li2"><a id="a2" href="../HTML/about.html" target="_blank">About Us</a></li>
<li id="li3"><a id="a3" href="../HTML/services.html" target="_blank">Our Services</a></li>
<li id="li4"><a id="a4" href="../HTML/contact.html" target="_blank">Contact Us</a></li>
</ul>
</nav>
<div class="heading flex flex-column al-cen ju-cen">
<h1 class="line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of it for future usage.</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<b>This Bold<b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<br> Has been used here and here<br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti itaque delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean. Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br> The diff between value and placeholder is that the placeholder
gets removed whan an item is entered, wheras when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is not. @gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder"> Checkbox
<input type="checkbox" class="checkbox" placeholder="Placeholder"> Color
<input type="color" placeholder="Placeholder"> Date
<input type="date" placeholder="Placeholder"> Datetime
<input type="datetime" placeholder="Placeholder"> Datetime-local
<input type="datetime-local" placeholder="Placeholder">
<p>Just Testing</p>
Email<input type="email" value="@gmail.com" placeholder="Placeholder"> File
<input type="file" placeholder="Placeholder"> Hidden
<input type="hidden" placeholder="Placeholder"> Image
<input type="image" placeholder="Placeholder"> Month
<input type="month" placeholder="Placeholder"> Number
<input type="number" placeholder="Placeholder"> Password
<input type="password" placeholder="Placeholder"> Radio
<input type="radio" placeholder="Placeholder"> Range
<input type="range" placeholder="Placeholder"> Reset
<input type="reset" placeholder="Placeholder"> Search
<input type="search" placeholder="Placeholder"> Submit
<input type="submit" placeholder="Placeholder"> Tel
<input type="tel" placeholder="Placeholder"> Text
<input type="text" placeholder="Placeholder"> Time
<input type="time" placeholder="Placeholder"> Url
<input type="url" placeholder="Placeholder"> Week
<input type="week" placeholder="Placeholder"> Select from a dropdown
<select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4>We use entities for displaying some character</h4>
&lt;
<!-- Less Than -->
&gt;
<!-- Greater Than -->
&pound;
<!-- pound -->
&copy;
<!-- copy -->
&rAarr;
<!-- Arrow -->
&frac12;
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>

在您网站的主标签中，您应该给出100%的宽度：

width : 100%;

如果您设置100vw，您的浏览器将采用overflow-x以及垂直滚动条宽度。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium