喵宅苑 MewoGarden × 技术宅社区II | Z站 Z Station 来喵宅苑，有可爱的男孩子

正文

作者:4原创教程

{"name":"4原创教程","sizeType":1,"icon":"","order":9999,"description":"","comp":""}

作者:枫色

简单的调用echarts的仪表盘插件，通过html与JavaScript做了个计算体脂率的网页，闲着无聊的可以去测一测看看身体情况哟。【如果要简单的使用echarts的话还是可以勉强作为参考的2333 效果：戳我(＾Ｕ＾)ノ~ＹＯ源码：【github】见github

查看回复

怒写弱渣心酸前端学习血路&棒棒前端课程推荐

作者:flysometimes

[i=s] 本帖最后由绯色の胖子于 2015-5-27 13:38 编辑大概已经没人记得我了。。。太久没在基宅发帖了【没错，不误正业的去学习奇怪的东西了！`4` 作为一个前端学习菜鸟，在经历了与前端学习漫长的磨合期后。。。终于摸出了点门道_(:з」∠)_ 因为本专业不是计算机【不好意思文科生。。。#17x，在兼顾自身专业的同时还要学前端。。。只能选了在线学习这种形式相对方便。。。也是走了很多弯路。。。想来这里发一下自己觉得还不错的线上资源，也想和大家一起交流学习心得。。。各位基宅大牛还请多多指教哦(*゜ロ゜)ノ -----------------------------------------------------------我是萌萌的课程推荐分割线------------------------------------------------------------

1.《前端开发工程师》微专业：

http://mooc.study.163.com/smartSpec/detail/12001.htm 看下来课程介绍，基本上涵盖了基础知识、专业难点、实践项目几块内容，已经比较全面了。 `5`

其中大部分课程是前端的基础知识，对一些毫无前端经验的想跨专业学习的，或者基础知识不够扎实的人来说是快速入门的好选择。 “产品前端架构”是很多人都注意到了一点，这个市面上一般前端培训都没有这块内容，而这个课程会结合网易各类产品的开发实践经验来讲，也算是课程亮点了吧。授课团队，有三个都是网易杭州研究院里面title比较高的一线资深工程师，参与过各种网易系产品项目的研发，履历比较耀眼。还有一个是浙大计算机学院的翁恺老师，学习计算机的学生都知道翁恺老师的教学魅力，讲解上也很细致，是比较早就开始通过在线教育平台进行教学的老师，业界名声不小。授课团队是业界经验+教学名师的结合，像我这样学习前端找工作功利性比较强的比较合适。

缺点是，说不出来。。。`89`

因为还没开课。。。只是报了名而已-。- {:43_8915:}

2.百度前端技术学院： http://ife.baidu.com/ BAT的技术毋庸置疑，带着BAT光环的产品对我这种新人来说诱惑不要太大 !10~

钦慕于BAT的名声和技术，被朋友怂恿一起去报了狼厂的百度前端技术学院，报名时主要看中很多百度产品的技术大咖亲自参与授课，想着就算是听听这些一线人员侃侃项目经验也不错，结果发现课程难度有点够呛。。。常常讲着讲着就突然云里雾里了，又不好意思每次都去骚扰其他专业的学霸，学渣战战兢兢坚持学了半个月就缴械放弃了。。。

`35`

3.慕课网：

http://www.imooc.com/course/list?c=fe 专攻计算机在线学习的平台，光是前端开发就有近百门课程，很多高手都在里面默默学习，可以任自己兴趣涉猎喜欢的内容。

而且，免费！！！免费！！！免费！！！（重要的事情说三遍）`52`

没有预算的同学们去关注吧！！！缺点是内容深度和广度还不够，作为基础知识的预习或是平时课余浏览比较好。 4.接下来的就是一些参考性的了 w3school： http://www.w3school.com.cn/ w3cplus ：http://www.w3cplus.com/ 上面有许多优质案例，而且，中文！！前端网址导航whycss ：http://www.whycss.com/ 找不到方向的时候，就去这里吧，各种方向类型，应有尽有~ `91`

Div.IO ：http://div.io/node/javascript 里面有许多前端大牛潜伏 ----------------------------------我是萌萌的正文结束分割线------------------------------------------------- 呜啊如果不是条件限制，也想去参加360前端星计划（360HTML5高手特训营）这样的实地培训，但得去帝都参加培训，就算学费全免，吃住都是一大笔费用，学生党实在负担不起，也做罢了。还是跪求基宅的各位给我推荐些除了上面的优质前端课程或者网站吧~ 对我就是这么想挑战自己的极限。。。#7172!

查看回复

【原创】HTML5教程+React Native跨平台开发

作者:山海不可平

