前端期末作品——html+css实现豆瓣主页-豆瓣小组

最新推荐文章于 2024-02-03 09:51:13 发布
最新推荐文章于 2024-02-03 09:51:13 发布
阅读量897 收藏 11
点赞数 1
文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HouRuoTong/article/details/122278211
版权

HTML部分

整体框架
左left 中center 右right

<!-- 热门小组 -->
      <div class="popular-group">
        <div class="inner">
          <div class="left">
            <h2 class="group-title">
              <a href="">小组</a>
            </h2>
            <table>
              <tr>
                <td>精选</td>
              </tr>
              <tr>
                <td>文化</td>
              </tr>
              <tr>
                <td>行摄</td>
              </tr>
              <tr>
                <td>娱乐</td>
              </tr>
              <tr>
                <td>时尚</td>
              </tr>
              <tr>
                <td>生活</td>
              </tr>
              <tr>
                <td>科技</td>
              </tr>
            </table>
          </div>
          <div class="center">
            <h2>热门小组 · · · · · ·</h2>
            <div class="group-list">
              <ul>
                <li>
                  <div class="pic">
                    <img src="image/group1.jpg" alt="" width="48">
                  </div>
                  <div class="info">
                    <div class="title">我爱三毛</div>
                    48429个成员
                  </div>
                </li>
                <li>
                  <div class="pic">
                    <img src="image/group2.jpg" alt="" width="48">
                  </div>
                  <div class="info">
                    <div class="title">沙发客</div>
                    22831个成员
                  </div>
                </li>
                <li>
                  <div class="pic">
                    <img src="image/group3.jpg" alt="" width="48">
                  </div>
                  <div class="info">
                    <div class="title">刘慈欣</div>
                    32245个成员
                  </div>
                </li>
                <li>
                  <div class="pic">
                    <img src="image/group4.jpg" alt="" width="48">
                  </div>
                  <div class="info">
                    <div class="title">西双版纳</div>
                    12862个成员
                  </div>
                </li>
                <li>
                  <div class="pic">
                    <img src="image/group5.jpg" alt="" width="48">
                  </div>
                  <div class="info">
                    <div class="title">记事本圆梦小组</div>
                    117739个成员
                  </div>
                </li>
                <li>
                  <div class="pic">
                    <img src="image/group6.jpg" alt="" width="48">
                  </div>
                  <div class="info">
                    <div class="title">这辈子一定要做几件疯狂的事</div>
                    93472个成员
                  </div>
                </li>
                <li>
                  <div class="pic">
                    <img src="image/group7.jpg" alt="" width="48">
                  </div>
                  <div class="info">
                    <div class="title">自己给自己剪头发</div>
                    36425个成员
                  </div>
                </li>
                <li>
                  <div class="pic">
                    <img src="image/group8.jpg" alt="" width="48">
                  </div>
                  <div class="info">
                    <div class="title">我们就是要做衣服给自己穿</div>
                    3640个成员
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="right">
            <h2>小组分类 · · · · · ·</h2>
            <div class="cate">
              <a href="">兴趣» </a>
              <table>
                <tr>
                  <td>旅行</td>
                  <td>摄影</td>
                  <td>影视</td>
                  <td>音乐</td>
                  <td>文学</td>
                  <td>游戏</td>
                  <td>动漫</td>
                </tr>
                <tr>
                  <td>运动</td>
                  <td>戏曲</td>
                  <td>桌游</td>
                  <td>怪癖</td>
                </tr>
              </table>
            </div>
            <div class="cate">
              <a href="">生活» </a>
              <table>
                <tr>
                  <td>健康</td>
                  <td>美食</td>
                  <td>宠物</td>
                  <td>美容</td>
                  <td>化妆</td>
                  <td>护肤</td>
                  <td>服饰</td>
                </tr>
                <tr>
                  <td>公益</td>
                  <td>家庭</td>
                  <td>育儿</td>
                  <td>汽车</td>
                </tr>
              </table>
            </div>
            <div class="cate">
              <a href="">购物» </a>
              <table>
                <tr>
                  <td>淘宝</td>
                  <td>二手</td>
                  <td>团购</td>
                  <td>数码</td>
                  <td>品牌</td>
                  <td>文具</td>
                </tr>
              </table>
            </div>
            <div class="cate">
              <a href="">社会» </a>
              <table>
                <tr>
                  <td>求职</td>
                  <td>租房</td>
                  <td>励志</td>
                  <td>留学</td>
                  <td>出国</td>
                  <td>理财</td>
                  <td>传媒</td>
                </tr>
                <tr>
                  <td>创业</td>
                  <td>考试</td>
                </tr>
              </table>
            </div>
            <div class="cate">
              <a href="">艺术» </a>
              <table>
                <tr>
                  <td>设计</td>
                  <td>手工</td>
                  <td>展览</td>
                  <td>曲艺</td>
                  <td>舞蹈</td>
                  <td>雕塑</td>
                  <td>纹身</td>
                </tr>
              </table>
            </div>
            <div class="cate">
              <a href="">学术» </a>
              <table>
                <tr>
                  <td>人文</td>
                  <td>社科</td>
                  <td>自然</td>
                  <td>建筑</td>
                  <td>国学</td>
                  <td>语言</td>
                  <td>宗教</td>
                </tr>
                <tr>
                  <td>哲学</td>
                  <td>软件</td>
                  <td>硬件</td>
                  <td>互联网</td>
                </tr>
              </table>
            </div>
            <div class="cate">
              <a href="">情感» </a>
              <table>
                <tr>
                  <td>恋爱</td>
                  <td>心情</td>
                  <td>心理学</td>
                  <td>星座</td>
                  <td>塔罗</td>
                  <td>LES</td>
                  <td>GAY</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>

