CSS小米商城侧边导航栏效果开发原创

大家好，我是青青老师，本节课我们带着大家做这样一个小米商城左侧菜单的效果啊，我们来看一下我们做好的效果啊，大家可以看一下啊，当然因为我们现在还没有学到定位啊，所以我们右边的这个部分我们就不讲了，我们只讲左边的部分，那么这样一个导航的话，在我们的网站开发当中啊，是经常需要用到的，所以这一节课的内容是非常重要的，好，那么接下来我们就开始这样一个代码的书写。那么首先我们在这里要新建一个网页文件啊，我们来看一下，好点击啊，在这个最外面的这个地方点击新建，我们来给它取个名字叫放小米商城左侧菜单，点STML，好，然后我们按住shift键感叹号回车，我们可以调出我们这个网页的股价，那么接下来我们同样的要把这个标题给它修改一下，零四杠绑小米商城，放小米商城左侧。

下单OK，好，那么接下来我们来看一下，首先第一步我们要怎么做啊，当然我们给这个效果加了一个什么，加了这样一个渐变色啊，为了好看，所以首先我们来看一下啊，我们这样一个渐变色是怎么做出来的啊，当然这是给波底加的，所以首先我们要给body底添加这样一个渐变色，我们来给它添加样式是掉tap杠，CSS，好，我们来选中body，我们来看一下我们给它添加渐变是怎么加back image，然后这是一个什么线行渐变啊，所以是这个啊线行渐变，那么这个渐变是什么？从左往右的，所以第一个是to right啊to right就是从左往右。好，那么第二个我们来看一下，它这里是两个颜色的渐变，是不是，我们来看第一个颜色我们可以先给它加个红色，第二个颜色我们给它加个黑色，我们先来看一下效果啊，好，我们来保存一下CRL加，然后我们来在浏览器当中打开看一下，大家看一下是不是看到了这样一个红色到黑色的这样一个渐变呀，OK，好，那么我们来看一下啊，那么接下来我们要把它改成这两个颜色，那么这两个颜色我们来看一个工具啊，这个工具叫做PX号像素大厨把大家看一下，好，我们来把这两个颜色改一下，首先我们来选择这里有个抓手工具，看到没有，我们把它往这边一拖，好我们来这里，当然我们可以选择这里看一下有个吸管，看到没有，我们在这个边上，这里我们来吸一下这个颜色，大家看一下好，然后我们来选择这个颜色啊，井号FDFDD787是不是好，然后我们再选择这个抓手。

工具往右边拖啊，我们来看一下这里吸管我们来吸一下这边这个颜色啊，好，我们把第二个颜色改一下，我们来往这边移一下，那么这个颜色是什么来着？我们来看一下C6FFDD是C6F f DD OK ctrl加S，保存好OK了之后我们来看一下效果，大家看一下，那么这样一个渐变色就做完了，那么OK了之后我们接着往下看，那下一步我们要做什么？那么接下来我们同样的是吧，要在页面当中构建这样一个什么长方形的盒子，好，我们来构建吧，来，我们来新建一个盒子，叫menu me me是吧，回车好OK了之后我们来给他添加宽度和高酒点小menu大括号，我们给他添。

的一个宽度，那么它的宽度是多少呀，我们不知道，所以我们用这个工具来测量一下，选择抓手工具往这边拖一下，好，然后我们来选择这里有个标尺啊，我们来看一下啊，我们从这个区块的最左边这里按一下，然后一直往右边拖啊，往右边拖啊，OK，大家看一下啊，300好，所以我们来看一下啊，我给他加上一个300，然后我们来给他加上一个高度啊，当然这个高度我们先随便加，反正后面我们不需要是不是，然后我们再给他加上一个背景，我们给他一个白色的，OK，好，OK的时候我们来看一下，我们保存一下，好，我们来看一下这个地方写错了，Me MU是不是menu OK，大家看一下啊，当然这个背景怎么样，它没有透明的，而我们这里的背景它是一个半透明的效果，所以我们来把这个背景改成个半透明的，那么这个颜色这里可以用什么RGBA。

