尚硅谷前端基础 (56)

好，接下来我们来看我们的第二个练习啊，第二个练习呢，是我们这个图啊，京东的这个左侧的这个导航栏，也就是这个部分啊，这个部分来还是我们来新建我们的一个文件，文件已经创建好了，对吧？我们先把页面截给它整出来，整完以后呢，在这儿我们直接先，哎，不要忘记先来引入我们的这个重置样式表啊link，我们这是点CSS下边的一个re.css然后我们写我们的带标签，在这儿来写我们的样式，你在写的时候一定要注意啊，一定要注意我们必须要重置样式，并且你自己的样式要在它的重置样式的一个下边啊，不然的话，有可能你写那个样式就同时被重置了啊，那先来看我们这个页面，呃，整个页面的一个这个我们直接看图片吧，哎，整个的话实际上是一个导航条，我们还是先不管样式，我们先来看它的一个结构，那首先它整个是一个导航条对吧。

啊，如果你能看清楚的话，这整个外边是有一个白的一个框的，对吧，一个框的，所以这个时候你再去分析这个结构的时候，很简单，一个框就是一个块啊，一个框就是一个块，至于这个框你是用div还是用ul，还是用什么S，还是用navy，还是用什么其他元素，这一块它其实是无所谓的啊，无所谓的，所以这里面首先我们就确定了最外围是有一个块元素啊，有一个块元素，所以呢，我们直接写一个吧，写一个块元素的话，在这儿的话，其实我们可以直接创建一个什么呢？创建一个这个，诶创建一个这个，哎，外部的一个容器啊，外部的一个容器，那这里边我们就要选择一下这个容器我们要用什么啊，用什么，其实可选择的东西有很多，比如说我可以直接整一个div啊，整一个div，或者呢，我可以直接在外边放一个什么呢？放一个navy啊，放一个navy，呃，其实用。

哪个都行啊，用哪个都行，或者最传统的啊，最最传统的，我外边整个是一个ul啊，整个是一个ul，这样也行，所以这个容器我们可以选择的有很多，比如说你可以用nay啊，我们之前说那个标签还可以什么呢？还可以用div，还可以用什么呢？还可以用ul都行，在这儿基本上没什么区别啊，基本上没什么区别，那我们可以用一下什么呢？刚才我们用了ULL了，这我换一个，我直接用一个这个navy啊navy，那这个navy表示的就是我们的一个we部的一个容器，我们给它来一个class啊class class我们叫做一个meu，我们叫做一个menu吧，啊就一个menu，那这个玩意儿我们创建完了啊，不叫menu，我们换一个，换一个我们叫做一个left navy啊left NAV因为它是一个左侧导航嘛，啊左侧导航，那这个时候我们这个导航条的一个整个这个容器就给它创建完了，那接下来里边它有什么家用电器呀，手机运营商数码电脑办公是不是有这些。

东西啊，哎，这些东西用什么？哎，这些东西其实你看每一个这个东西是不是都独占一行啊，哎，独占一行，所以这里边我们可以直接用一个什么呢？哎，用div就完事了啊，用div就完事儿，那这里边啊，如果你用的是na na里面的值接放div就完事了，如果是div div里边也是放div也OK，然后如果你是u lul里边你要注意了，你要放的是一个LY啊，最好就是放LY，但是你ul里边放div也行，但是最好就放LY，所以这个结构设计起来非常灵活，还是那句话，整个的话，你做的时候要求就是你能把这个整个结构给它搭出来，能用3S给它改就行了，但是结构设计的好，你写起来也会轻松一些啊，结构设计的不好，你写起来就会麻烦一些啊，好，Div整完了，也就是说我的这每一个是不是都是一个div啊，哎，每一个都是一个div，那div里面你像这种家用电器呀，手机啊，运营商啊，数码啊，这些东西属于什么。

