昨天老师布置了一个项目，整个页面没有什么过分的难度，但是中间一度做的让我很压抑，尝试大概计算了一下时间，合计共用时大概四个多小时 css写了480行，朋友说我这么个页面，480行有屎山的趋势了，想了一下，以后的项目都可以尝试总结一下，顺便再回顾瞅瞅有没有地方可以更完善的，以后希望可以这样继续保持下去，更多的是我自己的一个成长以及后续问题来回顾的一个锚点 ### 首先来看整体布局很清晰明了的整体居中的内容展开，没啥说的== ### 然后我们来分区和布局依旧是很清晰明了的==，上面导航栏中间主体下面页脚 ![大块分割.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca2b601a5b7d4801ba136e51f862c381~tplv-k3u1fbpfcp-watermark.image?) ### 导航栏整体大块的布局之后我们先开始导航栏区域的开工，依然是先分区很明显的上下两个盒子那我们针对两个盒子进行分开的布局和实现，保持最基本的逻辑 #### 上半块儿思路 - 顶部的豆瓣/同城等按钮`肯定是a标签` 标签之间的间距注意调节一下 - 左右是分开的布局，中间有很大的留白，建议就是分两个盒子，然后进行弹性布局直接一个`space between`就完事儿了 #### 下半块儿思路 - 整体可以再布局 `分为三部分`,豆瓣logo一部分，中间的几个导航一部分，右边的搜索框一部分，也是直接弹性布局就行了 - 中间的浏览发现上方有个new标志，在这次的项目用用已学的只是来说就是添加一个`img`，然后用`sup`进行上方角标的移动 > 但是后续的常用做法可以是用固定定位`（position:fixed）`进行固定. - 搜索框部分的话，就是常规的`input选框`配合`type=text`或者`search`就可以实现了，宽高的可以单独属性里面设置 > 往里面添加搜索图标的话，需要先添加确认提交按钮也就是`submit`，在这之后在css里面进行属性设置，设置大小添加背景图片（搜索icon） > > 然后用固定定位 `（position：fixed）`进行固定 ```

豆瓣读书电影音乐同城小组阅读 FM 东西集市更多

下载豆瓣客户端提醒豆邮