好，我们来看一下255255255255255255代表是白色，然后我们来给他一个透明，比如说0.6，好，大家看一下，那么它就透明的啊，所以前面三个只代表的是颜色，后面这个只代表当前这个颜色的透明度，好设置背景，设置背景为白色半透明，OKOK了，这我们接着往下看啊，那么同样的对吧？这个老问题大家看一下，这个盒子与浏览器上面和左边有间距，那么这个间距就是我们的什么玻底默认的自带的对吧？当然我们还是一样的，我们来给大家简单的看一下啊，那我们选中这个玻璃的时候，大家看一下它是不是有默认的八项素的外边距啊，大家看到没？所以我们要把玻璃的默认八项素的外边距把它给干掉，把它设置，为什么？

值为零，当然我们这个地方它一定要当它的值为零的时候，这个这个单位我们是可以干掉的啊，可以省略不写，OK，好，这个时候它与上面和左边的这个间距就消失了，OK了，这我们接着往下看，当然接下来我们为了好看啊这个效果，所以我们同样的要做一步啊，我们要把它干嘛，我们要把这个盒子设置在水平方向居中的位置，也就是说我们把它设置与顶部有一点点距离，然后左边和右边的外边距相等，在水平换成居中，所以我们来给它加上一个代码啊，怎么写啊，我们来看一下啊马IE，我们上面给它加上50像素，左右自动相等居中，下外边距为零，CR加S保存，我们来看一下，那这个时候就在水平方向居中了，是吧？啊，我同样的简单的注释一下，上外边距是50左右，外边距自动相等，第三个字代表下外边距为零，OKOK了，再我们接着往下看，那么接下来我们要做。

这样一个菜单的效果，那么当然我们首先想到的就是用的什么，用我们的UR无序列表来做对吧？好，所以我们这里来用UR无序列表来进行制作我们的这样一个菜单项啊好，我们来看一下啊，我们UR是吧？好回车，然后里面有几项啊，我们来看一二三四五六七八九十，所以我们这里面要十个RI是吧？OK，好，然后我们可以这样是吗？按住count al键，然后好等一下啊，我们来看一下，按住shift键al键，然后什么向下的键头就可以复制了啊当然这里我们还有一个更好更快捷的方式，我们来给大家讲一下啊，我们可以怎么做啊，比如说uri直接一个兼括号，然后Li，也就是说uri下面的Li，然后这个RI要出现多少次，十次就乘以十，按住回车，大家看一下啊，一次性就生成了啊，生成了之后，那么接下来按住count键二键。

我们向下的箭头，我们来给它填点内容啊，1111看这几S我们来看一下效果，大家看到没有，又看到了从上往下排列的这样一串数字是吧？好OK了，之后我们接着往下看啊，当然我们说了导航我们一般是可以点的是不是，比如说我们的小米商城导航，我们点击之后，它按照正常来说对吧，如果它没有这个右边的这个什么菜单，它是可以点击之后可以跳转到一个新的页面的啊，所以我们这里一定是要加上一个超链接的，所以我们要给这些什么文字加上超链接，好，同样的我们来全部选中，然后给他们加上超链接，HLF等于好，然后按住shift的键，然后按住向右的箭头啊选中，选中之后count夹是把它剪切，剪切之后，我们来选中第一个count alt键向下的箭头啊，然后。

圣子加V粘贴过来，好大家可以看一下，那么这样的话，就每一个都加上了A超链接标签，好大家看一下，好是不是加上了超链接，那么接下来同样的我们是吧，让他在新窗口打开，我们可以给他加上一个，他给等于什么？好，然后我们来给他加上一个地址，我们来看一下效果啊百度点com好，OK了之，我们来看一下，我们来点一下吧，点击之后他再看一下啊，它是不是在一个新窗口打开了，OK了，好。

那么OK的时候，我们把这些代码删掉啊，我们来看一下这个结果，我们等下用快捷键一次性生成啊，因为这样写太麻烦了，好，我们来看一下我们怎么快捷键把刚才的代码重写一遍啊，URI先括号RIRI下面还有一个A标签对吧？好，然后我们来把这个选中啊，然后乘以多少乘以十，然后我们按住回车，大家看一下是不是一次性全部就生成好了，OK，好，当然我们如果要给他添加刚才的属性的话，我们可以用刚才的方法，按照我们的抗键out键向下的箭头，然后空格，然后我们来给它加上一个他给，然后杠B好看，再加保存，当然这个时候它里面内容我们没有了啊，我们可以把我们这里的菜单内容把它全部拷贝过来，我们来选中一下，好，选中之后我们先放在上面啊，认真看啊，我们把它先调好。