啊，这些东西就属于超链接了啊，就属于超链接了，所以div里边我们还得放超链接，放这个超链接，放超链接呢，我们这直接写一个井号，我们来看第一个里边是一个叫做我看看啊，能不能给它分一下页啊，把这关掉，第一个里边我们这个叫家用电器，所以这个第一个超链接里边我们应该写一个这个家用电器，哎，家用电器第一个超链接就有了，然后下边是不是每一行是不是都有超链接啊，所以这个时候下边就是每一行就是一个div，你就挨巴的往下顺序往下写就行了啊，往下写行了，然后呢，这里边往下一个class叫做一个item item啊，因为我们这个left na嘛，这个里边有item啊，Class我们叫做一个item item这里边啊我们来看一下，那现在第一个还好吧，第一个因为就一个家用电器，而下边这个你看还有什么呢？还有什么手机运营商数码，那这个就产生了一个问题，这三个玩意儿是。

个超链接呢，还是一个超链接呢？哎，很明显其实你这看不出来，你可以直接看官网原版的，你看我是不是移动到每一个超链接上，每一个超链接有它自己的颜色呀，诶所以很明显这应该是每一个都是一个超链接啊，每一个都是超链接，然后超链接直接使用这个斜盖隔开，那所以这里边像这个我们就需要三个超链器啊，三个超感器，我们直接写一下A标签，我们这是一个井号简写了，这是一个这个手机手机，然后我这复制一下啊，复制一下。手机，然后是我们这个运营商，运营商然后下边是一个这个数码啊数码，然后他们之间是用一个这个鞋盖给它隔开啊，鞋盖给它隔开，每一个，每两个超链接之间会有一个这个鞋盖，然后在这儿我们一共有几个呢？一共有一二三四五六七八九十十一，十二十三，十四十五十六十七十八，一共有18个，那现在我已经写了两个了，写了两个我还差16个啊，所以这就是3456789。

十。十一十二十三十四十五十六啊，大概我们是这么一个六个，然后格式化的话，你看现在格式会比较乱，格式化你直接右键有一个这个格式化文档快捷键是一个shift的al加F，给它格式化一下啊，我们来看一下数量对不对，我们可以点一下这个标签先给它叠起。别去了。因为这块刚才我复制的，我不确定有没有数错啊，你写的时候也是慢慢写，写的可以最好的给他细心一点啊，细心一点哎，这是一个两个三个四个五个六个七个八个九个十个11。

12、13、14、15。然后这是一个。16啊16那等于还还差两个啊，还差两个，我们直接复制一下CTRLCCTRLV再复制两个啊al shift加L格式化诶是吧。格式化我们叫做shift out加上F，我们来看一下，诶格式化一下，那现在我们整个这个一共是18个对吧，18个菜单我们在这儿都创建完了，然后其实你要改的话，你也可以去把里边的文字去做一下调整，我在这儿我就不去调整啊，我就不去调整了，所以这个结构我们就给它定义完了，整个一个结构呢，哎，也不难啊，也不难，外围是一个nay，然后里边是一个div div里边我们放了数量不等的一个超链接，那现在运行起来，我们来看看大概什么样子。

直接右键我们来运行一下。哎，那现在是是这个样子是吧，哎呀，当然这个东西看起来有点有点丑啊，有点丑，那这样我现在呢，我先把这个内容啊改一下，视频我先暂停一下，我先改，改完了以后呢，我们再接着往下往下写啊。好，经过了我的一个努力是吧，当然对于你们来说，可能看视频就嗖的一下就过去了是吧，但是经过我的努力，终于把这些东西都给他写完了啊，你们写的时候也是自己最好呢，一点点写啊，慢慢写，别着急，这东西也没什么可难的，结构都已经给你了，其实很大程度上你就照着写就完事了啊嗯，也没有这东西也没什么注意事项是吧？还有一个注意事项，我可以把这个这个标题改一下，改叫document是吧，我们改一个改一个是我们这个京东的一个这个左侧导航啊，左侧导航好就写完了啊，还是啊，写这种结构的时候一定要耐心，你看我这发现我就有错的了，食品这应该是A标签不完整啊，我们看一下食品，食品。

