响应式页面练习

最新推荐文章于 2024-07-24 14:22:29 发布
最新推荐文章于 2024-07-24 14:22:29 发布
阅读量245 收藏
点赞数 1
分类专栏： 前端 文章标签： html css bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53519274/article/details/128398781
版权

系列文章目录

前端学习入门之html+css的使用

前言

这个小页面是大一暑假学习html+css做的小案例——响应式页面布局，使用了bootstrap框架

一、页面效果

全屏显示

移动缩小屏幕后

缩小到最小屏

 

 

 

二、具体实现代码

1.引入bootstrap库（网上有教程）

2.index.html

代码如下（示例）：

<!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">
   <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入首页样式文件 -->
    <link rel="stylesheet" href="css/index.css">
  <title>Document</title>
  <style>
    /* 利用我们自己写的样式覆盖原先的样式 ，若权重不够加!important*/
   .login {
     width: 200px;
   }
  </style>
</head>
<body>
<div class="container">
  <div class="row">
    <header class="col-md-2">
      <div class="logo">
        <a href="">
          <img src="images/蜡笔9.jpg" alt="" class="hidden-xs">
          <span class="visible-xs">小新小天地</span>
        </a>
      </div>
      <div class="nav">
       <ul>
         <li><a href="" class="glyphicon glyphicon-camera">生活日记</a></li>
         <li><a href=""class="glyphicon glyphicon-picture">自然乐园</a></li>
         <li><a href=""class="glyphicon glyphicon-phone">科技潮物</a></li>
         <li><a href=""class="glyphicon glyphicon-gift">新奇趣事</a></li>
         <li><a href=""class="glyphicon glyphicon-glass">美食记录</a></li>
       </ul>
      </div>
    </header>
    <article class="col-md-7">
      <!-- 新闻 -->
      <!-- 清除浮动 -->
      <div class="news clearfix">
        <ul>
          <li>
            <a href="">
              <img src="images/小心4.jpg" alt="">
              <p>小新百秀</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/1小心1.jfif" alt="">
              <p>可可爱爱，惹人喜爱，认真刷牙！</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/1小心2.jfif" alt="">
              <p>冬日一碗热腾腾的泡面，香香的！</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/1小心6.jfif" alt="">
              <p>平安夜的苹果🍎！</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/1小心5.jfif" alt="">
              <p>小新和小白❤！</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 发表 -->
      <div class="publish">
       <div class="row">
         <div class="col-md-9 bg-info"" >
          <h3>蜡笔小新 （臼井仪人创作的漫画作品）</h3>
          <p class="text-muted">原版名称クレヨンしんちゃん</p>
         <p class="text-info hidden-xs">1990年8月，在《weekly漫画action》上开始连载。1992年，根据漫画改编的同名动画在朝日电视台播出。</p>
         <p class="text-warning hidden-xs">类    型生活，搞笑，校园</p>
         </div>
         <div class="col-md-3 pic hidden-xs">
           <img src="images/蜡笔10.jpg" alt="">
         </div>
       </div>
       <div class="row">
        <div class="col-md-9 bg-success" >
         <h3>蜡笔小新 （臼井仪人创作的漫画作品）</h3>
         <p class="text-muted">原版名称クレヨンしんちゃん</p>
        <p class="text-info hidden-xs">1990年8月，在《weekly漫画action》上开始连载。1992年，根据漫画改编的同名动画在朝日电视台播出。</p>
        <p class="text-warning hidden-xs">类    型生活，搞笑，校园</p>
        </div>
        <div class="col-md-3 pic hidden-xs">
          <img src="images/蜡笔8.jpg" alt="">
        </div>
      </div>
      <div class="row">
        <div class="col-md-9 bg-warning" >
         <h3>蜡笔小新 （臼井仪人创作的漫画作品）</h3>
         <p class="text-muted">原版名称クレヨンしんちゃん</p>
        <p class="text-info hidden-xs">臼井仪人先生说之所以会创造出小新这个形象，是因为他在观察自己的孩子的时候，发现小孩子的想法往往非常独特，以至于作者被小孩的世界所吸引。所有的小孩都有乖巧和调皮的两面性。这种两面性对作者来讲是十分有趣的。反过来作者正是在自己的作品中反映了这一两面性。他同时承认“小新”有一部分是他自己的翻版。据他透露，蜡笔小新里有许多内容是他现实生活的写照，例如：小新爸爸造型与他本人有些相似；小新和他爸爸两道浓眉毛乃是因作者自己嫌弃自己的眉毛太稀疏 [5]  。</p>
        <p class="text-warning hidden-xs">类    型生活，搞笑，校园</p>
        </div>
        <div class="col-md-3 pic hidden-xs">
          <img src="images/蜡笔4.jpg" alt="">
        </div>
      </div>
      <div class="row">
        <div class="col-md-9 bg-danger" >
         <h3>蜡笔小新 （臼井仪人创作的漫画作品）</h3>
         <p class="text-muted">原版名称クレヨンしんちゃん</p>
        <p class="text-info hidden-xs">1990年8月，在《weekly漫画action》上开始连载。1992年，根据漫画改编的同名动画在朝日电视台播出。</p>
        <p class="text-warning hidden-xs">类    型生活，搞笑，校园</p>
        </div>
        <div class="col-md-3 pic hidden-xs">
          <img src="images/蜡笔3.jpg" alt="">
        </div>
      </div>
      <div class="row">
        <div class="col-md-9 bg-info"" >
         <h3>蜡笔小新 （臼井仪人创作的漫画作品）</h3>
         <p class="text-muted">原版名称クレヨンしんちゃん</p>
        <p class="text-info hidden-xs">1990年8月，在《weekly漫画action》上开始连载。1992年，根据漫画改编的同名动画在朝日电视台播出。</p>
        <p class="text-warning hidden-xs">类    型生活，搞笑，校园</p>
        </div>
        <div class="col-md-3 pic hidden-xs">
          <img src="images/蜡笔10.jpg" alt="">
        </div>
      </div>
      </div>
    </article>
    <aside class="col-md-3 ">
      <a href="" class="banner">
        <img src="images/蜡笔6.jpg" alt="">
      </a>
      <a href="" class="hot">
        <span class="btn btn-success">热搜</span>
        <h4 class="text-primary">欢迎来到小新快乐天地！</h4>
        <p class="text-muted">小新是一个年仅5岁，正在幼儿园上学的小男孩。他内心早熟，喜欢欣赏并向美女搭讪。最初小新与父亲广志和母亲美伢组成一个三人家族。随后又添加了流浪狗小白，日子频繁琐碎却不乏温馨感动。随着故事展开，又加入了新的成员妹妹野原向日葵 [6]  。</p>
      </a>
    </aside>
  </div>