好，OK了之，我们来看一下啊，我们怎么样快捷一次性搞定，我们把它选中count加X剪切，然后我们COUNT2点向下的箭头，然后count加V一次粘贴过来啊，大家看一下，我们这样子就完美了，OK哦，OK的时我们来看一下，那么这样一个简单的菜单效果就做好了，你点击之后它是可以跳的，只是说我们还没有给他加地址，比如说我们来给他加个地址3W edu.com来我们来点一下吧，第一个再看一下是不是就OK了，好OK了好OK了之后我们接着往下看啊，那么他简单的是吗？他刚开始的样子其实是非常丑陋的是吧？所以我们来让大家看清楚整个uri和RI的结构，我们来先给他们加上一些边框啊，然后再进行修饰，点menu UR我们来给。

给它加上一个边框看效果，我们来给它加上一个像素红色的边框，大家看一下，这就是我们的UR，然后我们再给UR里面的RI也加上一个效果，加上一个边框啊好，我们来看一下啊，我们给它加个蓝色吧，好看大家看一下看到没有，这个外面的这个红色的框框就是我们的UR，这个里面就是每一项RI，这就是我们为什么会在做菜单的时候选择UR序列表来做，因为它本身就符合我们这个导航的这样一个结构，OK好OK了，之后接下来我们来一步一步修饰啊，首先这个外面这个点点我们肯定是不需要的，那不需要我们就把它给干掉啊，当然我们一般来说，不管你做任何开发，这个UR这个点我们都是不需要的，所以我们一般来去掉它的默认样式，我们是这么啊，用UR标签选择器直接全部干掉啊，好累死它，然后把它去掉啊，那么这里就是去掉前面的原点。

去掉点看这加S保存好，OK了OK了之，我们接着往下看，那么这个外面的这个红色的框框的uri跟里面的每一个RI之间是不是有这么大的一个间距啊，这个间距是因为我们的uri，它有默认的类边距产生的，我们同样的检查一下，来看一下，我们来选中这个UR，然后往下看它的核模型，大家看到没有，它是不是有40像素的这个内边距啊，还有16像素默认的外边距，大家看到吗？OK的，所以我们也不需要，所以我们也要一次性把它给干掉啊，比如说我们把它的外边距设置为零，把它的内边距也设置为零，OK，好OK了之后大家看一下，这样就没有问题了，是不是好，那么OK了之，我们接着往下看啊，那么接下来我们要干嘛呀，我们来看一下，诶，大家看一下。

接下来我们来看一下，我们这里的每一项是放在一个RI里面，所以接下来我们可以控制每一个RI的高度，然后让这个文字在这个高度的区块里面在什么在垂直方向居中，好，所以接着往下看，我们来看这个RI，那么接下来我们来给它加上一个高度，那么这个高度是多少啊，42小时，当然如果你怎么样不知道的话，同样的我们可以用这个工具啊，我们可以用这个工具在这里啊，选择这个标尺，同样的从上往下拖一下就好了，拖一下啊四杀二像素，OK，好OK了，之后我们来看一下，这个时候它的高度就变高了啊，当然我们要让这个文字在这个高度里面怎么垂直居中，我们来给它加上一个行高试试啊，好OK了啊，好，到这里之后我们接着往下看啊，那么接下来我们来看一下，当我们的鼠标选中的时候，大家看一下从左往右这个位置，其实它都是可以点击可以跳转的，上面整个这个区位，它其实是被A标签锁。