HTML5教程+React Native跨平台开发[连载] HTML5教程+React Native跨平台开发[连载] 讲师：李南江 ●01-HTML基础知识 ●02-认识HTML ●03-基础标签 ●04-列表标签 ●05-表格标签 ●06-表单标签 ●07-多媒体标签链接我会放在下楼目前教程还在连载，更新了以后UP主会PO上来的~ 希望大家喜欢o(*////▽////*)q

查看回复

这几天写的一个日期选择器

作者:玩不坏的小黑

[i=s] 本帖最后由玩不坏的小黑于 2016-7-26 12:23 编辑先上效果图,这个效果是美工在设计网站上看到的[attach]462393[/attach] 设计出自这里美工出了一版比较小的精简设计 [attach]462392[/attach] 成品效果图

查看回复

本帖相关内容已删原内容：Linux服务器DNS功能的实现

作者:visit2011

[i=s] 本帖最后由 visit2011 于 2016-4-30 20:49 编辑本帖已删，原内容由于特殊原因，特此删除（原内容：Linux服务器DNS功能的实现）

查看回复

ie兼容解决方案

作者:sfdfdgfdghtdh

1，ie8 不支持li：first 2，ie8 不支持fadein（）；解决方法：重写fadein（） <script type="text/javascript"> jQuery.fn.fadeIn = function(speed, callback) { return this.animate({ opacity: 'show' }, speed, function() { if (jQuery.browser.msie) this.style.removeAttribute('filter'); if (jQuery.isFunction(callback)) callback(); }); }; jQuery.fn.fadeOut = function(speed, callback) { return this.animate({ opacity: 'hide' }, speed, function() { if (jQuery.browser.msie) this.style.removeAttribute('filter'); if (jQuery.isFunction(callback)) callback(); }); }; jQuery.fn.fadeTo = function(speed,to,callback) { return this.animate({ opacity: to }, speed, function() { if (to == 1 && jQuery.browser.msie) this.style.removeAttribute('filter'); if (jQuery.isFunction(callback)) callback(); }); }; </script> 参考资料：http://www.gaoxueping.com/archives/304 3，背景透明，文字不透明的兼容写法： .a{background:rgba(81, 180, 71,0.77); } .a p{color: #FFFFFF;} @media \0screen\,screen\9 {/* 只支持IE6、7、8 */ .a{ background:#51b447; filter:Alpha(opacity=77); *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */ } .a p{ position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */ } } 参考资料：http://www.cnblogs.com/PeunZhang/p/4089894.html

查看回复

不想代码编写PHP？没关系！用Dreamweaver来完成PHP！

作者:kyomini

[i=s] 本帖最后由 kyomini 于 2015-3-20 08:08 编辑 ~37! 制作教程我想了很久，犹豫出哪种形式比较好？书本形式还是某云网站录像视频形式？想了很多天决定自己出手把手的的网站出教程。当然，这并不是普通的教程，而是帮助你如何快速学习PHP、掌握PHP开发窍门，立即让你成为PHP入门实质性的高手。当然不限任何专业，除了PHP高级工程师外，无论你是设计师也好，前端也好，初学者不懂代码也好，只要你想拥有自己的后台程序愿望：）开始学习第一课：http://kyomini.com/lessons1/ 站点入口：http://kyomini.com ~34! 每天偷空时间写一篇！ =================================================== http://kyomini.com/lessons1/ 如何学好PHP？ http://kyomini.com/lessons2/ 快速搭建PHP环境 http://kyomini.com/lessons3/ 学习简单的PHP程序 http://kyomini.com/lessons4/ 制作超小型PHP网站 01 http://kyomini.com/lessons5/ 制作超小型PHP网站 02 http://kyomini.com/lessons6/ 制作超小型PHP网站 03 http://kyomini.com/lessons7/ 制作超小型PHP网站 04 http://kyomini.com/lessons9/ 学习简单条件语句 ==================================================== http://kyomini.com/lessons9/ 超小型PHP网站完结 http://kyomini.com/lessone10/ 学习Mysql数据库 ==================================================== http://kyomini.com/lessone11/ 利用Medoo框架快速输出

http://kyomini.com/lessone12/ Medoo数据输出例子01

====================================================

http://kyomini.com/lessone13/ Medoo数据输出例子02

==================================================== 不想代码编写PHP？没关系！用Dreamweaver来完成PHP！新课程开启！ 利用DW快速制作PHP01 & 利用DW快速制作PHP02 http://kyomini.com/study/ ====================================================

查看回复

本帖最后由

作者:Bboykin

[i=s] 本帖最后由 Bboykin 于 2014-4-24 17:30 编辑想学网页制作吗？那就要先从HTML开始喔~ 最近整理了一些关于HTML5的入门知识，希望对你有用吧~ 标准HTML入门

前言

Web标准的核心原则：“内容”和“表现”分离，HTML和CSS各司其职。

学习原则：

（1）重视基础，弄清效果背后的原理；

（2）记熟常用常见的英文单词；

（3）多上机练习，不懂就问；

（4）使用Firefox及IE浏览器进行测试

关于网页制作的基础知识

网页构成：结构+表现+行为；

结构：决定网页“是什么”，通过（x）HTML实现；

表现：决定网页看起来“怎么样”，通过CSS实现；

行为：决定网页“做什么”，通过JS实现；

网站开发的全过程：策划与定义、设计、开发、测试；

HTML学习

（实际上就是学习如何使用标记）

一、声明HTML标准：

声明HTML标准有利于网页在浏览器的表现；

声明HTML的方法：在HTML文件的最上面加入doctype定义，即加入<!doctype html>；

二、 HTML文件结构：

全局标记

<html> </html>标记：HTML必不可少的标记，放在HTML声明下，无实质功能，仅作为形式上的标记；

头部标记

1.<head> </head>标记：HTML必不可少的标记，放在<html>元素内，放置关于此HTML文件的信息（标题，文本表现什么的）；

2.<meta>标记：HTML必不可少的标记，放在<head>元素中，为web页面指定Unicode（统一字符编码标准），默认为<meta charset=”utf-8”>;（这是一个void元素！）

3.<title> </title>标记：HTML必不可少的标记，放在<head>元素中，设定网页标题；

躯干标记

4.<body> </body>标记：内联元素，HTML必不可少的标记，放在<html>元素中，地位与<head>平等，用来放置各种HTML标记，显示内容；

2.<p> </p>标记：块元素，HTML必不可少的标记，放置在<body>元素中，显示文本段落；

3.<h1> </h1>~<h6> </h6>标记：块元素，放置在<body>元素中，设置文本的标题，标题大小共有六级，<h1> </h1>中显示的标题最大，以后的依次减小；

4.<q> </q>标记：<q>元素是一个内联元素，放置在<body>元素中，表示在HTML里加段简短的引用；

5.<blockquote> </blockquote>标记：<blockquote>元素是一个块元素，放置在<body>元素中，表示在HTML中加入一段文本的引用；（例如引用一段广告）

内联元素与块元素的分别：

1. 内联元素在页面文本流中总在“行内”出现，而块元素显示时前后各有一个换行；

2. 内联元素通常用来标记小段内容，而块元素常常用作web网页中的主要构建模块；（设计一个网页时，一般先从大的块元素开始，然后再完善页面时再加入内联元素。）

6.<br/>标记：内联元素，void元素，放置在<body>元素中，显示换行；

7.<li> </li>标记：块元素，放置在<body>元素中，用来构建列表；

8.<ol> </ol>标记：块元素，放置在<body>元素中，使用一个<ol>元素包围列表项，则这些列表项将作为一个有序列表显示，同时每个列表项前面会自动标记上数字；

9.<ul> </ul>标记：块元素，放置在<body>元素中，使用一个<ul>元素包围列表项，则这些列表项将显示为一个无序列表，显示的顺序由源代码决定；

10.<img> 标记：内联元素，void元素，放置在<body>元素中，在使用位置插入图片；

使用细则：<imgsrc=“目标文件路径”>

必加属性：alt属性：指定描述这个图像的一些文本，当图像不能显示时，浏览器就会使用这个文本来取代图像；

可加属性：width和height属性：指定图像大小；（由原图的原宽和原高像素数指定）

目标文件路径的确定方法：

相对路径

（1）向下链接到一个子文件夹：

明确源文件和目标文件；

追踪从源文件到目标文件的一个路径；

创建一个路径；

基本形式：同级文件夹/下级文件夹/再下级文件夹/../目标文件

（2）向上链接到一个父文件夹：

步骤同上；

基本形式：../../../目标文件；

绝对路径

一个绝对路径=从根文件夹到一个文件的路径；

HTML属性

基本语法：<标记名称属性名1=“属性值” 属性名2=“属性值”…>

注：若一个标记使用了多个属性，各个属性之间要用空格隔开；同时，应该只用浏览器支持的那些属性；

11.<a></a>标记：内联元素，用于创建指向另一个页面的链接；<a>元素的内容（可以是图像）就是链接文本；在浏览器中链接文本的下面会显示有下划线，指示这是可单击的；

用法：<a href=“目标文件路径”>

目标文件路径的方法与前面相同；不过还可以指向URL（统一资源定位符）；

URL的组成：一个协议（HTTP）+一个网站名+资源的绝对地址；

网站名的组成：服务器名（WWW）+域名（Amazon.com）；

好了，到这里为止，HTML里的基本标记就学完了；进一步该学习CSS了。

查看回复