食品食品食品。在这食品这少了一个小监块对吧，少了监块，然后auto仕F给格式化一下，再看效果易刷新，嗯，这回就没问题了，对吧？那整个这个结构就写完了啊，还是强调一下，写结构的时候没什么好说的，细心点啊，慢慢写就是别别出错，出错没关系，出错慢慢找就行了啊，当然还是那句话，这是我们的一种结构，我用div na和div写的，你要写的时候你可以再去换啊，这都无所谓，那接下来结构整完了，我们就要写这个样式了，也就说我们要让我们这个，诶要给它进行一个装扮，把它化妆，让那更像我们这个原版那个啊，原版的也就是像像这个东西，对吧，这个东西我们来看看怎么做，怎么做的话，首先我们来看，首先这个框啊，它整体也是有一个宽度和高度，那这个我就直接看看网站的了啊，看网站的我们直接就开发主工去看一眼就完事，这应该是跟刚才咱们做的一边大，就是刚才做的图片那个，你看他这块用的是一。

呃，Ul对吧，Ul肯定是多大个的，它渲染完了是一个一百九乘以一个450，是不是跟那个是一边大呀，诶我们学城是不是一边大，我们直接选选中它，你看这实际多少是一个一百九乘以一个四百七啊470，但是这为什么显示四百五呢？因为上下还有十个像素的一个拍顶，上下十个像素那20加上四百五是不是正好四百七啊，哎，正470，所以它上边有一个距离，是因为它不让那个标签和上下给它贴死了，所以它会在上下各留一个这个，各留一个这个，诶内边距啊，留一个拍顶，你看这个绿色就属于内边距，所以我们就直接写了啊在这儿我们来先设置什么呢？哎，设置，呃我们先呀，还是我们先来为我们这个bodyy，我们来设置我们这个bodyy，我们来干嘛呢？给body设置一个背景，直接body body，我们直接啊，Background color background color，来一个井号，一个BFA设置。

这个背景干嘛呢？哎，让我们能看见我们这个东西啊，然后在这儿我们来设置我们这个菜单，诶菜单的一个这个什么呢？哎，外部的一个容器，也就是我们那个navy navy的话我们叫做一个点，一个life的一个navy啊我们起了这么一个class class呢，哎，我们的一个，诶外外刚才看的是一个190个像素啊，这是设置我们这个宽度啊宽度，然后这我也写上啊，这我写上，我把注释写全点，你们写的时候有一个参考，当然还是注意我写的时候方法并不唯一，我是这么写的，你有可能你换一种写法也可以实现同样的效果啊body，这是我们设置一个这个设置一个背景颜色，设置一个这个哎网页的一个背景以干嘛呢？哎，以使我们的这个哎方便查看啊，以使我们方便查看，因为它本身是一个是一个这个白色的背景，对吧，你要不设置完了，你看不见啊，方便我们查看，所以这个时候宽度设置完了，然后再来。

设置一个高度，设置我们这个高度，高度呢，本身是一个hi，刚才我们看到是一个450个像素，450像素，然后呢，还有一个设置我们这个拍顶，因为它上下是不是有十像素的拍定啊，所以我直接来一个这个拍顶拍定，注意顺序啊，上右下左，哎，那我们就上下是有一个十个像素左右，没有直接写一个对吧？哎，如果你这个写什么呀，上下是十个像素左右的值是没有的，你像这种情况，零没有值，没有值你就可以不写单位，但是你写个0PX也行啊，你写个0PX也行，但是更可以就是零就可以直接省略不写了，因为零的单位就没有意思，零就是没有嘛，对吧？所以这个时候创建完了，我们来看效果，直接看一下我们这一刷新走一个是不是这么一个效果呀，当然现在看不出来，因为整个都是一个绿色的，所以我再给它设置一个背景颜色，设置一个这个背景颜色很明显啊，它的背景颜色是一个这个是一个白色的，所以我们在这。

直接background color来个井号F啊，然后在这我们来看效果一刷新是不就出来了，哎，是这么一个是这么一个效果啊，也就是说是这是白色吗。我给它吸一下吧，这个我觉得我觉得有点发暗是吧，有点发暗，我们简单吸一下屏幕取色取一个啊，它是一个fe fe fe，那基本上就是白色的啊，那我们就不管它了啊，那可能截图有一些色差啊，色差我们就不管了，那整个这个框我们就给它整出来了啊，整出来以后，然后我们再一点一点去调整，首先我们来看啊，然后呢，我们这个上下这个距离，我们已经给它设置出来了，设置出来以后呢，接下来我们就来指定一下什么呢？诶指定一下，你看我这里边儿是不是等于每一行都是一个菜单啊，这个东西在我们京东页面里是什么效果呢？你选每一行，选中以后它还会有一个这个。

