Fatal编程技术网
  • javascript/
  • Javascript 我的DIV元素是对角的，而不是水平的

Javascript 我的DIV元素是对角的，而不是水平的

javascript html css

Javascript 我的DIV元素是对角的，而不是水平的,javascript,html,css,Javascript,Html,Css,我只使用HTML CSS和JSC编写这个简单的绘图程序。我有一个问题，我无法修复我的div元素在class color字段中的位置，它们不会水平移动（在一个接一个的行块中）。相反，由于某种原因，它们成对角线，后面的所有元素都是这样。我想让它们一个接一个地放在画布下，但我似乎无法让它工作。我尝试了我在网上找到的所有方法，但没有任何效果。我不确定到底是什么问题 <head> <img src="logo.png" style="width:5

我只使用HTML CSS和JSC编写这个简单的绘图程序。我有一个问题，我无法修复我的div元素在class color字段中的位置，它们不会水平移动（在一个接一个的行块中）。相反，由于某种原因，它们成对角线，后面的所有元素都是这样。我想让它们一个接一个地放在画布下，但我似乎无法让它工作。我尝试了我在网上找到的所有方法，但没有任何效果。我不确定到底是什么问题


<head>
    <img src="logo.png" style="width:50%; margin-right: auto; margin-left: 400px; ">
</head>

<style>

body, a, a:hover { cursor:url('https://66.media.tumblr.com/7659e714cab33f9d59124f924405e793/tumblr_inline_p7g82dZq1h1r466gz_75sq.png'), auto 
}

body {
    background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}



canvas {
    box-shadow: -3px 2px 9px 6px hotpink;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 25px;


}


.tools .color-field {
    height:  40px;
    width: 40px;
    cursor:  pointer;
    display:  inline-block;
    box-sizing:  border-box;
    border-radius: 50%;
    border: 2px solid white;
    align-self:  center;
    margin:  10 25px;
    display: block;


}


.color-field {

    display: block;
    margin-left: auto;
    margin-right: auto;
}


.tools {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top:  15px;
}

.tools .button{
    align-self:  center;
    width: 100px;
    height: 40px;
    border: 2px solid white;
    cursor:  pointer;
    color: white;
    background: #DB7093;
    font-weight: bold;
    margin:  0 10px;
    display: block;

}


.button {

    display: block;
    margin-left: auto;
    margin-right: auto;
}


.color-picker {
    align-self: center;
    margin: 0 15px;
    background-color: pink;
}

.pen-range {
    align-self:  center;
    margin:  o 15px;
    background-color: #DB7093;

}


</style>


<body style="background-image: url('https://images8.alphacoders.com/105/1055726.png');">


<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> cute drawing program </title>

<div class="field">
<canvas id="canvas"> </canvas>

<div class="tools">
<button type="button" class="button"> Undo </button>
<button type="button" class="button"> Clear </button>


<div class="color-field" style="background: red;"><div>
<div class="color-field" style="background: blue;"><div>
<div class="color-field" style="background: yellow;"><div>
<div class="color-field" style="background: green;"><div>
<div class="color-field" style="background: orange;"><div>
<div class="color-field" style="background: pink;"><div>
<div class="color-field" style="background: brown;"><div>
<div class="color-field" style="background: white;"><div>
<div class="color-field" style="background: gray;"><div>    
<div class="color-field" style="background: black;"><div>

<input type="color" class="color-picker">
<input type="range" min="1" max="100" class="pen-range">

</div>
</div>

<script>
    
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth = 800;
    canvas.height = 500;

    let context = canvas.getContext("2d");
    context.fillStyle = "white";
    context.fillRect(0, 0, canvas.width, canvas.height);

    let draw_color = "black";
    let draw_width = "2";
    let is_drawing = false;

    canvas.addEventListener("touchstart", start, false);
    canvas.addEventListener("touchmove", draw, false);
    canvas.addEventListener("mousedown", start, false);
    canvas.addEventListener("mousemove", draw, false);

    canvas.addEventListener("mtouchstart", stop, false);
    canvas.addEventListener("mouseup", stop, false);
    canvas.addEventListener("mouseout", stop, false);


    function start(event) {
        is_drawing = true;
        context.beginPath();
        context.moveTo(event.clientX - canvas.offsetLeft,
                       event.clientY - canvas.offsetTop);

    event.preventDefault();
    }

function draw(event) {
    if ( is_drawing ) {
        context.lineTo(event.clientX - canvas.offsetLeft,
                       event.clientY - canvas.offsetTop);
        context.strokeStyle = draw_color;
        context.lineWidth = draw_width;
        context.lineCap = "round";
        context.lineJoin = "round";
        context.stroke();
    }

    event.preventDefault();
}

