html5+css+js簡單瞭解
阿新 • • 發佈:2018-12-23
- 最近敲了敲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