diff --git a/00-前端工具/WebStorm的使用.md b/00-前端工具/WebStorm的使用.md index be99dba..b860968 100644 --- a/00-前端工具/WebStorm的使用.md +++ b/00-前端工具/WebStorm的使用.md @@ -178,6 +178,13 @@ +#### 选中正行中的文本 +比如下面这行： +``` + text-align: center; /*让 li 里面的文本水平方向居中*/ +``` + +如果直接按 【ctrl+C】的话，复制的是整行的内容，把前面的空格也包含进去了。如果不想复制空格，有另外一个办法：将光标放在行尾，然后按住【shift+home】，就能选中你想要的内容了。 diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/01-html标签图文详解（一）.md index 5fd634f..a35a8c8 100644 --- a/01-html/01-html标签图文详解（一）.md +++ b/01-html/01-html标签图文详解（一）.md @@ -770,7 +770,7 @@ This
is a para
graph with line breaks ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_10.png) -### 特殊字符 +### 特殊字符（转义字符） - ` `：空格 （non-breaking spacing，不断打空格） - `<`：小于号（less than） diff --git a/02-CSS/07-浮动.md b/02-CSS/07-浮动.md index 71184e6..f4c8c2e 100644 --- a/02-CSS/07-浮动.md +++ b/02-CSS/07-浮动.md @@ -842,7 +842,7 @@ margin:0 auto; 对上面的第三条总结一下：（非常重要） ``` -margin:0 auto; //让这个div自己在大容器中居中。 +margin:0 auto; //让这个div自己在大容器中的水平方向上居中。 text-align: center; //让这个div内部的文本居中。 ``` diff --git a/02-CSS/08-CSS属性：定位属性.md b/02-CSS/08-CSS属性：定位属性.md index b1b5479..82c497f 100644 --- a/02-CSS/08-CSS属性：定位属性.md +++ b/02-CSS/08-CSS属性：定位属性.md @@ -329,9 +329,9 @@ p将无视父亲的padding，在border内侧为参考点，进行定位： ![](http://img.smyhvae.com/20180116_1335.png) -### 让绝对定位中的盒子居中 +### 让绝对定位中的盒子在父亲里居中 -我们知道，如果想让一个**标准流中的盒子居中**（水平方向看），可以将其设置`margin: 0 auto`属性。 +我们知道，如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。 可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做： @@ -508,8 +508,15 @@ body{ ![](http://img.smyhvae.com/20180116_1445.png) -z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。 +z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是**层级**的应用。 + + +**层级：** + +（1）必须有定位（除去static） + +（2）用`z-index`来控制层级数。 diff --git a/04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md b/04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md index 1242710..3736bc7 100644 --- a/04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md +++ b/04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md @@ -358,7 +358,9 @@ css代码解释： 接下来我们只做顶部的banner图，效果如下： -20180122_1020.png + +![](http://img.smyhvae.com/20180122_1020.png) + 也就是上图中“1元抢宝”的那个位置。 diff --git a/04-前端基础练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md b/04-前端基础练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md new file mode 100644 index 0000000..44b4367 --- /dev/null +++ b/04-前端基础练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md @@ -0,0 +1,794 @@ +02-CSS基础练习：JD首页的制作（快捷导航部分） + +我们在上一篇文章中制作的网页最顶部的导航，是属于网页导航。 + +本文中，Banner图上方的导航，叫做**快捷导航**（shortcut）。 + +##快捷导航的骨架 + +我们先制作快捷导航的骨架。如下图所示： + +![](http://img.smyhvae.com/20180123_1057.png) + +上图中，`shortcut-nav-menu-all`和`shortcut-nav-menu-one`都是属于`shortcut-nav-menu`部分，只不过，后者是将父亲撑破了。 + +为了实现上图，对应的html代码如下： + +```html + +
+
+
+
+ 全部商品分类 +
+
+ 下一段再讲 +
+
+
+ +
+
+ + + +
+
+
+ +``` + +css代码如下： + +```css +/*shortcut-nav部分start*/ +.shortcut-nav { + height: 44px; + border-bottom: 2px solid #B1191A; +} +.shortcut-nav-menu { /*撑开和撑破是两回事：撑开说明盒子变成那么大，撑破盒子还是那么大，子盒子很大。子盒子shortcut-nav-menu-one把父亲撑破了*/ + width: 210px; + height: 44px; /*浮动的盒子相互影响，不过是否在同一个盒子中*/ + float: left; + position: relative; + z-index: 1; /*通过z-index属性将层级放到最高*/ +} +.shortcut-nav-menu-all a { + display: block; + width: 190px; + height: 44px; + color: white; + padding: 0 10px; + background-color: #B1191A; + font: 400 15px/44px "microsoft yahei"; +} +.shortcut-nav-menu-one { + height: 465px; + margin-top: 2px; + background-color: #C81623; + border-left: 1px solid #B1191A; + border-bottom: 1px solid #B1191A; + /*border-left: 1px solid #000;*/ + /*border-bottom: 1px solid #000;*/ +} +.shortcut-nav-items { + width: 730px; + height: 44px; + float: left; +} +.shortcut-nav-items li { + float: left; +} +.shortcut-nav-items a { + display: inline-block; + height: 44px; + padding: 0 20px; + color: #333; + font: 400 16px/44px "microsoft yahei"; +} +.shortcut-nav-items a:hover { + color: #C81623; +} +.shortcut-nav-img { + width: 200px; + height: 44px; + float: right; + margin-top: -10px; + margin-right: 50px; + /*position: relative;*/ + /*left: -50px;*/ + /*top: -10px;*/ +} +/*shortcut-nav部分end*/ +``` + + +## 具体的商品分类 + +商品的具体分类即`shortcut-nav-menu-one`部分，我们来实现这部分的代码。要求实现的效果如下： + +![](http://img.smyhvae.com/20180123_1510.gif) + +我们在上面的代码中已经给`shortcut-nav-menu-one`设置了一些属性（例如给左边和下边增加一个像素的红色边框），在此基础之上，需要新增的代码如下： + +html代码： + +```html + +
+ +
+ +``` + +css部分如下： + +```css +/*具体的商品分类start*/ +.shortcut-nav-menu-one ul { + font: 400 14px/31px "microsoft yahei"; /*字体属性具有继承性，让儿子 a 具有此继承性*/ +} +.shortcut-nav-menu-one li { + padding-left: 10px; + position: relative; +} + +.shortcut-nav-menu-one a{ + color: #fff; +} + +.shortcut-nav-menu-one i { + right: 10px; + position: absolute; +} + +.shortcut-nav-menu-one li:hover { + background-color: #fff; +} + +.shortcut-nav-menu-one li:hover a,span,i{ + color: #C81623; +} +/*具体的商品分类end*/ +``` + + +## 轮播图slider + 京东快报 + +接下来，我们要实现下面这个部分： + +![](http://img.smyhvae.com/20180123_1527.png) + +组成部分包括：左侧的轮播图、右侧的京东快报 & 充话费 & 右下角的小海报。 + +结构如下： + +```html + +
+
+
+ +
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+ +``` + +我们依次来讲解。 + +### 1、轮播图：main-slider + +首页的banner图是首页独有的，所以这部分的css代码要写在index.css里，不要写在base.css里。 + +html代码如下： + +```html + + +
+
+
+ + + + +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
+ < + > +
+
+
+ + +``` + +注意：超链接 a 标签中，`href="javascript:;`表示点击超链接时，什么都不做。 + +CSS代码如下： + +```css +.main-slider { + float: left; + margin: 12px 0 0 220px; + width: 730px; + height: 454px; + position: relative; +} + +.main-slider ul { + position: absolute; + bottom: 10px; + left: 50%; + margin-left: -66px; +} + +.main-slider ul li { + float: left; + width: 18px; + height: 18px; + color: #fff; + background-color: #3E3E3E; + border-radius: 50%; /*圆角矩形*/ + line-height: 18px; + text-align: center; /*让 li 里面的文本水平方向居中*/ + margin: 0 2px; + cursor: pointer; /*鼠标悬停时变成小手*/ +} + +.main-slider .arrow-left { /* 轮播图左侧的箭头*/ + position: absolute; + top: 50%; + margin-top: -31px; + left: 0px; + width: 28px; + height: 62px; + background-color: rgba(0,0,0,0.3); + color: #fff; + font: 400 22px/62px "sumsun"; + text-align: center; + border-radius: 10px 0 0 10px; +} + +.main-slider .arrow-left:hover { + background-color: rgba(0,0,0,0.7); +} + +.main-slider .arrow-right { /*轮播图右侧的箭头*/ + position: absolute; + top: 50%; + margin-top: -31px; + right: 0px; + width: 28px; + height: 62px; + background-color: pink; + background-color: rgba(0,0,0,0.3); + color: #fff; + font: 400 22px/62px "sumsun"; + text-align: center; + border-radius: 10px 0 0 10px; +} + +.main-slider .arrow-right:hover { + background-color: rgba(0,0,0,0.7); +} + +``` + +代码解释如下； + +（1）轮播图，我们采取的方式是：在超链接 a 里面放一个img标签。 + +（2）指示点：在一个ul中放多个li。然后通过绝对定位的方式，让ul放在轮播图的正中间（水平方向）。最后详细设置每个指示点li的属性（比如，`text-align: center`属性可以让li里面的文字水平居中）。 + +（3）左右两边的箭头：鼠标悬停时，颜色不同。我们通过`background-color: rgba(0,0,0,0.3)`设置背景的透明度。 + +最终实现的效果如下： + +![](http://img.smyhvae.com/20180123_1951.png) + +### 京东快报 + +html代码如下： + +```html +
+
+

京东快报

+ 更多 > +
+
+ + +
+
+ +``` + +css代码如下； + +```css +.main-news-top-faster { + height: 163px; + border-bottom: 1px dashed #E4E4E4; /*虚线*/ +} + + +.main-news-top-faster-title { + height: 32px; + line-height: 32px; + border-bottom: 1px dotted #E8E8E8; /*点线*/ + padding: 0 15px; + +} + +.main-news-top-faster-title h2{ + float: left; + font: 400 16px/32px "microsoft yahei"; +} + +.main-news-top-faster-title a { + float: right; +} + +.main-news-top-faster-content { + padding: 5px 0 0 15px; + +} + +.main-news-top-faster-content li { + line-height: 24px; +} + +.main-news-top-faster-content span { + font-weight: 700; + margin-right: 5px; + color: #666; +} + +.main-news-top-money ul { + width: 250px; +} + +``` + + +### 3、充话费部分：12个单元格（重要） + +**（1）步骤一：**画表格 + +充话费这部分，我们不用table标签来做，一般table标签一般是用来放文字的。这里因为有图片，所以我们用ul标签来做，在ul里放12个浮动的li。 + +如果我们直接这样进行设置： + +```css +.main-news-top-money ul { + width: 250px; +} + +.main-news-top-money li { + width: 62px; + height: 70px; + border: 1px solid #E8E8E8; + float: left; + +} +``` + +会发现，效果不尽人意： + +![](http://img.smyhvae.com/20180123_2202.png) + +上图所示，我们发现，红框部分的12个li，并没有按照我们预期的那样进行排列。因为每个li有border。真实的li当中，它们的border是有重叠的。 + +解决办法： + +> 父亲宽度不够时，为了让盒子浮动不掉下去，可以给子盒子之上父盒子之下再给一个盒子，让它的宽度略大于父亲的宽度即可。 + +比如这里，**本身这个区域整体的宽度是250，我们就设置ul的宽度是260px即可（**满足的条件是：li的宽度*4 < **ul的宽度** < li的宽度*5）。 + +ul的宽度设置为260px之后发现，最右边和最下面的部分会多出来： + +![](http://img.smyhvae.com/20180123_2207.png) + +我们可以给`main-news-top-money`设置`overflow: hidden`，将多余的部分切掉（这是没有办法的事情）。 + +于是乎，充话费这部分的代码如下： + +html部分： + +```html +
+ + +
+``` + +css部分： + +```css +.main-news-top-money ul { + width: 260px; /*让宽度略大于整体的宽度250px*/ +} + +.main-news-top-money li { + width: 62px; + height: 70px; + border: 1px solid #E8E8E8; + float: left; + border-top: 0; /* 将每个单元格的上边框去掉，因为跟单元格的下边框重合了。*/ + margin-top: -1px; /* 整体向上移动一个单位，因为边框重合了*/ + margin-left: -1px ;/* 整体向左移动一个单位，因为边框重合了*/ +} +``` + +这样的话，表格就画好了： + +![](http://img.smyhvae.com/20180123_2240.png) + +**（2）步骤二：**往表格里填充内容 + +接下来，我们往表格里填充内容。最终，充话费部分的代码如下： + +html部分： + +```html +
+ +
+``` + +index.css部分： + +```css +/*充话费部分start*/ +.main-news-top-money { + overflow: hidden; /*将多余的部分切掉*/ +} + +.main-news-top-money ul { + width: 260px; /*让宽度略大于整体的宽度250px*/ +} + +.main-news-top-money li { + width: 62px; + height: 70px; + border: 1px solid #E8E8E8; + float: left; + border-top: 0; /* 将每个单元格的上边框去掉，因为跟单元格的下边框重合了。*/ + margin-top: -1px; /* 整体向上移动一个单位，因为边框重合了*/ + margin-left: -1px ;/* 整体向左移动一个单位，因为边框重合了*/ +} + +.main-news-top-money li a { + display: block; + width: 62px; + height: 30px; + padding-top: 40px; + text-align: center; + line-height: 30px; + position: relative; +} + +.main-news-top-money li a i { + width: 25px; + height: 25px; + position: absolute; + top: 13px; + left: 18px; + background: url("../images/fly.png") right top; +} + +.main-news-top-money .main-news-top-money-icon2 { + background: url("../images/fly.png") right -25px; +} +/*充话费部分end*/ +``` + +代码解释： + +- 单元格里的文字：我们可以给单元格里的文字设置padding-top，保证文字位于单元格的底部。 + +- 单元格里的图片（精灵图）的位置：通过子绝父相的方式（子是图片``本身，相是每个单元格里的超链接文字``）。通过子绝父相的方式定位之后，发现精灵图都是一样的图标，目前的处理办法是：手动添加不同的class进行修改精灵图，以后等我们学习js了，就不用这么麻烦了。 + +画出的表格如下： + +![](http://img.smyhvae.com/20180124_1121.png) + + +## 今日推荐 + +接下来，我们开始做下面这部分： + +![](http://img.smyhvae.com/20180124_1434.png) + +上图中的“今日推荐”，标签可以这样布局：ul > li > a > img + +为了防止这部分的内容跑到上面去，我们可以给上面的`class-main`部分清除浮动。 + +“今日推荐”这部分的代码如下。 + +html代码如下： + +```html + +
+
+
+ +
+ +
+
    +
    • +
    • +
    • +
    • +
+ < + > + +
+ +
+
+ +``` + +index.css中的代码如下； + +```css +/*今日推荐start*/ +.today { + padding: 10px 0 20px; +} + +.today-left a{ + display: block; + width: 210px; + height: 150px; + background: url("../images/today.jpg"); +} + +.today-right { + float: right; + width: 1000px; + overflow: hidden; /*隐藏掉右侧超出的几个像素*/ + position: relative; +} + +.today-right ul { + width: 410%; /*这一点很有技巧*/ +} + +.today-right li{ + float: left; + margin-right: 1px; + +} +/*今日推荐end*/ +``` + + +## banner两侧的广告 + +要实现的内容是下图中的箭头处： + +![](http://img.smyhvae.com/20180124_1615.png) + + +注意这部分的div的位置，是放在`class="shortcut-nav"`和`class="main"`之间的。 + +两侧的广告其实是一个放在 a 标签里的超大背景图，而且这个大图的宽度超过了版心。所以，超链接的宽度给`width: 100%`更合适。a 的高度设置为图片的高度即可。 + +代码实现如下： + +html: + +```html + + + +``` + +index.css: + +```css +/*banner两侧的广告start*/ +.banner-ad { + position: relative; +} + +.banner-ad a { + width: 100%; + height: 644px; + background: url("../images/ad.png") no-repeat center top; + position: absolute; +} +/*banner两侧的广告end*/ +``` + +上方代码中，我们不用给图片的父亲`banner-ad`设置高度。 + +超链接a ：我们不知道超链接的宽度是多少，所以直接设置为`width: 100%`。注意它的背景图的摆放位置，`center`确保了背景图位于水平方向的正中间，`top`确保了背景图和父亲定边对齐。 + + +两侧广告的实现效果如下： + +![](http://img.smyhvae.com/20180124_1600.png) + +注意，上图中，两侧的广告实现之后发现，蓝框部分的两个位置(`main-news-top-faster`和`today-left`)点击时，发现跳转的是两侧广告的链接，因为它们的层级不够高。解决办法：给蓝框这两个部分加一个`position: relative`属性即可提高层级。 + +## 总结 + +上一篇文章和这一篇文章，加起来，最终实现的效果如下： + +![](http://img.smyhvae.com/20180124_1607.png) + +工程文件如下： + +- [2018-01-23-前端基础练习-JD顶部导航.rar](http://download.csdn.net/download/smyhvae/10222155) + + diff --git a/05-CSS进阶/01-CSS的一些小知识.md b/05-CSS进阶/01-CSS的一些小知识.md new file mode 100644 index 0000000..a15aabf --- /dev/null +++ b/05-CSS进阶/01-CSS的一些小知识.md @@ -0,0 +1,125 @@ + + +## CSS + +### 隐藏盒子的几种方式 + +隐藏盒子，有以下几种方式： + +（1）方式一： + +``` +overflow：hidden; //隐藏盒子超出的部分 +``` + + +（2）**方式二**： + +``` +display: none; 隐藏盒子，而且不占位置(用的最多) +``` + + + +（3）方式三： + +``` +visibility: hidden; //隐藏盒子，占位置。 +``` + +（4）方式四： + +``` +pacity: 0; //设置盒子的透明度（不建议，因为内容也会半透明），占位置 +``` + + +（4）方式五： + +``` +Position/top/left/...-999px //把盒子移得远远的，占位置。 +``` + +（5）方式六： + +``` +margin-left: 1000px; +``` + + + + +### 设置盒子的半透明 + +方式一：`pacity: 0.4`。优点是方便。缺点是：里面的内容也会半透明 + + +方式二：css3的技术来解决半透明。如下： + +- background: rgba(0,0,0,0.3); + +- background: rgba(0,0,0,.3); + +备注：`a`指的是alpha透明度。 + + +### 给标签的形状设置为圆角矩形 + +``` +border-radius: 50%; +border-radius: 10px 0 0 10px; +``` + + +### 行高的问题：儿子把父亲撑开 + +比如对于下面这样的标签： + +``` +
+ +
+ +``` + + +前置条件：如果我们给父亲div的行高设为31px，然后给儿子a的行高也设置为31 + +结果：当我们给儿子a设置了字体属性之后，会发现，父亲被撑高为32px了。因为font字体自身会比较大，多撑出了一个像素。 + +解决办法：**行内元素尽量不要设置font属性**。对于行内元素而言，如果它和父亲都设置了行高，就不要去给自己设置font属性了。要么就，不要同时设置行高。 + + +### 背景图不能撑开盒子 + +高和行高都可以城开盒子，但背景图不能撑开盒子。 + + + + + + + +## JS + +### 超链接``的href跳转 + +一个空白的超链接如下： + +``` + +``` + +当点击超链接时，由于 href 的属性值的不同，可以产生很多种情况： + +```bash + href="" //刷新页面 + + href="#" //跳转到当前页面的顶部（不会刷新） + + href="javascript:void(0)" // 什么都不做 + + href="javascript:;" // 什么都不做 + +``` + diff --git a/README.md b/README.md index 8cf7877..5a4bb42 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ - [01-CSS基础练习：JD首页的制作（顶部和底部）](./04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md) +- [02-CSS基础练习：JD首页的制作（快捷导航部分）](./04-前端基础练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md) diff --git a/推荐链接.md b/推荐链接.md index 23745b6..6b4b0d4 100644 --- a/推荐链接.md +++ b/推荐链接.md @@ -71,6 +71,11 @@ - [一个三年工作经验的软件工程师的经验之谈](http://www.cnblogs.com/lovesong/p/5721828.html) +### 2018-01-23 + +- [2018 前端趋势：更一致，更简单](https://mp.weixin.qq.com/s/HdNQv6eRchBXpNUVRuLZpQ) + +