2022-03-11 html网页布局练习(三):使用position定位+rem进行网页布局

已于 2023-02-14 23:24:04 修改
阅读量84 收藏
点赞数
分类专栏： 项目与应用 文章标签： html css position html5 定位
于 2022-03-11 14:16:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/123423780
版权
本文详细介绍了响应式网页设计的实践，包括原型图展示、使用position属性进行元素定位（如顶部logo、搜索框、导航栏等），以及rem单位的应用。通过实例展示了如何创建自适应布局，如轮播图、内容卡片和不同区域的定位。
摘要由CSDN通过智能技术生成
原型图

https://s3.bmp.ovh/imgs/2023/02/10/e0ca823ed4b47297.jpg

页面结构
  • 网页由顶部top(包含logo和搜索框)+头部header(包含导航栏)+轮拨图banner+主体内容main+市场项目section+底部footer(包含版权信息等)
  • 使用position子绝父相进行定位,注意到只需要一个最外面的父元素设置绝对定位,其若干层子元素都可以设置相对定位
  • 使用rem相对单位代替px,在VSCode应用商店中下载cssrem插件
完整代码
<!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">
  <title>TREVISO</title>
  <link rel="stylesheet" href="./font/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      width: 100%;
      height: 100%;
      background: rgb(222, 222, 250);
      font-size: 16px;
    }

    body {
      width: 84.0625rem;
      height: 100%;
      background: rgb(187, 183, 184);
      margin: 0 auto;
    }

    ul,
    li {
      list-style: none;
    }

    /* 1.top */
    #top {
      width: 100%;
      height: 6.25rem;
      background: #fff;
      position: relative;
    }

    #top>* {
      position: absolute;
      bottom: 2.125rem;
    }

    #top>img {
      width: 10.25rem;
      left: 11.375rem;
    }

    #top>span {
      left: 22.25rem;
      top: 1.9rem;
      font-size: 2.375rem;
      font-family: Arial, Helvetica, sans-serif;
    }

    #top>input {
      width: 14.5rem;
      height: 2rem;
      border: none;
      background: #f1f1f1;
      right: 12.6875rem;
      text-indent: 1rem;
    }

    #top>.iconfont {
      color: #626262;
      top: 2.55rem;
      right: 13.25rem;
      z-index: 999;
      font-size: 1rem;
    }

    /* 2.header */
    header {
      width: 100%;
      height: 3.75rem;
      background: #2f2f2f;
    }

    header ul {
      width: 100%;
      height: 3.75rem;
      position: relative;
    }

    header li {
      position: absolute;
      font-size: .75rem;
      color: #fff;
      top: 1.375rem;
    }

    header li:nth-child(1) {
      left: 13.75rem;
    }

    header li:nth-child(2) {
      left: 21.25rem;
    }

    header li:nth-child(3) {
      left: 28.75rem;
    }

    header li:nth-child(4) {
      left: 36.25rem;
    }

    header li:nth-child(5) {
      left: 42.75rem;
    }

    header li:nth-child(6) {
      left: 50.25rem;
    }

    header li:nth-child(7) {
      left: 57.75rem;
    }

    header li:nth-child(8) {
      left: 65.25rem;
    }

    /* 4.main */
    main {
      height: 34.25rem;
      background: #fff;
      position: relative;
    }

    /* 4.1.companyNews */
    .companyNews,
    .companyInfo,
    .zhaopin {
      position: absolute;
      width: 15rem;
      height: 15rem;
    }

    .companyNews {
      width: 30rem;
      left: 11.875rem;
    }

    .companyInfo {
      background: #f1f1f1;
      left: 41.375rem;
    }

    .companyInfo>* {
      position: absolute;
      left: 1.375rem;

    }

    .zhaopin {
      background: #fbfbfb;
      left: 56.375rem;
    }

    .companyNews>ul {
      position: absolute;
      bottom: 1.5rem;
    }

    .companyNews>ul>li>span {
      color: #a6a6a6;
      font-size: .75rem;
    }

    .companyNews>ul>li>span:nth-child(3) {
      position: absolute;
      width: 4.375rem;
      left: 22.375rem;
    }

    .mainTitle {
      font-size: 1.125rem;
      color: #414550;
      position: absolute;
      top: 2.375rem;
    }

    /* 4.2.companyInfo */
    .infoData {
      position: absolute;
      height: 100%;
      width: 11.875rem;
      top: 5.75rem;
    }

    .infoData>* {
      font-size: .625rem;
      color: #b9b9b9;
    }

    .infoData>p:nth-child(1) {
      color: #565656;
      font-size: .8rem;
    }

    .infoData>p:nth-child(2) {
      color: #565656;
      position: absolute;
      top: 1.625rem;
    }

    .infoData>p:nth-child(3) {
      position: absolute;
      top: 3.9375rem;
    }

    .infoData>p:nth-child(4) {
      position: absolute;
      top: 5.5rem;
    }

    /* 4.3.zhaopin */
    .zhaopin>* {
      position: absolute;
      left: 1.625rem;
    }

    .zhaopin p {
      font-size: .625rem;
      top: 5.125rem;
    }

    .zhaopin p:nth-child(2) {
      top: 6.5rem;
    }

    .zhaopin .more {
      top: 9rem;
      width: 4.125rem;
      height: 1.25rem;
      border-radius: 5%;
      color: #fff;
      background: #b0b0b0;
      font-size: .5rem;
      line-height: 1.25rem;
      text-indent: .5rem;
    }

    .zhaopin img {
      position: absolute;
      left: 6.375rem;
      bottom: 0;
    }

    /* 4.4.marketProject */
    .marketProject {
      position: absolute;
      width: 100%;
      height: 19.25rem;
      bottom: 0;
    }

    .marketProject>* {
      width: 100%;
      position: absolute;
      left: 11.5rem;
    }

    .marketBox {
      left: 0;
      bottom: 2.25rem;
      width: 100%;
      height: 11.875rem;
    }

    .marketBox>.box {
      position: absolute;
      width: 13rem;
      height: 11.875rem;
      bottom: 0;
      font-size: .75rem;
    }

    .box {
      height: 1.5rem;
      line-height: 1.5rem;
    }

    .box1 {
      left: 11.4375rem;
    }

    .box2 {
      left: 26.875rem;
    }

    .box3 {
      left: 42.75rem;
    }

    .box4 {
      left: 58.25rem;
    }

    /* 5.section */
    section {
      width: 100%;
      height: 15.625rem;
      background: #e5e5e5;
      position: relative;
    }

    section>* {
      position: absolute;
      height: 10rem;
      top: 2rem;
    }

    section .sectionTitle {
      width: 100%;
      height: 1.5rem;
      border-bottom: 1px dashed black;

    }

    section ul {
      position: absolute;
      top: 3rem;
    }

    section ul>li {
      height: 1.5rem;
      line-height: 1.5rem;
      font-size: .625rem;
    }

    /* 5.1.productCenter */
    .productCenter {
      width: 28.25rem;
      left: 11.25rem;
    }

    .productCenter ul:nth-child(2) {
      left: 11.125rem;
    }

    .productCenter ul:nth-child(3) {
      left: 21.875rem;
    }

    /* 5.2.tech */
    .tech {
      width: 10rem;
      left: 42.875rem;
    }

    /* 5.3.sellNet */
    .sellNet {
      width: 15.875rem;
      right: 12.5rem;
    }

    /* 6.footer */
    footer {
      height: 5.25rem;
      background: #fff;
      position: relative;
      color: #a6a6a6;
      font-size: .625rem;
    }

    footer>* {
      position: absolute;
      /* height: 5.25rem;
      line-height: 5.25rem; */
      top: 50%;
    }

    footer>ul {
      width: 15.25rem;
    }

    footer li {
      position: absolute;
      width: 5rem;

    }

    footer li:nth-child(1) {
      left: 10.875rem;
    }

    footer li:nth-child(2) {
      left: 14.625rem;
    }

    footer li:nth-child(3) {
      left: 18.375rem;
    }

    footer li:nth-child(4) {
      left: 22rem;
    }

    footer li:nth-child(5) {
      left: 11.5rem;
    }

    footer p {
      position: absolute;
      right: 12.625rem;
    }
  </style>
