HTML+CSS项目案例（主体部分-首页（index））

最新推荐文章于 2024-05-16 13:29:35 发布
最新推荐文章于 2024-05-16 13:29:35 发布
阅读量434 收藏 1
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51415327/article/details/119925089
版权

1. main主题模块制作

在这里插入图片描述
在这里插入图片描述

1.1 newflash新闻模块

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<div class="news">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li>
                            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
                            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
                            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
                            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li>
                        </ul>
                    </div>
                </div>

.newsflash {
    float: right;
    width: 250px;
    height: 455px;
}
.news {
    height: 165px;
   border: 1px solid #e4e4e4;
}
.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.news-hd h5 {
    float: left;
    font-size: 14px;
}
.news-hd .more {
    float: right;
}
.news-hd .more::after {
    font-family: 'icomoon';
    content: '\e920';
}
.news-bd {
    padding: 5px 15px 0;
}
.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

在这里插入图片描述
所给思路：给12个li标签。然后每个li给一个右边框和下边框然后浮动即可

注意：此处整体的这个盒子只给一个左右边框和下边框，我们可以这样设置如下：

  border: 1px solid #e4e4e4;
  border-top: 0;

可以直接设置全部的边框然后不需要哪边取消哪边
在这里插入图片描述
在这里插入图片描述
如果制作过程中发现浮动的盒子不满足需求，例如：
在这里插入图片描述
我们可以采取的方法就是可以将每个li的宽度设置为25%这是最简单的方法

<div class="lifeservice">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                    </ul>
                </div>

.lifeservice {
    overflow: hidden;
    height: 209px;
    /* background-color: purple; */
    border: 1px solid #e4e4e4;
    border-top: 0;
}
.lifeservice ul {
    width: 252px;
}
.lifeservice ul li {
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
}
.lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    background-color: pink;
    margin-top: 12px;
    background: url(../images/icons.png) no-repeat -19px -15px;
}

在这里插入图片描述

2. 推荐模块制作

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

.recom {
    height: 163px;
    background-color: #ebebeb;
    margin-top: 12px;
}
.recom_hd {
    float: left;
    height: 163px;
    width: 205px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}
.recom_bd {
    float: left;
}
.recom_bd ul li {
    position: relative;
    float: left;
}
.recom_bd ul li img {
    width: 248px;
    height: 163px;
}
.recom_bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

 <div class="w recom">
        <div class="recom_hd">
            <img src="images/recom.png" alt="">
        </div>
        <div class="recom_bd">
            <ul>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
            </ul>
        </div>
    </div>

3. 家用电器模块（楼层区域制作：整体不给高度，但是每个楼层需要给高度）

在这里插入图片描述
旁边的导航栏可以跳转到所指定的界面

由于不知道里边的类别有多少不要给高度
在这里插入图片描述
在这里插入图片描述
上述几个大模块在一个大盒子里显示，一楼是家用电器，二楼是手机通讯，以下还可以有很多东西然后配合导航栏一起使用。

3.1 家用电器（一楼）

在这里插入图片描述
在这里插入图片描述

<!-- 1楼家用电器楼层 -->
        <div class="w jiadian">
            <div class="box_hd">
                <h3>家用电器</h3>
                <div class="tab_list">
                    <ul>
                        <li> <a href="#" class="style_red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#"> 高端电器</a></li>
                    </ul>
                </div>
            </div>

.box_hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
}
.box_hd  h3 {
    float: left;
    font-size: 18px;
    color: #c81623;
    font-weight: 400;
}
.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li {
    float: left;
}
.tab_list ul li a {
    margin: 0 15px;
}
.floor .w {
    margin-top: 30px;
}

tab栏选项卡原理布局

我们想要实现的效果是当我们点击tab_list的时候可以得到相应的tab_content的内容显示，其余的内容隐藏起来。

在这里插入图片描述

意思是当我们点热门的时候只显示热门的东西，而大家电、生活电器等等之后的东西全部隐藏

<div class="w jiadian">
            <div class="box_hd">
                <h3>家用电器</h3>
                <div class="tab_list">
                    <ul>
                        <li> <a href="#" class="style_red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#"> 高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <ul>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">节能补贴</a></li>
                            </ul>
                            <a href="#">
                                <img src="upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt="">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb"> <img src="upload/floor-1-2.png" alt=""></a>
                            <a href="#"> <img src="upload/floor-1-3.png" alt=""></a>
                        </div>
                        <div class="col_221">
                                <a href="#"> <img src="upload/floor-1-4.png" alt=""></a>
                              
                        </div>
                        <div class="col_219">
                                <a href="#" class="bb"> <img src="upload/floor-1-5.png" alt=""></a>
                                <a href="#"> <img src="upload/floor-1-6.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li {
    float: left;
}
.tab_list ul li a {
    margin: 0 15px;
}
.floor .w {
    margin-top: 30px;
}
.box_bd {
    height: 361px;
  
}
.tab_list_item>div {
    float: left;
    height: 361px;
}

