前端开发系列
北极星小王子
得之坦然,失之淡然,争之必然,顺义自然
展开
-
前端基础系列(四)JavaScript基础(上篇)
一、使用JS完成表单检验原创 2018-06-11 13:28:55 · 324 阅读 · 0 评论 -
前端开发系列(六)CSS教程(1)
一、开始学习CSS,为网页添加样式 1.1、认识CSS样式 CSS 全称为 “ 层叠样式表 ( Cascading Style Sheets ) ”,它主要是用于定义 HTML 内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 代码示例: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&a原创 2019-01-07 21:14:13 · 384 阅读 · 0 评论 -
前端开发系列(七)CSS教程(2)
一、CSS样式基本知识 1.1、内联式 css 样式,直接写在现有的HTML标签中 CSS 样式可以写在哪些地方呢?从 CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:      <p style=&am原创 2019-01-08 13:45:18 · 375 阅读 · 0 评论 -
前端开发系列(八)CSS教程(3)
一、CSS选择器 1.1、什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{       样式; } 在 { } 之前的部分就是 “选择器”,“选择器” 指明了 { } 中的**“样式”** 的作用对象,也就是 “样式” 作用于网页中的哪些元素。比如原创 2019-01-08 19:29:09 · 340 阅读 · 2 评论 -
前端开发系列(九)CSS教程(4)
一、 CSS的继承、层叠和特殊性 1.1、继承 CSS 的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于 p标签,这个颜色设置不仅应用 p标签,还应用于 p标签 中的所有子元素文本,这里子元素为 span标签。 p{color:red;}<p>三年级时,我还是一个<s...原创 2019-01-08 20:19:38 · 318 阅读 · 0 评论 -
前端开发系列(十)CSS教程(5)
一、 CSS格式化排版 1.1、文字排版--字号、颜色/h2> 我们可以使用 css 样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。body{font-family:"宋体";} 注意: 不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就原创 2019-01-08 21:04:47 · 381 阅读 · 0 评论 -
前端开发系列(十一)CSS教程(6)
一、CSS盒模型 1.1、元素分类 在讲解 CSS 布局之前,我们需要提前知道一些知识,在 CSS 中,html 中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素 常用的块状元素有:<div>、<p>、<h1>...&原创 2019-01-08 22:14:00 · 407 阅读 · 1 评论 -
前端开发系列(十二)CSS教程(7)
一、CSS布局模型 1.1、css布局模型 清楚了 CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。 CSS包含3种基本的布局模型,用英文概...原创 2019-01-09 19:39:13 · 484 阅读 · 0 评论 -
前端开发系列(十三)CSS教程(8)
一、CSS代码缩写,占用更少的带宽 1.1、颜色值缩写 关于颜色的css样式是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。 例子1: p{color:#000000;} 可以缩写为: p{color: #000;} 例子2: p{color: #336699;} 可以缩写为: p{color: #369;} 1.2、字体缩写 网页中的字体 css 样式代码...原创 2019-01-09 20:07:27 · 427 阅读 · 0 评论 -
前端开发系列(十四)CSS教程(9)
一、CSS样式设置小技巧 1.1、水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是 水平居中 显示的。 这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中? 如果被设置元素为文本、图片等行内元素时,水平居中 是通过给父元素设置 text-ali...原创 2019-01-09 20:48:58 · 2126 阅读 · 2 评论 -
前端开发系列(十五)网页布局教程(1)
一、用HTML+CSS实现最简单的网页布局效果:一列布局 代码示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w原创 2019-01-15 20:55:28 · 1158 阅读 · 0 评论 -
前端开发系列(五)HTML教程(5)
一、与浏览者交互,表单标签 1.1、使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。 语法:<form method="传送方式" action="服务器文件"> 1、<form> :<form&原创 2019-01-07 20:37:25 · 379 阅读 · 0 评论 -
前端开发系列(四)HTML教程(4)
一、认识标签(第三部分) 1.1、使用 a 标签,链接到另一个页面 使用 <a> 标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。 语法:<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本&lt原创 2019-01-07 14:14:02 · 311 阅读 · 0 评论 -
前端基础系列(五)JavaScript基础(中篇)
一、注册页面表单检验系统完善 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script> func原创 2018-06-11 19:30:20 · 246 阅读 · 0 评论 -
前端基础系列(六)JavaScript基础(下篇)
一、使用JS完成表格的隔行换色 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script>原创 2018-06-11 21:39:12 · 232 阅读 · 0 评论 -
前端基础系列(七)JQuery基础(上篇)
一、使用JQ弹出广告 (1)JQ入门: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jquery入门&lt;/title原创 2018-06-12 20:51:42 · 312 阅读 · 0 评论 -
前端基础系列(八)JQuery基础(下篇)
一、使用JQ完成省市联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成省市二级联动</title> <style type="text/css&q原创 2018-06-12 22:38:25 · 256 阅读 · 0 评论 -
前端开发系列(一)HTML教程(1)
一、开发环境介绍 开发环境是IOS,开发软件使用的是HBuilder。需要的老铁可以私信我,分享给你们。 二、HTML介绍 超文本标记语言: &amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nb原创 2018-06-10 11:31:20 · 534 阅读 · 0 评论 -
前端基础系列(二)HTML基础下
一、框架标签的简单使用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;框架集标签&lt;/title&gt;原创 2018-06-10 16:09:47 · 505 阅读 · 0 评论 -
前端基础系列(三)DIV、CSS
一、DIV效果演示 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;div效果演示&lt;/title&gt;原创 2018-06-10 21:43:34 · 246 阅读 · 0 评论 -
Java基础系列(二十五)CollectionUtils
集合判断: 判断集合是否为空: CollectionUtils.isEmpty(null): true CollectionUtils.isEmpty(new ArrayList()): true CollectionUtils.isEmpty({a,b}): false 判断集合是否不为空: CollectionUtils.isNotEmpty(null): false Colle...原创 2018-08-23 10:36:39 · 1522 阅读 · 0 评论 -
前端开发系列(二)HTML教程(2)
一、认识标签(第一部分) 1.1、body 标签,网页上显示的内容放在这里 网页上要展示出来的页面内容一定要放在 body 标签中。 代码示例: &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text原创 2019-01-04 20:54:23 · 524 阅读 · 0 评论 -
前端开发系列(三)HTML教程(3)
一、认识标签(第二部分) 1.1、使用 ul,添加新闻信息列表 代码示例: &amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;tex原创 2019-01-07 13:39:42 · 362 阅读 · 0 评论 -
前端开发系列(十六)网页布局教程(2)
一、 结构与表现相分离的思想 1.1、微博用户发言信息列表制作 代码示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/...原创 2019-01-15 21:27:04 · 2454 阅读 · 1 评论