蓝桥杯web：5【页面布局】制作网站首页

最新推荐文章于 2023-04-07 11:47:43 发布
最新推荐文章于 2023-04-07 11:47:43 发布
阅读量883 收藏 9
点赞数
分类专栏： 蓝桥杯web模拟题1 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51167834/article/details/123433943
版权

考试需求

请完善 css/style.css 样式文件，让知乎日报首页呈现如下所示的效果（页面整体宽度 1024px）：

关键尺寸批注如下：（可以通过在图片上右键-》“在新标签页打开图片”，或在右键-》复制图片地址后到浏览器新标签页打开并放大图片，查看关键尺寸）

HTML：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>知乎日报 - 每天 3 次，每次 7 分钟</title>
    <link href="css/style.css" rel="stylesheet" />
  </head>

  <body id="body">
    <!--header start-->
    <header class="headerbox">
      <!--nav start-->
      <nav class="navbox">
        <h1>知乎日报</h1>
        <div class="navright">
          <a class="on" href="#body">app下载</a>
          <a href="#tabtitle">浏览内容</a>
        </div>
      </nav>
      <!--nav end-->
    </header>
    <!--header end-->
    <!--banner start-->
    <section class="banner">
      <div class="container">
        <div class="">
          <img
            src="images/phone_sample.png"
            alt="知乎日报应用截屏"
            class="phoneimg loaded"
          />
        </div>
        <div class="content">
          <h2>每天三次 每次七分钟</h2>
          <div class="info">
            在中国，资讯类移动应用的人均阅读时长是 5
            分钟，而在知乎日报，这个数字是 21。
          </div>
        </div>
      </div>
    </section>
    <!--banner end-->
    <!--tabtitle start-->
    <section class="tabtitle" id="tabtitle">
      <h3>浏览内容</h3>
      <h4>最新内容</h4>
    </section>
    <!--tabtitle end-->
    <!--list start-->
    <section class="list">
      <ul>
        <li>
          <a href="#">
            <img src="images/1.jpg" alt="" />
            <p>怎样使金属变得很脆？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/2.jpg" alt="" />
            <p>有哪些对你很有冲击力的设计？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/3.jpg" alt="" />
            <p>有哪些很重要，教练却没有教的驾驶技巧？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/5.jpg" alt="" />
            <p>谢谢天上掉的玩具</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/6.jpg" alt="" />
            <p>火车上的「最大上沙量」标识是什么意思？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/7.jpg" alt="" />
            <p>翼龙可以当飞行坐骑么？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/1.jpg" alt="" />
            <p>怎样使金属变得很脆？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/2.jpg" alt="" />
            <p>有哪些对你很有冲击力的设计？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/3.jpg" alt="" />
            <p>有哪些很重要，教练却没有教的驾驶技巧？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/5.jpg" alt="" />
            <p>谢谢天上掉的玩具</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/6.jpg" alt="" />
            <p>火车上的「最大上沙量」标识是什么意思？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/7.jpg" alt="" />
            <p>翼龙可以当飞行坐骑么？</p>
          </a>
        </li>
      </ul>
      <div class="more">
        <a href="#">更多精彩内容请在APP中查看</a>
      </div>
    </section>
    <!--list end-->
    <!--footer start-->
    <footer class="footer">
      <div class="footerBox">
        <div class="footerL">
          <p>
            知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
          </p>
          <p>
            主题日报包括动漫、设计、大公司、游戏、财经、电影、电子音乐、互联网安全等丰富内容，为业内人和资深爱好
            者推荐各领域最精彩文章，满足高质量阅读需求。
          </p>
          <p>在知乎日报，告别浮躁，重获阅读的愉悦。</p>
          <p>© 2020 知乎</p>
        </div>
        <div class="footerR">
          <img src="images/qr.png" alt="" />
          <p>扫描下载客户端</p>
        </div>
      </div>
    </footer>
    <!--footer end-->
  </body>
</html>

 

CSS：

*{
    padding:0;
    margin:0;
}
a{
    text-decoration: none;
    color: #000000;
}
li{
    list-style: none;
}

body{
    width: 1024px;
    margin: auto;
}
.navbox{
    height: 78px;
    line-height: 78px;
}
.navbox h1{
    /*将h1里的字体大小调整为0px，设置h1宽高，再插入背景图片*/
    font-size: 0px;
    float: left;
    height: 50px;
    width: 145px;
    background-image:url('../images/logo.png');
}
.navright{
    float: right;
}