function stop(event) {
    if (is_drawing) {
        context.stroke();
        context.closePath();
        is_drawing = false;
    }

    event.preventDefault();
}
</script>



</body>







</html>


主体，a，a:hover{cursor:url（'https://66.media.tumblr.com/7659e714cab33f9d59124f924405e793/tumblr_inline_p7g82dZq1h1r466gz_75sq.png'），汽车
}
身体{
背景图片：url（'img_girl.jpg'）；
背景重复：无重复；
背景附件：固定；
}
帆布{
盒影：-3px2px9px 6px热粉色；
光标：指针；
显示：块；
左边距：自动；
右边距：自动；
边界半径：25px；
}
.工具.颜色字段{
高度：40px；
宽度：40px；
光标：指针；
显示：内联块；
框大小：边框框；
边界半径：50%；
边框：2倍纯白；
自对准：居中；
利润率：10 25px；
显示：块；
}
.颜色场{
显示：块；
左边距：自动；
右边距：自动；
}
.工具{
显示器：flex；
证明内容：中心；
弯曲方向：行；
边缘顶部：15px；
}
.工具.按钮{
自对准：居中；
宽度：100px；
高度：40px；
边框：2倍纯白；
光标：指针；
颜色：白色；
背景#DB7093；
字体大小：粗体；
利润率：0.10px；
显示：块；
}
.按钮{
显示：块；
左边距：自动；
右边距：自动；
}
.颜色选择器{
自对准：居中；
利润率：0.15px；
背景颜色：粉红色；
}
.钢笔系列{
自对准：居中；
边际：o15px；
背景色：#DB7093；
}
可爱的绘图程序
撤消
清楚的
const canvas=document.getElementById（“canvas”）；
canvas.width=window.innerWidth=800；
高度=500；
让context=canvas.getContext（“2d”）；
context.fillStyle=“白色”；
context.fillRect（0,0，canvas.width，canvas.height）；
让我们画出颜色=“黑色”；
让我们画_width=“2”；
let is_drawing=假；
canvas.addEventListener（“touchstart”，开始，false）；
canvas.addEventListener（“touchmove”，draw，false）；
canvas.addEventListener（“mousedown”，start，false）；
canvas.addEventListener（“mousemove”，draw，false）；
canvas.addEventListener（“mtouchstart”，stop，false）；
canvas.addEventListener（“mouseup”，stop，false）；
canvas.addEventListener（“mouseout”，stop，false）；
功能启动（事件）{
是真的吗；
context.beginPath（）；
context.moveTo（event.clientX-canvas.offsetLeft，
event.clientY-canvas.offsetTop）；
event.preventDefault（）；
}
功能图（事件）{
如果（是图纸）{
context.lineTo（event.clientX-canvas.offsetLeft，
event.clientY-canvas.offsetTop）；
context.strokeStyle=绘制颜色；
context.lineWidth=绘图宽度；
context.lineCap=“round”；
context.lineJoin=“round”；
stroke（）；
}
event.preventDefault（）；
}
功能停止（事件）{
如果（是图纸）{
stroke（）；
closePath（）；
is_图纸=错误；
}
event.preventDefault（）；
}
您似乎忘记了带
颜色字段
类的
div
的结束标记中的结束
/
。
因此，
被解析为两个不同的
div
元素，第二个在第一个元素中。
div
s不是一个接一个地绘制，而是在彼此内部绘制，从而在它们之间创建垂直差异。
试试这个：


<!-- Lines 117-126 -->
<div class="color-field" style="background: red;"></div>
<div class="color-field" style="background: blue;"></div>
<div class="color-field" style="background: yellow;"></div>
<div class="color-field" style="background: green;"></div>
<div class="color-field" style="background: orange;"></div>
<div class="color-field" style="background: pink;"></div>
<div class="color-field" style="background: brown;"></div>
<div class="color-field" style="background: white;"></div>
<div class="color-field" style="background: gray;"></div>    
<div class="color-field" style="background: black;"></div>



以下是更新后的代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> cute drawing program </title>
    <style>

        body, a, a:hover { cursor:url('https://66.media.tumblr.com/7659e714cab33f9d59124f924405e793/tumblr_inline_p7g82dZq1h1r466gz_75sq.png'), auto 
        }

        body {
            background-image: url('img_girl.jpg');
          background-repeat: no-repeat;
          background-attachment: fixed;
        }



        canvas {
            box-shadow: -3px 2px 9px 6px hotpink;
            cursor: pointer;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 25px;


        }


        .tools .color-field {
            height:  40px;
            width: 40px;
            cursor:  pointer;
            display:  inline-block;
            box-sizing:  border-box;
            border-radius: 50%;
            border: 2px solid white;
            align-self:  center;
            margin:  10 25px;
            display: block;


        }


        .color-field {

            display: block;
            margin-left: auto;
            margin-right: auto;
        }


        .tools {
            display: flex;
            justify-content: center;
            flex-direction: row;
            margin-top:  15px;
        }

        .tools .button{
            align-self:  center;
            width: 100px;
            height: 40px;
            border: 2px solid white;
            cursor:  pointer;
            color: white;
            background: #DB7093;
            font-weight: bold;
            margin:  0 10px;
            display: block;

        }


        .button {

            display: block;
            margin-left: auto;
            margin-right: auto;
        }


        .color-picker {
            align-self: center;
            margin: 0 15px;
            background-color: pink;
        }

        .pen-range {
            align-self:  center;
            margin:  o 15px;
            background-color: #DB7093;

        }


    </style>