占有的对吧，但是我们这里我们来看一下，你看放在这里的时候是手指移开就不是了，是不是OK了，所以我们来给这个A标签加上一个边框，我们来看一下这个A标签它所在的区域是多大，Menu uriri下面的A我们来给它同样的加上一个边框，我们来给他一加上一个黑色吧，好大家看一下，诶看到没有，其实这个A标就只占了这么一个小区域，因为我们的A标间它是属于什么行内样内敛样式是不是，所以它本身是什么呀？它是没有宽度和高度的，也就是说它的宽度和高度的话，就是它内容的宽度和高度，所以我们要让它撑满整个RI的话，我们要把它变成一个快捷元素，所以我们给它加上一个display block，就可以把它变成一个快元素，那看变完之后，大家看一下是不是OK了啊，大家看一下OK了啊，好，那么OK了之后我们接着往下看，接下来我们来看一下这里面的文字，那么这个文字首先它是不是有个下划线啊，这个下划线是因为我们的A标签。

在默认的样式造成的，所以同样的，我们一般开发的时候，这个什么样下划线都是不需要的，所以我们在全局里面把它清除掉，好，然后把它加上一个浪，那么这里就是什么去掉下划线，去掉下划线OK，好OK了，这我们接着往下看啊，然后我们来看一下每一个区块大家有没有看到啊，这个文字跟这个左边是不是有一定的间距啊，OK了，好，那么这个间距我们怎么设置啊，当然我们有几种办法，第一种办法就是给这个A标签加内边距，然后把这个文字往右边移，对吧？但是这种方式的话，它会把我们整个的这个A标签的这个宽度怎么样？撑宽是不是啊？当然我们没有给A标签加默认的宽度，它怎么样啊，它也不会撑宽，因为它本身是不是也没有问题，我我们来看一下，我们给大家讲两种方式啊，比如说我们可以给它加上左边就二次相手，大家看一下啊，因为我们没有给它加宽度。

100%，所以它其实自动会计算之后也是可以达到效果的啊，那这是第一种方式啊，也可以啊好，那么还有一种方式我们可以怎么做哈，我们可以把它注释掉，我们来看一下我们可以用什么了哈，它有一个这样的属性杠，那么这个是什么意思啊，加上re，大家看一下它也可以，那么这个是什么意思啊，就是一段文字的首行，这个怎么文字与它的左侧之间的距离看到没有啊，所以这个文字与这个区块左边的距离是多大的r rem是什么？就是两个汉字的空格大小啊，那么这样也是可以的，这样的话我们就不需要在特有些情况下，我们就不需要计算的吧，它的一个宽度了，好，所以我们这里就可以选择用这种方式也可以啊，当然如果你需要很精准的计算，比如说左边十项数，那你就用这个就计算就好了。

我们这里就用两个汉字，基本OK了啊。OK吧，OK了，OK了之后我们把这个什么A标签的颜色也给它改一下，我们改成什么黑色，好大家看一下是不是OK了，那么OK了在我们接着往下看，那接下来我们鼠标放上去啊，当然没有放之前大家看一下在左右边是不是也有一个小图标呀，当然这个小图标是因为什么是给我们这个A标签加了一个背景图片，所以我们来给它加背景图片啊，我们来看一下，好，我们来看怎么加啊，Background，好，我们来看一下啊，我们先这样子吧，杠IMAS，好，然后我们来给他加上一个图片imas，杠，我们这个图片放在哪里啊，我们来看一下，你看这个文件在这里，图片放在这个images里面，我们来找到这个向右的箭头，好，所以我们来看，所以是image下面的right这个啊，OK，好看，加S保存，保存了之后大家看一下这个小图标就出来了，是不是因为它。

破烂的怎么样，它会进行重复是吧，进行平铺是吧，把整个区域铺嘛，当然我们不需要，所以我们可以给他加上一个back repeater啊，然后捞repeat不重不平铺，是不是不重复只留一份就可以了，好OK了，之后接下来我们这个图标，它默认是在左侧这个位置，我们要把它放在这个右边的这个位置上去，所以我们来看一下怎么做啊，我们可以background position，那么这个background position就是控制这个背景图片的位置，那么它这个图片的位置应该是与左边有一定的间距，我们来看一下这个间距大概是多少，我们可以量一下啊，同样的可以用这个尺寸，然后从左往右拖，拖一下就好了啊，大概255，所以我们来看一下，那么第一个值就是与它左边的距离255，那么它还有第二个值，第二个值就是与这个区块顶部的距离，我们来看一下啊啊大概大概十一二像素的样子。

