我如何防止主要<代码>div 在我roll倒的时候,不要被切断? 案文仍然存在,但<条码>背后地-color和<条码>在我上台时消失。 这里是我的code,这里是,其中说明它是如何看待?”
页: 1 我可以很远,看一看整个四分五裂,这样看看看着以地区为基础。
Here is the html:
<body>
<nav class="navbar">
<ul>
<li><a href="index.html">about</a></li>
<li><a href="diary.html">diary</a></li>
<li><a href="fitness.html">fitness</a></li>
<li><a href="misc.html">misc</a></li>
</ul>
</nav>
<div class="main">
<!-- NOTE: no clue why i need that style padding tag but it looks bad without it lol -->
<h1>web dev journal</h1>
<h2>lorem ipsum and stuff</h2>
<h3 class="devdate">2/2/2024 - placeholder</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h3 class="devdate">2/1/2024 - placeholder</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h3 class="devdate">1/29/2024 - placeholder</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h3 class="devdate">1/29/2024 - asdas</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h3 class="devdate">1/28/2024 - asdasd</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
www.un.org/Depts/DGACM/index_spanish.htm The CSS:
* {
box-sizing: border-box;
}
html{
font-size:10px;
}
html, body{
background-image: url(https://i.redd.it/pdcyxx2i2n941.jpg);
background-repeat: repeat;
z-index: -1;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-attachment: fixed;
}
/* NOTE: */
.navbar ul{
list-style-type: none;
overflow:hidden;
width:80rem;
min-width: 40rem;
margin-top:1rem;
margin-bottom:1rem;
margin-left:auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: hsl(0, 0%, 30%);
background-color: hsl(0,0%,0%);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.navbar a{
color: hsl(0, 0%, 90%);
text-decoration: none;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left:1.5rem;
padding-right:1.5rem;
display: block;
text-align: center;
font-family: metrobold;
font-size:3.2rem;
}
.navbar a:hover{
color: hsl(240,80%,90%)
}
.navbar li{
float: left;
}
.main{
width:80rem;
min-width: 40rem;
height:100%;
bottom: 0px;
margin-left: auto;
margin-right: auto;
border-left: 3px solid hsl(0, 0%, 30%);
border-right: 3px solid hsl(0, 0%, 30%);
border-top: 3px solid hsl(0, 0%, 30%);
border-bottom: 0;
background-color: hsl(0,0%,0%);
line-height:1.5;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.main h1{
color: hsl(0, 0%, 90%);
text-align: center;
font-family: metrobold;
font-size: 5rem;
}
.main h2{
color: hsl(0, 0%, 90%);
text-align: center;
font-family: metrobold;
font-size: 2.2rem;
}
.main p {
color: hsl(0, 0%, 65%);
padding-left: 2rem;
padding-right: 2rem;
text-align: center;
font-family: metroregular;
font-size:2rem;
text-align: left;
}
.main img{
display: block;
margin: auto;
}
h3.devdate{
color: hsl(0, 0%, 90%);
text-align: center;
font-family: metrobolditalic;
font-size: 2rem;
padding-top: 3rem;
padding-bottom: 0rem;
}