Difference between revisions of "Team:Tongji-Software"

(Blanked the page)
Line 1: Line 1:
−
 
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>CSS3点击显示</title>
 +
<style>
 +
*{ margin:0; padding:0; }
 +
html{ height:100%; }
 +
p{ padding:10px 0; }
 +
body{ min-height:100%; font-family:arial; position:relative; }
 +
body.sideMenu{ margin:0; -webkit-transform:none; transform:none; }
 +
#footer {
 +
position:relative;
 +
bottom:0; left:0;
 +
width:100%;
 +
height:48px;
 +
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
 +
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
 +
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
 +
padding:0;
 +
border-top:1px solid #444; transition:0.25s ease-out; -webkit-transition:0.25s ease-out;
 +
}
 +
#sideToggle{ display:none; }
 +
#sideToggle:checked + aside{ left:0; }
 +
#sideToggle:checked ~ #wrap{ padding-left:220px; }
 +
#sideToggle:checked ~ #footer{margin-left:200px; }
 +
body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }
 +
body > aside > h2{ color:#FFF; text-align:center; font-weight:normal; padding:10px; }
 +
#wrap{ margin-left:20px; padding:10px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; }
 +
  #wrap > label{ display:inline-block; }
 +
    #wrap > label{
 +
      background:#f1103a;
 +
      border-radius:50px;
 +
      color: #FFF;
 +
      cursor: pointer;
 +
      display: block;
 +
      font-family: Courier New;
 +
      font-size: 25px;
 +
      font-weight: bold;
 +
      width: 30px;
 +
      height: 30px;
 +
      line-height: 35px;
 +
      text-align: center;
 +
      text-shadow: 0 -4px;
 +
    }
 +
    #wrap > label:hover{ background:#000; }
 +
 +
</style>
 +
</head>
 +
<body>
 +
<input type='checkbox' id='sideToggle'>
 +
<aside><h2>Side Menu</h2></aside>
 +
<div id='wrap'>
 +
<label id='sideMenuControl' for='sideToggle'>=</label>
 +
<p>HTML5/CSS3点击显示侧边框  </p>
 +
</div>
 +
<div id="footer"></div>
 +
</body>
 +
</html>

Revision as of 08:39, 7 October 2018

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS3点击显示

HTML5/CSS3点击显示侧边框