看看啊，刷新一下每一行选中以后，我们来看它是不是还会出现一个背景啊，这个背景是什么玩意儿，这个背景实际上显示的就是就是我这个菜单它有多宽有多高，所以很明显我们的每一个菜单是不是都应该有一个固定的一个高度啊，宽度好说，宽度就是跟这个负元素一边宽，也就是那个一百一百九就行了，但是高度你是不是需要给它指定一下，现在高度什么呢？现在高度就是div的高度，Div没有指定高度，那么div的高度是不是就被这被它这些超链接撑开啊，但是我们实际效果上，每一个div它都会有一个固定的一个高度，所以这个高度我们需要给它指定上，那这个高度呢，你也可以量一下啊，你也可以，比如说就这把截图工具打开。把截图工具打开啊，我这是输入法里的，所以我就把输入法打开。

这东西打开你可以从上面量一下，但是很明显啊，你这玩意儿量啊，挺挺缺德的是吧？18像素大概是一个18，当然我这拖的可能不是特别准，你自己拖的时候还需要准一下啊，哎，不是18，这是一个25像素对吧？是一个25像素，你把这个每个边都得拖的特别的准，是一个25像素，这样才没问题啊，你可以用它拖，但是用这种方式拖的话稍微有点傻，那其实我们最直接就直接选中这元素看一下就完事了，这是一什么呀？25个像素，所以在这儿我们就直接给它指一个高度，是25就行了啊回到这儿来，我们接着写，那在这儿我们来设置什么呢？诶，设置我们菜单内部的这个item啊，Item，也就是我的每一个菜单，我直接点一个left navy下边点一个这个item啊，用一个后代检存器，我们给它一个hi hi是一个25个像素，然后在这儿保存一下，那现在每一个高度就有了，你看整个你把这个写完了以后，是不是效果就出来了，哎，还。

这为了清楚一点，我给他设置一个居中marin margin，我们来一个上下是50像素，然后这来一个这个凹啊AU tu，让它做一个这个居中，然后呢，我们一刷新，哎，是这么一个效果啊，那整个其实整个一个布局效果就出来了，所以你会发现写这么一个菜单对于我们来说是非常简单的，可以很轻松的几行代码就可以把这东西给它搞定了啊非常简单啊，非常简单，那接下来呢，我们就要做一些这种细微的调整啊，细微的调整首先我们来看我们这个东西啊，你一上去以后，它是不是诶我把这东西取消掉啊，我移上去以后，它这是不是会给它设置一个背景颜色呀，哎，背景颜色，那这个时候实际上这个非常简单，当我一上去设置一个颜色，实际上是不是就绑定一个后，哎绑定一个后位，那这个时候这个后给谁榜诶很显然这个后卫还能不能给A榜了，诶注意不能。

给A了，因为什么？因为现在我是移到这上边，它是不是就变颜色呀？诶如果你给A榜，那是什么呀，移到A上它在变颜色，所以这个时候是移到这上面变颜，这个整个这个变颜色，所以这个后味应该绑定给整个这个div，那还是说过这事儿了，就是我们的whole不是只能给A榜的，Ho还有active也可以绑定A和以外的元素，但是link和visit只能绑定给A，而hover和active它是可以绑定给任意元素的啊，任意元素的，所以这个时候我们应该给我们这个L，诶为我们这个LRAL啊我们叫做一个item，诶item设置一个这个鼠标移入的一个状态啊，移入的状态，也就说鼠标移入以后，我应该让它变一个颜色，所以直接来一个left navy冒号，我们来一个ho以后，我要修改一下它的一个背景颜色，那比如说我把这景颜色改成一个红色，那这样的效果就是当我鼠标移入到这上边以后，它。

