个人中心
gpt4 book ai didi

javascript - 链接 CSS 时页面崩溃

转载 作者：行者123 更新时间：2023-11-28 10:51:06 25 4
gpt4 key购买 nike

今天我在做一个元素时，我的页面突然崩溃了。它看起来像这样:enter image description here

我直接回到 Dreamweaver 并按 cmd+z 返回一两步。但是根本没发现什么问题。尽管我的页面看起来仍然很糟糕。发生这种情况的那一刻，我使用了一些数据库编码，例如 POST/GET 请求，还有一些 Java 脚本。

我尝试重做我的 CSS 文件，但它仍然无法工作。

这是我在一个页面上的代码，我在其他 2 个页面上也使用了几乎相同的代码。

<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Mountain</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

</head>

<body>

<div id="allcontent">

<div>
 <ul id="cssmenu"><!--Includes menu-->
             <?php include ("menu.php");?>




      </ul>
</div>
<div id="content">

<header><img src="mountain.jpg"></header>
<hr>
<div id="left">

<script>

var thumbs = ["thumb1", "thumb2", "thumb3", "thumb4", "thumb5"];

function myHandler(target, event){
//
// Thumbs management och mousemove
  if(event.type == 'mouseover'){
//
// Clear all thumbs
    for( var count in thumbs ){
      $('#'+thumbs[count]).attr("src","stjärna.png");
    }   
//
// Show thumbs_up upto mouse position
    for( var count in thumbs ){
      $('#'+thumbs[count]).attr("src","star-iconyellow.png");
      if(thumbs[count] == target.id) break;
    }
  }
}

$("#thumb1").live('mouseover click', function(event){
  myHandler(this, event);
});
$("#thumb2").live('mouseover click', function(event){
  myHandler(this, event);
});
$("#thumb3").live('mouseover click', function(event){
  myHandler(this, event);
});
$("#thumb4").live('mouseover click', function(event){
  myHandler(this, event);
});
$("#thumb5").live('mouseover click', function(event){
  myHandler(this, event);
});

$("#rating-area").live('mouseleave', function(){
// Clear all thumbs when mouse leaves the rating area
    for( var count in thumbs ){
      $('#'+thumbs[count]).attr("src","stjärna.png");
    } 
});

</script>

            <?php
            if (isset($_FILES['file'])) {

        //Kontrollerar att uppladdad bild är av rätt typ (JPEG) och att storleken
            //inte överstiger en viss storlek - i det här fallet väldigt stor...
                if ((($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] ==
                        "image/pjpeg")) && ($_FILES["file"]["size"] < 1000000)) {
                        if ($_FILES["file"]["error"] > 0) {
                            echo "Errormessage: " . $_FILES["file"]["error"] . "<br />";
                        } else {

                            //Kontrollerar att en bild med samma namn inte redan finns i 
                            //katalogen dit bilden skall flyttas
                            if (file_exists("bilder/" . $_FILES["file"]["name"])) {
                                echo $_FILES["file"]["name"] . " alrady exists. Pick another name please.";

                            } else {

                            //Flyttar filen till rätt katalog      
                            move_uploaded_file($_FILES["file"]["tmp_name"], "bilder/" . $_FILES["file"]["name"]);

                            //Spar namn på originalbild och miniatyr i variabler
                            $storedfile = $_FILES["file"]["name"];
                            $thumbnail = "thumb_" . $_FILES["file"]["name"];

                            //Maximal storlek i höjd och bredd för miniatyr
                            $width_thumbnail = 250;
                            $height_thumbnail = 80;


                            //Läser in originalstorleken på den uppladdade bilden, och spar 
                            //den i variablerna width_orig, height_orig
                            list($width_thumbnail_orig, $height_thumbnail_orig) = getimagesize('bilder/' . $storedfile);

                            //Räknar ut förhållandet mellan höjd och bredd (sk "ratio")
                            //Detta för att kunna få samma höjd- breddförhållande på miniatyren
                            $ratio_orig = $width_thumbnail_orig / $height_thumbnail_orig;                                      

                            //Räknar ut storlek på miniatyr
                            if ($width_thumbnail / $height_thumbnail > $ratio_orig) {
                                $width_thumbnail = $height_thumbnail * $ratio_orig;
                                $height_thumbnail = $width_thumbnail / $ratio_orig;
                            } else {
                                $height_thumbnail = $width_thumbnail / $ratio_orig;
                                $width_thumbnail = $height_thumbnail * $ratio_orig;
                            }

                            //Skapar en ny bild miniatyrbild med rätt storlek
                            $image_p = imagecreatetruecolor($width_thumbnail, $height_thumbnail);
                            $image = imagecreatefromjpeg('bilder/' . $storedfile);
                            imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width_thumbnail, $height_thumbnail, $width_thumbnail_orig, $height_thumbnail_orig);

                            //Sparar miniatyr
                            imagejpeg($image_p, 'bilder/' . $thumbnail);

                            echo "<h3>Image uploaded</h3>\n";
                            echo "<a href='bilder/$storedfile' title='Öppna originalbild'><img src='bilder/thumb_$storedfile' alt='$storedfile' /></a>\n";

                            }
                        }
                    } 
                    else {
                        // Här hamnar man om det inte är JPEG/bildfil för stor
                        echo "No image larger than 500kb.";
                    }
            } // Slut på isset(FILE)
            ?>


    </div><!-- /uploadform -->


</div>
<div id="right">



<h4>Mountains</h4>
<p>Here you will find all the pictures uploaded that contains a mountain in it "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>


<div id="mitten">

<p> <a href="mountain.php?order=uppladdare">Uploader</a>  -  <a href="mountain.php?order=date">Date</a></p>