</head>
<body>
  <!-- 1.top -->
  <div id="top">
    <img src="./img/title.jpg" alt="" srcset="">
    <span>theme</span>
    <i class="iconfont">&#xe63d;</i>
    <input type="text" placeholder="REARCH...">
  </div>
  <!-- 2.header -->
  <header>
    <ul>
      <li>集团介绍</li>
      <li>产品中心</li>
      <li>市场市场</li>
      <li>技术研发</li>
      <li>国际合作</li>
      <li>投资者关系</li>
      <li>新闻资讯</li>
      <li>人力资源</li>
    </ul>
  </header>
  <!-- 3.hanner -->
  <div id="banner">
    <img src="./img/bannerTREVISO.jpg" alt="" srcset="">
  </div>
  <!-- 4.main -->
  <main>
    <!-- 4.1.companyNews  -->
    <div class="companyNews">
      <div class="mainTitle">公司新闻</div>
      <ul>
        <li>
          <span>O</span>
          <span>陈建成董事长出席ATB集团召开年度销售大会</span>
          <span>2013-07-30</span>
        </li>
        <li>
          <span>O</span>
          <span>陈建成董事长出席ATB集团召开年度销售大会</span>
          <span>2013-07-30</span>
        </li>
        <li>
          <span>O</span>
          <span>陈建成董事长出席ATB集团召开年度销售大会</span>
          <span>2013-07-30</span>
        </li>
        <li>
          <span>O</span>
          <span>陈建成董事长出席ATB集团召开年度销售大会</span>
          <span>2013-07-30</span>
        </li>
        <li>
          <span>O</span>
          <span>陈建成董事长出席ATB集团召开年度销售大会</span>
          <span>2013-07-30</span>
        </li>
        <li>
          <span>O</span>
          <span>陈建成董事长出席ATB集团召开年度销售大会</span>
          <span>2013-07-30</span>
        </li>
      </ul>
    </div>
    <!-- 4.2.companyInfo  -->
    <div class="companyInfo">
      <div class="mainTitle">公司介绍</div>
      <div class="infoData">
        <p>公司成立于1984年</p>
        <p>经过近30年发展</p>
        <p>已成为电气制造,房地产开发和金融</p>
        <p>投资三亚并举的综合性跨国...</p>
      </div>
    </div>
    <!-- 4.3.zhaopin -->
    <div class="zhaopin">
      <div class="mainTitle">人才招聘</div>
      <p>培养遗留的人才,铸造一流的工程</p>
      <p>实现员工与企业的共同发展</p>
      <div class="more">MORE&nbsp;→</div>
      <img src="./img/horse.jpg" alt="">
    </div>
    <!-- 4.4..marketProject -->
    <div class="marketProject">
      <div class="mainTitle">市场项目</div>
      <div class="marketBox">
        <div class="box1 box"">
          <img src=" ./img/projPic1.jpg" alt="">
          <p>轨道交通:由于主要采用电气牵引,而且轮轨率摩擦阻力较小,与公共...</p>
        </div>
        <div class="box2 box">
          <img src="./img/projPic2.jpg" alt="">
          <p>轨道交通:由于主要采用电气牵引,而且轮轨率摩擦阻力较小,与公共...</p>
        </div>
        <div class="box3 box">
          <img src="./img/projPic3.jpg" alt="">
          <p>轨道交通:由于主要采用电气牵引,而且轮轨率摩擦阻力较小,与公共...</p>
        </div>
        <div class="box4 box">
          <img src="./img/projPic4.jpg" alt="">
          <p>轨道交通:由于主要采用电气牵引,而且轮轨率摩擦阻力较小,与公共...</p>
        </div>
      </div>

    </div>
  </main>
  <!-- 5.section -->
  <section>
    <!-- 5.1.productCenter -->
    <div class="productCenter">
      <div class="sectionTitle">产品中心</div>
      <ul>
        <li>&gt;&nbsp;&nbsp;汽车电机</li>
        <li>&gt;&nbsp;&nbsp;日用电机</li>
        <li>&gt;&nbsp;&nbsp;特种电机</li>
        <li>&gt;&nbsp;&nbsp;大功率电机</li>
        <li>&gt;&nbsp;&nbsp;电工设备</li>
      </ul>
      <ul>
        <li>&gt;&nbsp;&nbsp;汽车电机</li>
        <li>&gt;&nbsp;&nbsp;日用电机</li>
        <li>&gt;&nbsp;&nbsp;特种电机</li>
        <li>&gt;&nbsp;&nbsp;大功率电机</li>
        <li>&gt;&nbsp;&nbsp;电工设备</li>
      </ul>
      <ul>
        <li>&gt;&nbsp;&nbsp;汽车电机</li>
        <li>&gt;&nbsp;&nbsp;日用电机</li>
        <li>&gt;&nbsp;&nbsp;特种电机</li>
        <li>&gt;&nbsp;&nbsp;大功率电机</li>
        <li>&gt;&nbsp;&nbsp;电工设备</li>
      </ul>
    </div>
    <!-- 5.2.tech -->
    <div class="tech">
      <div class="sectionTitle">技术研发</div>
      <ul>
        <li>&gt;&nbsp;&nbsp;汽车电机</li>
        <li>&gt;&nbsp;&nbsp;日用电机</li>
        <li>&gt;&nbsp;&nbsp;特种电机</li>
        <li>&gt;&nbsp;&nbsp;大功率电机</li>
        <li>&gt;&nbsp;&nbsp;电工设备</li>
      </ul>
    </div>
    <!-- 5.3.sellNet -->
    <div class="sellNet">

      <div class="sectionTitle"> 营销网络</div>
      <ul>
        <li>&gt;&nbsp;&nbsp;汽车电机</li>
        <li>&gt;&nbsp;&nbsp;日用电机</li>
        <li>&gt;&nbsp;&nbsp;特种电机</li>
        <li>&gt;&nbsp;&nbsp;大功率电机</li>
        <li>&gt;&nbsp;&nbsp;电工设备</li>
      </ul>
    </div>
  </section>
  <!-- 6.footer -->
  <footer>
    <ul>
      <li>网站地图</li>
      <li>联系我们</li>
      <li>关注我们</li>
      <li>采购系统入口</li>
    </ul>
    <p>COPYRIGHT&nbsp;&copy;&nbsp;2013Gaara控股集团&nbsp;版权所有&nbsp;浙ICP备06005901号&nbsp;技术支持:&nbsp;菠菜互动&nbsp;&nbsp;分享到
      <span class="iconfont icon-weibo"></span>
      <span class="iconfont icon-weibo"></span>
      <span class="iconfont icon-weibo"></span>
      <span class="iconfont icon-weibo"></span>
      <span class="iconfont icon-weibo"></span>
    </p>
  </footer>