</div>
</body>
</html>

3.index.css

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
body {
    background-color: #f5f5f5;
}
.container {
    background-color: #fff;
}
/* 修改container的最大宽度为 1280,根据设计稿来走 */
@media screen and (min-width: 1280px) {
    .container {
        width: 1280px;
    }
    /* 剩下的按照自己规定的区划分 */
}
/* header */
header {
    padding-left: 0!important;
}
.logo {
    background-color:cornflowerblue;
}
.logo img {
    /* width: 100%; */
    /* 小屏显示 */
    /* logo图片不需要缩放 */
    max-width: 100%;
    margin: 0 auto;
    
}
/* 我们如果进入超小屏幕下，logo里面的图就隐藏 */
/* 事先准备好一个盒子，它平时是隐藏，只有在超小屏幕显示 */
.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}
.nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}
.nav a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-size: 16px;
}
.nav a:hover {
    background-color: #fff;
    color: #333;
}
.nav a::before {
    vertical-align: middle;
    padding-right: 5px;
}

/* 当我们进入 小屏幕还有超小屏幕的时候 我们nav里面的li浮动起来，并且宽度为 20% */
@media screen and (max-width: 991px) {
    .nav li {
        float: left;
        width: 20%;
    }
    article {
        margin-top: 10px;
    }
}
/* 当我们进入超小屏幕下，我们的文字会变小 */
@media screen and (max-width: 768px) {
    .nav li a {
        font-size: 14px;
        padding-left: 3px;
    }
    /* 当我们处于超小屏幕下，第一个li宽度为100%，其余占50% */
    .news li:nth-child(1) {
        width: 100%!important;
    }
    .news li {
        width: 50%!important;
    }
    .publish h3 {
        font-size: 14px;
    }
    .publish p {
        font-size: 10px;
    }
}
.news li {
    float: left;
    width: 25%;
    height: 128px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.news li a {
    position: relative;
    /* 行内元素没有大小 */
    display: block;
    width: 100%;
    height: 100%;
    /* background-color: red; */
}
.news li:nth-child(1) {
    width: 50%;
    height: 266px;
    /* background-color: pink; */
}
/* 当我们处于超小屏幕下，第一个li宽度为100%，其余占50% */
.news li:nth-child(1) p {
    line-height: 41px;
    font-size: 20px;
    padding: 0 10px;
}
.news li a img {
    width: 100%;
    height: 100%;
}
.news li a p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 39px;
    padding: 5px 10px;
    margin-bottom: 0;
    background: rgba(0,0,0,.5);
    font-size: 12px;
    color: #fff;
}
.publish {
    border-top: 1px solid #ccc;
}
.publish .row {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}


.pic {
    margin-top: 10px;
}
.pic img {
    width: 100%;
}
.banner img {
  width: 100%;
}
.hot {
    display: block;
    margin-top: 20px;
    padding: 0 20px;
    border: 1px solid rgba(204, 204, 204, 0.591);
}
.hot span {
    border-radius: 0;
    margin-bottom: 20px;
}
.hot p {
    font-size: 12px;
}

4.图片

5.文件结构

 

 

总结