<div id="uploadform">
    <form action="mountain.php" method="post" enctype="multipart/form-data">
        <input type="hidden" name="MAX_FILE_SIZE" value="500000" />
        <label for="file"><strong>Filename:</strong></label>
        <input type="file" name="file" id="file" />
        <input type="text" name="uppladdare" placeholder="Uploader:" title="What's your name?"/>
        <input type="text" name="titel" placeholder="Title" title="Give a title to your piece of work"/>
        <input type="text" name="history" placeholder="History" title="Tell us the story behind your image. Where is it taken, etc."/>
        <input type="submit" name="submit" value="Upload" />
    </form>
<!--Function adding tooltip to input-->

    <script>
        $(function() {
            $(document).tooltip();
        }); 
    </script>
<?php
//Send data to databae
if (isset($_POST['submit'])) {
    $dbcon = mysqli_connect("localhost", "user1", "test1", "tutorial");

    $stored_file = $_FILES["file"]["name"];
    $file = "";

    $query = "INSERT INTO mountains (filname, uppladdare, titel, History)
VALUES ('$stored_file','$_POST[uppladdare]','$_POST[titel]','$_POST[history]')";
    if (!mysqli_query($dbcon, $query))
        ;
}
?>
<?php

error_reporting(0);
$order = "";

if ($_GET['order']) {
    if ($_GET['order'] == "date") {
        $order = " ORDER BY date DESC";
    }
}
if ($_GET['order']) {
    if ($_GET['order'] == "uppladdare") {
        $order = " ORDER BY uppladdare";
    }//Connections to database
}

$dbcon = mysqli_connect("localhost", "user1", "test1", "tutorial");
$selectall = "SELECT * FROM mountains $order";
$result = mysqli_query($dbcon, $selectall);

while ($row = mysqli_fetch_array($result)) {

    $information = ' Titel: ' . $row['titel'] . ' Uppladdare: ' . $row['uppladdare'] . ' Filnamn: ' . $row['filname'] . ' History: ' . $row['History'] . ' Datum: ' . $row['date'];

    //Echo out the form and information gathered from the database
    echo "<strong>Title: </strong>" . $row['titel'] . "<br>";
    echo "<strong>Uploader: </strong>" . $row['uppladdare'] . "<br>";
    echo "<strong>Imagename: </strong>" . $row['filname'] . "<br>";
    echo "<strong>History: </strong>" . $row['History'] . "<br>";
    echo "<strong>Date: </strong>" . $row['date'] . "<br>";
    echo "<br>";

    $original = $row['filname'];

    echo "<a class='fancybox' rel='massoravbilder' href='bilder/$original'> <img src='bilder/thumb_" . $row['filname'] . "' alt='$information' /></a>" . "<br>";
}
?>





</div>

<script>
$(document).ready(function()
 {
   $('li a').click(function(){
        $.get($(this).prop('href'), function(data){
            $('#allcontent').html(data);
        });
        return false;
    });
 });
 </script>

</div>
</div>
</div>
</body>
</html>

我的 CSS 文件如下所示:

body    {
    background-color:white;
    color:black;



}

#content{
    width:800px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}


#left   {
    float:left;
    width:350px;
    margin:10px;

}
#right  {
    float:right;
    width:350px;
    margin:10px;
    text-align:left;
}

h3  {
    text-align:center;
}

header  img {
    margin-left:auto;
    margin-right:auto;
    display:block;
}

#cssmenu    li  {
    list-style-type:none;

}
#cssmenu    li  a   {
    float:right;
    display:inline-block;
    text-decoration:none;
    color:grey;
    margin:4px;


}

#cssmenu    a:hover {
    background-color:grey;
    color:white;

}

.inlogg {
    margin:0;
    padding:0;


}

#mitten {
    width:200px;

}

#footer

{ 
width: 100%;
height:20px;
background-color:#999;
position:fixed;
text-align:center;
top:97.5%;
border-top: solid #000;
}

img:nth-child(1){
    width: 10px;
    height: 15px;
  }
  img:nth-child(2){
    width: 15px;
    height: 20px;
  }
  img:nth-child(3){
    width: 20px;
    height: 25px;
  }
  img:nth-child(4){
    width: 25px;
    height: 30px;
  }

  div {
// Rounded corners with border and padding of the rating area div
    -moz-border-radius: 15px;
    webkit-border-radius: 15px;
    border-radius: 15px;
    position: relative; 
    top: 100px; 
    left: 200px; 

    border: 2px solid grey; padding:10px; 
  }
  .shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
  }

  #resultat{
      width:100px;
      height:100px;
      position:relative;
  }

正如我所说，它起作用了，但突然就不起作用了。

我已经坐了将近 6 个小时试图解决为什么我现在不能链接 CSS 文件。我已经删除了 head 部分中的其他链接/脚本，并仅尝试使用此 CSS 链接。但没有任何效果。

请帮我解决这个问题。

如果我忘记了什么，请告诉我。

最佳答案

删除“allcontent”div 之后的 DIV。布局回到可识别的东西。应该是:

<div id="allcontent">

 <!-- REMOVE THIS  <div>   -->

 <ul id="cssmenu"><!--Includes menu-->
             <?php include ("menu.php");?>

可能存在一些布局问题。尝试通过这个运行它:

http://validator.w3.org/

关于javascript - 链接 CSS 时页面崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22788383/

25 4 0
文章推荐： css - SVG url 的 currentColor 继承
文章推荐： html - 如果我们在 html 和 css 代码中应用一些属性，哪个将首先应用，哪个将最终应用
文章推荐： width - CSS百分比宽度减去固定宽度
文章推荐： css - 选择另一个元素内的第一个元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com