模仿作业——豆瓣主页，HTML及CSS难点分析

在了解到为何给元素设定浮动后，父级在没有设置高度的情况下是为变为零，会影响相邻文本元素的排版之后。并且知道触发浮动元素父级BFC可以找回高度，消除对其他元素的排版影响。上周豆瓣主页排版作业，是做得还比较顺手的一个作业。在回头看自己写的代码时，对这个作业的思路做一些简单分析：

在还没有接触到后台内容的情况，给到一个页面，我首先关注页面的HTML结构。从设计图上可以看到，基本上是分成三大块：头部导航部分；中间主要内容（其中分为文章预览部分、右边广告部分）；底部导航部分。

首先，头部导航部分，基本上是用无序列表完成的。灰色部分左边用一个ul标签，右边一个，一个左浮动，一个有浮动。这个部分最开始做的时候，没有设定body的宽度最小值，后来发现缩小浏览器视口右边的字会往下掉。那时候还不知道可以通过设定body最小宽度来限制，想了用对右边ul绝对定位的办法，想着把这个定在网页的最右边，当然很明显是不能够实现的，这个办法很明显是没有解决到根本问题。这个问题是我把这个部分的宽度设置成body的100%，ul的父级宽度自然会随着body宽度变化而变化，ul子级li设置了浮动，ul宽度不够就只能被挤下来。当然可以固定ul父级元素的宽度，浏览器缩小适当程度是不会有影响，但是当浏览器超过两个ul的总宽度时，又会把其中一个ul给挤下去。要从根本上解决问题就要把body的宽度设定一个最小值。另外一个难点部分就是对于logo部分的语义化书写，老师讲解语义化这个部分时，就用豆瓣logo做例子，用一个a标签转化块级元素，然后插入背景图实现，当然要通过设置缩进或者行高将文字挤出图片外，最后用overflow:hidden;将超出部分隐藏，达到语义化效果。但是我自己做出来的不能像超链接一样点击，为此去查了豆瓣原网的代码，还是没有找到。

中间主要内容里面，难点在于怎么去划分文章预览区的区块，然后解决互相的间距。只需要写好一个模板，其他的都可以复制粘贴。因为含有较多的文本元素，并且元素之间有浮动后的影响，要对相应区块做好BFC。这个部分让我出问题的并不是这个部分，而是上面的文本输入框尾巴上的图标按钮。输入框上面图标，比较简单，通过span标签转化为行内块级元素设置宽高确定视口，用sprite图的方式，插入背景图片。而输入框尾巴上的图标，在没有接触到更深的知识之前，只是为了达到版面效果的话，老师给到的应对就是做超链接插sprite图的方式。最后出来的效果在谷歌浏览器上跟设计图一样的，但是火狐浏览器最后的渲染效果则是输入框跟图标没有对齐，图标有点向下。当时审查了很久不知道是什么原因，老师最后找出来只需要给图标跟输入框的父级元素设置清浮动就好了。另外右边部分是整个页面第二简单的部分，难度不大。

页脚部分的，最简单，用无序列表标签能达到效果。

整个页面写出来之后，很多细节上需要多注意，版面上的距离、链接的交互效果、字体大小颜色等等都需要去关注到。其实这个作业虽然是很基础的页面代码，没有JS效果，但是中间需要花的精力并不少。前端写页面很需要耐心，很多重复的属性要去运用，可能觉得还不如复制粘贴，但是作为一个初学者，以后还有很多技术需要我们去添加进去，如果不在最开始的地方仔仔细细写好，代码不够规范，框架对于后期编写CSS代码来说不够优化的话，后面框架学得再好也没用。

转载于:https://www.cnblogs.com/freeshan/p/6551630.html