豆瓣静态页面练习

青松松松松

已于 2022-03-05 20:34:31 修改

阅读量449

点赞数

文章标签：前端学习 css

于 2022-03-05 17:40:54 首次发布

本文链接：https://blog.csdn.net/qq_40073852/article/details/123298204

版权

学习前端的第二周，昨天老师布置了一个项目，整个页面没有什么过分的难度，但是中间一度做的让我很压抑，尝试大概计算了一下时间，合计共用时大概四个多小时

css写了480行，朋友说我这么个页面，480行有屎山的趋势了，想了一下，以后的项目都可以尝试总结一下，顺便再回顾瞅瞅有没有地方可以更完善的

首先来看整体布局

很清晰明了的整体居中的内容展开，没啥说的==

然后我们来分区和布局

依旧是很清晰明了的==，上面导航栏中间主体下面页脚
在这里插入图片描述

导航栏

整体大块的布局之后我们先开始导航栏区域的开工，依然是先分区

在这里插入图片描述

很明显的上下两个盒子那我们针对两个盒子进行分开的布局和实现，保持最基本的逻辑

上半块儿思路

顶部的豆瓣/同城等按钮肯定是a标签 标签之间的间距注意调节一下
左右是分开的布局，中间有很大的留白，建议就是分两个盒子，然后进行弹性布局直接一个space between就完事儿了

下半块儿思路

整体可以再布局 分为三部分,豆瓣logo一部分，中间的几个导航一部分，右边的搜索框一部分，也是直接弹性布局就行了
中间的浏览发现上方有个new标志，在这次的项目用用已学的只是来说就是添加一个img，然后用sup进行上方角标的移动

但是后续的常用做法可以是用固定定位（position:fixed）进行固定.
搜索框部分的话，就是常规的input选框配合type=text或者search就可以实现了，宽高的可以单独属性里面设置

往里面添加搜索图标的话，需要先添加确认提交按钮也就是submit，在这之后在css里面进行属性设置，设置大小添加背景图片（搜索icon）

然后用固定定位 （position：fixed）进行固定

      <header>
            <!-- 顶部 -->
            <div>
                  <div class="header-left">
                        <a href="">豆瓣</a>
                        <a href="">读书</a>
                        <a href="">电影</a>
                        <a href="">音乐</a>
                        <a href="">同城</a>
                        <a href="">小组</a>
                        <a href="">阅读</a>
                        <a href="">FM</a>
                        <a href="">东西</a>
                        <a href="">集市</a>
                        <a href="">更多</a>
                  </div>
                  <div class="header-right">
                        <a href="">下载豆瓣客户端</a>
                        <a href="">提醒</a>
                        <a href="">豆邮</a>
                  </div>
            </div>
            <!-- 导航 -->
            <div>
                  <nav>
                        <div>
                              <img src="img/lg_main_a11_1.png" alt="" />
                        </div>
                        <div>
                              <a href="">首页</a>
                              <a href="">我的豆瓣</a>
                              <a href="">浏览发现<sup><img src="img/index_03.png" alt="" /> </sup></a>
                              <a href="">移动应用</a>
                              <a href="">游戏</a>
                              <a href="">线上活动</a>
                        </div>
                        <form action="" class="search">
                              <input type="search" placeholder="搜索你感兴趣的内容和人..." />
                             <!-- 添加确定按钮 -->
                              <input type="submit" value="">
                        </form>
                  </nav>
            </div>
      </header>

疑难点

如果要用弹性布局，logo给个盒子最好，不然的话会被拉伸

主体部分

首先咱们来分区，很明显的可以看到这可以分为左右两个盒子，左边为动态区域右边为相关广告区域

这个分区完成之后我们先进行左边分区，先==理思路==
左侧上方是一个动态的发布区域，整体是超链接+一个input表单制作的
下方属于五个类似的动态页面内容的盒子，整体形式类似，可以再第一个制作完成之后，后面几个用CV大法！

最下面的页码单独丢个盒子也是由a标签制作的

在这里插入图片描述

分享动态框

在这里插入图片描述

思路

我们先来看最上方的动态发布栏，其实很清晰明了

上面需要建立一个盒子，方便等下布局，然后依次放入a标签超链接，然后前面配合雪碧图制作
注意右边有个齿轮设置按钮，考虑那里给他推出去，倒是也可以用两个盒子弹性布局然后 betweent推过去，但是其实没必要不精简
下方Input和导航栏是一个思路进行制作

