html+css小案例实战：教你通过CSS开发腾讯百度新闻列表页原创

大家好，我是金西老师，今天我们给大家讲解30个小案例当中的第二个案，这样一个百度新闻列表的效果，那么接下来我们就正式进入到我们代码开发的流程，那么首先第一步我们要新建一个网页文件，我们给它取个名字啊，带序号，带序号的新闻列表效果点HTL好，然后我们按住shift感叹号，按住回车键啊，调出我们网页的股价，同样呢，我们也需要把我们的标题修改一下好了，零二杠，但序带序诶带序号的新闻列表效果OK，好，那么接下来我们来看一下啊，那么这样一个效果，首先第一步我们应该从哪里入手？那么首先我们需要干嘛？我们需要构建这么大的一个长方形。

然后我们的内容放在这样一个长方形的区域里面，所以首先我们来构建一个div，然后我们给它取个名字叫做news新闻，接下来我们给它加点CSS样式，Style type TST-TS好，那么接下来我们来怎么样给它添加宽度和高度，点六大括号，那么它的宽度是多少呢？高度是多少我们不知道，所以需要我们有测量工具来对它进行测量，那么我们来给这大家介绍一款怎么样测量的工具，叫做号的啊，像素大厨，那么这款工具啊，是专门用来对我们的图片进行尺寸的测量和颜色啊等相关的标注的。好，我们可以看一下，那么这里我们来看一下，我们要测量的话，我们可以选中它，然后从最左边往最右边这里拖动一下啊，就可以测量出它从左到右它的一个宽度，那么这个宽度的话是390，好，所以我们来给它添加一个宽度390，同样我们要给它添加一个高准啊，当然正常的情况之下，我们的高度是不用写的，因为它的高度是随着它的内容自动怎么样自动往下撑的，所以这里为了给大家看效果，我们先给它加上一个固定的高度吧，后面我们把它干掉就可以了。好，我们来给大家先加个背景颜色看效果，好然后我们来右击啊，我们来在浏览器当中来查看一下效果，OK了，好，OK了之后大家可以看一下，这个时候这个红色的盒子与浏览器上面和左边有一定的间距啊，我们都知道这个间距是怎么产生的，我们右击这个检查啊，或者是。

审查元素我们来选中我们的玻璃的就可以看到了啊，我们的玻璃是不是有默认的八像素的外边距啊，这是我们的浏览器自带的啊，这个给默认这个玻底加的，所以我们不需要，不需要我们就要清除它的默认样式，所以我们要把玻璃的默认样式给清除掉，好Mar把它设置为什么0PSOK好OK了之后我们来看一下这个时候它与什么上面和左边就没有了是吧？好，那么接下来我们来看一下第二步我们应该往哪里开始啊，那么接下来我们来看一下这样一个长方形的盒子，构建好了之后再看一下它是不是与浏览器上面有一点间距啊，还有左边跟右边间距相等，也就是它在水平方向是居中的，好，所以我们来看一下整个让它居中的marin，我们上面给它加个50像素吧，左右l to下零，那么这个代码的含义啊，就是这个意思，第一个上外边距是50像素，左右外边距自动。

处相等下外间距为零，胖加S保存，我们来看一下，哎，大家看一下，这个时候它与上面50像素的间距就出来了，水平方向自动什么相等居中的，OK好OK了之后接下来我们要给这个什么方框加上一个边框，它有一个灰色的边框，我们来给它加一下border，好，我们给它移项素，实现井号三个D啊，是灰色的意思，看这S好，当然这个颜色太亮了，所以看怎么样遮盖了，我们来看一下，我们按住count加这个反斜杠啊，把它注释掉，然后保存。哎，大家看一下是不是就OK了？好，再往下看啊，大家认真看啊，我们要做一下全局的分析，那么最外面这个大盒子我们刚才已经构建好了，水平也居中了，那么接下来这个大盒子里面放了内容，嗯，我们来，我们换个颜色来标注一下啊，好，我们来看一下大家有没有发现一个点啊。