就变成了这个时候发现效果了，我这个时候我后以后。他整个都变红了，哎，那出现这种情况肯定是写错了，写错在哪了，我这给谁绑的，后文给的是life的navy life navy是谁，这整个是不是。这整个一个是不是left的nay啊，那等于当我鼠标移动以后，我让它变颜色，所以这块我是绑错了，我应该绑定谁应该绑定给item啊，Item移动到哪就让谁变颜色啊，所以这个后应该是给item的，这时候再看效果，这样是就没问题了，哎这样就非常的完美了，当然这个颜色不太对，所以我们这个颜色什么呢？跟它这个颜色有点这个诶灰不去就是一个颜色对吧，灰色一个颜色，那这个颜色是什么颜色，我们直接给它选中这个LY。LY，在这呢，看一下style style是它的样式，现在还没有颜色，我们直接移进去，移进去来看一下颜色是一个在这儿是不是一个D9D9D9啊，哎，所以这个时候我们这个后位也换一个，直接来一个井号D9D9D9，然后我们再看一下，诶组队，刚才我看的是颜色还是什么，我看看啊。

感觉好像严啊，对没错，我们来看我们的效果是不是直接一刷新走走走是不是就这样一个效果了，哎，这样就没问题了啊，这样就没问题了，好，这一块给它设置完了，接下来再看啊，再看现在呢，当我们这框选中以后啊，你看这个灰色的是我们那个div对吧，高度我们给它指定了一个25，然后这个蓝色呢，是div里面那个超链接那个文字，这超链接是可以点的啊，可以点的，然后再看啊，我们这个超链接现在它是在我们这个东西的左上角啊，左上角在左边是没有问题的啊，就应该在左边啊，就应该在左边，但是整个这个超链接它是应该在我的这个。框框的一个中间啊，它现在等于这个位置，是不是垂直方向有点太靠上了，它是不是应该在这个中间这个部分垂直方向啊，我就是垂直方向应该在中间，那这里边我们怎么让这个文字在一个元素里垂直居中啊，垂直居中怎么居中？那在这里我们直接来说一下要哎让一个这个文字在什么呢？在这个负元素中，哎，垂直居中啊，垂直居中只需什么呢？只需将我们这个负元素的line height he设置什么呢？设置为一个和行高一样的值啊和行和我们这个，诶和负元素的什么呢？和负元素he一样的值he。

哎，和he一样的值即可，所以这东西设置起来其实非常简单，我只需要干嘛呢？你看负元素的高度是不是25，哎，负元素的高度是二五，所以我只需要在这个负元素里加上一个line he，把linen he也设置成25像素，那这样我们来看这个文字，你看是不是在这儿垂直居中了，哎，你看上下距离就变成一样的了，这个东西是固定的写法原理后边我们会讲，但是现在你先记住就行了啊，你要想让副元素中的文字垂直居中，把had和light head设置为一样的值就OK了，好，那现在我们这个文字就居中了啊，就居中了，居中了以后我们来看还有一个问题，我们来看这个图里边，直接看图吧，这个图啊，你看我这个文字离这个边儿上，它是不是还有一个距离啊，诶还有一个距离，那这个时候我们写的这个东西它是什么，它是紧紧的贴过去的，所以这个时候我需要把这个文字是往右给它挤一下，诶往右挤一下，你如果需要。

或者这样一个距离，这个距离是多少，我们大概就量一下就完事了啊，大概就量一下就完事。因为这个距离大小无所谓啊，你也可以看一下这个距离是一个18是吧，18，哎18或者19的样子，我们就取一个18了啊18，那这个时候也就是说我需要给这儿设置一个距离是一个18，那问题就来了，这个18，呃，我们肯定是要给这个给它设置，当然这18你给这个超链接设置也可以，哎，也就说你要超链接是往往往这边移动一下，哎，移动一下，所以这个时候我们直接来干嘛呢？哎，我们直接来设置我们这个超链接的一个样式，超链接，诶等会儿的突然想到了，给超链接设置还不行，什么意思呢，刚才我想了一个想法啊，你看我是不是想让超链接往往右移动18个像素，诶，我想法是干嘛呢？我给超链接设置一个margin left，它是不是就往右移18，哎，往右移十吧，但是如果仅仅有第一个这么写是没问题的啊，你有第一个，但是下边你注意像手机，像运营商，像。

