基础教程,小白可学,大佬看个笑话就行
首先我们来认识一下什么是HTML
HTML 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
HTML文档的后缀名:.html 或 .htm
然后用什么软件写html代码:1、Sublime Text;2、Dreamweaver;3、WebStorm;4、HBuilder X;5、Notepad;6、VSCode;7、Vim;8、Aptana Studio;9、IntelliJ IDEA;当然,你也可以用记事本写,我这边用的是 HBuilder X
然后我们新建一个html文件,就会有下面的这些代码
![图片[1]-html+css+js鼠标点击切换背景图教程一-软件库](https://pic.knrjk.com/view.php/5002ce66b62721a868920632bf5c49b2.jpg)
看完了注释之后 想必大家已经基本上了解了html的基本组成部分,那么我们接下来继续,创建一个ul无序列表 里面放5个li标签
![图片[2]-html+css+js鼠标点击切换背景图教程一-软件库](https://pic.knrjk.com/view.php/ce1aff7fa7928af1e00a414b51f6fdb0.jpg)
那我们想把那个默认样式清除,就得用到样式也就是(css) 叠层样式
什么是css 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
(简单来说就是对HTML结构做装饰 修改大小、颜色 清除默认样式 等功能)
css样式得放到标签里面 在标签里面加一个
双标签 把css代码放到标签里面(我这种方法十分不推荐,因为我比较懒,然后外加这代码也不是很多,小白一定不要养成这种坏习惯)
我下面的例子是用html中使用style自带式
这里我推荐 建一个css的文件 后缀名为.css
引用方法:
使用@import引用外部CSS文件
使用link引用外部CSS文件 推荐此方法
(如果有时间,我会出一帖更详细的css教程)
![图片[3]-html+css+js鼠标点击切换背景图教程一-软件库](https://pic.knrjk.com/view.php/1098117fb9ea4e4c66f7e24db7649995.jpg)
OK,我们已经把小黑点去了 接下来我想把数字移到左上角就得调整body的默认样式 调整内外边距
![图片[4]-html+css+js鼠标点击切换背景图教程一-软件库](https://pic.knrjk.com/view.php/43505015872799a72823edae29527a06.jpg)
接下来我想对ul列表设置样式 调整它的宽高 设置背景颜色
![图片[3]-html+css+js鼠标点击切换背景图教程一-软件库](https://pic.knrjk.com/view.php/1098117fb9ea4e4c66f7e24db7649995.jpg)
接下来对li标签做样式 调整宽高 设置前景色
![图片[6]-html+css+js鼠标点击切换背景图教程一-软件库](https://pic.knrjk.com/view.php/ce4261bb2e73f611946dd5658ba4d095.jpg)
接下来,我想把li标签变成横排 我们这里用到float(浮动) 然后把整个ul的位置做一些移动
![图片[7]-html+css+js鼠标点击切换背景图教程一-软件库](https://pic.knrjk.com/view.php/409dfc0427644fe5ed4a68d481b7daac.jpg)
然后我想把图片放到列表的方格子里用到单标签 src: 引入(插入)一个文件(这里指 一张图片)
![图片[8]-html+css+js鼠标点击切换背景图教程一-软件库](https://pic.knrjk.com/view.php/f8eae477efcb024cbae0160868458458.jpg)
今天就先到这里 由于三楼一个帖只能放9张图,所以接下来我会开另一帖,大家如果喜欢的话,记得关注一下下。谢谢各位大佬的捧场html+css+js鼠标点击切换背景图教程二-软件库 (knrjk.com)