这里input里面的上传按钮可以用type=file进行实现，然后给ID名用label 来和file绑定，把label的实现替换成上传的按钮就行了，这里需要注意，这样的话type=file的原生样式依旧存在，相关样式调整后面JS应该可以实现，在这里的话我们就可以换个思路，我们要的结果是让上传icon可以实现效果就行了所以我们可以隐藏它的原生样式，这里就要想清楚，我们需要的是隐藏之后，不再保留位置，所以visibility和overflow不符合需求，所以直接用display：none实现既可以，然后尝试 label还是可以关联效果。

                  <div class="share-inp">
                        <div class="share-inp-a">
                              <a href=""><span class="sprite1"></span> 说句话</a>
                              <a href=""><span class="sprite2"></span>发照片</a>
                              <a href=""><span class="sprite3"></span>推荐网页</a>
                              <a href=""><span class="sprite4"></span>写日记</a>
                              <a href=""><span class=" sprite5"></span>发布东西</a>
                              <a href=""><span class="sprite6"></span>首页设置</a>
                        </div>
                        <form action="">
                              <input type="text" placeholder="分享生活点滴..." />
                              <input type="file" name="file" id="file" class="inputfile" />
                              <label for="file" class='btn btn-success'><img src="img/icon_03.png" alt=""></label>
                              <img src="img/icon_07.png" alt="">
                        </form>
                  </div>

动态详情

动态详情其实是这次作业最麻烦的地方，倒不是说难度，单纯是盒子一堆一堆的，像盒子精一样，配合还要取类名恼火plus！

但是其实坐完了理就会发现其实还好==还是那句话，先理清思路确认逻辑 ===

思路

我们先理一下分区布局，很明显这里的盒子采用左右布局，头像单独一个盒子，右边的内容一个盒子，右边盒子可以分为上面的标题（XXX的日记）和下面的灰色盒子，最下面的更新时间啥的可以直接给个p 自动顶下去
灰色的盒子分出来之后，我们再确定一下内容，盒子里面有照片并排显示，左侧纯文字有段落感，居然这样那我们这个盒子可以再分成左右两份，然后给盒子一个弹性布局，让文字盒子和图片和字并排
然后左边的文字我们分成三份上面用h标签表示，中间p段落，下面的喜欢给个横条盒子来放，而且这么给也是为了下面的时候又的动态有标签添加可以更方便，属于提前布局了，啧牛皮
注意一下，首先是标题（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就行了==

下面两个新新加的标签内容的话，可以用建立一个盒子然后设置左边框先的方法（所以上面建大盒子的原来找到了吧！）也可以用文字直接打一个丨也行==

                  <!-- 第一个盒子 -->
                  <div class="share-box1">
                        <div class="box-head">
                              <img src="img/u3430152-98.jpg" alt="" />
                        </div>
                        <div class="box-conter">
                              <div class="box-title">
                                    <h2>Violet 的日记:</h2>
                              </div>
                              <div class="box-conter1">
                                    <div class="box-conter-con">
                                          <div class="box-conter-text">
                                                <h1 class="box-h1">怪力八面体-胡夫金字塔</h1>
                                                <p class="box-p">
                                                      前几天看到有人在广播发了这个，搜了一似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事真的很好玩。。。吉萨的三座大金塔里，有一座是一个八面体。这个八面体金字塔...
                                                </p>
                                                <!-- 喜欢栏 -->
                                                <div class="love">
                                                      <span class="spritelove"></span>
                                                      喜欢
                                                </div>
                                          </div>
                                          <div class="box-conter-pic">
                                                <img src="img/p35801459.jpg" width="107" alt="" />
                                          </div>
                                    </div>
                                    <p class="hot">1小时前，来自 热门精选</p>
                              </div>
                        </div>
                  </div>

右边盒子

思路

整体就是常规的纵向排列
多个绿色的标题可以用统一样式进行制作

疑难点

sprite图的使用，在设置完图片之后，会看到其实icon是在文字右上角的，这时候需要调整雪碧图的位置下来，这里它上去的原因是因为图片自带的3px的问题，这里可以使用vertical-align来解决，爱心那部分我怎么都弄不下去，然后用的position搞定的==emmm
边距的使用，因为左边的内容盒子很多,需要对齐的也很多，这时候就可能会大量的添加边距，这就很容易导致内容排班出现问题
页码那里的话，1那里需要做一个背景色块的效果，正常而言就是加背景色块儿，但是不知道为啥我也转换了行内块，就是没搞定==用padding把它撑大弄起来的，周一听老师讲的时候瞅瞅=

页脚

做法可以用左右各一个盒子，然后父级添加弹性布局就可以了=
内容的话左边给p元素给个盒子，右边分别给a标签即可

总结

整体难度确实不大，但是在左侧的盒子那里确实做的时候折磨到我了，但是整体过程还好，最大的感受就是边距的使用需要谨慎谨慎再谨慎，然后就是对于一些特殊效果的实现还是不熟练，需要多实操。

青松松松松

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
豆瓣静态页面练习

学习前端的第二周，昨天老师布置了一个项目，整个页面没有什么过分的难度，但是中间一度做的让我很压抑，尝试大概计算了一下时间，合计共用时大概四个多小时css写了480行，朋友说我这么个页面，480行有屎山的趋势了，想了一下，以后的项目都可以尝试总结一下，顺便再回顾瞅瞅有没有地方可以更完善的首先来看整体布局很清晰明了的整体居中的内容展开，没啥说的==然后我们来分区和布局依旧是很清晰明了的==，上面导航栏中间主体下面页脚导航栏整体大块的布局之后我们先开始导航栏区域的开工，依然是先分区很明显的
复制链接

扫一扫