生活资讯网相关布局

本文详述了一位开发者如何运用Bootstrap5框架,结合flex和流式布局,构建一个生活百科资讯类网站。从前期准备、页面书写(以首页为例)、响应式修改等方面,详细阐述了每个步骤,包括头部导航、轮播图、遮罩图片和主体部分的布局。在响应式设计中,通过媒体查询解决不同屏幕尺寸下的布局问题,同时遇到了字体大小自适应和布局错乱等挑战。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、主要思路

这个项目我采用的是以boostrap5框架为主,然后参杂一些flex、流式等布局方式。

二、前期准备

将boostrap5框架的文件下载并引入,创建相应的css文件和html,完成html基本骨架的构建。

下载好自己要用到的字体图标文件。

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <script src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <script src="js/flexible.js"></script>
    <script src="fonts/iconfont.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <title>生活百科资讯类网站织梦模板(自适应手机端)</title>
</head>

<body>

</body>

</html>

三、页面书写(以首页为例)

1、头部导航部分

1)分为三个部分:logo、nav、search

2)利用boostrap、浮动、flex进行布局

3)给logo添加主题,利用搜索引擎的规则提高网站在有关搜索引擎内自然排名。

html部分:

<header id="tophead" class="sticky-top">
        <div class="container-lg header">
            <div class="row">
                <div class="logo col-xl-3 iconfont icon-icon-test3 test">
                    <a href="index.html">
                        <img src="picture/logo.png" alt="生活百科资讯类网站织梦模板(自适应手机端)">
                    </a>
                </div>
                <ul class="nav col-xl-6">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="news.html">新闻</a></li>
                    <li><a href="recommend.html">推荐</a></li>
                    <li><a href="hot_list.html">热榜</a></li>
                    <li><a href="parenting.html">育儿</a></li>
                    <li><a href="beauty.html">美容</a></li>
                    <li><a href="plastic.html">整形</a></li>
                    <li><a href="Keeping.html">养生</a></li>
                </ul>
                <div class="search col-xl-3 ">
                    <a href="search.html" class="iconfont icon-icon-test2"></a>
                </div>
            </div>
        </div>
    </header>

2、轮播图

轮播图我是直接引用的boostrap5里面的旋转木马组件,只做了一些细节的修改。

3、遮罩图片

这个模块一开始我是用栅格系统来进行布局,但是因为栅格系统盒子之间的间隙要用padding和margin来控制,会挤压到内部图片所以最后我改成了rem布局,比较适合。

4、主体部分

主体部分我用栅格系统将布局分成左右两部分,左边占8份、右边占4份,方便后面的响应式布局操作。

5、底部版权部分

底部主要是用flex布局来完成的

四、响应修改

响应模块我本想用boostrap5框架来完成的,但是因为不熟悉而且感觉还麻烦所以选择用媒体查询来完成响应。

响应主要分为两个区间,通过这两个区间的划分来完成响应:

只要屏幕宽度小于1200px,头条部分隐藏,主体部分中,右边的就隐藏,用display:none;不保留原来的位置

左边的栅格系统占满12份

@media screen and (min-width:768px) and (max-width:1200px)

 在这个宽度内,头部导航响应,logo、search部分隐藏

@media screen and (max-width:768px)

在这个宽度内,头部导航响应,nav部分隐藏,logo、search部分显示,增加一个字体图标。

五、遇到的问题

1、通过媒体查询规定页面标准字体大小为75px,但是屏幕宽度超过750px时字体大小一直是75px,不能实现字体大小的自适应,rem适配布局不适用。

@media screen and (min-width:750px) {
    html {
        font-size: 75px!important;
    }
}

2、在用媒体查询做响应式布局的修改时,在每一个屏幕宽度区间的临界点都会出现布局错乱的现象

比如屏幕宽度在1200px时,当前页面布局会具备两个区间的部分布局,无论我怎样更改区间都会出现这个现象

 

3、使用栅格系统布局时,每一个行内元素两边都会有一个padding值,怎样避免这个padding值的出现

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值