Css部分

/* 首先是最外侧div 设置背景色*/
.popular-group{
	background-color: #F3F2F2;
}
/* 内部inner布局 */
.inner{
    max-width: 1215px;
    display: table;
    width: 100%;
    height: 450px;
    margin: 0 auto;
}
.inner>div {
    display: table-cell;
}
/*设置标题字体的样式*/
h2 a{
    font: 25px Arial, Helvetica, sans-serif;
    color: #44883E;
    margin: 0 0 10px 110px;
    line-height: 150%;
}
h2 {
    font: 15px Arial, Helvetica, sans-serif;
    color: #44883E;
    margin: 0 0 12px 0;
    line-height: 150%;
}
/*设置左部分 */
.left {
    width: 250px;
}
.left table{
    color: #44883E;
    margin-left: 45%;
}
/*设置右部分*/
.right {
    width: 400px;
}
.right table{
    width: 300px;
    color: #44883E;
    font-size: x-small;
}
/*中间 */
.center{
    height: 450px;
}
.center .group-list li {
    width: 250px;
    margin-top: 20px;
    text-align: left;
    overflow: hidden;
    color: #999;
}
.center li{
    display: inline-block;
}
.center .group-list .pic {
    float: left;
    margin-right: 15px;
}
.center .group-list .info {
    overflow: hidden;
}
.center .group-list .title {
    margin-bottom: 8px;
    color: #44883E;
}
最终的效果

在这里插入图片描述

