发表于： 2018-11-21 22:24:56

1 739

今天完成的事情：今天完成了任务12，接受了任务13，目前的话任务13正在解决左侧滑动栏的问题，
明天计划的事情：明天的计划把这个侧面滑动的给解决了，目前的话自己已经找到样式自己正在尝试修改
遇到的问题：

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:600px;
            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">
    fdsfjdhsjkflhjdkslhfjklhdsjklhfjkdlshjklds
</div>
</body>
</html>