From 0362b3095b4f3f995993f6add87438ec769bab93 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 19 Mar 2020 18:03:03 +0800 Subject: [PATCH] =?UTF-8?q?update:=20img=E6=A0=87=E7=AD=BE=E7=9A=84?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/02-Git的使用.md | 2 + 01-html/01-html标签图文详解（一）.md | 69 ++++++---------------------- 02-CSS基础/10-CSS3选择器详解.md | 2 - 03-CSS进阶/CSS开发积累.md | 10 ++++ 03-CSS进阶/CSS文章推荐.md | 12 +++++ 5 files changed, 37 insertions(+), 58 deletions(-) create mode 100644 03-CSS进阶/CSS文章推荐.md diff --git a/00-前端工具/02-Git的使用.md b/00-前端工具/02-Git的使用.md index be16469..f7c1079 100644 --- a/00-前端工具/02-Git的使用.md +++ b/00-前端工具/02-Git的使用.md @@ -174,6 +174,8 @@ git cherry-pick commit1 - [Mac 运行sh文件，也就是传说中的shell脚本](https://blog.csdn.net/yusufolu9/article/details/53706269) +在执行`./email.sh`后，如果出现`permission denied`的错误，可以先执行`chmod 777 email.sh`，修改文件的权限。 + ## git客户端推荐 市面上的Git客户端我基本都用过了，我最推荐的一款Git客户端是：[Tower](https://www.git-tower.com) 或者 [Fork](https://git-fork.com)。 diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/01-html标签图文详解（一）.md index 7be4d8a..3126b96 100644 --- a/01-html/01-html标签图文详解（一）.md +++ b/01-html/01-html标签图文详解（一）.md @@ -879,11 +879,11 @@ img是自封闭标签，也称为单标签。 #### 能插入的图片类型： -- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。 +- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。 - 不能往网页中插入的图片格式是：psd、ai -> HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。 +> HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。 ### `src`属性：图片的相对路径和绝对路径 @@ -895,7 +895,7 @@ img是自封闭标签，也称为单标签。 #### 1、**写法一：相对路径** -相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和父路径。 +相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和上一层路径。 举例1： @@ -922,7 +922,7 @@ aaa/../bbb/1.jpg ```html ``` -上方代码的意思是说，当前页面有一个并列的文件夹`images`，在文件夹`images`中存放了一张图片`1.jpg` +上方代码的意思是说，当前html页面有一个并列的文件夹`images`，在文件夹`images`中存放了一张图片`1.jpg` 效果： ![Paste_Image.png](http://img.smyhvae.com/20151001_19.jpg) @@ -950,16 +950,18 @@ aaa/../bbb/1.jpg （1）以盘符开始的绝对路径。举例： ```html - + ``` （2）网络路径。举例： ```html - + + ``` -大家打开上面的img中的链接，扫一扫，可能有惊喜哦。 + +大家打开上面的img中的链接，可能有惊喜哦。 ### 相对路径和绝对路径的总结 @@ -992,11 +994,11 @@ aaa/../bbb/1.jpg - `width`：宽度 - `height`：高度 - - `Align`：指图片的水平对齐方式，属性值可以是：left、center、right + - `Align`（已废弃）：指图片的水平对齐方式，属性值可以是：top、middle、bottom、left、center、right。该属性已废弃，替换为 `vertical-align`这个CSS属性。 - `title`：**提示性文本**。公有属性。也就是鼠标悬停时出现的文本。 - - `border`：给图片加边框（描边），单位是像素，边框的颜色是黑色 - - `Hspace`：指图片左右的边距 - - `Vspace`：指图片上下的边距 + - `border`（已废弃）：给图片加边框，单位是像素，边框的颜色默认黑色。该属性已废弃，替换为 `border`这个CSS属性。 + - `Hspace`（已废弃）：指图片左右的边距。 + - `Vspace`（已废弃）：指图片上下的边距。 - `alt`：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。（有的浏览器不支持） @@ -1039,55 +1041,10 @@ aaa/../bbb/1.jpg （1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。 （2）如果想实现图文混排的效果，请使用align属性，取值为left或right。 -### 热点问题 - -指的是对图片的**局部区域**加超链接。 -我们知道，如果给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。举例： -```html - -``` -上方代码表明：给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。 -现在，我只想对图片的局部区域加超链接，该怎么做呢？这里的难点在于坐标的确定，此时需要用到Dreamweaver。 - -![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_22.png) - -上图中，切换到“设计”标签，然后： - -![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_23.png) - -上图中，点击菜单栏`插入-图像`，导入图片： - -![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_24.png) - -，在图片上点击右键，选择`属性`，弹出属性面板： - -![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_25.png) - -上图中，我们可以利用红框部分的`地图`绘制需要添加超链接的区域。箭头处表示的是要链接到的文件。蓝框部分表示打开新页面的方式，蓝狂部分的`new`是没有下划线的，它和`_blank`的含义是一样的。 - -![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_26.png) -局部区域的热点设置完毕后，上图显示，红框部分就是多出的代码，也正是我们需要的代码。多出的代码如下： -```html - - - - -``` -上方代码中，第一行的`usemap="#Map"`表示我要引用名为`Map`的地图。 -然后第02至第04行就给出了地图的定义。 -效果演示： - -![3.gif](http://img.smyhvae.com/3.gif) - 最后，送上妹子的近照一张。楼主已经仁至义尽了：http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg 怎么？还没看够？且看下文：[HTML标签----图文详解（二）](http://www.cnblogs.com/smyhvae/p/4852863.html) -## 我的公众号 - -想学习**代码之外的技能**？不妨关注我的微信公众号（千古壹号id：`qianguyihao`）。 - -扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： ## 我的公众号 diff --git a/02-CSS基础/10-CSS3选择器详解.md b/02-CSS基础/10-CSS3选择器详解.md index 7616ac9..d153a56 100644 --- a/02-CSS基础/10-CSS3选择器详解.md +++ b/02-CSS基础/10-CSS3选择器详解.md @@ -1,8 +1,6 @@ -> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8426799.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 -> 以下是正文。 ## CSS3介绍 diff --git a/03-CSS进阶/CSS开发积累.md b/03-CSS进阶/CSS开发积累.md index ae23362..f1aacf6 100644 --- a/03-CSS进阶/CSS开发积累.md +++ b/03-CSS进阶/CSS开发积累.md @@ -1,4 +1,14 @@ +### 让flex盒子中的子元素们，居中 + +flex布局常用的三行代码： + +``` + display: flex; + justify-content: center; // 子元素在横轴的对齐方式 （左右居中） + align-items: center; // 子元素在竖轴的对齐方式（上下居中） +``` + ### 让文字只显示一行，超出显示省略号 diff --git a/03-CSS进阶/CSS文章推荐.md b/03-CSS进阶/CSS文章推荐.md new file mode 100644 index 0000000..db37ca0 --- /dev/null +++ b/03-CSS进阶/CSS文章推荐.md @@ -0,0 +1,12 @@ + + + +### 2020-03-16 + +Bootstrap 中文文档： + + +### 2020-03-13 + +- [CSS实现鼠标悬停弹出微信二维码](https://www.hanost.com/637.html) +