- 博客(19)
- 收藏
- 关注
RSS订阅原创 CSS练习中|无序列表中，＜li＞的小黑点如何替换为图片（菜鸡趣味学习，细节到每一步）
今日小目标：好了，来看看我第一次尝试做完的效果 没完全做完，做到这心态崩了T T 这就是传说中的买家秀和卖家秀叭！不拘小节的说 最大的问题是小圆点不会删去，结构也处理的不清晰，学过的东西不会利用那么，我一点一点 重头开始抠1.第一眼，三个div 外面一个大div（contain） 里面上面一个div（up） 下面一个div（down） 大div需要插入有渐变效果的背景图片2.看图片中的红线处，有一定距离（...
2020-08-11 10:44:04
4369
原创 CSS学习中|插入图片和背景图片区别
1.插入图片，用的最多，比如产品展示类，移动位置只能靠盒模型 padding margin2.背景图片我们一般用于小图标的背景 背景图片只能通过background-position插入图片代码：给padding值，图片可以移动，但是盒子同时被撑大<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content
2020-07-24 15:31:16
598
原创 CSS学习中|对比如何使用text-align = center和margin：auto
margin : auto是为块级元素设置外边距，通过将左右外边距设置相同的值使元素水平居中代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com.
2020-07-24 14:57:01
321
原创 CSS练习中|利用内边距padding制作一个简单的导航栏（初学者：代码+样例）
目标效果： 要点：鼠标悬浮时显示灰色背景，字体由黑色变为橘色 注意背景大小与字数有关，所以不能<a>设置固定宽度，需要利用内边距来撑开 今日思考： 1.先做好结构（html）再抠细节 观察整体，一个<div>里面有六个<a>，写出基础结构代码：<!DOCTYPE html><html lan...
2020-07-17 17:41:14
419
1
原创 CSS学习中|CSS盒子模型（重点学习！代码+样例）
1.盒子模型（Box Model）理解盒子模型： 可以把html页面中的布局元素看作一个矩形的盒子，她就是一个盛装内容的容器 如图，把content（内容）想象成一个网购的新手机，有宽（width）和高（height） 手机距包装盒的距离为内边距（padding） 包装盒本身的宽度为边框（border） ...
2020-07-15 18:00:40
3501
原创 CSS学习中|CSS三大特性（代码+样例）
1.层叠性概念： 所谓层叠性是指多种CSS样式的叠加 如果一个属性通过两个相同选择器设置到同一个元素上时，后面的会把前面的层叠掉注意： 样式冲突，就近原则 样式不冲突，不会层叠代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
2020-07-13 17:42:58
240
原创 CSS学习中|关于背景图片background
1.背景颜色（background-color）语法：background-color:颜色值；默认值是透明的 transparent代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
2020-07-09 17:39:16
482
原创 软件测试学习中|DOS窗口简介（命令+作用）
1.DOS简介概念： DOS是英文Disk Operating System的缩写，意思是“磁盘操作系统”。 DOS是个人计算机上的一类操作系统。 是一种以命令行形式操作的界面，他的所有动作都以命令来完成。2.如何使用DOS操作： 1.win+R调出运行面板 2.在输入框中输入”cmd“，进入终端 3.输入DOS命令，执行3.调出计算机当前本地时间（time）...
2020-07-07 15:29:11
906
原创 CSS练习中|如何制作一个简单的导航栏（初学者：代码+样例）
目标效果： 要点：鼠标悬浮时显示蓝色背景图片今日思考：1.结构：div中放入4个<a>标签 2.插入背景图片（插入图片并不能撑起a，需要给宽和高，即图片的宽高） 但<a>定义了宽、高后仍无效果 ？ 原因：<a>是行内元素，需要转换为行内块元素（display： inline-block）代码：<!DOCTYPE html><htm...
2020-07-03 16:06:47
486
原创 CSS学习中|关于行高line-height
概念：顶线：中文汉字的的上端沿；中线：横过英文字母x的中间的线；基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿；底线：中文汉字的下端沿； （图片摘自水印，若侵必删）行高（line-height）：基线与基线之间的距离为行高，全中文行高即底到底的距离 （图片摘自水印，若侵必删）1.单行文本垂直居中行高=上边距+文字高+下边距代码：<!DOCTYPE html><...
2020-06-30 15:58:34
541
原创 CSS学习中|display（初学者：标签显示模式）
概念：标签以什么方式显示，比如div独占一行，span却一行可放多个作用：由于网页标签很多，在不同的地方用到不同类型的标签，以便更好的完成网页1.块级元素（block-level）常见：<h1>~<h6> <p> <div> 最典型块元素 <ul> <ol> <li>特点：1.自己独占...
2020-06-30 11:19:42
187
原创 CSS学习中|CSS复合选择器（初学者：代码+样例）
学习目的：复合选择器可以选择更准确更精细的目标元素标签，是由两个或多个基础选择器，通过不同方式组合而成的1.后代选择器（重点）概念：后代选择器又称为包含选择器作用：用来选择元素或元素的子孙后代写法：把外层的标签写在前面，内层标签写在后面，中间用空格分开父级 子级 { 属性：属性值； 属性：属性值； ...}html代码：<!DOCTYPE html><html lang="en"> <head> ...
2020-06-29 14:52:24
380
原创 CSS学习中|CSS字体样式
1.font-size：字体大小相对长度：通常使用像素单位：px注意：谷歌默认浏览器文字大小为16px，但是不同浏览器大小可能字号大小不同，所以通常先给boby一个指定页面文字的大小css代码：body { font-size: 16px;}...
2020-06-24 17:47:29
158
原创 CSS学习中|CSS常见选择器（代码+样例）
选择器的作用：找到特定的HTML页面的元素一、基础选择器1.标签选择器指的是用HTML标签名作为选择器优点：能把所有一类标签全部选择出来，如所有<p>标签缺点：不能考虑到同一类标签中的差异，如各个<p>标签想显示为不同背景颜色时，无法使用标签选择器实现html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
2020-06-22 16:45:00
615
原创 CSS学习中|引入CSS样式表的三种方法（书写位置）
1.行内式语法格式：<标签名 style=“属性名1:属性值1;属性值2:属性值2;…;属性名n:属性值n”></标签名>注意：和；的使用代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
2020-06-19 17:29:35
292
原创 HTML常用标签（代码＋样例）持续更新
1.html骨架标签代码：<html> /*根标签*/ <head> /*文档的头部，注意其中必须设置title*/ <title>练习中</title> /*网页的标题*/ </head> <body> /*文档主体，基本内容都写在这里*/ 菜鸡在练习中！ &l
2020-06-18 17:06:06
1154
转载 （转）HTML中的锚点链接
参考链接：https://www.cnblogs.com/qiujianmei/p/7111600.html一、页面内跳转的锚点设置 页面内的跳转需要两步： 方法一： ①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#） ②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属...
2020-06-08 16:22:48
186
原创 如何理解相对路径和绝对路径
了解基础概念：1.目录文件夹：此文件夹中包含我们所需要用到的所有元素、比如图片、视频等2.根目录：目录文件夹的第一层，即为根目录如图：相对路径：所谓相对，即指同一个网站下，不同文件之间的的位置定位1.同一级路径：代码：同一级路径时，直接写图片的名字即可引用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=
2020-06-08 14:51:32
239
1
原创 Web标准概念及组成
Web标准Web标准：概念：W3C万维网联盟组织制定的一系列标准的集合网页主要组成为三部分：1.结构（Structure）2.表现（Presentation）3.行为（Behavior）因此有三方面对应标准：1.结构化标准语言：多指XHTML和HTML，用于描述网页2.表现标准语言：多指的CSS，用于对网页进行美化3.行为标准：多指的是DOM和EMAscript，目前应用最广泛的是ECMAScript脚本语言,JavaScript（JS），用于让网页动起来（实
2020-06-03 16:31:26
729
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人