GrapeTaroSoda
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿豆瓣首页【web前端项目】
mars_1_1的博客
10-27 1791
仿豆瓣首页【web前端项目】 下面是我之前做的一个静态页面，特此记录一下： 最需要耐心的是登录区的制作了： 以下是html部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
豆瓣页面 (html 和css)
weixin_30832351的博客
10-22 1736
一、豆瓣页面、html： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>豆瓣页面</title> <link rel="stylesheet" href="../css/home.css"></hea...
仿豆瓣网首页页面代码
09-11
仿豆瓣网首页的前端页面代码，使用css/html,对其页面进行编写布局等
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
HTML + CSS 实现豆瓣首页
王大傻的博客
06-18 1282
HTML + CSS 实现豆瓣首页
html+css制作豆瓣读书页面
yunanxxx的博客
12-27 1967
html+css制作豆瓣读书页面
HTML + CSS + 练习静态页面 + 实现豆瓣首页
06-30
HTML + CSS + 练习静态页面 + 实现豆瓣首页
豆瓣首页（利用html&css语言开发的静态页面）.rar
03-26
基于html&css制作的豆瓣静态页面，页面上的具体可切换的文字、图片、超链接内容未完全实现，但是制作出了整个页面的布局。loginfram.html&loginfram.css单独写了登录窗口的布局，并且利用iframe元素引入首页页面中……
豆瓣网首页制作项目.rar
07-15
豆瓣网基本功能都有，主页与其他页面的跳转，账户登陆判断等等，读书页，电影页，音乐页，小组页，豆瓣FM页，同城页，
Web 标准实践系列（二）——豆瓣的首页
03-15 707
题外话：不好意思在第一篇的三周之后才交作业。本想继续写 Google 的搜索结果页的，看到豆瓣上有朋友留言说想学习豆瓣首页的写法，我看了一下，有写头。起初以为比较简单的，最后花了不少时间。但还是有疏漏或者不合理的地方，请直接指出，谢谢。前言 下文中的例子以豆瓣用户登录后的页面为基础，各人显示的内容可能有所差别； 这次并不强求像素级的一致，特别是行距、间距部分可能
html+css高仿豆瓣首页
08-24
自己用来html和css练习做的一个高仿豆瓣首页的静态页面，没有加js，可根据自己需要加上js，除内容外，高仿相识度99%，对新手来说是个不错的参考！仅供参考，禁止商用！
豆瓣读书的静态网页（HTML+CSS)
09-22
静态的豆瓣读书网页，只使用了html+css 忽略了一些细节和重复的问题 没有动态效果，但是布局和原网页差不多，可能边距有些偏差
源代码：网站制作豆瓣电影.rar
09-24
源代码：网站制作豆瓣电影
web前端期末大作业——HTML+CSS简单的旅游网页设计与实现
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
web前端期末大作业—— HTML+CSS豪华车 (9页)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
大二学生HTML期末大作业——HTML+CSS+JavaScript食品网上超市购物商城网页与制作
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） 【查看更多源码...
简单的网页制作期末作业——HTML+CSS+JavaScript小礼品购物商城网站
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
前端页面豆瓣首页HTMLCSS图片2024最新下载
最新发布
weixin_62273193的博客
02-03 401
HTML代码： CSS： 图片地址请进入我的博客 前端君哥 https://www.yanjun202.com/post/100.html 下载
html期末学生结课大作业作品(html+css+js)
12-20
我做的期末学生结课大作业是一个简单的在线购物网站，使用了HTML、CSS和JavaScript来实现。整个网站有主页、商品详情页、购物车和支付页面等多个功能页面。 在主页中，我使用了HTML和CSS来设计页面布局和样式，使得整个网站看起来美观大方。同时，我还使用了JavaScript来实现一些动态效果，比如导航栏的下拉菜单和轮播图的自动播放。 在商品详情页中，我使用了HTML和CSS来布局商品信息和图片，利用JavaScript实现了放大镜效果，方便用户查看商品细节。同时，还设置了购买数量和加入购物车等功能。 在购物车页面，我使用了JavaScript来实现加减商品数量、计算总价和删除商品等功能，使得购物过程更加便捷。 在支付页面，我使用了HTML来编辑表单元素，利用CSS来美化表单样式，同时使用JavaScript来验证用户输入的信息，确保信息的准确性。 整个项目中，我通过HTML、CSS和JavaScript的组合应用，实现了一个简单但完整的在线购物网站，不仅提高了自己的前端开发能力，也让我对网页应用的开发流程有了更深入的了解。希望老师和同学们能够喜欢我的作品。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值