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: #;
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简单了解的更多相关文章
- HTML5+CSS+JS 贪吃蛇demo
我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...
- CSS、HTML5、JS
[att*=value]{}包含value属性的所有元素样式.[id*=div]{} a[href$=jpg]:after{} [att^=value]{}开头字符包含value属性的所有元素样式 [ ...
- Html5 和 CSS的简单应用
本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...
- day 32 css后续补充以及js 简单入门
前情提要: 利用html 和css ,js 模拟小米的官网(待做) 一:第一个sj利子 <!DOCTYPE html> <html lang="en"> & ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- Web前端:HTML~CSS~JS
网页主要由3部分组成:结构.表现.行为.目前网页的新标准是W3C,模式是HTML.CSS.JavaScript,这是前端开发最核心的3个技术.前2个技术的最新版本分别为HTML5.CSS3. “HT ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
随机推荐
- mysql的repeat()函数
用来复制字符串,如下'ab'表示要复制的字符串,2表示复制的份数 mysql> select repeat('ab',2); +----------------+ | repeat('ab',2 ...
- 利用Python制作一个只属于和她的聊天器,再也不用担心隐私泄露啦!
------------恢复内容开始------------ 是否担心微信的数据流会被监视?是否担心你和ta聊天的小秘密会被保存到某个数据库里?没关系,现在我们可以用Python做一个只属于你和ta的 ...
- C#控制内插字符串的格式
C#6.0推出了内插字符串 结果展示: 内插表达式字段宽度和对齐方式: 结果展示:(+/-代表右对齐.左对齐,数字表示显示宽度)
- 松软科技带你学开发:SQL--FIRST() 函数
FIRST() 函数(原文链接 松软科技:www.sysoft.net.cn/Article.aspx?ID=3731) FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER ...
- Node JS爬虫: 阮老师网站背景图
小白,轻喷,本文教你三分钟入门爬虫 前言 有一天发现,阮一峰老师的博客图片很好看,想收藏一下,因为几百张,一张张下载太慢,朋友推荐了个谷歌插件(Fatkun)确实挺好用的,这之后就对爬虫有了兴趣,这个 ...
- js截取两个字符串之间的子字符串
// 截取两个字符串之间的子字符串,返回第一个 function subStringOne(text, begin, end) { var regex; if (end == '\\n') regex ...
- 团队展示&选题
团队展示 1.队名:螺旋升天队 2.队员学号: 李光证 3117004660 (队长) 卢俊杰 3117004662 吴子昊 3117004671 陈浩民 3117004646 陈俊铭 3117004 ...
- 中间人攻击,HTTPS也可以被碾压
摘要: 当年12306竟然要自己安装证书... 原文:知道所有道理,真的可以为所欲为 公众号:可乐 Fundebug经授权转载,版权归原作者所有. 一.什么是MITM 中间人攻击(man-in-the ...
- PHP 部分语法(二)
array() 创建数组: 1.数值数组:带数字 ID 键的数组 2.关联数组:带有指定键的数组,键关联一个值 3.多维数组:包含一个或多个数组的数组 $arr = array("Hello ...
- Redis—数据操作
redis是key-value的数据,所以每个数据都是一个键值对. 数据操作的全部命令,可以查看中文网站. 键的类型是字符串 值的类型分为五种: 字符串string 哈希hash 列表list 集合s ...