如何改变手风琴的背景颜色

时间:2017-11-26 02:55:44

标签: javascript html css

我是javascript的新手并尝试用jquery制作手风琴,但它似乎改变了div的背景颜色,无论css中背景颜色的设置是什么,手风琴似乎都没有响应。< / p>

这是html代码

<!doctype html>
<html>
<head>
<title>dreampage    </title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">    </script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">    </script>

</head>

<body>


<div class="newsbackground">


<div class="newsfeed">

这是我操纵成为手风琴的div     

<div class="fake_background_post">
<h1 class="poster">
<p class="post_text">Share your feeling to us!     </p>
</h1>


</div>

<div class="post_panel">
<form action="index.php" method="get" name="post">

<img class="upload_video_and_picture" src="./img/logo/camera.png" />
<p class="upload_video_and_picture_post_text">    <b>Upload Pictures or Video    </b>    </p>

<textarea placeholder="say something!!!" class="post_content" name="post_content" cols="60%" >     </textarea>



<div class="feeling">
<p class="feeling_text">FEELING!!!    </p>
<div class="feeling_logo">
<img class="happy" src="./img/logo/happy-ticon.png" />
<img class="excited" src="./img/logo/excited.png" />
<img class="sad" src="./img/logo/sad-ticon.png" />
<img class="mad" src="./img/logo/mad-ticon.png" />
<img class="bored" src="./img/logo/bored-ticon.png" />
</div>
</form>

</div>

</div>

</div>



<script type="text/javascript">

$(".post").accordion ({
animate: 1500,
active: 1,
coolapsible: true,
event: "click",
heightstyle: "content",
}); 
</script>

</body>
</html>

这是css代码

* {margin: 0px;    
padding; 0px;    

font-family:comic sans ms;    


}    


.post_content {    
    border: 1px solid #472b1d;
     background-color: #ebe7db;
     color: #472b1d;
     width: 99%;
}    


.post_panel {    
    position: relative;
    top: 10px;
    left:  0px;
    height: 200px;
    width: 87.5%;
     background-color: #d2c195;
     margin-bottom: 50px;
}    


.post_panel img {    
    position:relative;
    width: 30px;
    height: 20px;


}    
.upload_video_and_picture {    
    position:relative;
    top: 8px;
    left: 10px;

}    
.upload_video_and_picture_post_text {    
    position:relative;
    top: -20px;
    left: 50px;
}    
.feeling {    
    position:relative;
    top: 8px;
    left: 10px;

}    

.feeling img {    
    position:relative;
    top: -21px;
    left:100px;

}    
    this is the the css code where the background color doesn't seems to respond
.post {    
position: relative;    
    top: 20px;
    left:  220px;

    padding-bottom: -200px;
     margin-bottom: 120px;
    width: 48%;


     background-color: #d2c195;

}    


.post > .fake_background_post {    


     background-color: #d2c195;

}    


.post_text {    
position: relative;    
    top: -23px;
    left:  110px;
    font-size: 70%;



     # background-color: #d2c195;

}    

.fake_background_post {    
    position: relative;
width: 100%;    
height: 70px;    
height: 33px;    
    left: 0px;
    top: 00px;
     background-color: #d2c195;
    margin-bottom: 10px;

    border: 2px solid #472b1d;
    border-radius: 20px;
    transition:  0.5s;
}    

.fake_background_post:hover {    

    background-color: #472b1d;
    color: #d2c195;

}    

0 个答案:

没有答案