这个盒子与它里面的内容之间是有这样一个间距的，对吧？上下左右都有，那么这个间距是怎么产生的呀？是给我们这个外面这个盒子加的四个方向的内边距，好所以我们可以先复制一点内容放到这个里面，我们来对比一下加内边距和每加内边距之前的效果，大家看美甲那边距是不是从上往下呀，是吧？左边也挨着，上面挨着什么，右边也挨着，好那么我们来看有没给它加上一个内边距，之后拍点我们上一下左右，我们给它加15像数就可以了，OK，大家看一下这个时候是不是OK了，它与上面左边右边是不是都有这样一个间距，当然加了这个间距之后，它整个的宽度就变大了，是高度也变高了。

好，所以我们整个的宽度要减掉多少？左边15像素，右边15像素加起来就是30，所以我们要减掉30，这里是360 OK，当然我们高度不用修改，因为我们说了高度后面会随着内容往下撑，本来我们也不用写好OK了之后我们把这些内容先干掉啊，刚才是为了给大家看效果好，我们接着往下看，接下来我们要怎么样制作这个百度新闻热榜，我们来用我们的二三标签来制作啊，H3我们可以直接打开S3，按住回车键啊，它就可以帮我们自动生成这个标签了，然后我们把这个百度新闻热榜复制过来，复制过来之后我们来看一下啊，当然它默认的就是加粗的字体是吧，但是大家发现没有，它与上面这个间距比较大，肯定不是15像素啊，这是什么原因呢？哈，也很简单，是不是因为我们的S3标签默认的与上面是不是有间距啊，大家看到没有18像素18.720是吧？与下面也有，左边右边都有。

九所以这个时候我们也要把X3的默认样式给干掉，所以逗号X3把它给干掉，OK，好，我们把这个清掉啊，那么OK了之后我们接着往下看啊，为了让大家更好的看到这个效果，我们可以给这个H3标志，我们给它加个边框来看一下，六二十三，好，我们来给它加上一个一像素的边框啊，银色吧，银色比较显眼，大家可以看一下啊，好，当然它默认的这个字体啊，跟我们这个字体大小比较符合啊，其实它是多大的，我们来给他，我们也可以单独给它控制一下，比如说20小时大家看一下啊，稍微小一点，它那个应该是18左右，好，我们给它加上一个字体大小就可以了，那么OK了之后，好，接下来我们这个边框我们先不干掉，我们先留着啊，后面我们一次性干掉，那么接下来我们来看一下下面是不是有八条新闻呐，那么看到这种列表的效果，我们就知道肯定是用UR来。

在写，所以我们来用我们的UR来写啊，首先我们的U儿按住回车键，好，那么里面有几个r zi呀，八个是吧？好，那么这里我们来看一下，我们可以用快捷键按住怎么样al键，Shift键，然后向下的箭头它就可以进行复制了，好，那么OK了之后我们接着往下分析啊，那么每一个新闻是都是可以点击的，点击就意味着它肯定是有超链接的是吧？所以我们可以给这里面的每一个RI加上超链接，我们的文字放在超链接里面，那么这个时候我们也可以选择快捷键来加啊，我们按住count键，Alt键向下的箭头一次性选中好拿，然后松开之后按住shift键括号，我们来加我们的A标签，好，大家看到没有，OK了，那么OK了之后我们接着往下看，那接下来我们就要往里面填充内容了，当然也很简单了。我们来把这。

些内容复制过来，复制过来之后我们先粘在上面啊，我们先放到上面一行一行就好，OK了，之后我们来看我怎么用快捷键，跟刚才一样的，我们首先把这个内容count键S剪切，然后鼠标放在第一个里面，按住count怎么样alt键向下的箭头好，然后count加V一次性粘贴，大家看到OK好，那么这样子就诶写完了，写完了之后我们来看一下它的一个整体的效果啊，那么这个时候它默认的是从上往下加23456788条新闻，OK好，当然为了让大家看清幼儿本身的一个结构的话，我们就给它加上一个边框来看一下，当然我们来看一下啊，包。

我们给它加上一像素吧，黑色的。嗯，Board看到没有，相当于外面有个大框框，里面放了八条新闻，我们同样的来看一下，点nu u r RI大括号，我们也给它加上一个边框，看一下蓝色的，好呀，又打的太快了，是不是好，大家可以看一下，这样你就可以看清楚整个幼儿的结构了，是吧？OK了之，我们来看一下，首先这个前面的这个点肯定是黑点，是不要的，那不要很简单了，对不对，我们来看一下怎么干掉啊，这里面是不是list整个long，好，这里就是去掉前面的这个默认的圆点啊，我们加点注释啊，去掉圆点OK，好，那么我们来看这个UR跟这个RI，这这中间怎么会有这么大的空隙呢，对吗？啊，这一页。

