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()
})