2017 年 8月随笔档案 - 米斯特吴

静态页面制作:16结构与表现分离

摘要：我们的标题栏已经功德圆满了，下面我们就继续往下做广告栏。我们在正式做广告栏这部分之前，仍然先来分析，看看如何规划比较好。对于广告栏的布局，每个人的想法可能都会有些不一样，但这里我们就用最朴素最简洁的方法。什么是最朴素最简洁的方法呢，我们就通过现象看本质。首先我们根据颜色判定广告栏的位置和大小，那阅读全文

posted @ 2017-08-31 14:25 米斯特吴阅读(362) 评论(0) 推荐(0)

静态页面制作:15标签样式初始化

摘要：我们上节课留下了一个问题，就是在顶部有一小块留白到底是什么还没有解决。我们现在就来分析一下！当我们对当前效果进行检查的时候，看数字1的位置，我们将鼠标放到数字1的div上，此时就会产生数字的效果。数字2中包含几个颜色分布，首先就是两边的浅黄色，这两边的浅黄色其实就是左右margin,其实是中间的浅阅读全文

posted @ 2017-08-28 12:49 米斯特吴阅读(350) 评论(0) 推荐(0)

静态页面制作:14综合实践

摘要：我们已经做了很多的铺垫，从铺垫中我们也学到了很多知识，比如说margin、padding、盒模型的宽高计算方式等。现在我们来回归目标，实践所学的内容。从最简单的地方开始，现在我们的右侧超链接是拥挤在一块的，但我们的理想效果是希望他们之间有些间距的。如果大家对我们之前所铺垫的内容掌握了话，那肯定阅读全文

posted @ 2017-08-25 18:05 米斯特吴阅读(196) 评论(0) 推荐(0)

静态页面制作:13padding的用法

摘要：这一节我们来说说留白留白有什么用？padding到底有什么用，我们在分析之前，先回顾一下我们之前遇到的那几层结构。在结构中我们有边距、边框和留白，在这里我们提出一个问题，就是一个元素的宽度和高度边界到底在哪里？我们通过图片为大家展示：我们在这里直接告诉大家，一个元素的宽度就等于内容宽度+左阅读全文

posted @ 2017-08-23 18:35 米斯特吴阅读(255) 评论(0) 推荐(0)

静态页面制作:12盒模margin特殊情况

摘要：我们上一节已经介绍了简单的margin用法，下面我们来看看margin遇到的复杂问题。我们来说第一点：对于inline元素而言，上下边距margin无效，这是什么意思呢？我们来看看刚刚我们举的例子。有一个div，然后里面放一个行内元素课后帮，然后给课后帮一个margin-left：20px；左阅读全文

posted @ 2017-08-22 16:17 米斯特吴阅读(159) 评论(0) 推荐(0)

静态页面制作:11盒子模型

摘要：我们上一节主要介绍的是结构表现分离的好处，写完之后我们最终的效果并没有特殊的变化。那么我们现在来分析一下，此时的标题栏还有哪些是需要我们去做改变的？最扎眼的地方其实就是右上角那三个内容，发现他们之间并没有间隙，让人看起来很不舒服，我们来通过审查元素，对样式进行处理。我们通过审查元素的方式来添加阅读全文

posted @ 2017-08-21 15:34 米斯特吴阅读(423) 评论(0) 推荐(0)

通过JavaScript实现打印页面

摘要：我们在网页开发过程中经常会有打印页面的需求，通过JS来实现的方法有很多，这里我做了一个整理，供大家参考。方式一：window.print() 整体打印现在就轻松实现了页面的打印，但是这种方式会将整个页面打印，如果想要实现指定区域的打印需要通过下面的设置局部打印首先，在html中，通过 sta 阅读全文

posted @ 2017-08-17 17:12 米斯特吴阅读(273) 评论(0) 推荐(0)

静态页面制作:10样式实战

摘要：我们来实践上一节所说的一套，一共分为两步：第一步叫做开辟一个区域，写一段公共样式，然后在引用。怎么写公共样式呢？我们就在head标签中，加一对style标签，然后在style首尾标签之间，写我们需要的公用样式。公用样式的写法，首先我们在style标签里面，我们写一个.nav之后加一个花括号阅读全文

posted @ 2017-08-17 09:29 米斯特吴阅读(220) 评论(0) 推荐(0)

Handsontable-一款仿 Excel 的效果的表格插件使用总结

摘要：Handsontable 一款仿 Excel 的效果的表格插件使用总结导语：最近在做一个关于报表管理的项目，发现了一款很好用的jQuery插件 "Handsontable" 。它真的特别给力，在 Excel 中可进行的操作，你几乎都可以在网页中做到，如拖动复制、Ctrl+C 、Ctrl+V 、编阅读全文

posted @ 2017-08-16 17:36 米斯特吴阅读(615) 评论(0) 推荐(0)

静态页面制作:9标题栏—样式的重复利用