是因为我们的UR默认的样式造成的，我们来看一下UR又有什么默认的样式呢？好，我们来选中一下UR，好我们来看一下啊，那么这个时候我们来看一下这个UR，你看marin是不是有外边距啊，然后这里是不是有个内边距啊，看到吧，所以这个UR你看到没有，这个UR你看它与上面这个这个标题这个S3G也有这么大的空隙，就是因为这个U它自带的默认的外边距和内边距啊，所以我们同样的要把UR的内边距跟外边距一次性干掉，所以我们打个逗号，URL写在这个位置啊，好，同样的内边距也要干掉是吧，所以拍定也要把它清理好，那么这样子大家看一下是不是就OK了？好，那么OK了之后我们接着往下看啊，那么我们来看一下，它们之间是有一定的间距的，那么这个间距我们可以怎么说，我们可以给H3加下面的什么，向下的外边距也可以给UR。

下加上这个你爱咋咋滴是不是好，所以我们可以给二三加上一个maring-bottom底部是吧，里外边就20像素，加完之后我们来看一下，瞬间往下移了20像素是吧？好，那么OK了，之后我们接着往下看啊，那么这样一个新闻列表的话，首先我们来看一下这里面的一个整个的一个高度啊，那么也就是从上往下，这里是它的一个URI高，RI的高度我们也可以量一下吧啊好，你在这里量一下35啊好，所以我们给这个RI什么RI加上一个高度35 PS，好，加完之后我们来看一下，诶，它之间的高度就变高了，变高了之后我们来看这个文子是不是在这个高度的这个区块啊，当然我们这样子，我们先把这个UR的这个边框线干掉吧，这个UR这已经没用了，是不是当成是为了给大家看效果好，那么接下来我们要让这个稳字在。

这样一个每一个这样一个高度里面去吧，垂直方向居中是不是加上一个行高35G，好，我们来看一下是不是OK了，OK了，好OK了，这个天猫经理又来吵我了，说每天都要提醒我一下，好，我们来看一下啊，OK，你把它关了吧，OK啊好，我们来看一下啊，没关系，我们接着往下看啊，那么我们刚才给大加了35像素的这样一个行高之后，大家看一下它是不是就在怎么样，诶在这个区域里，在垂直方向居中显示的OK了，好OK了之后我们接着往下，接下来我们要控制这个文字的什么，诶文字的大小和颜色的，好，我们来在R里面先加一下啊好，这杠size啊，给它16，好，当然它默认的。

诶，减小了一点点的，是不是看起来差不多啊，就这样吧，好，然后我们来给它加颜色啊，我们来加个颜色井号333啊是这么一个颜色啊，A加了之后有没有效果，没有效果是不是啊，因为我们不能给RI加，因为它里面有A标签，所以我们要加在A上面，所以同样的我我们要把代码改一下UR下面的A，好，所以同样的把这个代码放在S，给它剪切过来，好这样子就OK了，OK了之后大家看这个文字下面有一个下划线，这个下划线是谁弄的呀？啊，也是我们这个A标签默认自带的，要把它干掉吧，干D丢啊好，我们来看一下，把它给浪，那么这里就是什么？去掉下划线，去掉下划线，嗯，哎呀，好，我们来看一下，诶，OK了是不是好，这样一个效果就出来了啊好，那么接下来我们来看一下当属。

不要放上去的时候，它是不是要变颜色呀，变个红色呀，再来呗，是不是好点一下，又是URA冒号how，好，这个冒号how就是当鼠标滑动到这个A标签上面的时候干啥是吧，我要把这个文字颜色变成一个红色，给它个红色的就可以了，好，我们来看一下，诶，这个时是不是变成红色呢？OK了，好，那么OK了，就我们接着往下看的啊最后几步了，再看这前面是不是有个序号啊，这个序号它与这个文字之间也有间距啊，我们来看一下每一个需要跟文字间是不是有间距啊，有间距对吧？好，也就是还有它前面123的颜色也不一样了，所以这个时候我们需要单独来控制这些序号的养生很简单啊，我们来看一下，把鼠标放在这里，我们来看快捷怎么操作啊，按住count，按住out键。