.navright a{
    /* 将a标签设置宽高，并且使文字居中 */
    display: inline-block;
    width: 120px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}

.navright .on{
    color: #0099F2;
    background-color: #F0F9FF;
}

.banner{
    background-color: #008BED;
}
.container{
   position: relative;
}

.content{
    /* 不是很懂移动的距离怎么看出来的 */
    width: 410px;
    position: absolute;
    top:120px;
    left: 500px; 
}
.content h2{
    font-size: 40px;
    line-height: 40px;
    color: #fdfdfd;
}
.content .info{
    font-size: 16px;
    line-height: 26px;
    color: #99d1f8;
}
.tabtitle{
    width: 960px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
}
.tabtitle h3{
    /* 单独只写h4float：right，h4会到下面，加上h3float：left才有效果 */
    font-size: 24px;
    float: left;
    color: #000000;
}
.tabtitle h4{
    font-size: 24px;
    color: #cccccc;
    float: right;
}

.list{
   margin: auto;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   width: 960px;
}
.list ul{
    background-color: #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}
.list ul li{
    width: 300px;
    height: 374px;
    margin-bottom: 20px;
    background-color: #ffffff;
    
}
.list li a{
    margin-left: 20px;
}
.list li img{
    width: 260px;
    height: 260px;
    margin-top: 20px;
}
.list li p{
    font-size: 14px;
    color:#333333;
    margin-left: 20px;
}
.more{
    color: #59abdf;
    height: 62px;
    line-height: 62px;
    font-size: 20px;
    text-align:center;
    background-color: #e8eef2;
}
.more a{
    color: #59abdf
}

.footer{
    overflow: hidden;
    width: 1024px;
    height: 265px;
    background-color: #E5E5E5;
    margin-top:30px;
}
.footerBox{
    display: flex;
    justify-content: space-around;
}
.footerL{
    width:710px;
    height: 210px;
    color: #000000;
    font-size: 14px;
    line-height: 25px;
    margin-top: 32px;
}
.footerL p{
    margin-bottom: 15px;
}
.footerR{
    margin-top: 30px;
    text-align: center;
}
.footerR img{
    width: 141px;
    height:162px;
}

Rainbow一定行
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【页面布局】制作网站首页 第十三届蓝桥杯（Web 应用开发）线上模拟赛
Pulse的博客
12-03 1731
第十三届蓝桥杯（Web 应用开发）线上模拟赛第5题
Web前端案例——学成网首页制作
buhuibiancheng__的博客
11-22 3847
简易的学成网网站制作。代码均有注释，可以说十分新手向了。 相关知识：html+css，主要学习的是css的浮动布局。下一篇文章会在这个网页的基础上添加定位盒子。 运行效果图： html部分： <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
第十三届蓝桥杯 第5题 【页面布局】制作网站首页
qq_40818371的博客
12-05 415
第十三届蓝桥杯 第5题 【页面布局】制作网站首页
第十三届蓝桥杯（Web 应用开发）线上模拟赛【第五题】（制作网站首页）
qq_16674623的博客
12-11 2243
第十三届蓝桥杯（Web 应用开发）线上模拟赛【第五题】（制作网站首页）
第十三届蓝桥杯（web组），第五题【页面布局】制作网站首页
autumnmn的博客
04-01 637
蓝桥杯web：模拟题第五题【页面布局】制作网站首页。
蓝桥杯介绍：蓝桥杯题型和分值介绍
03-05
### 蓝桥杯概述及题型分值详解 #### 一、蓝桥杯简介 蓝桥杯全称“全国软件和信息技术专业人才大赛”，是中国一项面向高校学生的大型信息技术竞赛活动，旨在通过比赛促进学生对计算机科学的学习热情，并提高其实践...
蓝桥杯比赛：介绍什么是蓝桥杯
02-28
详细介绍了蓝桥杯的经历，以及作用
2022蓝桥杯Web大学组省赛真题
07-03
2022蓝桥杯Web组省赛真题是一份面向Web开发者的竞赛试题，旨在评估参赛者在Web开发领域的技能和能力。这份资源提供了省赛的真实题目，可供学习和练习使用。 该资源包含了一系列的编程问题，涵盖了Web开发的各个方面...
蓝桥杯web比赛模拟题
04-08
【蓝桥杯Web比赛模拟题】是一场针对前端开发技能的竞赛，旨在考察参赛者在Web开发领域的专业知识和实战能力。作为蓝桥杯的第一届Web比赛，它的重要性不言而喻，为参赛者提供了展示才华、提升技能和探索职场发展的...
蓝桥杯程序：第十届省赛题-蓝桥杯单片机第十届初赛试题
最新发布
05-03
蓝桥杯程序，第十届省赛题，蓝桥杯单片机第十届初赛试题，可供学习参考交流。
蓝桥杯web：1.【Bug 调试】修复网站显示问题
weixin_51167834的博客
03-05 991
打开环境右侧的【Web 服务】，点击【exam01】文件夹，效果如下（页面显示宽度为 1024 px）： 考试需求 如上所示的 index.html 布局不符合最终要求。请检查 exam01 下的各个文件，找到并修复项目存在的 Bug，使果壳儿页面正常显示，效果如下（页面显示宽度为 1024 px）： 题目所给代码： 修改过后 送分题，引入css文件时名称写错 ...
【Web应用开发】实验五：采用布局，创建个人主页
msmxsd的博客
03-02 323
文章目录一、实验目的二、实验内容步骤流程核心思想具体代码展示三、结论（结果）四、小结 一、实验目的 1.了解布局的概念，掌握浮动技术、定位技术、display等与布局密切相关的技术、属性； 2.了解table+css布局、div+css布局以及HTML5布局； 3.熟悉掌握设置浮动实现1-2-1、3（n）列布局的基本方式； 4.掌握box-sizing:border-box技巧，实现设置height和width时设置整个盒子的大小，从而忽略内边距和盒子厚度问题； 5.掌握固定布局、流动布局和弹性布局的概念
第十三届蓝桥杯 第9题 【数据交互】知乎首页数据动态化
qq_40818371的博客
12-05 801
第十三届蓝桥杯 第9题 【数据交互】知乎首页数据动态化
【功能实现】卡片化标签页 蓝桥云课楼赛第31期（Web 前端挑战）
Pulse的博客
02-28 737
蓝桥云课楼赛第31期Web 前端进阶第4题
原生js实现轮播图（自动和手动）
weixin_43919429的博客
03-27 832
这个轮播图是算比较完整的轮播图，自动播放、点击跳转、下一页上一页、运动缓冲功能都有了。 轮播图效果图： 代码部分： HTML代码： <section class="banner"> <article class="banner_box"> <input type="button" id="btnL" value="<...
WEB网页设计期末作业个人主页——基于HTML+CSS制作个人简介网站
热门推荐
m0_71154533的博客
08-13 1万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
第十三届蓝桥杯Web组国赛真题 开学礼物大放送
sinat_51673411的博客
04-07 977
又是一年开学季，蓝桥为大家准备了开学礼物，想制作一个页面来宣传一下该活动。本题需要按照要求完成一个以“开学季”为主题的页面布局。
蓝桥杯2022web省赛赛题题解-06
Veilhry
04-14 643
蓝桥杯2022web省赛赛题题解-06 完整代码见GitHub：github.com/Veilhry/lanqiaoweb/tree/master/06 网页在线预览地址：https://veilhry.github.io/lanqiaoweb/06/index.html 蓝桥知识网 介绍 蓝桥为了帮助大家学习，开发了一个知识汇总网站，现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。 目标 请根据mark.png 图片上的参数标注，补充css/style.css和 index.html文
移动端基础及响应式布局
袅袅青烟散的博客
11-24 4674
目录1.移动端概述和hybird模式 2.响应式布局基础 3.响应式布局之流式布局 4.做移动端项目之前的准备 5.响应式布局demo 6.rem响应式布局 7.swiper的使用和轮播图 8.综合案例-微信场景应用1.移动端概述和hybird模式移动端：运行在移动设备上的产品 产品大部分都只需要适配ios和安卓系统即可 响应式布局：在不同的设备上都能给予客户最好的操作体验 移动
蓝桥杯大赛：Java大学C组决赛详解
"该资源是第十二届蓝桥杯大赛软件赛决赛的Java大学C组比赛试题，包含了三道题目，分别是关于整数范围、网络带宽和纯质数的问题。比赛规则说明了考试时间、答题方式、提交答案的格式要求以及程序设计题的注意事项。" ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值