html5+css+js简单了解

最近敲了敲HTML5的代码，感觉真的是很吸引人的东西，反正我是非常喜欢的，所以想写一点关于HTML的东xi
首先呢我了解的不多，所以也是想写一点点我对它的认识。
说起HTML5是打开Pycharm敲python代码的时候才发现可以编写html5的代码，也是很强大的编辑器了吧。
html5编写起来并没有那么的难，若果没有css色彩和js的动态感觉html5也是特别的单调。还有一点是html编写错误之后是可以运行的，所以要好好且认真的去编写，省的到最后千行代码之中去检查哪个字符的错误，Pycharm可以自动首字母提示代码行，很不错，所以说VS老大，无论现在谁是老大，以后可能Pycharm老二吧，谁让它是python主导呢。

demo.html代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zhangyangDemo</title>

    <link rel="stylesheet prefetch" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
   <link rel="stylesheet" href="css/style.css">


</head>
<body>
<div style="text-align: center;clear: both;">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>

</div>
<aside class="sidebar">
    <div id="leftside-navigation" class="nano">
        <ul class="nano-content">
            <li>
                <a href="demo.html"><i class="fa fa-dashboard"></i><span>^_^</span></a>
            </li>

            <li class="sub-menu">
                <a href="javascript:void(0);"><i class="fa fa-cogs"></i><span>AAAAA</span> <i class="arrow fa fa-angle-right pul-right"></i> </a>
               <ul>
                   <li><a href="ui-alerts-notifications.html" >Alerts & Notifcations></a>
                   </li>

                   <li><a href="ui-pan.html">Panels</a>
                   </li>
                   <li><a href="demo.html">Buttons</a>
                   </li>
                   <li><a href="demo.html">Sliders & Progress</a>
                   </li>
                   <Li><a href="demo.html">Modals & Popups</a>
                   </Li>
                   <li><a href="demo.html">Icons</a>
                   </li>
                   <li><a href="demo.html">Grid</a>
                   </li>

               </ul>
            </li>

        <li class="sub-menu">
            <a href="javascript:void(0);"><i class="fa fa-table"></i><span>BBBBBB</span><i class ="arrow fa fa-angle-right pull-right"></i></a>
             <ul>
                 <li><a href="demo.html">Basic Tables</a>
                 </li>

                 <li><a href="demo.html">Data Tables</a>
                 </li>
             </ul>
        </li>

            <li class="sub-menu">
                <a href="javascript:void(0);"><i class="fa fa fa-tasks"></i><span>ZhangYang</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                <ul>
                    <li><a href="demo.html">ZhangYang</a>
                    </li>
                    <li><a href="demo.html">Work</a>
                    </li>
                    <li><a href="demo.html">Work</a>
                    </li>
                    <li><a href="demo.html">Work</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</aside>

<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>


</body>
</html>

只有html5展示的效果，是很单调的

style.css代码段

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
body {
  color: #5D5F63;
  background: #293949;
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.sidebar-toggle {
  margin-left: -240px;
}
.sidebar {
  width: 240px;
  height: 100%;
  background: #293949;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 100;
}
.sidebar #leftside-navigation ul,
.sidebar #leftside-navigation ul ul {
  margin: -2px 0 0;
  padding: 0;
}
.sidebar #leftside-navigation ul li {
  list-style-type: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar #leftside-navigation ul li.active > a {
  color: #1abc9c;
}
.sidebar #leftside-navigation ul li.active ul {
  display: block;
}
.sidebar #leftside-navigation ul li a {
  color: #aeb2b7;
  text-decoration: none;
  display: block;
  padding: 18px 0 18px 25px;
  font-size: 12px;
  outline: 0;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
.sidebar #leftside-navigation ul li a:hover {
  color: #1abc9c;
}
.sidebar #leftside-navigation ul li a span {
  display: inline-block;
}
.sidebar #leftside-navigation ul li a i {
  width: 20px;
}
.sidebar #leftside-navigation ul li a i .fa-angle-left,
.sidebar #leftside-navigation ul li a i .fa-angle-right {
  padding-top: 3px;
}
.sidebar #leftside-navigation ul ul {
  display: none;
}
.sidebar #leftside-navigation ul ul li {
  background: #23313f;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  border-bottom: none;
}
.sidebar #leftside-navigation ul ul li a {
  font-size: 12px;
  padding-top: 13px;
  padding-bottom: 13px;
  color: #aeb2b7;
}

添加css文件以后的显示，无动态效果。

index.js文件代码

$("#leftside-navigation .sub-menu > a").click(function(e) {
  $("#leftside-navigation ul ul").slideUp(), $(this).next().is(":visible") || $(this).next().slideDown(),
  e.stopPropagation()
})

当然加上js和css的代码，还缺少一个东西那就是js的框架，要不然写的js文件它也不知道找哪个爸爸做依靠呀，

最终展示效果

还是挺炫酷的，大家可以尝试编写一下。
谢谢大家
Thank you

html5+css+js简单了解

猜你喜欢