Html 样式标记和对齐问题_Html_Css_Alignment

Html 样式标记和对齐问题

html css

Html 样式标记和对齐问题,html,css,alignment,Html,Css,Alignment,我在我创建的名为section1的div类中遇到了一个问题，该类中的段落不会向左对齐，当我尝试在闭合标题下的样式标记中编辑段落的样式时，.section1不会显示，并且在设置对齐时也不起作用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <style> body {margin:0;} .Header

我在我创建的名为section1的div类中遇到了一个问题，该类中的段落不会向左对齐，当我尝试在闭合标题下的样式标记中编辑段落的样式时，.section1不会显示，并且在设置对齐时也不起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">



</head>
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

    }
    @media (max-width: 960px){
    .Header .headerLogo{
        position: relative;
        display: flex;
        width: 86px;
        height: 15px;
        margin: 0 auto;
    }
    }
    .headerLogo{
        text-align: center;
        font-size: small;
        font-style: italic;
        font-family: Verdana;
        color: white;

    }


</style>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">


    </a>
</div>
</body>

<body>


<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides w3-animate-right" src= style="width:100%">
    <!--<img class="mySlides w3-animate-right" src="img_rr_02.jpg" style="width:100%">
    <img class="mySlides w3-animate-right" src="img_rr_03.jpg" style="width:100%">
    <img class="mySlides w3-animate-right" src="img_rr_04.jpg" style="width:100%"> _-->
    <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
</div>

<div id="section1" align="left" style = "background-color: black; color: white; padding: 500px">
    <a class = "header1">
    <h1 align="left" style = "font-size: x-large">A new way to fold a board</h1>
        <p></p>
    </a>
</div>

<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 5000);
    }
</script>
</body>
</html>


正文{页边距：0；}
.标题{
z指数：100；
位置：固定；
排名：0；
宽度：100%；
背景色：#000000；
高度：70像素；
}
@媒体屏幕和屏幕（最大宽度：680px）{
.Header.responsive{位置：相对；}
.Header.li.icon{
位置：绝对位置；
右：0；
排名：0；
}
}
@介质（最大宽度：960像素）{
.Header.headerLogo{
位置：相对位置；
显示器：flex；
宽度：86px；
高度：15px；
保证金：0自动；
}
}
海德洛戈先生{
文本对齐：居中；
字体大小：小；
字体：斜体；
字体系列：Verdana；
颜色：白色；
}
折叠木板的新方法

var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
设置超时（旋转木马，5000）；
}

减少下面代码中的

填充的值
<div id="section1" align="left" style = "background-color: black; color: white; padding: 500px">



下面是更新的代码段

我创建的名为section1的div类中有一个问题，段落不会向左对齐，当我试图在闭合标题下的样式标记中编辑段落的样式时，.section1不会显示，并且在设置对齐时也不起作用。
月牙板
正文{页边距：0；}
.标题{
z指数：100；
位置：固定；
排名：0；
宽度：100%；
背景色：#000000；
高度：70像素；
}
@媒体屏幕和屏幕（最大宽度：680px）{
.Header.responsive{位置：相对；}
.Header.li.icon{
位置：绝对位置；
右：0；
排名：0；
}
}
@介质（最大宽度：960像素）{
.Header.headerLogo{
位置：相对位置；
显示器：flex；
宽度：86px；
高度：15px；
保证金：0自动；
}
}
海德洛戈先生{
文本对齐：居中；
字体大小：小；
字体：斜体；
字体系列：Verdana；
颜色：白色；
}
月牙板
折叠木板的新方法

var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
设置超时（旋转木马，5000）；
}
HTML5不支持对齐属性。正如您所声明的，文档类型html是HTML5。改用CSS
可以添加样式属性style=“文本对齐：左”
 因此，修复方法是使显示：内联块
和宽度：100%。这样做会给你想要的效果。
现在你的h1将被隐藏，因为你的头。所以，只要给它一个利润率上限，你就可以很好地走了
<div id="section1" align="left" style = "background-color: black; color: white; padding-top:500px; display:inline-block;width:100%;">
  <a class = "header1">
    <h1 align="left" style = "margin-top:50px; font-size: x-large">A new way to fold a board</h1>
    <p></p>
  </a>
</div>


折叠木板的新方法


删除SetAction1 div中h1标记中的align属性
将填充更改为500px 0 500px 0，而不是500px。您可以根据需要增加左/右边距
不知道我是否理解你的问题。你是说第一部分的风格不起作用？如果将样式放在css中，则需要将其声明为#section1而不是.section1，或者必须在div标记属性中添加class=“section1”
试试这个：

body{margin:0；}
.标题{
z指数：100；
位置：固定；
排名：0；
宽度：100%；
背景色：#000000；
高度：70像素；
}
@媒体屏幕和屏幕（最大宽度：680px）{
.Header.responsive{位置：相对；}
.Header.li.icon{
位置：绝对位置；
右：0；
排名：0；
}
}
@介质（最大宽度：960像素）{
.Header.headerLogo{
位置：相对位置；
显示器：flex；
宽度：86px；
高度：15px；
保证金：0自动；
}
}
海德洛戈先生{
文本对齐：居中；
字体大小：小；
字体：斜体；
字体系列：Verdana；
颜色：白色；
}
#第一节{
文本对齐：左对齐；
背景色：黑色；
颜色：白色；
填充：500px 0 500px 0；
}

月牙板
折叠木板的新方法

var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
设置超时（旋转木马，5000）；
}
这样可以与对齐一起工作，但我正在尝试使该部分变大，当填充为500px时，请检查更新的代码段。我已将min height:80vh
添加到div
，希望它能有所帮助。我最初的类是=section1，然后我将其更改为id。section1或#section在键入时不会以样式显示。即使我继续在#部分输入样式，