00:00
大家好,我是金西老师,今天我们给大家讲解30个小案例当中的第二个案,这样一个百度新闻列表的效果,那么接下来我们就正式进入到我们代码开发的流程,那么首先第一步我们要新建一个网页文件,我们给它取个名字啊,带序号,带序号的新闻列表效果点HTL好,然后我们按住shift感叹号,按住回车键啊,调出我们网页的股价,同样呢,我们也需要把我们的标题修改一下好了,零二杠,但序带序诶带序号的新闻列表效果OK,好,那么接下来我们来看一下啊,那么这样一个效果,首先第一步我们应该从哪里入手?那么首先我们需要干嘛?我们需要构建这么大的一个长方形。
01:00
然后我们的内容放在这样一个长方形的区域里面,所以首先我们来构建一个div,然后我们给它取个名字叫做news新闻,接下来我们给它加点CSS样式,Style type TST-TS好,那么接下来我们来怎么样给它添加宽度和高度,点六大括号,那么它的宽度是多少呢?高度是多少我们不知道,所以需要我们有测量工具来对它进行测量,那么我们来给这大家介绍一款怎么样测量的工具,叫做号的啊,像素大厨,那么这款工具啊,是专门用来对我们的图片进行尺寸的测量和颜色啊等相关的标注的。好,我们可以看一下,那么这里我们来看一下,我们要测量的话,我们可以选中它,然后从最左边往最右边这里拖动一下啊,就可以测量出它从左到右它的一个宽度,那么这个宽度的话是390,好,所以我们来给它添加一个宽度390,同样我们要给它添加一个高准啊,当然正常的情况之下,我们的高度是不用写的,因为它的高度是随着它的内容自动怎么样自动往下撑的,所以这里为了给大家看效果,我们先给它加上一个固定的高度吧,后面我们把它干掉就可以了。好,我们来给大家先加个背景颜色看效果,好然后我们来右击啊,我们来在浏览器当中来查看一下效果,OK了,好,OK了之后大家可以看一下,这个时候这个红色的盒子与浏览器上面和左边有一定的间距啊,我们都知道这个间距是怎么产生的,我们右击这个检查啊,或者是。
02:51
审查元素我们来选中我们的玻璃的就可以看到了啊,我们的玻璃是不是有默认的八像素的外边距啊,这是我们的浏览器自带的啊,这个给默认这个玻底加的,所以我们不需要,不需要我们就要清除它的默认样式,所以我们要把玻璃的默认样式给清除掉,好Mar把它设置为什么0PSOK好OK了之后我们来看一下这个时候它与什么上面和左边就没有了是吧?好,那么接下来我们来看一下第二步我们应该往哪里开始啊,那么接下来我们来看一下这样一个长方形的盒子,构建好了之后再看一下它是不是与浏览器上面有一点间距啊,还有左边跟右边间距相等,也就是它在水平方向是居中的,好,所以我们来看一下整个让它居中的marin,我们上面给它加个50像素吧,左右l to下零,那么这个代码的含义啊,就是这个意思,第一个上外边距是50像素,左右外边距自动。
03:51
处相等下外间距为零,胖加S保存,我们来看一下,哎,大家看一下,这个时候它与上面50像素的间距就出来了,水平方向自动什么相等居中的,OK好OK了之后接下来我们要给这个什么方框加上一个边框,它有一个灰色的边框,我们来给它加一下border,好,我们给它移项素,实现井号三个D啊,是灰色的意思,看这S好,当然这个颜色太亮了,所以看怎么样遮盖了,我们来看一下,我们按住count加这个反斜杠啊,把它注释掉,然后保存。哎,大家看一下是不是就OK了?好,再往下看啊,大家认真看啊,我们要做一下全局的分析,那么最外面这个大盒子我们刚才已经构建好了,水平也居中了,那么接下来这个大盒子里面放了内容,嗯,我们来,我们换个颜色来标注一下啊,好,我们来看一下大家有没有发现一个点啊。
04:51
这个盒子与它里面的内容之间是有这样一个间距的,对吧?上下左右都有,那么这个间距是怎么产生的呀?是给我们这个外面这个盒子加的四个方向的内边距,好所以我们可以先复制一点内容放到这个里面,我们来对比一下加内边距和每加内边距之前的效果,大家看美甲那边距是不是从上往下呀,是吧?左边也挨着,上面挨着什么,右边也挨着,好那么我们来看有没给它加上一个内边距,之后拍点我们上一下左右,我们给它加15像数就可以了,OK,大家看一下这个时候是不是OK了,它与上面左边右边是不是都有这样一个间距,当然加了这个间距之后,它整个的宽度就变大了,是高度也变高了。
05:36
好,所以我们整个的宽度要减掉多少?左边15像素,右边15像素加起来就是30,所以我们要减掉30,这里是360 OK,当然我们高度不用修改,因为我们说了高度后面会随着内容往下撑,本来我们也不用写好OK了之后我们把这些内容先干掉啊,刚才是为了给大家看效果好,我们接着往下看,接下来我们要怎么样制作这个百度新闻热榜,我们来用我们的二三标签来制作啊,H3我们可以直接打开S3,按住回车键啊,它就可以帮我们自动生成这个标签了,然后我们把这个百度新闻热榜复制过来,复制过来之后我们来看一下啊,当然它默认的就是加粗的字体是吧,但是大家发现没有,它与上面这个间距比较大,肯定不是15像素啊,这是什么原因呢?哈,也很简单,是不是因为我们的S3标签默认的与上面是不是有间距啊,大家看到没有18像素18.720是吧?与下面也有,左边右边都有。
06:36
九所以这个时候我们也要把X3的默认样式给干掉,所以逗号X3把它给干掉,OK,好,我们把这个清掉啊,那么OK了之后我们接着往下看啊,为了让大家更好的看到这个效果,我们可以给这个H3标志,我们给它加个边框来看一下,六二十三,好,我们来给它加上一个一像素的边框啊,银色吧,银色比较显眼,大家可以看一下啊,好,当然它默认的这个字体啊,跟我们这个字体大小比较符合啊,其实它是多大的,我们来给他,我们也可以单独给它控制一下,比如说20小时大家看一下啊,稍微小一点,它那个应该是18左右,好,我们给它加上一个字体大小就可以了,那么OK了之后,好,接下来我们这个边框我们先不干掉,我们先留着啊,后面我们一次性干掉,那么接下来我们来看一下下面是不是有八条新闻呐,那么看到这种列表的效果,我们就知道肯定是用UR来。
07:36
在写,所以我们来用我们的UR来写啊,首先我们的U儿按住回车键,好,那么里面有几个r zi呀,八个是吧?好,那么这里我们来看一下,我们可以用快捷键按住怎么样al键,Shift键,然后向下的箭头它就可以进行复制了,好,那么OK了之后我们接着往下分析啊,那么每一个新闻是都是可以点击的,点击就意味着它肯定是有超链接的是吧?所以我们可以给这里面的每一个RI加上超链接,我们的文字放在超链接里面,那么这个时候我们也可以选择快捷键来加啊,我们按住count键,Alt键向下的箭头一次性选中好拿,然后松开之后按住shift键括号,我们来加我们的A标签,好,大家看到没有,OK了,那么OK了之后我们接着往下看,那接下来我们就要往里面填充内容了,当然也很简单了。我们来把这。
08:36
些内容复制过来,复制过来之后我们先粘在上面啊,我们先放到上面一行一行就好,OK了,之后我们来看我怎么用快捷键,跟刚才一样的,我们首先把这个内容count键S剪切,然后鼠标放在第一个里面,按住count怎么样alt键向下的箭头好,然后count加V一次性粘贴,大家看到OK好,那么这样子就诶写完了,写完了之后我们来看一下它的一个整体的效果啊,那么这个时候它默认的是从上往下加23456788条新闻,OK好,当然为了让大家看清幼儿本身的一个结构的话,我们就给它加上一个边框来看一下,当然我们来看一下啊,包。
09:29
我们给它加上一像素吧,黑色的。嗯,Board看到没有,相当于外面有个大框框,里面放了八条新闻,我们同样的来看一下,点nu u r RI大括号,我们也给它加上一个边框,看一下蓝色的,好呀,又打的太快了,是不是好,大家可以看一下,这样你就可以看清楚整个幼儿的结构了,是吧?OK了之,我们来看一下,首先这个前面的这个点肯定是黑点,是不要的,那不要很简单了,对不对,我们来看一下怎么干掉啊,这里面是不是list整个long,好,这里就是去掉前面的这个默认的圆点啊,我们加点注释啊,去掉圆点OK,好,那么我们来看这个UR跟这个RI,这这中间怎么会有这么大的空隙呢,对吗?啊,这一页。
10:34
是因为我们的UR默认的样式造成的,我们来看一下UR又有什么默认的样式呢?好,我们来选中一下UR,好我们来看一下啊,那么这个时候我们来看一下这个UR,你看marin是不是有外边距啊,然后这里是不是有个内边距啊,看到吧,所以这个UR你看到没有,这个UR你看它与上面这个这个标题这个S3G也有这么大的空隙,就是因为这个U它自带的默认的外边距和内边距啊,所以我们同样的要把UR的内边距跟外边距一次性干掉,所以我们打个逗号,URL写在这个位置啊,好,同样的内边距也要干掉是吧,所以拍定也要把它清理好,那么这样子大家看一下是不是就OK了?好,那么OK了之后我们接着往下看啊,那么我们来看一下,它们之间是有一定的间距的,那么这个间距我们可以怎么说,我们可以给H3加下面的什么,向下的外边距也可以给UR。
11:35
下加上这个你爱咋咋滴是不是好,所以我们可以给二三加上一个maring-bottom底部是吧,里外边就20像素,加完之后我们来看一下,瞬间往下移了20像素是吧?好,那么OK了,之后我们接着往下看啊,那么这样一个新闻列表的话,首先我们来看一下这里面的一个整个的一个高度啊,那么也就是从上往下,这里是它的一个URI高,RI的高度我们也可以量一下吧啊好,你在这里量一下35啊好,所以我们给这个RI什么RI加上一个高度35 PS,好,加完之后我们来看一下,诶,它之间的高度就变高了,变高了之后我们来看这个文子是不是在这个高度的这个区块啊,当然我们这样子,我们先把这个UR的这个边框线干掉吧,这个UR这已经没用了,是不是当成是为了给大家看效果好,那么接下来我们要让这个稳字在。
12:35
这样一个每一个这样一个高度里面去吧,垂直方向居中是不是加上一个行高35G,好,我们来看一下是不是OK了,OK了,好OK了,这个天猫经理又来吵我了,说每天都要提醒我一下,好,我们来看一下啊,OK,你把它关了吧,OK啊好,我们来看一下啊,没关系,我们接着往下看啊,那么我们刚才给大加了35像素的这样一个行高之后,大家看一下它是不是就在怎么样,诶在这个区域里,在垂直方向居中显示的OK了,好OK了之后我们接着往下,接下来我们要控制这个文字的什么,诶文字的大小和颜色的,好,我们来在R里面先加一下啊好,这杠size啊,给它16,好,当然它默认的。
13:35
诶,减小了一点点的,是不是看起来差不多啊,就这样吧,好,然后我们来给它加颜色啊,我们来加个颜色井号333啊是这么一个颜色啊,A加了之后有没有效果,没有效果是不是啊,因为我们不能给RI加,因为它里面有A标签,所以我们要加在A上面,所以同样的我我们要把代码改一下UR下面的A,好,所以同样的把这个代码放在S,给它剪切过来,好这样子就OK了,OK了之后大家看这个文字下面有一个下划线,这个下划线是谁弄的呀?啊,也是我们这个A标签默认自带的,要把它干掉吧,干D丢啊好,我们来看一下,把它给浪,那么这里就是什么?去掉下划线,去掉下划线,嗯,哎呀,好,我们来看一下,诶,OK了是不是好,这样一个效果就出来了啊好,那么接下来我们来看一下当属。
14:35
不要放上去的时候,它是不是要变颜色呀,变个红色呀,再来呗,是不是好点一下,又是URA冒号how,好,这个冒号how就是当鼠标滑动到这个A标签上面的时候干啥是吧,我要把这个文字颜色变成一个红色,给它个红色的就可以了,好,我们来看一下,诶,这个时是不是变成红色呢?OK了,好,那么OK了,就我们接着往下看的啊最后几步了,再看这前面是不是有个序号啊,这个序号它与这个文字之间也有间距啊,我们来看一下每一个需要跟文字间是不是有间距啊,有间距对吧?好,也就是还有它前面123的颜色也不一样了,所以这个时候我们需要单独来控制这些序号的养生很简单啊,我们来看一下,把鼠标放在这里,我们来看快捷怎么操作啊,按住count,按住out键。
15:35
向下的箭头我们讲过几次了啊,然后我们给它加上一个SPA标签的,单独控制它OK了之后我们接着往下看,按住shift键,杠杠杠杠杠杠杠,然后按count加S把它剪切,同样的在这里count out键向下的箭头把它countt加为粘贴过来,就这么简单好,当然加了之后肯定是没有任何的效果,因为我们还没有对它单独控制嘛,那接下来我们就来单独控制它,点上60下面的U2下面R2下面的A下面的泵,好,我们同样的我们来给它加个边框看一下效果,我们好加大家看到没有12345678是吧,那么我们要让它与这个右边有间距,我们是不是可以加外边距啊?好,我们来看一下啊,加外边距行不行啊,杠什么杠right,我们给它加上十像数的外边距,诶OK了是吧,好那么OK了之后接下来这个。
16:35
这文子啊,我们来看一下,它肯定要有一个加粗的效果,稍微大一些是吧,加粗我们来加粗一下吧,加粗放杠换爆,这就是加粗的意思,好,加粗了也没有问题了,好OK了之后我们把这个怎么样边框给它干掉,注释掉,OK,好,然后我们再干嘛呀,我们把这个边框也干掉啊,诶这个先不干吧,好OK了之后我们来看一下,那接下我们要干嘛,我们要给前面的123加上不同的样式,所以这个颜色不太一样,那么我们要给大家很简单啊,我们可以单独的给每一个SPA给它加上一个样式,CLASS91 color1。
17:18
啊,我们来把它复制一下啊,然后第二个我们给它加上一个样式COLOR2,第三个我们加上一个样式COLOR3,好我们来看一下啊,也就是说单独给他添加样子来单独控制它啊好,所以点上CO1括号color了啊这个不用说肯定是红色,好大家看一下是不是红色就出来了,好,我们来看一下,第二个点Co啊叉了,这个也是红色,但是没有那个红是吧,我们可以这样子好不好,我们这样子,我们然后再点一下,哎,等一下啊,我们来找个红包,我们来找个往这边找吧,好吧,这样子啊差不多了,好,那这个红啊,当然你自己的,如果你要确切的红的话啊,那你就在这里来呗,我们来用这个西瓜。
18:19
看到没有,这有个吸管的在吸一下,但是这个地方被这个蚊子挡住了,我们不这样吧,我们把它放大啊,按住这个键,然后看着加加就把它放大,我们也可以按住它,按住这个对嘛,这个抓手的,然后我这个托拖完之后,我们用吸管来吸一下它的眼色,眼色啊井号FF5CFF是吧,那那你就用这个很精准的眼行,井号FF5C55OK好,我们来看一下诶就可以了,那么第三个我们来看一下啊,我们来吸一下呗,三啊,我们来看一下啊点赞CU3COLOR然号。
19:19
是井号FA552是吧,好保存,然后我们来看一下,诶,大家看一下是不是OK了,OK了,好,那么OK了之后我们来看一下啊,这个效果是差不多了,是不是就剩最后一个了啊,那就是我们这个右二,它有一个底边框线是吧?好,所以我们来看一下,我们这个右饵加了个边框,蓝色的,我们要不要不要,我们只要留个底边框就好了,所以我们给它放上一个BOT Tom是吧?Photo底边框,那这个底边框的话,我们来看一下,首先第一个它肯定不是实心的啊,它是一个点状的,改掉啊,改成dot TED就是点的意思,那第二个它的颜色肯定不对,它不是蓝色的,它是什么灰色,哎,大家看一下,在这样一个效果基本上就OK了,好,OK的时候我们说这个高度太高了,我们刚开始的时候是不是给大家加了个固定的高度啊,加死了,我们把它注释掉不要了,那么基本上这样就OK了,然后把这个标题的这个边框线也给它干掉,注释掉。
20:19
哎,这样一个效果就出来了,大家看到没有是吧?啊非常的简单,好,那么今天这一节课我们就讲到这里了啊,希望对大家有所帮助,那么拜拜。
我来说两句