注码这些是不是都是超链接啊，所以如果你把这个margin live的设置给超链接了以后，那就会发现这儿会有一个，这儿会有一个，这会有一个，所以如果你想给超链接设置的话，你要干嘛呢？你要找每一个元素里的第一个超链接，这样设置可以的，但是这个时候这么设置是不是有点麻烦了，哎，有点麻烦了，所以这个时候我们有两种选择，一种选择就是。

你直接给Li设置一个外边距，设置一个外边距，整个这块是不是就往这边挤了，哎，往这边挤了效果就出来了，所以我们来看一下啊，当然这种方式不行啊，这方式不对，我们说一下，我们演示一下，我们先演示问题啊，Mar这left刚才我们量了是一个18个像素，这个时候我们来看效果，我这一刷新，诶，你看这距离是不是就就出来了，哎，这距离出来啊，但是这有叠字，我们不管，待会因为字儿太大了，待会我们调整一下就行了，这个距离出来了，但是这对不对呢？不对，这是错的，为什么错的呢？因为我设置了一个margin life，就等于把我的这个div整个往右移动了18个像素，也就是说这一个位置还属不属于我的div了，哎，不属于了，这个位置就不属于div，就属于na了，所以你会发现一个现象，当我鼠标移动的时候，你看这一块是什么，这一块是白色的，所以很显然我们应该移动区域以后，这一块是不是应该也是一个那个灰色的，也就是说这一块区域也属于div的一个内部，所以。

在这儿我用margin left合不合适不合适，因为你一用margin就意味着把这个位置变成了div的外边，就那个item的外边，所以这我们应该用什么呢？你要设这个距离，但是这个距离依然还是我这个div的一个什么呢？内部，所以我这应该用的是一个pading left pading life，那这个里边我们再看效果，这一刷新走一个是不是就没问题了？哎，还在我们的一个内部，所以有的时候你从直观上看，我们用maring，用pading都能实现同一个效果，那这里边你就要注意它的细节区别了，你如果用Mar镜设置这个边距，这个距离它属于我们元素的外部啊，外部，那如果用PA定它属于我们元素的一个内部，这里边你一定要好好的去区分一下，到底这个东西应该属于内部的，还是应该属于外部的啊，给它区分一下好，那这里边我们整个这个结构就给它设置。

只是它差不多了，对吧，那接下来我们再需要调整一下我们的那个一个它里边东西的一个一个样式啊，一个样式，但是这我们还要再补充一个问题，诶有同学说了，老师啊，咱们之前去讲这个，讲这个盒子模型的时候，我们曾经说过一句话，说过一句什么话呢？哎，说了我们的拍定会影响我们整个盒子的大小。对吧，那你好了，你这设置了一个padding left padding left设置完了以后，是不是等于给我们盒子整个宽度加了一个18个像素，18个像素那是不是意味着我的这个div，这个item，这个盒子就被撑大了呢？是不是注意不是，为什么不是，因为现在我们的这个item，也就是那个div，我有没有给它指定宽度啊。

没有指定宽度，没有指定宽度意味着它的宽度的值是凹凸，也就是自动设置，那你如果你不指定拍定，那么凹凸那就是宽度，就是全部，那现在你指定了PA定，指定了一个18个像素，那我们说了我这个等式要满足它的所有那七个属性值加起来是不是应该等于的是负元素的宽度，哎，负元素内容区的一个宽度，那这个时候你加了一个Ding left。宽度加大了，它会自动干嘛呢？从凹凸里，从这个宽度里边减去18，也就是它的总宽度还是那样的，懂这意思吧，因为我在这儿没有写宽度，但是如果你这写了一个宽度，比如说你写了一个宽度，在这你写一个宽度190，那对不起，Y，你写190，那这个时候就肯定干嘛了，会出现这个溢出，但是由于你没写宽度，宽度是自动设置的，它就不会溢出啊，所以注意这个东西大小怎么计算，你一定要想清楚，这个宽度到底有没有指令，如果指令了，那就有可能溢出，没指令它就会被往里挤啊往里挤。

