百度前端学院-复杂的网页设计

任务地址：http://ife.baidu.com/task/detail?taskId=9 点我直接飞机

想起来最近好久没有更新博客了，就把这个任务放上吧~

百度前端技术学院，出了好几个题，这个应该是最麻烦的吧。。不能说是最难。花一段时间做完了跟大家交流交流。

在线预览点我，github源码点我

我ps挂了。看着他的预览图做的网页，真是醉了。不过看他们做的出了一些问题，也还有百度给的一些坑。。看你们找全了吗~

一。两栏布局。

不知道大家是怎样布局的。左边固定，右边自适应吗？显然都做成固定不太好吧。任务要求如下：

整个页面内容宽度固定，但头部的蓝色导航和浏览器宽度保持一致

他这么说这是全固定的意思？反正我是在左边设置的23%的宽，右边77%的宽，float+min-width的布局，算是布局还ok吧，放很大就很难看了。缩小出滚动条。但是这样就不行了。这是某团队的提交:



当我一缩小浏览器。就乱了，显然右边栏的min-width没设。布局乱了。

这次布局主要是这个问题，我当时也被这个问题所困扰：



这是咋了。。header是设置的width 100%；但是下面的内容超出100%了。100%怎么会被超过呢？？其实这个100%是相对于父元素的，追究到根，100%也就是浏览器的宽，如果没设置的话。我浏览器宽1349px；然而下面的内容大于了这个值，下面的内容超过一屏，出来滚动条，然而上面的100%还是1349px。这就是上面这个例子的问题。

咋办呢。

一种方法，把header放到内容里，显然这里不可能。第二种，display：fiexd。然后也没有这种需求。那咋办。改布局呗。。。

先看这种方法咋布局的，左边float，右边margin-left左边的宽。这是最简单的左固定右自适应。然而的div是适应了。里面的内容没写适应。。超出div了。解决的方法就是这个div设置min-width，不能让他很小了。然后里面所有的内容都得写自适应，这样你外层div变了，里层才能适应，而不是超出div。

我这里是怎么做的呢？开始说了。两边都是百分比，直接设置min-width，保持内容的wrapper总是100%宽。这样就可以了。

二、自定义下拉框

百度给的下拉样式是这样的：

，然后我浏览器是这样的：

，这就是需要自定义下拉框了。自定义下拉框怎么做呢?

这是我作品的截图：


最重要的就是-webkit-appearance: none;这个属性了。不仅可以清除本select的样式还可以清楚下面百度的坑---同样的自定义checkbox的样式。我懒得给他定义了。。

这里border padding，形成外管，那个下拉框的箭头用了图片背景。。checkbox的基本相同。

三、hover中的border


这里每次hover加一个border咋办。直接加boder？不行，这样试试你就知道内容会”一动一动“的。这是怎么了。

多加了这几px的border对于下面的10：00am来说就得移位。因为10：00am是margin-top定位的，每次加border都会下移。

解决方法有两个，一个是hover之前给他一个透明的border。这样hover就是改了border的颜色。所以不会移动。

二呢，是改变定位。让内容不在margint-top，position：absolute。对于这种定位，你border爱变不变，反正跟我没关系。。

四、table布局的空隙

table布局，一不注意就直接写完了。。然后效果是这样的：


能看到。如果相邻的td元素都有border这个border就重了。怎么给他加空隙呢？我试了td加padding，tr加padding，td加margin，tr加margin。然而都不起作用。但是width可以起作用。这样也不行阿。

width也不能让他有空隙阿。

这就要上这两个东西了border-collapse: separate;和border-spacing这是啥。table元素用的属性，css2就支持了，只是我们不怎么用。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。



border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。



不多解释了，大家亲自试一下吧~效果呢是这样的：


已经完美的分割开~

五、div滚动条

不知道是不是psd设计图上面的东西，好多人给了div的滚动条，如下效果：


我作品里没有做这个，我就提一下，用到属性是overflow-y: auto;当然你得给这个div设置一个固定宽。要例子，在我fancy商城的socket.io的聊天室里，有这样一个例子，聊天内容多了以后就有滚动条了。不能一直拉长网页是吧~

六、css的tab切换

tab只需要实现样式，有能力余力的同学可以尝试实现不使用JavaScript的情况下，实现Tab切换

这是要求之一。tab切换呢，我没做。就大体说一下吧。其实css的tab切换怎么办呢，就是tab的显示和隐藏的问题。但是css没有点击事件，怎么触发显示和隐藏呢（当然hover触发就简单多了）。这里css有伪类的选择：

可以用到：focus，：checked等等。把标签当作input，每次点击就是一个focus，然后触发关系选择，选择到下面相应的tab控制他的隐藏和显示。：checked也是同样的道理。

个人觉得是蛮麻烦的，就没做。当然还是有不少大神做了的。大家可以参考一下他们的作品。

all over！

大体就需要注意这些，我的作品也还有一些细节没处理好，大家共同学习进步。欢迎大家star和follow~~