啊，我们来给它加上一个11PX，好，大家来看一下啊，大家看一下这个时候大家看这个背景图片与左边是不是有二二百五十五的间距，与上面大概有11像数的间距，就在这个位置，OK了，好，那么OK了之后啊，当然这个代码我们可以把它进行优化一下，我们来看一下我们把它给注释掉，我们怎么优化，那么我们来看一下我们是不是有一个这个呀，符合样式啊BY对吧？好，我们来看一下，我们把它的第一个代表背景图片的一个地址把它复制过来，直接写在这里啊好，那么第二个就是背景图片不重复，把它直接空格丢在后面，那么第三个控制背景图片的位置，我们直接复制过来，就放在这个后啊，当然这三个值之间要加空格啊，OK好，那么这样子是不是也可以了啊，这是它的符合样式啊，也就是简写OK好OOK了之后我们接着往下看。

那接下来我们来看一下，当鼠标放上去的时候，它是不是有一个背景颜色呀，然后这个文字也变成白色了，包括这个背景图片，它也变成了一个颜色，相当于白色的这样一个箭头了啊好，所以我们来看一下怎么做啊，我们可以点上menu uri下面RI，下面A，好，这个冒号how，就是当鼠标划到这个A标签上面的时候，我们要做几件事，第一我们要改变它的背景颜色，Background，好，我们来看一下它的颜色啊，我们来怎么样用这个吸管控去吸一下，OK，我们是井号FF672个零，OK。

好，我们来看一下吧。再家看一下是不是OK了，好，当然它的文字还没有变白色，所以我们还要把它的文字变成白色，OK，好，我们来看一下啊，白色OK了是不是好，然后这个小图标也要换掉是不是，所以我们要把它的背景图片也要换掉，那么在这个地方大家一定要注啊，我们这个时候换的时候，我们只需要换水啊，我们只需要换这个back in image，也就是只要把这个图片换掉，关于它这个图片是不是重复的，还有它的位置我们是不需要更改的，对吧？所以我们在这个地方我们写的时候应该写什么background杠，I image，然后我们直接把这个地址更换掉就可以了，其他的就不需要动了，好杠，然后第二个箭头，OK，好，我们来看一下，诶，大家看一下是不是OK了是吧，变成白的了，OK，好，那么OK了之后我们接下来我们来看一下啊，最后一个小问题啊，大家看一下啊。

这个大家看这个RI跟这个上面是不是有一定的间距啊是吧？OK，还有我们来看最后一个RI与这个下面是不是也有一定的间距啊，大家看一下是不是好，那么这个间距是怎么产生的呀？我们来看一下啊，我们这个间距我们说了RI是不是放在UR里，所以我们是不是可以给UR加上一个上下的一个内边距就可以了，OK，好，所以我们这里只要给UR加上一个拍D上一下20小时的内边距，左右要不要左右不需要就是好，我们来看一下啊，那大家看一下这个时候上面是不是有间距了，下面是不是也有间距了？OK，好，OK了，之后接下来我们来把这些辅助线干掉啊，辅助线都是为了给大家看效果加的，然后这个RI的也不要了，好，然后这个A标签的也不需要了，OK，好，大家看一下是不是OK了，当然最外面这个高度也不需要了。

OK，大家看一下啊，那么这样一个左侧菜单就写完了啊，好，那么今天晚上这一节课我们就讲到这里，OK啊好，我们来看一下啊，那么我们给大家整理好了这样一个文档啊，如果说大家听完之后自己想要去练习的话，可以用这个文档来练习啊，我们来看一下，来看一下，比如说我们第一步添加背景渐变色啊，代码写在这里，第二步要干码，大家可以看，代码也写在这里，包括相应的分解步骤，第一步，第二步，第三步，第四步要做什么，然后大的你看啊，怎么制作啊，大家看一下啊，这个文档非常的详细啊，就是按照我讲解的思路，一步一步的给大家列出来的，包括每一步的小分解，大家可以看一下啊，如果大家需要的话，可以去私信啊，私信可以拿着这个文档好吧，OK了，那么今天的课我们就讲到这里了，拜拜。