``` #### 疑难点如果要用弹性布局，logo给个盒子最好，不然的话会被拉伸 ### 主体部分 - 首先咱们来分区，很明显的可以看到这可以分为左右两个盒子，左边为动态区域右边为相关广告区域这个分区完成之后我们先进行左边分区，先*`理思路`* - 左侧上方是一个动态的发布区域，整体是超链接+一个input表单制作的 - 下方属于五个类似的动态页面内容的盒子，整体形式类似，可以再第一个制作完成之后，后面几个用CV大法！最下面的页码单独丢个盒子也是由a标签制作的 ![动态主体详细分块.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b5e6248554c4caba6499a3a728bcd19~tplv-k3u1fbpfcp-watermark.image?) #### 分享动态框 ![发布动态input.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b859be460d0c4dc9846686929427da95~tplv-k3u1fbpfcp-watermark.image?) ##### 思路我们先来看最上方的动态发布栏，其实很清晰明了 - 上面需要建立一个盒子，方便等下布局，然后依次放入a标签超链接，然后前面配合雪碧图制作 - 注意右边有个齿轮设置按钮，考虑那里给他推出去，倒是也可以用两个盒子弹性布局然后 betweent推过去，但是其实没必要不精简 - 下方Input和导航栏是一个思路进行制作 > 这里input里面的上传按钮可以用`type=file`进行实现，然后给ID名用`label` 来和file绑定，把label的实现替换成上传的按钮就行了，这里需要注意，这样的话`type=file的原生样式`依旧存在，相关样式调整后面JS应该可以实现，在这里的话我们就可以换个思路，我们要的结果是让上传icon可以实现效果就行了所以我们可以隐藏它的原生样式，这里就要想清楚，我们需要的是*隐藏之后，不再保留位置*，所以visibility和overflow不符合需求，所以直接用display：none实现既可以，然后尝试 label还是可以关联效果。 ``` ``` #### 动态详情动态详情其实是这次作业最麻烦的地方，倒不是说难度，单纯是盒子一堆一堆的，像盒子精一样，配合还要取类名恼火plus！但是其实坐完了理就会发现其实还好*还是那句话，先理清思路确认逻辑 =* ##### 思路 - 我们先理一下分区布局，很明显这里的盒子采用左右布局，头像单独一个盒子，右边的内容一个盒子，右边盒子可以分为上面的标题（XXX的日记）和下面的灰色盒子，最下面的更新时间啥的可以直接给个p 自动顶下去 ![动态分享详情.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6f17395d4b640a58cdb862823dfb51c~tplv-k3u1fbpfcp-watermark.image?) - 灰色的盒子分出来之后，我们再确定一下内容，盒子里面有照片并排显示，左侧纯文字有段落感，居然这样那我们这个盒子可以再分成左右两份，然后给盒子一个弹性布局，让文字盒子和图片和字并排 ![动态分享详情-2.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/725dd7f77fad4674a59ad0f0e02575f8~tplv-k3u1fbpfcp-watermark.image?) - 然后左边的文字我们分成三份上面用h标签表示，中间p段落，下面的喜欢给个横条盒子来放，而且这么给也是为了下面的时候又的动态有标签添加可以更方便，属于提前布局了，啧牛皮 ![动态分享详情-3.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7686c8ca571b494595c4cd06da2f6c02~tplv-k3u1fbpfcp-watermark.image?) - 注意一下，首先是标题（XXX的日记）那一行是可以顶着左边直接做的，但是下面灰色盒子和更新时间的内容左/右边是需要做间距的，这里需要思考外边距还是内边距合适点 - 取类名的时候最后可以更具有包含性一点，这样下面CV大法下去，就不需要改动太多，就像这样，其实每个盒子改动一两个类名的尺寸差异啥的就行了，其他都是泛用的，就像下面一样，每个盒子就两个单独的类名改一下就行了== ``` /* 第二个盒子 */ .share-box2 { height: 238px; width: 610px; margin-top: 26px; display: flex; } /* 第三个盒子 */ .share-box3 { height: 220px; width: 610px; margin-top: 26px; display: flex; } .share-box3 .box-conter-text { height: 158px; width: 516px; } /* 第四个盒子 */ .share-box4 { height: 238px; width: 610px; margin-top: 26px; display: flex; } .tagbox { display: flex; } ``` - 整体下面几个盒子变化不大，唯一大点的就是下面的一个照片动态分享，这里的话需要把喜欢盒子上面的内容删干净，然后给个卡死照片高度的盒子就行了，这样直接给个弹性布局，然后照片丢进去，直接space就行了== - 下面两个新新加的标签内容的话，可以用建立一个盒子然后设置左边框先的方法（所以上面建大盒子的原来找到了吧！）也可以用文字直接打一个丨也行== ``` ``` #### 右边盒子 ##### 思路 - 整体就是常规的纵向排列 - 多个绿色的标题可以用统一样式进行制作 #### 疑难点 - `sprite`图的使用，在设置完图片之后，会看到其实icon是在文字右上角的，这时候需要调整雪碧图的位置下来，这里它上去的原因是因为图片自带的3px的问题，这里可以使用`vertical-align`来解决，爱心那部分我怎么都弄不下去，然后用的position搞定的==emmm - 边距的使用，因为左边的内容盒子很多,需要对齐的也很多，这时候就可能会大量的添加边距，这就很容易导致内容排班出现问题 - 页码那里的话，1那里需要做一个背景色块的效果，正常而言就是加背景色块儿，但是不知道为啥我也转换了行内块，就是没搞定==用padding把它撑大弄起来的，周一听老师讲的时候瞅瞅= ### 页脚做法可以用左右各一个盒子，然后父级添加弹性布局就可以了= 内容的话左边给p元素给个盒子，右边分别给a标签即可 ## 总结整体难度确实不大，但是在左侧的盒子那里确实做的时候折磨到我了，但是整体过程还好，最大的感受就是边距的使用需要谨慎谨慎再谨慎，然后就是对于一些特殊效果的实现还是不熟练，需要多实操。

Violet 的日记:

怪力八面体-胡夫金字塔