Html 无法删除右边距，CSS
我打开了live server，尝试对几乎每个元素进行更改（将边距设置为0px，减少填充，等等），但没有任何帮助我解决问题。这是所有的缩放好，但它显示了溢出选项，所以你可以在右边滚动，这真的很粗鲁，不需要。但是我找不到问题出在哪里Html 无法删除右边距，CSS,html,css,Html,Css,我打开了live server，尝试对几乎每个元素进行更改（将边距设置为0px，减少填充，等等），但没有任何帮助我解决问题。这是所有的缩放好，但它显示了溢出选项，所以你可以在右边滚动，这真的很粗鲁，不需要。但是我找不到问题出在哪里 html, body { margin: 0px; font-family: 'Roboto', sans-serif; height: 100%; } ul, li, a{ text-decoration: none;
html, body {
margin: 0px;
font-family: 'Roboto', sans-serif;
height: 100%;
}
ul, li, a{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-up {
position: relative;
top: 0;
background-color: #E28B65;
width: 100%;
height: 23px;
font-size: 11px;
margin-right: 0;
}
.nav-up-ul,li a{
margin-right: -100px;
display: flex;
position: relative;
text-align: left;
color: white;
}
.nav-up-ul,li {
padding: 0px;
margin: auto;
margin-right: 60px;
}
.icons {
display: flex;
margin-left: 340px;
}
.fb {
margin-right: 20px;
height: 13px;
padding: 3px;
margin-top: 1px;
}
.nav-up-ul li a:hover{
color: black;
transition: .3s;
}
.fb:hover{
opacity: 30%;
transition: .2s;
}
.btn,a{
color: black;
}
.ukim-logo {
height: 60px;
margin-left: -20px;
padding: auto;
margin-right: 20px;
margin-bottom: 20px;
}
.nav-main {
display: flex;
padding-top: 5px;
width: auto;
height: auto;
background-color: #FFFBF6;
}
h1 {
margin-right: 50px;
font-size: 18px;
margin-top: 23px;
margin-left: -30px;
}
.nav-main p {
font-size: 13px;
margin-right: 20px;
margin-top: 18px;
}
.nav-main img {
margin-top: -10px;
margin-right: 10px;
}
.btn {
display: block;
background-color: #E28B65;
height: 18px;
border-radius: 20px;
width: 200px;
}
.nav-main a {
font-size: 16px;
color: white;
margin: auto;
margin-top: 16px;
margin-bottom: -11px;
}
.btn {
text-align: center;
padding-top: 10px;
padding-bottom: 12px;
}
.btn:hover {
background-color: rgb(185, 113, 82);
transition: 0.4s;
}
.nav-down {
display: flex;
position: relative;
background-color: #E28B65;
height: 25px;
}
.nav-down li a {
font-size: 13px;
margin-left: 20px;
margin-right: -30px;
}
.nav-down li a:hover{
color: black;
transition: 0.3s;
}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 20%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: black;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: 0.4s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.header-grid{
font-size: 15px;
margin-top: 50px;
text-align: center;
}
.small-sep{
margin-top: -30px;
}
.grid {
display: grid;
grid-template-columns: 400px 400px;
grid-template-rows: 66px 66px 66px 66px 66px 66px 66px 66px 66px 66px 66px 66px;
column-gap: 150px;
row-gap: 30px;
align-items: center;
justify-content: center;
margin-top: 45px;
grid-template-areas: "box1 box7" "box2 box8" "box3 box9" "box4 box10" "box5 box11" "box6 box12" "box13 box14" "box15 box16" "box17 box18" "box19 box20" "box21 box22" "box23 box24";
}
.hovered:hover{
background-color: #E28B65;
cursor: pointer;
color: white;
transition: .4s;
}
.separator-grid{
width: 110px;
height: 1120px;
margin-top: -1150px;
margin-left: 418px;
position: relative;
}
.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10,.box11,.box12,.box13,.box14,.box15,.box16,.box17,.box18,.box19,.box20,.box21,.box22,.box23,.box24{
border-style: solid;
border-radius: 15px;
border-color: #E28B65;
background-color: #FFFBF6;
font-size: 19px;
text-align: center;
}
.box1 {
grid-area: box1;
}
.box2 {
grid-area: box2;
}
.box3 {
grid-area: box3;
}
.box4 {
grid-area: box4;
}
.box5 {
grid-area: box5;
}
.box6 {
grid-area: box6;
}
.box7 {
grid-area: box7;
}
.box8 {
grid-area: box8;
}
.box9 {
grid-area: box9;
}
.box10 {
grid-area: box10;
}
.box11 {
grid-area: box11;
}
.box12 {
grid-area: box12;
}
.box12 p{
margin-top: 11px;
font-size: 17px;
}
.box13 {
grid-area: box13;
}
.box14 {
grid-area: box14;
}
.box14 p{
margin-top: 11px;
font-size: 17px;
}
.box15 {
grid-area: box15;
}
.box16 {
grid-area: box16;
}
.box16 p{
margin-top: 11px;
font-size: 17px;
}
.box17 {
grid-area: box17;
}
.box18 {
grid-area: box18;
}
.box19 {
grid-area: box19;
}
.box19 p{
margin-top: 11px;
font-size: 17px;
}
.box20 {
grid-area: box20;
}
.box20 p{
margin-top: 11px;
font-size: 17px;
}
.box21 {
grid-area: box21;
}
.box22 {
grid-area: box22;
}
.box23 {
grid-area: box23;
}
.box24 {
grid-area: box24;
}
footer{
position: relative;
bottom: 0;
width: 100%;
align-items: center;
height: 160px;
display: flex;
margin-top: 160px;
background-color: #E28B65;
margin-right: 0;
}
.footer-logo{
width: 80px;
height: 100px;
display: block;
margin-left: 135px;
margin-right: auto;
}
footer p{
font-size: 10px;
text-align: left;
padding: 2px;
margin-left: 250px;
margin-right: 15px;
color: white;
}
.partner {
height: 50px;
margin-left: 20px;
padding: 10px;
}
.footer-down{
position: relative;
bottom: 0;
width: 100%;
height: 25px;
background-color: #673520;
margin-top: -16px;
color: white;
font-size: 12px;
text-align: center;
}
.footer-down p{
padding: 5px;
margin-bottom: auto;
}
.footer-down a{
color: white;
}
.footer-down a:hover{
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>УКИМ</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<header>
<div class="nav-up">
<ul class="nav-up-ul">
<li><a href="#">European Information & Innovation Centre Macedonia</a></li>
<li><a href="#">Институт "Конфуциј"</a></li>
<li><a href="#">Руски МИР</a></li>
<li><a href="#">Македонско-американска алумни асоцијација</a></li>
<ul class="icons">
<a href="#"><img src="images/fb.svg" alt="facebook" class="fb"></a>
<a href="#"><img src="images/yt.svg" alt="facebook" class="fb"></a>
<a href="#"><img src="images/ig.svg" alt="facebook" class="fb"></a>
<a href="#"><img src="images/tw.svg" alt="facebook" class="fb"></a>
</ul>
</ul>
</div>
<nav>
<ul class="nav-main">
<a href="#"><img src="images/ukim-logo.png" alt="ukim-logo" class="ukim-logo"></a>
<h1>Универзитет "Св. Кирил и Методиј" во Скопје</h1>
<img src="images/phone.svg" alt="phone">
<p> Централа : 2 3293-293
<br>Факс : 2 3293-202</p>
<img src="images/mail.svg" alt="mail">
<p> Централа : 2 3293-293
<br>Факс : 2 3293-202</p>
<img src="images/location.svg" alt="location">
<p> Централа : 2 3293-293
<br>Факс : 2 3293-202</p>
<a href="#" class="btn animated tada">УПИСИ ВО ТЕК</a>
</ul>
</nav>
<nav>
<ul class="nav-down">
<li><a href="#">Универзитет</a></li>
<li><a href="#">Структура</a></li>
<li><a href="#">Органи и тела на УКИМ</a></li>
<li><a href="#">Настава и студенти</a></li>
<li><a href="#">Наука</a></li>
<li><a href="#">Докторски студии</a></li>
<li><a href="#">Меѓународна соработка</a></li>
<li><a href="#">МСМЈЛК</a></li>
<li><a href="#">УКЦ</a></li>
<li><a href="#">Документи</a></li>
</ul>
</nav>
</header>
<div class="slideshow-container animated zoomIn">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/slider.jpg" style="width:100%">
<div class="text">Нов дизајн на веб страната на УКИМ</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/slider.jpg" style="width:100%">
<div class="text">Пример</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/slider.jpg" style="width:100%">
<div class="text">Пример</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/slider.jpg" style="width:100%">
<div class="text">Пример</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<div class="header-grid">
<h2>Факултети</h2>
<img src="images/smallsep.svg" alt="smallsep" class="small-sep">
</div>
<section>
<div class="grid">
<img src="images/separator.svg" alt="separator" class="separator-grid">
<div class="box1 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="100">
<p>Архитектонски факултет</p>
</div>
<div class="box2 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Градежен факултет</p>
</div>
<div class="box3 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Економски факултет</p>
</div>
<div class="box4 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Машински факултет</p>
</div>
<div class="box5 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Медицински факултет</p>
</div>
<div class="box6 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Педагошки факултет</p>
</div>
<div class="box7 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="100">
<p>Правен факултет</p>
</div>
<div class="box8 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Природно-математички факултет</p>
</div>
<div class="box9 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Стоматолошки фкаултет</p>
</div>
<div class="box10 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Технолошко-металуршки факултет</p>
</div>
<div class="box11 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за ветеринарна медицина</p>
</div>
<div class="box12 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за дизајн и технологии на мебел и ентериер</p>
</div>
<div class="box13 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Факултет драмски уметности</p>
</div>
<div class="box14 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за електротехника и информациски технологии</p>
</div>
<div class="box15 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за земјоделски науки и храна</p>
</div>
<div class="box16 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за информатички науки и компјутерско инжињерство</p>
</div>
<div class="box17 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за ликовни уметности</p>
</div>
<div class="box18 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за музичка уметност</p>
</div>
<div class="box19 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за физичко образование,спорт и здравје</p>
</div>
<div class="box20 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Факултет за шумарски науки,пејсажна архитектура и екоинжењеринг "Ханс Ем"</p>
</div>
<div class="box21 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Фармацевтски факултет</p>
</div>
<div class="box22 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Филозофски факултет</p>
</div>
<div class="box23 hovered" data-aos="slide-right" data-aos-delay="150" data-aos-offset="50">
<p>Филолошки факултет</p>
</div>
<div class="box24 hovered" data-aos="slide-left" data-aos-delay="150" data-aos-offset="50">
<p>Институти</p>
</div>
</div>
</section>
<footer>
<img src="images/partner.svg" alt="partners" class="partner">
<img src="images/partner.svg" alt="partners" class="partner">
<img src="images/partner.svg" alt="partners" class="partner">
<img src="images/partner.svg" alt="partners" class="partner">
<img src="images/ukim-logo.png" alt="logo-ukim" class="footer-logo">
<p>Работното време<br>
на Централната стручна и административна служба – Ректоратот е секој работен ден, од понеделник до петок,
од 8,00 до 16,00 ч.<br><br>
Дневна пауза<br>
од 12,00 до 12,30 ч.<br><br>
Приемни саати, работни средби и комуникација<br>
на вработените на Централната стручна и административна служба – Ректорат со надворешни лица секој работен ден
од 14,00 до 16,00 ч.</p>
</footer>
<div class="footer-down">
<p>© 2020. Универзитет „Св. Кирил и Методиј“ во Скопје. Сите права се задржани. Политика за приватност Изработено од : <a href="#">© Atlas Solutions Inc.</a></p>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
УКИМ
Универзитет "Св. Кирил и Методиј" во Скопје
ааааа：23293-293
ФаС：23293-202
ааааа：23293-293
ФаС：23293-202
ааааа：23293-293
ФаС：23293-202
1/3
Нов дизајн на веб страната на УКИМ
2/3
Пример
3/3
Пример
3/3
Пример
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i溢出：隐藏您的HTML无效。Ul只能让李作为孩子