.col_210 {
    width: 210px;
    background-color: #f9f9f9;
    text-align: center;
}
.col_210  ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 33px;
    margin-right: 10px;
}
.col_210  ul {
    padding-left: 12px;
}
.col_329 {
    width: 329px;
}
.col_221 {
    width: 221px;
    border-right: 1px solid #ccc;
}
.col_219 {
    width: 219px;
}
.bb {
    /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
    display: block;
    border-bottom: 1px solid #ccc;
}

这些盒子都是按列排列的，故我们可以通过col_数字来表示相应的类，方便识别。

相信光的奥特王小懒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css+js测试题-副本.pdf
11-27
html+css+js测试题-副本.pdf
HTML+css的家乡美-静态站设计.zip
10-14
静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计....
HTML5+CSS3案例一：学成在线
zhaoyang_m的博客
07-17 1104
链接：https://pan.baidu.com/s/10KBDVULhIOW698yODAmvSQ?，包含 HTML、CSS、图片、JavaScript等等。布局思路：先整体再局部，从外到内，从上到下，从左到右。标签结构：h1 > a > 网站名称（搜索关键字）调整盒子位置 → flex 布局、内外边距。画盒子，调整盒子范围 → 宽高背景色。搜索引擎优化：提升网站百度搜索排名。文件夹，内部包含当前网站的。网站根目录是指存放网站的。控制图片、文字内容样式。
HTML+CSS项目案例
qq_52108058的博客
11-30 3476
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
HTML+CSS练习小项目——百叶窗
最新发布
秋刀鱼不做梦的编程日常
05-16 800
HTML+CSS练习小项目——百叶窗
【带给你不一样的思路】纯 CSS + HTML 实现几个好看的案例
qq_56352725的博客
11-29 708
一些简单的前端案例，适合刚入门 HMTL + CSS 的学者进行练习哦！！！练习重点：定位！！！
HTML+CSS网页设计与制作 (我的家乡)
mon_star°的博客
12-06 4505
HTML+CSS网页设计与制作，我的家乡网页代码， 本实例适合于初学HTML+CSS的同学。该案例里面有div+css的样式布局设置，这个实例比较全面，有助于同学的学习。本文将介绍如何通过从零开始设计个人网站，并将其转换为代码的过程来实现设计与制作。大学生网页作业制作 (HTML+CSS)、大学生HTML期末大作业。HTML+CSS网页设计与制作 (我的家乡)
大学生网页设计作业——基于HTML的环境网站设计 HTML+CSS环保网站项目实现 带设计说明psd
而风不止
12-22 704
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html+css+js网页设计-中国传统音乐调式宣传网站
05-06
* html & css & js: 项目文件、源代码 * img: 图片素材 * .mp3: 音频素材 * .mp4: 视频素材 * readme: 说明文档 此文档 基本介绍： --- 本网站一共有十二个页面，网站深度为三层，网站一共分为四个大栏目， 分别是...
一个简单炫酷的前端小项目（html+css+js）----3D图片演示.zip
04-15
含全部源码，详情见同名博文
《网页设计与制作项目教程(HTML+CSS+JavaScript)》-配套源码.zip
05-25
html+css+javascript网页设计教程,详细案例配套源码，案例都是单独的方便查看理解，html+css+javascript网页设计教程,详细案例配套源码，案例都是单独的方便查看理解。
HTML+CSS入门案例实战（网站首页布局）
07-01
非常适合入门初学者的HTML+CSS入门案例实战（网站首页布局）...
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
四个完整的DIV+CSS网页案例，有详细解说
11-25
四个完整的DIV+CSS网页案例，有详细解说，教你如何一步步完成页面制作。
HTML5+CSS3实例源码（包含20个）
12-30
HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助 HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助
HTML+CSS-项目：学成在线
CaptainDrake的博客
11-25 1296
HTML+CSS项目：学成在线
HTML+CSS实训——Day14——项目其他页面的完善
Sol-itude的博客
06-14 1489
仓库地址：HTML实训今天我们继续用老师提供的api，完善一些剩余的功能，因为我的git push好像传乱了，所以仓库大家看看最新的就好，最新的一天一定包括前一天所做的内容。 还有几个页面，我就不一一展示了，大家去我的仓库直接下载就可以
HTML+CSS练习项目
[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
04-13 229
【代码】HTML+CSS练习项目。
vue3+ts postcss-px-to-viewport 兼容第三方ui库
06-08
对于使用第三方 UI 库的情况，如果使用 postcss-px-to-viewport 进行适配，可能会导致 UI 库的样式出现问题。这是因为 UI 库中的样式可能没有经过适配，需要我们手动进行调整。 一种解决方案是使用 postcss-px-to-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值