前端教程2014版第三本即css典型范例

辛星web前端(2014版)第三本：css典型范例****************web前端下面是辛星web前端的2014年的书单：第一本：html第二本：css第三本：css典型范例第四本：JavaScript第五本：html5第六本：css3第七本：jQuery第八本：Bootstrap辛星网，致力于优秀的*******************建议搜索”辛星web”或者”辛星 找到更全的资料奥。辛星，的关注****************辛星网地址为 ，就是”辛 的全拼辛星网，免费开放的个人********************与君共勉当学习成为一种习惯，进步就是一知识，传递。我心永恒，始终如一前 第一节：横向导航 第二节：面包屑导 第三节：选项 第四节：列 第五节：下拉菜 第六节：滑动门特 第七节：分页效果制 附录：意见反 前这本书主要是介绍css在制作一些页面的局部的时候的用法，也就本书依然是所有html码都写到my.html件中，css都写到my.css文件中。做一做吧。本书是辛星web前端2014版的第三本，也就是介绍了一css的典型范例，算是典型的实战部分的典型内容了不过由于篇幅有限，我们不可能把所有的范例都拿上来，只能介绍其中几个比较有代表性的。因为越是精美的界面，需要的代码量就越大，如果动辄四五百行的代码，次截图只能截几行，那么读者的思路也会不清晰了，本书的定位是读者在阅读完毕“2014年辛星web前端”前两本的基础上，或者是有了html+css的基础的时候阅读的书籍。第一节：横向导航>>>>>>>>>>>导航条学习css的最经典的应用就是导航条了，那么我们今天就做一个横下面是最终效果之前是零基础的。如果您刚刚学习，那么跟着一起把它写出来吧我们首先在my.html中写入如下内然后看下效果吧我们之后将不会再修改my.html中的内容，然后我们在同级下新建一个my.css件，我们之后的工作都在my.css完成。我们要做的第一件事就是去掉列表前面的小圆点，那么我们在中写如下代码此时所有的小圆点都掉了，看下效果吧我们要做的第二件事就是让这些竖直排列的文字变成横向排列的，那么我们可以使用浮动的方式，我们修改m.css的代码如下：那么我们看下效果虽然它们在一行中显示，但是它们都挤到一块了，我们要做的第四件事就是把它们分开，通常的方式就是规定宽度，并且我们设置相应的背景色，因此看我在.css中的操作吧：此时的效果如下那么我们的界面的效果图位置之类的，看下面的m.css代码：设置一下argin-left的属性就可以了：然后它的效果如下一个比较简单的导航条了。>>>>>>>>>>回顾步骤下面我就对这个步骤做成了一个表格，我们一起来看一下吧步目用到知识1写一个列ul、2去掉列表项的小list-style-3让列表项在一行中4设置超的字体、颜color5设置分隔margin实战是最好的老师，如果您是新手，不妨自己重新做一遍奥第二节：面包屑导>>>>>>>>什么是面包屑地球》亚洲》中国》》区》辛星的它常用于 、商城、门户等信息大、分类较多、侧重层性的 中。下面是我从discuz中拿出来的一个那么我们写一下自己的面包屑导航吧>>>>>>>>>>知识介绍在写我们的面包屑之前，我们先介绍一下如何做三角形首先我们在my.html中写如下然后我们在my.css中写如下内容大家可以注意到我们这里四条边使用的颜色都不一样，不过这不是重点，重点是它的宽度和高度都是0p，也就是说我们是不要内容的，只是要一个边框，而且它的边框有50px那么宽。我们看下效果吧看到了吧，其实它是显示成四个三角形的，每个三角形都有各自的颜色，其实我们这里只要左边的那个三角形就可以了，因此我们修改.css内容如下：那么我们看一下最终效果>>>>>>>>>>>>步骤详解第一步首先我们在my.html中写入如下内容此时我们看一下效果吧margin和padding为0，这样会显得更紧凑一些，因此我们在my.css中书写代码如下：然后我们看一下效果如第三步我们要做的就是让列表的元素左浮动，并且设置文本居中，而且需要设置一下宽度，因此我们的m.css添加下述代码：然后我们来看下效果吧一起把大小确定下来，因此我们设置下.nav的属性：现在我们可以看到效果如第五步我们就开始修改字体了，这里我们通常是修改li元素下a元素的属性，因此我们在my.css中添加如下代码不过这里我们需要用到绝对定位，我们知道，一个子元素要用到绝对定位，那么父元素也一定要使用定位才行，于是，我们的第六步就是简单的在所有的li元素中加入一条posiion：relatie；这个，如下：此时的效果图肯定是不变的，来个我们接下来要做的就是加入一个空白的三角形，由于我们上面已经给读者朋友们交代过如何去做三角形了，那么我们这里就做一个白色的三角形吧，但是需要注意的是，由于我们设置了该三角形的边框是4像素，因此我们需要抬高4-(32÷2)=8个像素，而向右不废话了，我们的第七步修改my.css代码如下接下来我们做一个棕色三角形即可，值得注意的是它需要向左移动8个像素，我们这里可以设置它的大小为16px，其实这个大小的这里不知道大家是否注意到，我们em元素来设置的，而我们这一个白色三角形则是使用的i元素来进行设置，这种元素的作用就是作为一个装饰作用，它本身并不用包含任何内容21我们的第七步就是在my.css中添加如下代码此时我们看一下效果至此，我们的面包屑就做成这样了当然啦，我们还是梳理一下它的思我们依然是通过如下的列表来展示这一步骤步1书写html2去掉列表小圆点，修改3让列表元素左浮动、设置4设置背景色、高5 美化字体、去掉的下划6li定外属7添加白8添加棕当然啦，这里只是中的代码，尽量简化其中的步骤，不搞的那么复杂。真正的商业应用中的代码可能会更加复杂一些，其实，读者朋友们也可以自行加入一些其他的样式，来让它更加美观，这些都是必>>>>>>>与君共勉我始终相信一句话：因寂寞而优秀没错，知识无涯，学海无边，我们在茫茫的知识中难免都会迷茫，辛星，一个喜欢研究知识并且热衷于知识的汉子，会进的道和您一起努力的。前进的，我会是您最坚实的后盾，相信我第三节：选项>>>>>>>>>>>说明选项卡其实还是蛮常见的，我们可以在多个选项卡之间来回切换它不仅仅是因为可以包 的信息，而且它本身也很帅下面我给大家看一下咱们伟大的网易的一个截较常用的呢？识做的还不够，而且我们还没学Javascript，动态性上还有所有欠缺不过这都不是事，我们目前能做成这个样子跟着的脚步，您肯定会成为技牛的。>>>>>>>>>>准备工作在正式开工之前，我们需要准备两幅，它们的主要作用是装下面是第一幅图，命名为b.png，首先说一下这个b.png，它是很小的，它的大4x31素，它的只有下面的2个像素是灰色的，其他都是白色的，它是作为背景然后就是c.png，我们来个特写这个图是干嘛用的呢？它的作用就是提供一个背景，仅此而我们的网页制作过程是首先涉及出来的，然后用Photoshop或者>>>>>>>>>>>>步骤详解第一步，我们首先在my.html中写入如下内我们首先看下效果根据惯例，我们的my.html是不会再动了的，我们接下来my.css中进行修属的li元素左浮动，我们修改.csss内容如下：此时我们看下效果须修改.in这个类，看我代码：那么我们看下效果行高、背景吧：然后我们看一下效果图第六步就开始设置超的字体属性啦，我们首先需要去掉下划线，然后把字体设置为黑色，最后我们给它加一个背景图，如下代那么我们看一下效果可以了，因此添加一行代码即可：此时我们看一下效果第八步我们就设置一下超的边可以了，我们添加下面一此时我们看一下效果特殊一点。其实也很简单，我们只需要对selected这个类进行一下设置背景那么我们看一下效果吧至此，我们的全部工作就做完>>>>>>>>>>思路梳理可能对于新手朋友们来说还是有点，我们一起梳理一下思路对应的资源的话可以到辛星网去，当然用别的也可我把整个过程做了一个表步对应操1写html文件，并且设置相应的类2去掉小圆点，并让li左浮3让选项卡部分独立出4设置选项卡字体、行高、背景5设置左右6设置超字体样式、背景7设置左浮8设置超边 设置选定状态下的背对于有着丰富前端经验的人来说，这个步骤基本不用写出来，就像刷牙、洗脸、穿衣服一样，这个顺序心里是有数的，但是对于新手来说，我还是写出来啦。希望朋友们可以根据上述步骤敲敲代码，并且删除其中的某部分，>>>>>>>>>小结圣贤皆寂寞，因寂寞而优秀前进的，辛星与您同在>>>>>>>说明在中，有很多类似于列表、文章列表之类的标题列表的3.上面这个列表是我截取自网易的一部分，那么我们今天自己>>>>>>>>详细步骤第一步我们首先在my.html中书写内容如下我们来看下效果此我们在m.css中书写如下内容：此时我们看一下效果吧第三步我们就是设置它的范围，我们给这个表示newsdiv一个大小即可，我们在my.css中如下操作：然后我们来看一下效果个问题吗？第四步我们就在my.css设置li素的margin就可以了，如下截图然后我们看看效果我们只需要设置一下a元素的样式就可以了，如下截图：的需求添加一些更好的设置奥。>>>>>>>>>>>>思路梳理可能这是我们所有的案例中最简单的那个了步说1书写html2修改列表样式，让日期右3设置区块大4设置li素5调整字体样第五节：下拉菜很早之前的的导航条基本是没有下拉菜单的，之后的的也有些 认为下拉菜单是过时的，不会再用了，但是，然有不少 认为下拉菜单仍然是分类的最好的形式之一。那么，今天我们就来制作一个下拉可能很多朋友们说是否需要用到Javascript，我的回答是：可以使用js，也可以不用，不过由于我们的中没有涉及到js，因此我们就不会使用js了。方便后面的截图，别看只有两项，但是html代码中已经略显臃肿了在学习了Javascript后，我们还会有更好的方式去创建下拉菜单，毕竟Javascript这门语言博大精深。>>>>>>>>>>详细步骤首先我们在my.html中书写如下内表示抱歉啦。然后我们看下效果那么第二步还是一成不变的去掉列表的前缀并且让列表项左浮动，并且给列表项设置一个宽度吧，而且我们这里不妨全局的padding和margin都设置为0px，个别项目再进行调整，因此我们的内容如下我们看下效果吧那么它已经有点像下拉菜单的样子了，那么我们接下来干什么呢？妨先去做一做，如果感觉没有思路，就翻翻前面是怎么做的由于方便读者朋友们的操作，我决定不使用，也没有使用圆角。那么我们怎么装饰呢？答案就是修改dt和dd的属性。那么如何修改呢？我们的第三步在my.css中添加的代码那么我们看看它的效果那么，一个问题出现了：如何实现“下拉”这个特性呢？其实这个最好的解决方案是使用Jaascriptcss中那么我们第四步就在my.css中添加如下代码吧还有美中不足的一件事就是这个超的字体不怎么样，件事对于读者朋友们来说应该是小菜一碟了把，不过我还是给出在.css中的相应修改方式：那么我们看下效果吧那么我们就做到这样>>>>>>>>>>思路梳理根据惯例，我们依旧是通过表格的形式来介绍一下它的制作流步说1书写html2去掉列表前缀、列表项左浮动并设置宽3美化dtdd样4使用伪类来捕获鼠标焦5 美化 中的字 6打完收由于有了上面的制作导航条的基础，因此这个制作还是蛮简单的，第六节：滑动门特>>>>>>>>>>>滑动门简介滑动门不算是一门新技术，也算是一门古老的技术了，其实上一节我们讲选项卡的时候，就有点滑动门的意味了，也有人认为选项卡就是滑动门。现的情况，那么我们可以隐分内容，当我们点击或者是把鼠标移动到某个的时候，再显相应的内容。滑动门特效一般来说有两种，，获鼠标移动的。对于这种效果可以使用js+css做，当然也可以使用purecss做，也就是使用纯css来做，都很简单。>>>>>>第一个效果展示这里我们先看下第一个滑动门吧，很简单，下面是效果图当然点击不同的选项会显示不同的>>>>>>html码第一步我们首先写my.html文件吧，不过由于该文件较长，因此首先是第一段那么为了让读者朋友们看的比较清楚，这里我可以把截图拉长了，这里需要注意的就是这里的id和上面的href属性一定要对应起来，那么我们看看剩下的代码由于是分两次截图完成的，第一次是截取了前22行，第二次是取了从2331下面我们首先看看这个效果图>>>>>>>>my.css文件步骤详解我们历经千辛万苦写完了my.html开始写my.css件吧，这里我们还是分几个步骤去讲解，写html文件当做第一步。我们第二步的主要工作就是让#column面的a素先按照预期加紧凑，②有固定的宽度，不要挤到一起③设置左边界和下边④设置相应字体⑤去掉超的下划线，⑥设置文本居中虽然看起来任务很多，但是基本都是对应一行代码，因此我my.css中添加如下代码此时我们来看看效果吧那么我们注意它的上边的选项那部分，它们都是只有下边框和右边框奥，其实这么做的原因是我们一会儿要设置整个边框，因此一般我们不让边框。么我们就必须设置它的高度，超过的内容使用overflow：hidden；给截取掉。这里我们的高度设置为90px，宽度就是3x100+1+1+1=303了，然后我们还必须设置列表的展示样式为无样式的，因此我们下面在my.css中的设置就是：那么我们看下效果那么如何放到下面呢？这里就需要设置外层div，也就是#nav的属性了，注意它的宽度和#contant的宽度是相同的，高度可以是#contant的高度加上#column的高度，也就是30+90=120px，既然数据到手，那么作为第四步，我们不妨在顶部设置一下my.css中那么我们看一下效果吧这里其实还是有点问题的，比如我们点击“狼族”这个选项，会发现底部还会显示一些内容，这点是我们不希望看到的，也就引出了我们第五步要做的工作：调整大小和字体样式。我们接下来要做的工作就是调整字体样式和各种边距了，我们要操作的主要对象就是u、i、a这三个元素，在.css中的操作：此时就是我们最终想要的效果我的任务是完成啦，读者朋友们是否跟着也一起做了呢很多事情看起来难，真正做起来很简单，我们不要“被纸吓破胆”。但是很多事情看起来超简单，但是做起来却无处下手，我>>>>>>>>>说明其实对于滑动门，还有一种是在导航栏的制作上，当我们鼠标在导航栏的多个选项之间滑动的时候，会感觉到导航栏会捕捉我们的鼠标焦点，然后跟着一起滑动。它做出来。其实前端和后端的学习是两回事，当我们看到一个比较漂亮的界面的时候，我们可以右键查看其htl和css源代码，然后分析它的第七节：分页效果>>>>>>>>>>>>说明一种有效的展示方式。我们来看一下贴吧中的分页效果我们做一个类似的效果吧，不过我感觉我们做出来的更帅一第一步我们首先设置一下my.html中的代码吧然后我们看一下效果吧设置一下间距，这些我们前面都做过N我就直接上代码了：如果读者朋友们看过“2014年辛星web前端第二本”的话，第三步我们要干什么呢？当然是