![](https://img-blog.csdnimg.cn/20210423192538325.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+css+jQuery
主要讲述HTML、css样式以及jQuery基础知识,按顺序去讲,首先是HTML,然后是css,最后jQuery。
他 他 = new 他()
毕业于内蒙古科技大学(包头师范学院),本科,大学专业计算机科学与技术,毕业之后从事Java开发,虽然我是18年毕业的,但是入行之后有很多前辈带着一起走,工作之余学到了很多学校接触不到的东西,在这里分享给大家
展开
-
Web网页设计之jQuery_6. jQuery Ajax
一. Ajax我们先来认识一下,什么是 Ajax通过百科我们可以知道,Ajax是一种通讯方式,可以实现异步更新数据,什么是异步更新数据?异步更新数据是不从新加载整个页面,可以对网页某部分进行更新。而 jQuery 也对 Ajax 进行了很好的封装,(这里建议不会的同学看一下菜鸟教程的 Ajax :Ajax-菜鸟教程)二、get() 方法根据请求方式不同,get 是从指定的资源请求数据,使用方式是:$.get(URL,callback);下面我们来看看如何操作我们点击一下原创 2020-11-16 23:45:50 · 1111 阅读 · 0 评论 -
Web网页设计之jQuery_5. jQuery操作DOM元素(下)
接着上一个继续说四、使用 jQuery 添加 DOM 元素我们还可以使用 jQuery 进行动态的添加数据,好比我们给一个 ul 标签中多添加一个 li,我们来看一下有那些添加方式1.append() &prepend()append 是在元素内部节点后面进行添加,prepend 是在元素内部节点前面进行添加我们来点击测试一下是OK的,没有问题2.after() & before()这两个同样,也是可以进行添加 DOM 元素,和上面内俩不同的是,...原创 2020-11-16 13:12:48 · 1034 阅读 · 0 评论 -
Web网页设计之jQuery_4. jQuery操作DOM元素(上)
一、使用 jQuery 获取 DOM 元素的内容或属性原创 2020-11-16 00:42:40 · 1238 阅读 · 0 评论 -
Web网页设计之jQuery_3. jQuery效果
一、jQuery隐藏&显示其实这个我们之前有说过,jQuery隐藏是通过 .hide() 方法进行隐藏的,下面我们来使用一下运行一下,看看效果可以看到,p标签被隐藏起来了,这个呢我们之前见过,下面来说一下这个显示,显示我们使用的是 .show() ,再来看一下可以看到当你点击隐藏的时候,文字加入 display 样式,当点击显示的时候,文字属性display 变没有了,只剩下一个 style 了二、淡进淡出淡进淡出有很多种方法,fadeIn()、fadeOut(.原创 2020-10-19 20:18:22 · 1412 阅读 · 0 评论 -
Web网页设计之jQuery_2. jQuery语法、选择器与事件
一、语法学习这个 jQuery 之前呢,我们先来看一下语法最基础的语法就是$(selector).action()$ 这个就是定义一个jQuery 的一个标志符selector 是要选择的节点,好比我想让所有的 p 标签隐藏起来,那么我是需要这样去写:$("p").hide();最后一个 action() 就是执行的方法,好比我刚刚的隐藏 hide(); 这个就是执行方法类似与我的官网,可能有的人会看到这样的写法$(function(){ // 开始写 jQuery 代码..原创 2020-10-10 15:58:53 · 1197 阅读 · 0 评论 -
Web网页设计之jQuery_1. 认识jQuery
一、认识jQuery先来百科一波,认识一下这个jQuery百科上说 jQuery 是一个快速、简介的 JavaScript框架,封装了 JavaScript 常用的功能代码,而且还优化了 HTML文档、事件处理,动画等等,也就是说,这个 jQuery 就是一个高级的 JavaScript ,我们之所以不学习这个 JavaScript 也是因为这个东西跟不上时代了,但是,跟不上是跟不上,但也得会一些,这里我给大家准备了一个教程,大家可以看看:《W3school_JavaScript》一定要看哦原创 2020-10-07 14:39:33 · 1529 阅读 · 0 评论 -
Web网页设计之css_9. z-index和display
一、z-index我们说这个 z-index 之前先来看一个例子可以看到啊,我们让两个 div 块进行 position 定位,而且都是以这个浏览器为基准进行偏移,但是我们可以发现,少了一个 div,这个 div 其实是存在的,不显示的原因是被覆盖掉了如果我们想让 a2 显示在下面,我们还得去移动这个 div 块的顺序,如何在不变 html 代码的情况下,让 a2 显示到下面,这里我们就需要用到 z-index,来试一下我们给这个 a1 的块设置了一个 z-index,这样就能让 a原创 2020-10-07 11:36:34 · 1540 阅读 · 1 评论 -
Web网页设计之css_8. 浮动与定位
一、浮动浮动其实我们之前学习的时候接触过,就是使用 float 进行浮动,我们来看一下然后我们来让这个 a2 进行向左浮动可以看到,我们这个 BBB 一下子就靠到了这个 AAA 的右侧这个就是 float 带来的效果,这里的 html 页面已经脱离了这个标准流二、clear 效果clear 是可以清理掉这个悬浮的样式,我们来使用一下可以看到啊,我们让 a2 向左浮动,a3 向右浮动,但是不难发现,这个 p 段落其实也向上移动了,我们给 a4 添加样式,让他没有这个浮动原创 2020-10-07 11:07:07 · 1578 阅读 · 0 评论 -
Web网页设计之css_7. css盒模型
这篇博客我们来说一下 css 的盒模型,这个是一个重要的概念,希望大家好好理解一、什么是盒模型我们先来看一下这个相框,这个相框的边框就是我们的 border,两个相框之间的距离是 margin,相框里面的画和相框的框子之间的距离就是 padding然后我们来看一下谷歌浏览器给我们带的这个盒模型,按F12可以看到,这个就是盒模型的...原创 2020-10-06 22:45:05 · 1260 阅读 · 0 评论 -
Web网页设计之css_6. 用 css 设置图像效果
今天来说一下用 css 这是图像效果一、图像大小、边框图片的大小,我们可以直接使用 img 的属性 width、height进行设置边框我们需要使用 css 样式,我们使用 border 进行设置可以看到啊,我们这个图片有了一个 1px 宽度的红色实线的边框,solid就是实线,当然还有虚线二、图文混排这个图文混排是一个重点,我们平时布局就是需要使用到这个东西先来看一下没有进行排版的样子可以看到啊,图片自己占了一行,右面是空的,然后文字在下面我们设置...原创 2020-10-03 21:24:55 · 1771 阅读 · 0 评论 -
Web网页设计之css_5. 用css设置文本样式
本篇博客我们主要来说一下用css设置文本样式,内容比较多,大家好好练习一下一、设置文本的大小、颜色、字体设置文本大小我们可以使用 font-size,设置颜色我们可以使用 color,字体我们可以使用 font-family可以看到,两个文本内容虽然一样,但是,字体、大小、颜色都不相同二、倾斜、加粗倾斜我们是使用的font-style,加粗是使用的font-weight...原创 2020-10-03 19:29:31 · 2237 阅读 · 0 评论 -
Web网页设计之css_4. css 其他选择器
我们在说 css 的核心基础的时候,介绍了三种选择器类型,分别是:class 选择器,id 选择器,标签选择器,但是啊,我们日常用到的肯定不止这些,我们这篇主要来说说一些除此之外的其他选择器,这个我们日后工作会常常用到~一、分组选择器先来说说分组选择器的由来,再说这个东西具体怎么用1. 由来我们知道啊,css 层叠样式由很多,但是在一个网页中,肯定有相同、或者说就是一模一样的样式,但是我们总不能一个一个去复制粘贴一遍,所以,为了我们更好的去定义css,我们需要一个选择器可以支持到我们做到这个原创 2020-08-08 11:41:29 · 1204 阅读 · 0 评论 -
Web网页设计之css_3. css 核心基础知识2
一、在 HTML 中引入 css 样式我们这个 css 可以写在三个地方,不同的地方有不同的写法,我们根据写的地方进行区分,也就是下面的这三个1. 内联样式(Inline style)内联样式呢,就是和这个标签写在一起,大概写法这样:可以看到啊,我们使用 HTML 中标签中带的这个 style 属性,然后将样式写在这里,并且用分号相隔2. 内部样式表(Internal style sheet)内部样式,就是写在所需要的 HTML 页面中,随着页面是一起的可以看到啊,这个之原创 2020-08-08 10:04:35 · 1252 阅读 · 0 评论 -
Web网页设计之css_2. css 核心基础知识1
一、css 组成css 主要是由两个东西组成,一个是选择器,还有一个就是声明1. 选择器选择器就是需要改变样式的 HTML 元素,好比我们想给 p 标签增加一些层叠样式,那么我们就可以定义一个 p 选择器,这样的话,我们就可以让 HTML 中的 p 标签进行改变了2. 声明声明呢也是由两个东西组成,一个是属性,一个是值,其实就和我们 Java 中的 Map 集合一样,一个 key ,一个 value当然啊,这个声明可以是一个,可以是多个。二、css 实例知道了组成,在来说说这原创 2020-08-07 00:15:32 · 1266 阅读 · 0 评论 -
Web网页设计之css_1. 认识css
一、什么是 css废话不多说,直接上百科css、英文全称 Cascading Style Sheets ,翻译过来就是层叠样式表,这个东西是用来表现 HTML 或者 XML等文件样式的计算机语言,说白了,这个东西就和装饰品一样,用来装饰我们的 HTML,让 HTML 看起来更好看。这个之所以叫层叠,是因为可以可以让同一个 HTML 标签有很多的样式,这些样式进行累加,造成一种又一种的样子二、感受一下 css说多了都显得苍白,我们来感受一下 css 带给我们的世界我们可以看到啊原创 2020-08-04 00:52:45 · 1426 阅读 · 0 评论 -
Web网页设计之HTML_7. HTML 行内元素和块级元素
一、行内元素首先来说行内元素,先百科一下,看看定义行内元素,也叫这个内联元素,这个看自己,我是叫行内元素。这个上并没有说,我们看下面这个就是行内元素,说白了,就是不换行,一直写,只要屏幕够宽。当然啊,行内元素有很多,具体可以看百科下面的内个概览,我们尝试用几个是不是,很明显,这个陈胖子变小了很多。二、块级元素上面我们说了行内元素,接着我们来说一下这个块级元素,同样,百科走一波可以看到啊,这个块元素是相对这个行级元素来说,具体啥是块级元素,我们往下看原创 2020-08-01 17:00:25 · 1391 阅读 · 0 评论 -
Web网页设计之HTML_6. HTML FORM表单
上篇我们说了这个表格,这一篇我们开始说表单,看清楚,是 表 单一、认识表单直接百科走起来可以看到啊,这个表单在我们网页中主要是负责数据采集的功能,然后呢,我们将采集好的数据提交到我们的后端,也就是 Java 端,最后通过 JDBC 连接上我们的数据库,存到里面去,所以说啊,表单是一定要学会的。然后再来看,表单中有表单标签,这个有很多种标签啊,什么文本框、密码框、隐藏域、复选框等等,所以说这一篇博客应该不少东西,大家好好看二、创建表单创建表单,我们需要用到 FORM 标签,这个就.原创 2020-08-01 00:48:29 · 2464 阅读 · 0 评论 -
Web网页设计之HTML_5. HTML 表格
表格在我们生活中常见,HTML 中的表格就和我们的 Excel 类似,而且啊,在我们平时开发系统的时候,这个表格是经常要用到的东西,所以我们来学习一下这个表格一、认识表格通过百度百科可以看到,这个表格就是一种整理数据的手段,很简单啊,仅此而已二、表格的基本构造一个表格啊,有表头、有表体,就这两个,HTML 中也提供了很多类型的标签去让我们的表格更好用1. table首先是定义表格的标签,table,一个网页可以有很多的table2. th、tr、tdth就是表头,一个表格原创 2020-07-31 23:18:30 · 2788 阅读 · 0 评论 -
Web网页设计之HTML_4. HTML 链接 & 注释
在我们日常上网浏览网站的时候,总是能点击一段文字、图片,然后打开一个新的页面。而这个操作里就有这个博客要讲的内容哦~一、认识链接我们先来看看这个点击的时候为啥能够打开一个新的网页可以看到啊,我们通过谷歌浏览器的开发者工具可看到,这个“超链接_百度百科”外面套着一个 a 标签,而 a 标签中的 href 属性里是一个链接地址,这个就是能够打开一个新的页面的重要点,而这也就是我们今天要学习的东西,a 标签。我们称 a 标签为 锚点,也就是单词anchor 。我们再来点开百度百科来具体看.原创 2020-07-26 15:01:16 · 2059 阅读 · 0 评论 -
Web网页设计之HTML_3. HTML 图片、视频、音频的引入
上一篇博客讲述了 HTML 的元素,这一篇,我们就来说一下图片、视频、音频的引入,首先准备好一些图片,一个视频,一个音频一、图片的引入我们平时看到的网页啥的,都是有很多图片,比如说我的网站,lemon1234里面就有图片的引入,那么我们是如何引入的呢?我们是使用 img 标签来进行引入的1. img 标签先来看看这个 img 标签的用法<img src="图片路径" />这个 src 就是 img 标签的一个属性,主要是告诉 img 标签是调用的那里的图片的,这个这个.原创 2020-07-23 23:37:41 · 4479 阅读 · 7 评论 -
Web网页设计之HTML_2. HTML元素 & 简单文本排版
上一节我们认识了Web,认识了HTML,还介绍了一个工具WebStorm,这一节,我们就用这个工具学习一下HTML中的一些常用标签元素。一、HTML基本结构首先我们来说一下这个HTML的基本结构啊,打开我们的工具,然后创建一个文件夹,叫 case1接着我们创建一个HTML,叫 class1这个就是 HTML 的结构,HTML 标签中 有 HEAD(头标记),有BODY(主标记体)。这个就和人一样,HTML就是证明这个是个人,HEAD就是这个人的头,我们以后会在这个 HEAD 里面原创 2020-07-21 22:16:37 · 3406 阅读 · 0 评论 -
Web网页设计之HTML_1. 走进HTML
开讲啦,这个是我们的一个新的起征点啊,也是重要的一个点,不学这个,我们学的数据库,JDBC以及后端的JAVA就都瞎了,因为我们以后是做Web开发的,做桌面开发的相对较少,而这个HTML+css+jQuery就是我们学习整个前端必须要学习的东西,因为这就和盖房子一样,先打好地基,才能起楼,不然打不好地基,不管设计的再好的楼都屹立不住。当然啦,以后我也会去讲一些前端的框架,比如Layui、BootStrap、Vue等等,但是在这之前,先学会这几个基本的。好了,废话不多说了,开始干它!一、认识Web上原创 2020-07-21 00:41:55 · 1627 阅读 · 0 评论