这个小案例是前年暑假练习写的，记录一下。响应式页面布局，比较适合刚入门前端的小伙伴。

努力前端小白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东移动web响应式项目.rar
10-12
4. **响应式图片（Responsive Images）**：通过CSS或HTML5的`srcset`属性，可以实现图片的自适应，确保在不同设备上加载适合的图片大小，提高页面加载速度。 5. **JavaScript实现**： - **轮播图**：项目中轮播图...
前端基础-静态页面练习.zip
07-08
此外，还需要掌握盒模型、布局技术（如流体布局、网格布局、Flexbox和Grid）、响应式设计以及CSS动画和过渡等概念。对于每个仿制页面，你需要通过CSS实现网页的颜色搭配、字体设置、布局调整、元素定位，以及对不同...
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
减压瑜伽响应式网页模板
01-23
【减压瑜伽响应式网页模板】是一个专为瑜伽爱好者和瑜伽工作室设计的网站模板，它采用了现代网页设计的响应式布局，确保在不同设备上都能提供一致且优秀的用户体验。响应式设计是当前网页开发的重要趋势，它使得网页...
响应式初级练习——现代浏览器
10-21
这个名为“响应式初级练习——现代浏览器”的项目，显然是一个使用Bootstrap框架进行的实战训练。Bootstrap是Twitter推出的一个开源工具，它提供了丰富的预定义样式、组件和JavaScript插件，帮助开发者快速构建响应...
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1033
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 700
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
前端开发知识(一)-html
modi000的博客
07-24 595
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
CSS实现表格无限轮播
像鱼的博客
07-24 317
在React中，用CSS实现表格无线轮播
CSS学习笔记
ngczx的博客
07-23 671
CSS学习笔记
mpu6050陀螺仪使用方法开发教程文档.docx
07-30
mpu6050陀螺仪使用方法
【SCI顶级】龙格库塔算法RUN-CNN-LSTM-Multihead-Attention温度预测【含源码 5747期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
大模型的数学之魂：统计学习理论精要
07-30
大型机器学习模型，通常简称为“大模型”，是指具有数十亿甚至数千亿参数的深度神经网络模型。这些模型因为其庞大的参数量和复杂的计算结构，能够处理非常复杂的任务和数据，展现出强大的表达能力和预测性能。大模型在自然语言处理、计算机视觉、语音识别和推荐系统等多个领域都有广泛的应用。 大模型的设计目的是通过训练海量数据来学习复杂的模式和特征，从而具备强大的泛化能力，能够对未见过的数据做出准确的预测。与参数较少、层数较浅的小模型相比，大模型虽然需要更多的计算资源和时间来训练和推理，但它们展现出了一种被称为“涌现能力”的特性，即从原始训练数据中自动学习并发现新的、更高层次的特征和模式。 大模型的发展历程可以分为几个阶段，从早期的卷积神经网络模型发展到以Transformer为代表的全新神经网络模型，再到当前以GPT为代表的预训练大模型阶段。Transformer架构因其自注意力机制而成为大模型的核心技术，它使得模型能够更好地理解和处理文本数据中的长距离依赖关系。 大模型的分类主要包括语言大模型（NLP）、视觉大模型（CV）和多模态大模型。语言大模型专注于处理文本数据和理解自然语言，而视觉大模型用
唯美淡雅四页.zip
最新发布
07-30
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
仿真验证阵列可以提高接收信号信噪比
07-30
这是一份模拟了阵列输入信号及噪声，并验证了相对于阵列接收到的信号，阵列输出信号可以将信噪比提高M倍，其中M为阵列的阵元个数的代码。 代码中可以随意修改阵元个数、阵元间距、波束指向角度、信号频率等。 代码中关键部分均含有文字注释，完全不必担心看不懂。 无论是从仿真波形，还是计算的信噪比结果均能看出阵元数为M的阵列将信号的信噪比提高了M倍。
[毕业设计]Java驱动的C语言编程练习与考试平台(源代码+论文).zip
07-30
[毕业设计]Java驱动的C语言编程练习与考试平台(源代码+论文)
基于Qt的多线程局域网聊天系统（含客户端+服务端）.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
iperf3可测量丢包率
07-30
测吞吐量和丢包率
遗传算法(GA)优化长短期记忆网络的数据分类预测，GA-LSTM分类预测，多输入单输出 多特征输入单输出的二分类及多分类模型
07-30
遗传算法(GA)优化长短期记忆网络的数据分类预测，GA-LSTM分类预测，多输入单输出。 多特征输入单输出的二分类及多分类模型。程序内注释详细，直接替换数据就可以用。 程序语言为matlab，程序可出分类效果图，迭代优化图，混淆矩阵图
前端响应式开发学习路线
07-08
9. 实践项目开发：在学习的过程中，尝试开发响应式的网站或应用项目，应用所学的知识和技术，同时不断练习和提升自己的技能。 10. 持续学习和实践：前端技术和框架在不断发展和更新，要保持学习的状态，关注最新的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值