好，这个是我们设置一个pading life写一下设置我们这个div，也就是也就是这个item的一个右那边距，它是为了干嘛的，它是为了将我们这个文字向向里挤啊，向内移动，接下来的事就简单了，接下来就是我们这个文字的一些样式啊，文字的样式我们直接点我们就是一个这个item下边的一个超链接，对吧？指定我们item下边超链接，首先它的字体，字体不是一个这个蓝色的对吧？Color我们改一下，我们这设置一下字体颜色，设置我们这个字体的一个颜色，字体颜色我们用的是一个color color呢，我写一个什么呢？嗯，这应该用黑色，其实也行，但是通常情况下不是黑色，因为有时候黑色感觉有点太硬了，一般可能是一个井号，一个这个三三，我们看一下三个三。

哎，一般可能是这个颜色跟黑色差不多，但是稍微的比黑色会会柔和一些啊，柔和一些，然后接着再看看的话，就是它下边会有一个这个。下划线我们需要去除到下划线，去除我们那个下划线，去除下划线我们这是一个叫做text的re文本修饰，直接设置一个，那这个值我们后边还会具体细具体去讲，现在你先记住怎么用就行了啊，直接给A设置一个text decreation文本修饰设置文档下线没了啊先就没了，然后呢，还有一个最重要的，我们往上点写，这是一个设置我们这个字体大小，很明显这个字儿啊，它大了啊它大了，因为你看这它它它是不是都都叠到一块儿了啊叠到一块了，所以在这儿我们放size，它默认大小是一个16像素，我调一个14，看看14可能也会有点大。

哎，14那基本上就没这么笑过，那他这里边字应该也不出意外，应该也是一个14，我们看一眼吧。14像素对吧，14像素是一个微瑞雅黑的字体，字体我们先不管了，我们就直接设置完了，这样就就OK了啊，那这样的效果基本上就出来了，就就没问题了，但是我感觉这个鞋盖儿有点有点别扭，他这鞋盖我们来看一下啊。它这鞋盖跟我这个鞋盖是是一样，但是我总是感觉这个鞋盖稍微的有一点点的这个。有点粗。有点粗，我看一下他这个鞋盖样式啊，直接点住他这个鞋盖还跟我这还不一样，他这鞋盖还放到了一个什么呀子瓣里，然后是不是还给他设置样式了，我们来看他这个哦，我说怎么不一样呢？因为它的这个鞋盖啊，它单独给设置了一个样式，是一个12个像素啊，是一个12个像素，并且还给它设置一个左右的一个拍顶，所以就导致我们这个鞋盖，你看这个鞋盖它会感觉会会稍微的小一点，但是换到我们这儿呢，我的这个鞋盖就稍微的有点，哎有点的，这个这个细有点，这个有点粗了，对吧，有点粗了，所以这个细节呢，那就是当时我们在设计这个东西的时候啊，没考虑到这个问题啊，没考虑到这个问题，那这里边我们怎么给他去，怎么给他去调整一下呢，调整一下的话呢，其实你可以把这些所有的鞋盖啊，这些所有鞋盖你都给它套上一个这个死SPA，那这里啊，嗯，我们想一下。

我就不这么做了啊，不就我就不这么做了，我采取一种简单的方式，首先呢，我们先解决第一个问题，第一个问题的话就是你看啊，我膝盖后边都会有一个距离啊，有一个距离，你看这都会有一个距离，为什么会有一个距离，因为我这个超链接跟这鞋盖是不是之间会有一个换行啊，一换行就出现括了，那我把这换行啊，我给它去掉，我把这些都写到一行上，写到一行上你的以后的效果，你看它是不是就挨得近了，诶挨得近了啊，所以我们就简单调整一下了，你在写的时候你要注意，最好把这鞋二也给它套成一个SPA，如果要想跟他这个网站做的是一个效果啊，套一个SPA，那现在呢，我就简单一点，我把它之间那个换行给它去掉，所以你可以发现结构我开始设计的有一些小问题，然后我在写的时候也会遇到一些小的问题。

