基于flexbox的运动主题响应式网页

最新推荐文章于 2024-10-08 11:32:20 发布
最新推荐文章于 2024-10-08 11:32:20 发布
阅读量294 收藏
点赞数
分类专栏： 前端 文章标签： css3 html5 flexbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaoguoxing/article/details/113799115
版权

该案例中使用到fontawesome 5

先上效果图：
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="C:\Wnmp\html\shop-cart-2\fontawesome-free-5.15.1-web\fontawesome-free-5.15.1-web\css\all.css">
    <title>Flexbox - Gym Demo</title>
</head>
<body>
    <header>
        <h2><a href="">Pro<span>Gym</span></a></h2>
        <nav>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Contact</a></li>
        </nav>
    </header>
    <section class="banner-area">
        <div class="banner-img"></div>
        <h3>Be Strong Be fit</h3>
        <h1>Heath is <span>Wealth</span> </h1>
        <a href="" class="banner-btn">More Info</a>
    </section>
    <section class="about-area" id="about">
        <h3 class="section-title">Why <span>Us?</span></h3>
        <ul class="about-content">
            <li class="about-left"></li>
            <li class="about-right">
                <h2>Coz We Care</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet repudiandae doloribus necessitatibus perferendis, sapiente libero repellendus quia eligendi qui sunt veritatis architecto voluptas odit molestias enim placeat totam? Veritatis, possimus?
                Odit nesciunt consequatur et minus? Libero vitae, veniam sapiente numquam nisi maxime officiis odit sed debitis quo rem, quisquam, vero cupiditate error soluta commodi vel ipsum odio nesciunt. Ea, deserunt?
                Deleniti, architecto magni! Corrupti, aliquam. Veritatis in reiciendis alias, minus nostrum dolorem nobis, accusantium officia placeat aut quis. Quod dolor, quo voluptatem magni quae velit accusantium minima nesciunt debitis modi!</p>
            </li>
        </ul>
    </section>
    <section class="services-area" id="services">
        <h3 class="section-title"></h3>
        <ul class="services-content">
            <li>
                <img src="images/7.jpg" alt="">
                <h4>Diet Plan</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis enim dignissimos mollitia eius sint tenetur ipsam perferendis, molestiae deserunt hic! Voluptate beatae magnam totam ab nesciunt voluptas odio praesentium temporibus!Rem aliquid eos soluta quaerat cupiditate rerum deleniti enim atque? Amet incidunt repellendus facilis quis nam, obcaecati, alias et dolorem placeat quidem provident sequi non beatae fugiat natus deserunt ut!</p>
            </li>
            <li>
                <img src="images/8.jpg" alt="">
                <h4>Lifting</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore porro cum eius atque corrupti! Incidunt corrupti porro doloribus in. Delectus, ad laboriosam eligendi sequi aut quibusdam sit nam natus adipisci!Recusandae numquam quibusdam adipisci voluptatibus, magnam nostrum quas! Blanditiis commodi amet quae unde quos suscipit pariatur inventore dicta, ut asperiores consequuntur non, itaque rerum ipsa fugit cumque optio, atque adipisci.</p>
            </li>
            <li>
                <img src="images/9.jpg" alt="">
                <h4>PUshups</h4>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut corporis iure cumque quasi ipsum praesentium pariatur, quibusdam culpa autem dolore sequi in doloremque eos magnam adipisci consequatur possimus nesciunt voluptatem.Quae eaque sed culpa voluptas itaque architecto dolorem veniam quaerat pariatur odit velit officiis, esse illum repudiandae? Error, illo rem reiciendis fuga iste consectetur ipsam laudantium laborum eaque recusandae ab.</p>
            </li>
        </ul>
    </section>
    <section class="contact-area" id="contact">
        <h3 class="section-title">Our <span>Contact Info</span></h3>
        <ul class="contact-content">
            <li>
                <i class="fa fa-map-marker"></i>
                <p>365, New York</p>
            </li>
            <li>
                <i class="fa fa-phone"></i>
                <p>+123 456 7890 <br>+098 765 4321</p>
            </li>
            <li>
                <i class="fa fa-envelope"></i>
                <p>info@info.com <br>email@email.com</p>
            </li>
        </ul>
    </section> 
    <footer>
        <p>All Right Reserved by me</p>
    </footer>
</body>
</html>

