最近敲了敲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: #;

font-family: 'Open Sans', sans-serif;

padding: ;

margin: ;

text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased;

}

.sidebar-toggle {

margin-left: -240px;

}

.sidebar {

width: 240px;

height: %;

background: #;

position: absolute;

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

z-index: ;

}

.sidebar #leftside-navigation ul,

.sidebar #leftside-navigation ul ul {

margin: -2px  ;

padding: ;

}

.sidebar #leftside-navigation ul li {

list-style-type: none;

border-bottom: 1px solid rgba(, , , 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  18px 25px;

font-size: 12px;

outline: ;

-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: ;

margin-left: ;

margin-right: ;

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文件它也不知道找哪个爸爸做依靠呀，

最终展示效果

html5+css+js简单了解的更多相关文章

  1. HTML5+CSS+JS 贪吃蛇demo

    我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...

  2. CSS、HTML5、JS

    [att*=value]{}包含value属性的所有元素样式.[id*=div]{} a[href$=jpg]:after{} [att^=value]{}开头字符包含value属性的所有元素样式 [ ...

  3. Html5 和 CSS的简单应用

    本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...

  4. day 32 css后续补充以及js 简单入门

    前情提要: 利用html 和css ,js 模拟小米的官网(待做) 一:第一个sj利子 <!DOCTYPE html> <html lang="en"> & ...

  5. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  6. Web前端：HTML~CSS~JS

    网页主要由3部分组成:结构.表现.行为.目前网页的新标准是W3C,模式是HTML.CSS.JavaScript,这是前端开发最核心的3个技术.前2个技术的最新版本分别为HTML5.CSS3.  “HT ...

  7. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

随机推荐

  1. 基于STM32F429，Cubemx的SAI音频播放实验

    书接上文:https://www.cnblogs.com/feiniaoliangtiangao/p/11060674.html 和 https://www.cnblogs.com/feiniaoli ...

  2. .netcore 中使用开源的AOP框架 AspectCore

    AspectCore Project 介绍 什么是AspectCore Project ? AspectCore Project 是适用于Asp.Net Core 平台的轻量级 Aop(Aspect- ...

  3. SQLi-LABS Page-3 (order by injections) Less-46-Less-53

    关于order by 注入原理讲解 注入原理 1. 测试 ?sort=1 desc--+?sort=1 asc--+ 显示结果不同,说明可以注入 desc是 descend 降序意思 asc 是 as ...

  4. Android 视频播放器 (四)：使用ExoPlayer播放视频

    一.简介 ExoPlayer是一个Android应用层的媒体播放器,它提供了一套可替换Android MediaPlayer的API,可以播放本地或者是线上的音视频资源.ExoPlayer支持一些An ...

  5. U盘的几种分类及格式

    u盘常见的几种分类: 1.按u盘材质来分,可以分为金属u盘.塑料u盘.软胶u盘.皮革u盘.木质u盘.珠宝u盘等.这些主要是考虑u盘本身外壳所用材质的. 2.从u盘容量来分,就是8GB.16GB.32G ...

  6. Playbook剧本初识

    目录 1.Playbook剧本初识 2.Playbook变量使用 3.Playbook变量注册 4.Playbook条件语句 5.Playbook循环语句 6.Playbook异常处理 7.Playb ...

  7. MongoDB的模糊查询操作(类关系型数据库的 like 和 not like)

    1.作用与语法描述 作用: 正则表达式是使用指定字符串来描述.匹配一系列符合某个句法规则的字符串.许多程序设计语言都支持利用正则表达式进行字符串操作.MongoDB 使用 $regex 操作符来设置匹 ...

  8. python selenium 处理时间日期控件

    # -*- coding: utf-8 -*- from selenium import webdriverfrom time import sleep driver = webdriver.Fire ...

  9. js如何手写一个new

    手写new 看一下正常使用new function Dog(name){ this.name = name } Dog.prototype.sayName = function(){ console. ...

  10. Socket抽象层

    目录 一.Socket抽象层 一.Socket抽象层 我们知道两个进程如果需要进行通讯最基本的一个前提是能够唯一标示一个进程,在本地进程通讯中我们可以使用PID来唯一标示一个进程,但PID只在本地唯一 ...