html5+css+js简单了解

时间 2019-11-29

标签 html5+css+js html css 简单了解栏目 HTML 繁體版

原文原文链接

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

<!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***展现的效果，是很单调的css

style.css代码段html

@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文件***之后的显示，无动态效果。html5

index.js文件代码java

$("#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文件它也不知道找哪一个爸爸作依靠呀，python

最终展现效果jquery