调整一下。那这样的话就确保的话，我们之间就是呃，至少它这个鞋盖跟我们超链接它的前后的距离是一致的啊，至少不会出现那种呃，不一样的距离啊，不一样的距离。慢慢的我们来调整一下，哎呀，所以结构的设计也是很重要的，有一些东西如果你在设计结构的时候，你没考虑到，然后你再改起来的话，就会相对来说会比较的，呃，比较难受啊，比较痛苦，但是这个东西呢，它也不可避免的，因为除非这东西你写过很多遍了，你可能这个结构上不会有问题，一般情况下，我们真正做一个东西，这个结构可能都是需要反复的去调整的，除非你的经验呢，这个东西做了很多，或者你的这对对对对整个这个设计理解的比较的比较透彻，哎，可能达到一个比较完美的状态，但是其实也是，这里面确实是有一个我疏忽的地方，就是这种东西，你看像这个鞋盖，它现在等于没有在任何标签里给它包起来，这也是一个设计的失误，确实不太应该啊，不太应该，正常来讲，我们不要把这东西直接给它裸露出来，尽量能包起来就给它都包起来啊，那现在这样效果也好一些了啊，好一些了，然后整个鞋盖这个。

字体大小比其他的这个东西字体其实要小一些，那那怎么办？没有标签怎么办？没有标签其实也也很简单，我直接找到我的item，我给item设一个字体大小，我们来设置一个字体大小，我们直接给它干嘛呢？来一个font set，来一个12个像素，那这个时候你看这鞋盖整体上是不是就就都小了，哎鞋盖整体量度小了，那它的一个效果什么呢？哎，因为我的这个鞋盖啊，它是整个是写到我们的这个这个里边的写到是我们这个item里边的，对吧？那这个时候我单独给item设置一个大小，设置一个12个像素，那意味着什么呢？Item里边的所有文字都变成了12个像素啊，都变成12像素，而我们在这儿是不是就单独给A设置一个大小，是一个14个像素，哎，那我们就可想而知了，这个大小会继承，A会继承，但是由于我这儿写了一个样式，是不是它会把我们这个原来继承的个样式给覆盖呀，所以这样的效果就是鞋盖，哎，没有。

不覆盖这个样式，所以鞋盖大小还是12个像素，而A我们单独给它设置大小，A就是一个14像素，所以导致我们就单独给鞋盖设置一个，设置一个大小啊，十个大小，但是其实跟原图的话，其实这儿还是有点区别，应该是你看原图的话之间它是不是有一个这个前后有一个距离啊，哎，就是因为它给那个死SPA加了一个拍顶啊，左边加了两个像素，右边加了两个像素，也就是说让这个鞋盖它有一个这个分隔的效果啊分隔的效果，但是现在我们这儿就呃，就没办法做了，除非待会儿我们来把这个每一个鞋盖都给它加上一个SPA，那这里我就不处理了，待会儿你自己做的时候可以自己去处理一下啊，我就不处理了，然后再有一个问题，就是我们的超链接鼠标移到超链接上边以后，超链接是不是还变一个颜色呀，那这比较简单，我们直接获取一下颜色就行了，那实际上是不是就给超链接绑定一个ho啊，它这是一个什么颜色呀？

Color color这儿现在还。我们看一下啊，诶，这是一个C81623 C81623，所以我们直接给超链接来一个后，点一个item下边的A冒号一个po，我们直接来个color color来个井号C81623，然后保存一下看效果。

这关掉啊，然后移动。哎，你看我移动到每个超链接上，是不是都换了一个颜色呀，哎，都换了一个颜色，好，那这个就是我们说的一个ho啊ho这个是设置。设置我们超链接一个这个的一个whole的一个样式啊好，那现在我们这个练习就给它做完了，整体来说其实你模仿我们还是在模，对吧，模仿经过这个网页是怎么做的，你一步一步来做就没问题了，唯独的话有两个特殊属性，新的属性，我们之前没提到过的，一个是head，在这其实就是用来设置我们文字的一个垂直集中的，还有一个就是text，是一个设我们这个下划线的这个东西你就去先记一下，后边我们讲文本样式都会讲啊，这个东西不要着急，然后就是我们在设计的时候，我这个结构上设计的时候有点问题，我给这个鞋盖呢，没有去套这个死SPA，导致我没有办法给它设置边距，那这里边呃，你们下去以后自己改的时候，把这个死SPA都给它加上，待会儿我也改一下，所以你看到我的源码应该已经是我加好的了，所以你也可以自己改一下，看看怎么去处理啊，怎么去处理，那这里呢，我们就先。

说这么多，评一下自己，把这东西给他好好写写啊，我们先说这么多。