</head>
<body style="background-image: url('https://images8.alphacoders.com/105/1055726.png');">
    <header>
    <img src="logo.png" style="width:50%; margin-right: auto; margin-left: 400px; ">
    </header>
    <div class="field">
        <canvas id="canvas"> </canvas>

        <div class="tools">
            <button type="button" class="button"> Undo </button>
            <button type="button" class="button"> Clear </button>


            <div class="color-field" style="background: red;"></div>
            <div class="color-field" style="background: blue;"></div>
            <div class="color-field" style="background: yellow;"></div>
            <div class="color-field" style="background: green;"></div>
            <div class="color-field" style="background: orange;"></div>
            <div class="color-field" style="background: pink;"></div>
            <div class="color-field" style="background: brown;"></div>
            <div class="color-field" style="background: white;"></div>
            <div class="color-field" style="background: gray;"></div>    
            <div class="color-field" style="background: black;"></div>

            <input type="color" class="color-picker">
            <input type="range" min="1" max="100" class="pen-range">

        </div>
    </div>

    <script>
        
        const canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth = 800;
        canvas.height = 500;

        let context = canvas.getContext("2d");
        context.fillStyle = "white";
        context.fillRect(0, 0, canvas.width, canvas.height);

        let draw_color = "black";
        let draw_width = "2";
        let is_drawing = false;

        canvas.addEventListener("touchstart", start, false);
        canvas.addEventListener("touchmove", draw, false);
        canvas.addEventListener("mousedown", start, false);
        canvas.addEventListener("mousemove", draw, false);

        canvas.addEventListener("mtouchstart", stop, false);
        canvas.addEventListener("mouseup", stop, false);
        canvas.addEventListener("mouseout", stop, false);


        function start(event) {
            is_drawing = true;
            context.beginPath();
            context.moveTo(event.clientX - canvas.offsetLeft,
                           event.clientY - canvas.offsetTop);

        event.preventDefault();
        }

    function draw(event) {
        if ( is_drawing ) {
            context.lineTo(event.clientX - canvas.offsetLeft,
                           event.clientY - canvas.offsetTop);
            context.strokeStyle = draw_color;
            context.lineWidth = draw_width;
            context.lineCap = "round";
            context.lineJoin = "round";
            context.stroke();
        }

        event.preventDefault();
    }

    function stop(event) {
        if (is_drawing) {
            context.stroke();
            context.closePath();
            is_drawing = false;
        }

        event.preventDefault();
    }
    </script>
</body>
</html>




可爱的绘图程序
主体，a，a:hover{cursor:url（'https://66.media.tumblr.com/7659e714cab33f9d59124f924405e793/tumblr_inline_p7g82dZq1h1r466gz_75sq.png'），汽车
}
身体{
背景图片：url（'img_girl.jpg'）；
背景重复：无重复；
背景附件：固定；
}
帆布{
盒影：-3px2px9px 6px热粉色；
光标：指针；
显示：块；
左边距：自动；
右边距：自动；
边界半径：25px；
}
.工具.颜色字段{
高度：40px；
宽度：40px；
光标：指针；
显示：内联块；
框大小：边框框；
边界半径：50%；
边框：2倍纯白；
自对准：居中；
利润率：10 25px；
显示：块；
}
.颜色场{
显示：块；
左边距：自动；
右边距：自动；
}
.工具{
显示器：flex；
证明内容：中心；
弯曲方向：行；
边缘顶部：15px；
}
.工具.按钮{
自对准：居中；
宽度：100px；
高度：40px；
边框：2倍纯白；
光标：指针；
颜色：白色；
背景#DB7093；
字体大小：粗体；
利润率：0.10px；
显示：块；
}
.按钮{
显示：块；
左边距：自动；
右边距：自动；
}
.颜色选择器{
自对准：居中；
利润率：0.15px；
背景颜色：粉红色；
}
.钢笔系列{
自对准：居中；
边际：o15px；
背景色：#DB7093；
}
撤消
清楚的