摘要：首先我们来看一下现在所做到的效果以及我们的理想效果。我们发现标签栏的左上角的部分，我们已经完成了。在标题栏这一层，还有右上角的部分需要我们完成。其实完成这部分就很容易了，我们来到sublime中实现以下。其实右上角的内容是可以被点击的，所以我们使用超链接标签，也就是a标签，但是a标签是需要配阅读全文

posted @ 2017-08-16 09:06 米斯特吴阅读(550) 评论(4) 推荐(0)

静态页面制作:8HTML浮动腾挪概念(铺垫二:图文混排)

摘要：现在那我们来说说第二个铺垫。第二个铺垫叫做图文混排。什么是图文混排呢，这个东西我们还需要花些时间来分析一下的。首先看下图：其实上图就是一个例子，然而这个例子其实在我们浏览网页，或者看一些微博、博客等文章时，我们发现这种格式很常见。这种有内容、有图片并且又在一个区域中，这种情况我们就叫做图文混排阅读全文

posted @ 2017-08-14 17:57 米斯特吴阅读(426) 评论(0) 推荐(0)

静态页面制作:7HTML浮动腾挪概念(铺垫一:行与块)

摘要：上一节我们介绍了方法一，那么这一节我们来看看方法二。我们想要实现的理想效果，其实使用方法一，利用行内元素是最简洁有效的。那为什么我们还要学习使用比较复杂的方法2呢，因为我们后期设计的网页要比我们现在的网页复杂的多，如果你只会用第一种方法，其实是完全不够用。但是我们又不想等到后面，用一个相对复阅读全文

posted @ 2017-08-14 15:06 米斯特吴阅读(192) 评论(0) 推荐(0)

静态页面制作:6HTML布局(基线的应用)

摘要：我们首先看看目前和目标的一个差距虽然我们现在现实还没有达到理想的效果，但现在至少我们已经明白为什么课后帮和HWHelper为什么不在一行了，为什么呢？那就是因为他们都是块元素。那么有没有什么办法让这两个元素编程行内元素，一旦成为行内元素，他们不就跑到一行去了吗。所以我们来看看方法一。方法阅读全文

posted @ 2017-08-11 21:53 米斯特吴阅读(905) 评论(0) 推荐(0)

静态页面制作:5HTML布局

摘要：上一个博客中我们大概是得到了下图的一个效果，课后帮和HomeWorkHelper分别获得了带下以及样式。但是他们俩实际上是分在两行的。我们来看一下理想与现实的一个对比。我们看到现实与理想之间还是有一定差距的。我们的理想效果是课后帮与HWHelper是在一行，但现实情况却是在两行。我们期望的效阅读全文

posted @ 2017-08-11 21:20 米斯特吴阅读(388) 评论(0) 推荐(0)

静态页面制作:4HTML的样式简介

摘要：现在我们来说说样式，在上小节的最后我们看到了element.style这么一个东西。它其实就是设置元素样式的地方。现在呢，我们需要在element.style的花括号中点击一下鼠标左键，你会发现出现一个输入框，可以输入东西了。在这里我需要强调一个细节，那就是我在源代码的区域中是选中了"HomeW 阅读全文

posted @ 2017-08-09 11:41 米斯特吴阅读(361) 评论(0) 推荐(0)

静态页面制作:3HTML标签和属性

摘要：Don’t be evil 一直是谷歌谷歌广为人知的口号，但是现在这个口号要换了，新的口号是“让世界变得更美好”。我们在学习标签和属性之前，首先要说一下Chrome浏览器，在上一个博客中，我们就已经说过选择谷歌浏览器的原因有两个，第一是因为市场占有率，第二就是因为有强大的开发者工具，那么今天我阅读全文

posted @ 2017-08-08 10:25 米斯特吴阅读(382) 评论(0) 推荐(0)

静态页面制作:2HTML的标签简介

摘要：在这里我就假定大家已经根据第一天的内容，安装好了Chrome和Sublime3这两个必备的工具。首先我们先打开sublime3并且输入一点内容，这里需要注意的是，暂且不要输入汉语，我们可以先输入自己的英文名字，然后来看一下效果。至于为什么不能输入汉语，如果大家有兴趣可以自己试试（会有意想不到的效阅读全文

posted @ 2017-08-07 22:32 米斯特吴阅读(253) 评论(0) 推荐(0)

静态页面制作:1HTML的基本认知

摘要：有一句名言，Talk is cheap,show me the code.这句话无论放到那里都非常合适我们也废话少说，首先给大家展示一下我们PC端最终实现的效果。上面的网页很简单，但也很完整。麻雀虽小，但五脏俱全。我们可以通过这个案例，将HTML5+CSS3中主要的功能以及响应式布局全都掌握。阅读全文

posted @ 2017-08-07 10:27 米斯特吴阅读(331) 评论(1) 推荐(1)

Sublime3工具安装

摘要：工欲善其事，必先利其器第一步: 安装Sublime Text 3 Sublime官网:http://www.sublimetext.com/3 Sublime官网:http://www.sublimetext.com/3 第二步: 安装Package Control Package官网:https 阅读全文

posted @ 2017-08-06 17:36 米斯特吴阅读(242) 评论(0) 推荐(0)

08 2017 档案