0
我不確定佈局如此混亂的CSS出了什麼問題。我已經嘗試了很多方法來解決它,但佈局似乎不是我想要的方式。請檢查HTML和CSS,你可能會有一個想法。CSS - 佈局全搞砸了
我想使它看起來像圖像中的一個,並希望它在移動瀏覽器上是這樣的。
我看到這個問題太多了,但我想在放棄之前嘗試。我希望它像Photoshop一樣簡單。謝謝你的閱讀。
#left {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
padding: 10px 20px;
border-top: 100px solid rgba(1,141,196,1);
border-right: 2px solid rgba(1,141,196,1);
border-bottom: 100px solid rgba(1,141,196,1);
border-left: 2px solid rgba(1,141,196,1);
font: normal 16px/normal "Times New Roman", Times, serif;
color: rgba(255,255,255,0.9);
-o-text-overflow: clip;
text-overflow: clip;
background: rgba(1,141,196,1);
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
\t \t margin-top: 50%;
\t \t margin-bottom: 50%;
}
#left:hover {
border-top: 100px solid rgba(164,215,234,1);
border-right: 2px solid rgba(164,215,234,1);
border-bottom: 100px solid rgba(164,215,234,1);
border-left: 2px solid rgba(164,215,234,1);
background: rgba(164,215,234,1);
}
#right {
float: right;
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
padding: 10px 20px;
border-top: 100px solid rgba(1,141,196,1);
border-right: 2px solid rgba(1,141,196,1);
border-bottom: 100px solid rgba(1,141,196,1);
border-left: 2px solid rgba(1,141,196,1);
font: normal 16px/normal "Times New Roman", Times, serif;
color: rgba(255,255,255,0.9);
-o-text-overflow: clip;
text-overflow: clip;
background: rgba(1,141,196,1);
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
\t margin-top: 50%;
\t \t margin-bottom: 50%;
}
#right:hover {
border-top: 100px solid rgba(164,215,234,1);
border-right: 2px solid rgba(164,215,234,1);
border-bottom: 100px solid rgba(164,215,234,1);
border-left: 2px solid rgba(164,215,234,1);
background: rgba(164,215,234,1);
}
#stop {
display: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
margin: 0 0 0 5px;
border: 1px solid rgb(255,80,80);
-webkit-border-radius: 3px;
border-radius: 50px;
font: normal 18px/normal "Times New Roman", Times, serif;
color: rgba(255, 255, 255, 0.901961);
-o-text-overflow: clip;
text-overflow: clip;
background: rgb(255, 80, 80);
-webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
text-shadow: -1px -1px 0 rgba(15,73,168,0.658824) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
\t position: absolute;
\t margin-top: 30px;
}
#stop:hover {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
#stop:active {
background: rgba(242,188,196,1);
-webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
}
#play {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
border: 1px solid #018dc4;
-webkit-border-radius: 3px;
border-radius: 50px;
font: normal 18px/normal "Times New Roman", Times, serif;
color: rgba(255,255,255,0.9);
-o-text-overflow: clip;
text-overflow: clip;
background: #0199d9;
-webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
position: absolute;
\t margin-top: 30px;
}
#play:hover {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
}
#play:active {
background: #e6eef2;
-webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
}
#startClock {
float: right;
display: block;
}
#stopClock {
display: none;
}
body {
background-color: #f9cf01;
}
#heading {
background: black;
color: #fff;
text-align: center;
text-transform: uppercase;
font-weight: bold;
padding: 1.5em;
}
#startClock {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
border: 1px solid #018dc4;
-webkit-border-radius: 3px;
border-radius: 50px;
font: normal 18px/normal "Times New Roman", Times, serif;
color: rgba(255,255,255,0.9);
-o-text-overflow: clip;
text-overflow: clip;
background: #0199d9;
-webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
margin-left: 5px;
position: absolute;
}
#startClock:hover {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
}
#startClock:active {
background: #e6eef2;
-webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
}
#count {
list-style: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal 61px/1 "Times New Roman", Times, serif;
color: #f9cf01;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-shadow: 4px 4px 6px rgba(0,0,0,0.5) ;
\t -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
}
p {
padding: 10px 10px 10px 10px;
font: 12px/1.5 Georgia, Times New Roman, serif;
}
#stopClock {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
margin: 0 0 0 5px;
border: 1px solid rgb(255,80,80);
-webkit-border-radius: 3px;
border-radius: 50px;
font: normal 18px/normal "Times New Roman", Times, serif;
color: rgba(255, 255, 255, 0.901961);
-o-text-overflow: clip;
text-overflow: clip;
background: rgb(255, 80, 80);
-webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2) ;
text-shadow: -1px -1px 0 rgba(15,73,168,0.658824) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
\t position: absolute;
}
#stopClock:hover {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2) ;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
#stopClock:active {
background: rgba(242,188,196,1);
-webkit-box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
box-shadow: 7px 5px 5px 5px rgba(0,0,0,0.2) ;
}
#minutes{
float: left;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal 20px/1 "Times New Roman", Times, serif;
color: #f9cf01;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
background-color: black;
}
#min{
float: right;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal 25px/1 "Times New Roman", Times, serif;
color: #f9cf01;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-shadow: 4px 4px 6px rgba(0,0,0,0.5) ;
\t -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
\t position: absolute;
margin-left: -100px;
}
p {
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 100px;
max-width: 2000px;
margin: 0 auto;
}
#header {
float: left;
width: 100%;
background: #FF6633;
}
#contentliquid {
float: left;
width: 100%;
}
/*#content {
margin-left: 150px;
margin-right: 150px;
}*/
#leftcolumn {
width: 150px;
float: left;
margin-left:-100%;
}
#rightcolumn {
width: 150px;
height: auto;
float: left;
margin-left: -150px;
}
#footer {
height: 90px;
width: 100%;
background: black;
clear: both;
}
img{
\t width="100%";
\t height="auto";
}
#time {
width: 200px;
height: auto;
margin-left: 46%;
margin-right: auto;
}
#center {
width: 200px;
height: auto;
margin-left: 46%;
margin-right: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header"><div id="heading">Text</div></div>
<div id="contentliquid">
<div id="content">
<img src="http://i68.tinypic.com/24azadh.gif" width="210px" height="210px" >
</div>
</div>
<div id="leftcolumn">
<div id="left"><</div>
</div>
<div id="rightcolumn">
<div id="right">></div>
</div>
<div id="footer">
<div id="count">0</div><br />
<div id="center">
<div id="time">
<div id="min">Mins</div>
<select id="minutes">
<option value="600">10</option>
<option value="300">5</option>
<option value="240">4</option>
<option value="180">3</option>
<option value="120">2</option>
<option value="6" selected="selected">1</option>
</select>
</div>
</div>
<button id=startClock >Start</button><button id=stopClock >Stop</button><input type="button" value="Music OFF" onclick="stop()" id="stop"><input type="button" value="Music ON" onclick="play()" id="play">
</div>
請做檢查的div是否正常關閉和css以及...我認爲這不是那麼 – vignesh
我會檢查一遍..其所以現在困惑..哈哈 –