</body>
</html>
效果

part1:
在这里插入图片描述

part2:

在这里插入图片描述

知识点和总结
1.使用position定位时,right对标的是div盒子的右边(举例:button:会让其触底)
2.对于内容卡片可以取同一个类名,设置同一个样式,然后使用选择器nth-child()进行位置定位(或者flex布局)

在这里插入图片描述

前端OnTheRun
关注
专栏目录
web网页设计期末课程大作业：水果网站设计——HTML+CSS+JavaScript水果超市(带论文)
qq_38514511的博客
03-20 143
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV
移动端rem布局初步练习
wujimiao的专栏
03-17 1226
渐渐明白，要做就要做高级，现在社会已经不需要实习工，不需要初级员工。如果你培训几个月能够找到相关工作，如果刚毕业什么都不懂能够找到工作，请好好珍惜。因为很多小白给人免费实习别人都嫌碍事，本人亲历。 你不努力，就别想着高工资了，现在没有那个行业竞争不激烈，要做就要做好，否则就不要怪社会不公！ 公司需要适配移动端，只好网上找找教程，请教朋友，才渐渐有些心得体会，小白级别，做个记号。 首先是移动头
html+css定位练习
08-05
这是我自己学习html和css定位（position）时做的练习，仅供初学者学习参考，特别是对定位理解不熟悉的可以参考一下！
html定位练习
qq_42370505的博客
05-27 467
定位练习 奥运五环 图片如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOsouhLE-1590573882822)(C:\Users\18035\OneDrive - 中国加油！武汉加油！\Desktop\markdown\wuhuan.png)] 相关代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title
定位属性的布局网页html,css布局基础：定位综合练习
weixin_30562541的博客
06-04 272
主要知识点：1、5种常用position:static/relative/absolute/fixed/sticky。2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。整体效果图：效果说明：1、随着网页向下滚动，当导航到达窗口顶端(top=0)时，固定在顶端。2、分享模块在屏幕的固定位置显示。3、banner图是由3部分堆叠组成：底层图片、中层透明遮...
【Web前端HTML+CSS基础——定位(二级菜单，弹出层和轮播图的应用)】
weixin_64993156的博客
02-25 3143
四个属性值同时设置会产生矛盾，开发时尽量避免，默认情况，一般左右冲突的时候以左为主，一般上下冲突以上为主。一个元素，只要position的取值不是static,认为该元素就是一个定位元素。z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖。绝对定位和固定定位中，margin为auto的时候，会自动吸收剩余空间。包含块不一样，绝对定位的包含块怎么找的，相对定位的包含块怎么找的。设置z-index，通常情况下，该值越大，越靠近用户。包含块的不同：固定为视口(浏览器的可视窗口)
相对定位和绝对定位的练习
ztt0918的博客
04-26 898
html> html lang="en"> head> meta charset="UTF-8"> title>title> style> #container{ height: 300px; background-color: #ff7300; position: relative;
html-css-cheatsheet-starting:Codecademy项目-HTML和CSS速查表
03-08
CSS网格备忘单涵盖了CSS布局的重要概念，包括盒模型（content、padding、border和margin），浮动`float`，定位`position`（static、relative、absolute和fixed），以及CSS3的新特性——Flexbox和Grid布局。...
mediaQueries：一个练习CSS定位和媒体查询的小项目
02-22
在网页设计领域，CSS（层叠样式表）是不可或缺的一部分，它用于定义页面的布局和样式。媒体查询（Media Queries）是CSS3引入的一个强大功能，允许内容根据设备特性和视口尺寸进行适配，从而实现响应式设计。在这个名...
CSS的简单学习（6）
wqksoul的博客
11-28 410
实训
html中浮动和定位（练习+知识点）
weixin_54107527的博客
04-14 2907
目录 定位 1、什么是脱离文档流 2、position定位 2.1 static定位 2.2 relative定位 2.3 absolute定位 2.4 fixed定位 2.5 sticky定位（存在兼容性问题） 层级属性z-index 浮动 定义： 取值： 作用： 特性： 浮动练习 定位 1、什么是脱离文档流 文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流 元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流...
html中div定位练习
weixin_33962621的博客
12-16 440
html中div定位练习，实现简单的计划列表：记录div定位时主要的属性：float、position等，以及对应的relative和absolute等，同时使用到angular js中的数据绑定，$http请求等等，记录备忘： login.css中代码： /* 主页面数据列表 */ .planWrite{ background-color: #...
html布局：定位position使用技巧
热门推荐
Victor_Wei_H5的博客
11-15 2万+
布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，今天我们就说说定位在布局中的使用技巧和注意事项。
h5的相对定位、绝对定位、固定定位以及案例练习
xuemoKingDeath的博客
04-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> style> #right,#left,#center{ float: left; } #left{ width: 200px; height: 200px;
html中div的定位,html中div定位练习
weixin_42522320的博客
06-24 852
html中div定位练习，实现简单的计划列表：记录div定位时主要的属性：float、position等，以及对应的relative和absolute等，同时使用到angular js中的数据绑定，$http请求等等，记录备忘：login.css中代码：/*主页面数据列表*/.planWrite{background-color: #868383;margin: 9px;font-size: 16...
前端开发--css--定位练习题
sundanping_123的博客
07-09 1387
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>浮动</title> <style type="text/css"> .con{ width: 100px; height: 100px; ...
CSS重置样式表
雷爷的博客
09-03 2405
CSS重置样式表 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre...
2023-04-14 使用纯JS实现一个2048小游戏
最新发布
GAARA
04-14 2340
一.实现思路 1.2048的逻辑 2.移动操作的过程中会有三种情况 二.代码部分:分为初始化部分和移动部分 1.初始化部分 1.1.生成第一个方块: 1.2.生成第二个方块: 2.移动过程部分: 三.实现代码 1.HTML部分 2.CSS部分 3.JS部分 3.1.game对象的属性 3.2.game对象的start方法 3.3.game对象的randomNum方法 3.4.game对象的dataView方法 3.5.game对象的isGameOver方法 3.6.game对象中设置移动的方法(以左移动为例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值