在这里插入图片描述

       <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="C:\Wnmp\html\shop-cart-2\fontawesome-free-5.15.1-web\fontawesome-free-5.15.1-web\css\all.css">
    <title>Flexbox - Gym Demo</title>
    <style>
        /* initial part  */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            font-family: poppins;
        }
        ul, nav{
            list-style:none;
        }
        a{
            text-decoration: none;
            cursor: pointer;
            color: inherit;
        }
        /* end of initial part  */

        /* header part  */
        header{
            position: absolute;
            top: 0;
            left:0;
            z-index: 10;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            padding: 35px 100px 0;

        }
        header nav{
            display: flex;
        }
        header nav li{
            margin: 0 15px;
        }
        header nav li:first-child{
            margin-left: 0;
        }
        header nav li:last-child{
            margin-right: 0;
        }
        @media(max-width:800px){
            header{
                padding: 20px 50px;
            }
        }
        @media(max-width:600px){
            header{
                flex-direction: column;
            }
            header h2{
                margin-bottom: 15px;
            }
            header nav li{
                margin: 0 7 px;
            }
        }
        /* end of header part  */
        /* banner part  */
        section{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 110px 100px;
            color: #fff;
        }
        @media(max-width:800px){
            section{
                padding: 100px 50px;
            }
        }
        @media(max-width:600px){
            section{
                padding: 125px 30px;
            }
        }
        section p{
            max-width: 800px;
            text-align: center;
            margin-bottom: 35px;
            padding: 0 20px;
            line-height: 2;
        }
        .banner-area{
            position: relative;
            justify-content: center;
            min-height: 100vh;
            color: #fff;
            text-align: center;
        }
        .banner-area .banner-img{
            background-image: url(images/0.jpg);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            z-index: -1;
            background-position: center center;
        }
        .banner-area .banner-img:after{
            content:'';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: .5;
        }
        .banner-area h1{
            margin-bottom: 15px;
            font-size: 65px;
            text-transform: uppercase;
        }
        .banner-area h1 span{
            color: #f36100;
        }
        .banner-area h3{
            font-size: 35px;
            font-weight: 100;
        }
        .banner-area a.banner-btn{
            padding: 15px 35px;
            background-color: #f36100;
            text-transform: uppercase;
        }
        @media(max-width:800px){
            .banner-area{
                min-height: 600px;
            }
            .banner-area h1{
                font-size: 27px;
            }
            .banner-area h3{
                font-size: 20px;
            }
            .banner-area a.banner-btn{
                padding: 8px 20px;
            }
        }
        /* end of banner part  */

        /* about part  */
        #about{
            background-color: #0a0a0a;

        }
        ul.about-content{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .about-content li{
            padding: 20px;
            height: 290px;
            background-clip: content-box;
            background-size: cover;
            background-position: center 0;
        }
        .about-left{
            flex-basis: 40%;
            background-image: url(images/8.jpg);

        }
        .about-right{
            flex-basis: 60%;
        }
        .about-area p{
            max-width: 800px;
            margin-bottom: 35px;
            line-height: 1.5;
            text-align: left;
            padding-left: 0;
        }
        .section-title{
            text-transform: uppercase;
            font-size: 50px;
            margin-bottom: 5%;
        }
        .section-title span{
            color: #f36100;
        }
        .about-right h2{
            margin-bottom: 3%;
        }
        @media(max-width:800px){
            .section-title{
                font-size: 35px;
            }
            .about-left, .about-right{
                flex-basis: 100%;
            }
            .about-content li{
                padding: 8px;
            }
        } 
        /* end of about part  */
        /* services part  */
        #services{
            background-color: #151515;
        }
        ul.services-content{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .services-content li{
            padding:0 30px;
            flex-basis: 33%;
            text-align: center;
        }
        .services-content img{
            width: 25%;
            margin-bottom: 20px;
        }
        .services-content li h4{
            font-size: 20px;
            margin-bottom: 25px;
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing: 3px;
        }
        .services-content li p{
            margin: 0;
        }
        @media(max-width: 800px){
            .services-content li{
                flex-basis: 100%;
                margin-bottom: 65px;
            }
            .services-content li:last-child{
                margin-bottom: 0;
            }
            .services-content li p{
                padding: 0;
            }
        }
        /* end of services part  */
        /* contact part  */
        #contact{
            background-color: #0a0a0a;

        }
        ul.contact-content{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .contact-content li{
            padding: 0 30px;
            flex-basis: 33%;
            text-align: center;
        }
        .contact-content li i{
            font-size: 50px;
            color: #f36100;
            margin-bottom: 25px;
        }
        .contact-content li p{
            margin:0;
        }
        @media(max-width:800px){
            .contact-content li{
                flex-basis: 100%;
                margin-bottom: 65px;
            }
            .contact-content li:last-child{
                margin-bottom: 0;
            }
            .contact-content li p{
                padding: 0;
            }
        }

        /* end of contact part  */

        /* footer part  */
        footer{
            display:flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: #fff;
            background-color: #000;
            padding: 60px 0;
        }
        /* end of footer part  */
    </style>
</head>
<body>
    <header>
        <h2><a href="">Pro<span>Gym</span></a></h2>
        <nav>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Contact</a></li>
        </nav>
    </header>

    <section class="banner-area">
        <div class="banner-img"></div>
        <h3>Be Strong Be fit</h3>
        <h1>Heath is <span>Wealth</span> </h1>
        <a href="" class="banner-btn">More Info</a>
    </section>
    <section class="about-area" id="about">
        <h3 class="section-title">Why <span>Us?</span></h3>
        <ul class="about-content">
            <li class="about-left"></li>
            <li class="about-right">
                <h2>Coz We Care</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet repudiandae doloribus necessitatibus perferendis, sapiente libero repellendus quia eligendi qui sunt veritatis architecto voluptas odit molestias enim placeat totam? Veritatis, possimus?
                Odit nesciunt consequatur et minus? Libero vitae, veniam sapiente numquam nisi maxime officiis odit sed debitis quo rem, quisquam, vero cupiditate error soluta commodi vel ipsum odio nesciunt. Ea, deserunt?
                Deleniti, architecto magni! Corrupti, aliquam. Veritatis in reiciendis alias, minus nostrum dolorem nobis, accusantium officia placeat aut quis. Quod dolor, quo voluptatem magni quae velit accusantium minima nesciunt debitis modi!</p>
            </li>
        </ul>
    </section>
    <section class="services-area" id="services">
        <h3 class="section-title"></h3>
        <ul class="services-content">
            <li>
                <img src="images/7.jpg" alt="">
                <h4>Diet Plan</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis enim dignissimos mollitia eius sint tenetur ipsam perferendis, molestiae deserunt hic! Voluptate beatae magnam totam ab nesciunt voluptas odio praesentium temporibus!Rem aliquid eos soluta quaerat cupiditate rerum deleniti enim atque? Amet incidunt repellendus facilis quis nam, obcaecati, alias et dolorem placeat quidem provident sequi non beatae fugiat natus deserunt ut!</p>
            </li>
            <li>
                <img src="images/8.jpg" alt="">
                <h4>Lifting</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore porro cum eius atque corrupti! Incidunt corrupti porro doloribus in. Delectus, ad laboriosam eligendi sequi aut quibusdam sit nam natus adipisci!Recusandae numquam quibusdam adipisci voluptatibus, magnam nostrum quas! Blanditiis commodi amet quae unde quos suscipit pariatur inventore dicta, ut asperiores consequuntur non, itaque rerum ipsa fugit cumque optio, atque adipisci.</p>
            </li>
            <li>
                <img src="images/9.jpg" alt="">
                <h4>PUshups</h4>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut corporis iure cumque quasi ipsum praesentium pariatur, quibusdam culpa autem dolore sequi in doloremque eos magnam adipisci consequatur possimus nesciunt voluptatem.Quae eaque sed culpa voluptas itaque architecto dolorem veniam quaerat pariatur odit velit officiis, esse illum repudiandae? Error, illo rem reiciendis fuga iste consectetur ipsam laudantium laborum eaque recusandae ab.</p>
            </li>
        </ul>
    </section>
    <section class="contact-area" id="contact">
        <h3 class="section-title">Our <span>Contact Info</span></h3>
        <ul class="contact-content">
            <li>
                <i class="fa fa-map-marker"></i>
                <p>365, New York</p>
            </li>
            <li>
                <i class="fa fa-phone"></i>
                <p>+123 456 7890 <br>+098 765 4321</p>
            </li>
            <li>
                <i class="fa fa-envelope"></i>
                <p>info@info.com <br>email@email.com</p>
            </li>
        </ul>
    </section> 
    <footer>
        <p>All Right Reserved by me</p>
    </footer>
</body>
</html>
三哥自尊心强
关注
专栏目录
vue 响应式布局组件_今天如何使用响应式Web组件
culi4814的博客
08-15 2659
vue 响应式布局组件A few years ago I started to hear a lot about Web Components. I got pretty excited and then totally forgot about them as the noise settled down. It turns out there has been some good moveme...
基于HTML+CSS+JS开发的网站-运动电商网店响应式网页.7z
06-28
本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建...
基于Flexbox 的响应式个人博客样式
yaoguoxing的博客
01-26 207
效果图： 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式Blog -- 基于Flexbox</title> <style>
HTML5+CSS期末大作业：运动体育网站设计主题
m0_55286843的博客
01-31 389
2.网页作品编辑：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。4.网页作品技术：使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。3.网页作品布局：网页布局整体为响应式布局、LOGO、导航、主体内容布局。
HTML+CSS篮球静态网页设计（web前端网页制作课作业）NBA杜兰特篮球运动网页
HTML网页设计
08-11 1765
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；......
reactnative布局与适配
weixin_30879169的博客
03-13 532
一、reactnative布局采用flexbox布局 Flexbox是什么 根据规范中的描述可知道，Flexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调整和分配元素和空间两者之关的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。 这样听起来是不是太官方了，其实我也明白这种感觉。 如何开始使用Flexbox 这是每个人都会...
前端响应式布局解决方案分享
dfc_dfc的博客
08-10 807
前端自适应解决方案
层出不穷的终端设备适配需求下 未来的响应式Web设计长什么样？
阿里技术
05-13 2766
响应式Web设计诞生已久，本文将带你了解响应式Web设计的前世今生。
响应式布局，你需要知道这些
weixin_46837985的博客
05-07 243
来源：campcchttps://juejin.cn/post/69515755910993018952011年，Google 发布了 Android 4.0，在经历了 Cupcake，D...
【PWA】响应式开发
小平果的欢乐谷
12-23 675
PWA 是专门应对手机开发而提出的概念，不过，由于手机端在国内四分五裂的局面看来（还包括 PC/Pad），屏幕尺寸的不同，网页设计的样式和大小当然也是完全不一样的。为了让 Web 能完美的在多端上运行，这里，我们就需要进行响应式开发。响应式的目的就是让一个网站尽可能的适配所有大小的网页。当然，响应式开发所用到的技术也是非常之多，不过，主要的还是 CSS 。meta 标签meta 标签之所以重要，是
基于HTML+CSS+JS开发的网站-跑步运动鞋网店响应式网页.7z
06-28
本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建...
滑雪运动户外网站模板_html5 bootstrap 响应式模板UI前端源码.rar
08-01
在滑雪运动户外网站模板中，响应式设计的实现主要依赖于媒体查询（Media Queries）和Flexbox或Grid布局。媒体查询允许根据设备特性如屏幕宽度应用不同的CSS规则，使得布局能够在大屏幕、平板电脑和手机等设备上自动...
极限旅行响应式网站模板
01-21
"极限旅行响应式网站模板"是一款专为展示和推广与极限运动相关的旅行活动而设计的网页模板。响应式设计是其核心特点，意味着该模板能够根据用户设备的屏幕大小自动调整布局，提供良好的视觉体验，无论是桌面电脑、...
基于HTML+CSS+JS开发的网站-赛车运动产品商城网站.7z
06-28
本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建...
使用CSS3与JavaScript实现炫酷的3D旋转魔方及九宫格交换动效
最新发布
qq_40791475的博客
10-08 1084
这篇文章详细介绍了如何使用CSS3和JavaScript实现一个具有科技感的3D旋转魔方，并且在魔方的九宫格中实现数字随机交换的动效。文章从实现需求出发，逐步讲解了CSS3的3D变换基础知识，如何使用HTML和CSS构建魔方的基础结构，并通过CSS动画让魔方在三维空间中旋转。接着，使用JavaScript实现九宫格的数字交换和相邻格子判断的逻辑，确保动画效果自然流畅。最后，文章提供了完整的项目代码和详细的解释，帮助读者更好地理解和掌握这些前端技术。
CSS浮动
2401_82561004的博客
10-06 482
浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。另外，在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧，从而可以实现文字环绕的效果，类似于Word 中图文混排。注意：浮动（float）属性仅对非绝对定位的元素有效，跟随浮动元素的文本或行内元素将围绕在浮动元素的另一侧，例如向左浮动的话其它元素将围绕在浮动元素的右侧。运行结果如下图所示：图：float 属性演示。
CSS3--美若天仙！？
金灰的博客
10-03 1125
浮动属性 float，left 表示左浮动，right 表示右浮动l特点1.浮动后的盒子顶对齐2.浮动后的盒子具备行内块特点3.父级宽度不够，浮动的子级会换行4.浮动后的盒子脱标l清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果推荐双伪元素法清除浮动。l拓展：浮动本质作用是实现图文混排效果。
好玩的水表电表
lulei5153的博客
10-01 2036
【代码】好玩的水表电表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值