Fatal编程技术网

Javascript PHP SQL Post部分

javascript php sql

Javascript PHP SQL Post部分,javascript,php,sql,css-grid,Javascript,Php,Sql,Css Grid,[图片一][2] [图片二][3] 你好!！我正在尝试制作一个博客文章部分，如图1所示。它由一个CSS网格组成，内部有四个div，每个div是一个单元格，占据包装器元素的1fr，内部有一个img、一个h6和p元素，如图1所示。所有这些都放在Javascript幻灯片中，这意味着幻灯片的每个幻灯片都由CSS网格组成 我的问题/目标：我想创建一个管理站点，在该站点中通过表单上传新的图像和文本，并将新的div/单元格添加到网格中，使以前的网格单元格移动并占据幻灯片中的其他幻灯片。这有点像在手机中，你有

[图片一][2]

[图片二][3]

你好!！我正在尝试制作一个博客文章部分，如图1所示。它由一个CSS网格组成，内部有四个div，每个div是一个单元格，占据包装器元素的1fr，内部有一个img、一个h6和p元素，如图1所示。所有这些都放在Javascript幻灯片中，这意味着幻灯片的每个幻灯片都由CSS网格组成

我的问题/目标：我想创建一个管理站点，在该站点中通过表单上传新的图像和文本，并将新的div/单元格添加到网格中，使以前的网格单元格移动并占据幻灯片中的其他幻灯片。这有点像在手机中，你有多个屏幕来放置应用程序，当你添加一个新应用程序时，另一个应用程序会进入自动创建的新屏幕。希望这个类比能澄清问题

我的问题是：是否可以在Css网格中执行此操作，或者网格单元是否固定到它们的位置？如果可能的话，有谁能给我一个提示，告诉我如何从这里开始？我真的被卡住了。我想知道通过什么样的语言我可以实现添加一个新的div，使其他div进入新的幻灯片。是PHP吗

我希望有人有这个答案，因为我不能从这一点继续前进。多谢各位

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
      #wrapper {
    width: 2200px; /* size of the slider per number of slides */
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: blue;
  text-align: center;
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: red;
  text-align: center;
}
.div3 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: violet;
  text-align: center;
}
.div4 {
  grid-area: 2 / 1 / 3 / 2;
  background-color: orange;
  text-align: center;
}

.div1 img {
  max-width: 100%;
  max-height: 50px;
}

.div2 img {
  max-width: 100%;
  max-height: 50px;
}

.div3 img {
  max-width: 100%;
  max-height: 50px;
}

.div4 img {
  max-width: 100%;
  max-height: 50px;
}

#itemOne {
    background-color: #ADFF2F;
    background-image: url("");
}

#itemTwo {
    background-color: #FF7F50;
    background-image: url("");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("");
}
#navLinks {
    text-align: center;
    width: 550px;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 5px;
            border-radius: 50%;
            border: black 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }
    </style>
  </head>
  <body>
    <div id="contentContainer">
      <div id="wrapper">





        <div id="itemOne" class="content">

            <div class="div1">
              <a href="">
                <img src="">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemTwo" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemThree" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemFour" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>







      </div>
    </div>
    <div id="navLinks">
      <ul>
          <li class="itemLinks" data-pos="0px"></li>
          <li class="itemLinks" data-pos="-550px"></li>
          <li class="itemLinks" data-pos="-1100px"></li>
          <li class="itemLinks" data-pos="-1650px"></li>
      </ul>
    </div>
    <script>
      // just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    var position = link.getAttribute("data-pos");

    var translateValue = "translate3d(" + position + ", 0px, 0)";
    wrapper.style.transform = translateValue;

    link.classList.add("active");
}
    </script>
  </body>
</html>´´´

  [2]: https://i.stack.imgur.com/6q0I8.png
  [3]: https://i.stack.imgur.com/jlOm8.png


#内容容器{
宽度：550px；
高度：350px；
边框：5px黑色实心；
溢出：隐藏；
}
#包装纸{
宽度：2200px；/*每张幻灯片的滑块大小*/
变换：translate3d（0,0,0）；
过渡性质：变换；
过渡时间：0.5s；
过渡定时功能：易进易出；
转换延迟：0s；
}
.内容{
浮动：左；
宽度：550px；
高度：350px；
空白：正常；
背景重复：无重复；
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（2，1fr）；
栅柱间隙：10px；
网格行间距：10px；
}
.1分部{
网格面积：1/1/2/2；
背景颜色：蓝色；
文本对齐：居中；
}
.第2分部{
网格面积：1/2/2/3；
背景色：红色；
文本对齐：居中；
}
.第3分部{
网格面积：2/2/3/3；
背景色：紫罗兰色；
文本对齐：居中；
}
.第4分部{
网格面积：2/1/3/2；
背景颜色：橙色；
文本对齐：居中；
}
.1分部{
最大宽度：100%；
最大高度：50px；
}
.第2分部{
最大宽度：100%；
最大高度：50px；
}
.第3分部{
最大宽度：100%；
最大高度：50px；
}
.第4分部{
最大宽度：100%；
最大高度：50px；
}
#第一项{
背景色：#ADFF2F；
背景图片：url（“”）；
}
#项目二{
背景色：#FF7F50；
背景图片：url（“”）；
}
#项目三{
背景色：#1E90FF；
背景图片：url（“”）；
}
#项目四{
背景色：#DC143C；
背景图片：url（“”）；
}
#导航链接{
文本对齐：居中；
宽度：550px；
}
#导航链接{
边际：0px；
填充：0px；
显示：内联块；
边缘顶部：6px；
}
#纳武利{
浮动：左；
文本对齐：居中；
利润率：10px；
列表样式：无；
光标：指针；
背景色：#中交；
填充物：5px；
边界半径：50%；
边框：黑色5px实心；
}
#Navul li:悬停{
背景色：#FFFF00；
}
#Navul li.active{
背景色：#333333；
颜色：#FFFFFF；
轮廓宽度：7px；
}
#导航链接ul li.活动：悬停{
背景色：#4848；
颜色：#FFFFFF；
}

    

  • 

  • 

  • 

  • 


//只是询问DOM…就像一个老板！
var links=document.querySelectorAll（“.itemLinks”）；
var wrapper=document.querySelector（“包装器”）；
//activeLink提供指向当前显示项目的指针
var-activeLink=0；
//设置事件侦听器
对于（变量i=0；i