向下的箭头我们讲过几次了啊，然后我们给它加上一个SPA标签的，单独控制它OK了之后我们接着往下看，按住shift键，杠杠杠杠杠杠杠，然后按count加S把它剪切，同样的在这里count out键向下的箭头把它countt加为粘贴过来，就这么简单好，当然加了之后肯定是没有任何的效果，因为我们还没有对它单独控制嘛，那接下来我们就来单独控制它，点上60下面的U2下面R2下面的A下面的泵，好，我们同样的我们来给它加个边框看一下效果，我们好加大家看到没有12345678是吧，那么我们要让它与这个右边有间距，我们是不是可以加外边距啊？好，我们来看一下啊，加外边距行不行啊，杠什么杠right，我们给它加上十像数的外边距，诶OK了是吧，好那么OK了之后接下来这个。

这文子啊，我们来看一下，它肯定要有一个加粗的效果，稍微大一些是吧，加粗我们来加粗一下吧，加粗放杠换爆，这就是加粗的意思，好，加粗了也没有问题了，好OK了之后我们把这个怎么样边框给它干掉，注释掉，OK，好，然后我们再干嘛呀，我们把这个边框也干掉啊，诶这个先不干吧，好OK了之后我们来看一下，那接下我们要干嘛，我们要给前面的123加上不同的样式，所以这个颜色不太一样，那么我们要给大家很简单啊，我们可以单独的给每一个SPA给它加上一个样式，CLASS91 color1。

啊，我们来把它复制一下啊，然后第二个我们给它加上一个样式COLOR2，第三个我们加上一个样式COLOR3，好我们来看一下啊，也就是说单独给他添加样子来单独控制它啊好，所以点上CO1括号color了啊这个不用说肯定是红色，好大家看一下是不是红色就出来了，好，我们来看一下，第二个点Co啊叉了，这个也是红色，但是没有那个红是吧，我们可以这样子好不好，我们这样子，我们然后再点一下，哎，等一下啊，我们来找个红包，我们来找个往这边找吧，好吧，这样子啊差不多了，好，那这个红啊，当然你自己的，如果你要确切的红的话啊，那你就在这里来呗，我们来用这个西瓜。

看到没有，这有个吸管的在吸一下，但是这个地方被这个蚊子挡住了，我们不这样吧，我们把它放大啊，按住这个键，然后看着加加就把它放大，我们也可以按住它，按住这个对嘛，这个抓手的，然后我这个托拖完之后，我们用吸管来吸一下它的眼色，眼色啊井号FF5CFF是吧，那那你就用这个很精准的眼行，井号FF5C55OK好，我们来看一下诶就可以了，那么第三个我们来看一下啊，我们来吸一下呗，三啊，我们来看一下啊点赞CU3COLOR然号。

是井号FA552是吧，好保存，然后我们来看一下，诶，大家看一下是不是OK了，OK了，好，那么OK了之后我们来看一下啊，这个效果是差不多了，是不是就剩最后一个了啊，那就是我们这个右二，它有一个底边框线是吧？好，所以我们来看一下，我们这个右饵加了个边框，蓝色的，我们要不要不要，我们只要留个底边框就好了，所以我们给它放上一个BOT Tom是吧？Photo底边框，那这个底边框的话，我们来看一下，首先第一个它肯定不是实心的啊，它是一个点状的，改掉啊，改成dot TED就是点的意思，那第二个它的颜色肯定不对，它不是蓝色的，它是什么灰色，哎，大家看一下，在这样一个效果基本上就OK了，好，OK的时候我们说这个高度太高了，我们刚开始的时候是不是给大家加了个固定的高度啊，加死了，我们把它注释掉不要了，那么基本上这样就OK了，然后把这个标题的这个边框线也给它干掉，注释掉。

哎，这样一个效果就出来了，大家看到没有是吧？啊非常的简单，好，那么今天这一节课我们就讲到这里了啊，希望对大家有所帮助，那么拜拜。