练习 | CSS定位练习实现特定页面布局

最新推荐文章于 2024-07-24 11:19:07 发布

虎鲸一号

最新推荐文章于 2024-07-24 11:19:07 发布

阅读量1.1k

点赞数

分类专栏： CSS 学习记录 Web

本文链接：https://blog.csdn.net/qq_44537414/article/details/104187819

版权

本文是一篇关于CSS定位的练习记录，重点讨论了如何使行内元素始终位于父元素底部、掌握box-shadow属性用法以及解决相对定位后元素占位问题。通过示例代码和参考链接，作者提供了实用的解决方案。

摘要由CSDN通过智能技术生成

文章目录

目标效果 在这里插入图片描述
完成效果

问题记录

1.如何实现行内元素始终位于父元素的底部

在这里插入图片描述
主流办法：相对定位+绝对定位
参考文章：css控制div位于父容器底部
补充链接：How can I send an inner <div> to the bottom of its parent <div>?

之后计算长度，手动设置的伪居中（如图，不同的句子长度不一）
同时，由于为较好适应屏幕大小变化而将该区域设为弹性布局，父容器的尺寸不定，使得容易发生错位 orz
在这里插入图片描述
先设个最小宽度，苟一苟，有遇到解决办法再补充 orz

2. 对`box-shadow`使用不熟练（单边，全框…）

补充链接：CSS3box-shadow属性详解

例子
单边（底部）：box-shadow: 0px 5px 5px 0px #eee;
全框：box-shadow: 0 0 5px 5px #eee;

3.相对定位后，会保留原位置。如何不占原位置？

参考问答：css中如何设置div 相对位置后，又不占位置的？
相关文章：关于CSS中position的定位技术

解决办法其实同问题1
父容器 position:relative;
子元素 position:absolute; + 具体位置

代码

写 HTML 时，存在的问题有
1.习惯性上来直接 div + tab
2. 定义类名时，名字越到后面越取不出来，取不准确
在这里插入图片描述
此块区域的内容，在实际网页中，个人感觉直接是图片的概率更大
下方代码没有直接当做图片来写（重在练习重在练习）

以下正文，很长，很不优雅… orz
慎看慎看

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EX05</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="g-index">
  	<div class="g-hd">
      <div class="u-logo"></div>
      <nav class="m-nav">
        <a href="#" class="u-navop">Products</a>
        <a href="#" class="u-navop">Customers</a>
        <a href="#" class="u-navop">Community</a>
        <a href="#" class="u-navop">Pricing</a>
      </nav>
      <button class="u-btn">Sign Up</button>
    </div>
    <div class="g-bd">
      <div class="m-feature">
        <div class="u-card">
          <div class="u-pic"></div>
          <div class="u-title">
            Build better apps faster
          </div>
          <div class="u-introdc">
            From effortless administration tools to robust compute, storage, and networking services.
          </div>
          <a href="#" class="u-more">
            Learn more about our products
          </a>
        </div>
        <div class="u-card">
          <div class="u-pic"></div>
          <div class="u-title">
            Predictable pricing
          </div>
          <div class="u-introdc">
            Leave complex pricing structures behind.
          </div>
          <a href="#" class="u-more">
            Learn more about our pricing
          </a>
        </div>
        <div class="u-card">
          <div class="u-pic"></div>
          <div class="u-title">
            Secure and reliable
          </div>
          <div class="u-in