css练习，求助

nana_aoe_2013 2020-11-17 01:37:46
目标效果图：目前差距还有点远


<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style type="text/css">

  *{

    background-color: red;

    background-attachment: fixed;

            background-size: 100% 100%;

            background-repeat: no-repeat;

    margin: 0;

    padding: 0;

  }

  .top{

    position:relative;

    height: 180px;

    display: flex;

  }

  .top .img{

    height: 80px;

    width: 80px;

  }



  .content{

    margin: 50px;

  }

  .content .f-row{

    display: flex;

    margin-top: 10px;

            flex-wrap:nowrap;

            flex-direction: row;

            text-align: center;

            justify-content: space-between;

  }



  .rect{

    text-align: center ;

    border-width: 1px;

            border-style: solid;

            border-color: rgb(255, 255, 255);

            width: 30%;

            height: 0;

            padding-bottom: 30%;

  }



  .w-rect{

    border-width: 1px;

            border-style: solid;

            border-color: rgb(255, 255, 255);

            width: 65%;

            height: 0;

            padding-bottom: 30%;

  }





  .content .s-row{

        display: flex;

        flex-direction: row;

        flex-wrap:nowrap;

        text-align: center;

        justify-content: space-between;



  }

  </style>

</head>

<body>

   <div class="top">

       <img src="https://profile.csdnimg.cn/3/2/4/1_nana_aoe">

       <span>注册/登录</span>

   </div>

   <div class="content">

       <div class="f-row">

           <div class="rect">还款</div>

           <div class="rect">办卡</div>

           <div class="rect">分期</div>

       </div>

       <div class="s-row">

           <div class="w-rect">额度</div>

           <div class="rect">搜索</div>

       </div>

   </div>

</body>

</html>


待解决问题： 1、文字竖直居中
2、如何从指定位置开始布局
...全文
3060 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
无畏，落花之殇 2020-12-18
  • 打赏
  • 举报
 回复
还可以用内边距将其撑开
无畏，落花之殇 2020-12-18
  • 打赏
  • 举报
 回复
文字垂直居中：可以设置行高line-height：xx px；建议与元素的高度保持一致，根据之际情况调整大小
ASP微信支付 APIV3 2020-11-18
  • 打赏
  • 举报
 回复 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_604099_a2je1wkyy5xhto6r.css" />
  <style type="text/css">
 *{
    margin: 0;
    padding: 0;
  }
  html,body{
    height: 100%;
  }
  body{
    background: url(../cropper_/images/bg2.fc8f54d0.jpg) center no-repeat;
    background-size: cover;
  }
  .top{
    position:relative;
    height: 180px;
    display: flex;
  }
  .top .img{
    height: 80px;
    width: 80px;
  }
 
  .content{
    position: fixed;
    margin: 20px;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .content .f-row{
    display: flex;
    flex-wrap:nowrap;
    flex-direction: row;
    text-align: center;
    justify-content: space-between;
  }
 
  .rect{
    text-align: center ;
    width: 33.333%;
    height: 0;
    padding-bottom: 33.33%;
    position: relative;
         
  }
 
  .w-rect{
    flex: 1;
  }
 
  .content .s-row{
        display: flex;
        flex-direction: row;
        flex-wrap:nowrap;
        text-align: center;
        justify-content: space-between;
 
  }
  .rect div{
    position: absolute;
    left: 5px;top: 5px;right: 5px;bottom: 5px;
    border: 1px solid #fff;
    background: rgba(255,255,255,.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .rect div i{
    font-family: 'iconfont';
    font-size: 40px;
    color: #fff;
  }

  .rect div span{
    font-weight: 700;
    color: #fff;
  }
  </style>
</head>
<body>
   <div class="top">
       <img src="https://profile.csdnimg.cn/3/2/4/1_nana_aoe">
       <span>注册/登录</span>
   </div>
   <div class="content">
       <div class="f-row">
           <div class="rect">
            <div><i class="iconfont icon-camera"></i><span>还款</span></div>
          </div>
           <div class="rect"><div><i class="iconfont icon-cart"></i><span>办卡</span></div></div>
           <div class="rect"><div><i class="iconfont icon-print"></i><span>分期</span></div></div>
       </div>
       <div class="s-row">
           <div class="rect w-rect"><div><i class="iconfont icon-phone"></i><span>额度</span></div></div>
           <div class="rect"><div><i class="iconfont icon-ai-qq"></i><span>搜索</span></div></div>
       </div>
   </div>

</body>
</html>
Re_sign 2020-11-17
  • 打赏
  • 举报
 回复
问题1：文字如何竖直居中 答：通常的做法是设置line-height设置与高度实现， 

div {
  height: 50px;
  line-height: 50px;
}
也可以给盒子设置为flex，然后通过align-items设置为center实现居中 

div {
  display: flex;
  align-items: center;
}
不过看了下你的代码，虽然不知道你为什么使用padding-bottom，高度还设置为0，但是要实现文字居中的话可以用定位,盒子里的文字用text标签套起来然后使用定位实现 

.rect {
      position: relative;
      text-align: center;
      border-width: 1px;
      border-style: solid;
      border-color: rgb(255, 255, 255);
      width: 30%;
      height: 0;
      padding-bottom: 30%;
    }
.rect text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
问题2：如何从指定位置开始布局 这个问题可以使用margin-top或者padding-top，也可以像你说的那样在上面多加个div然后设定高度(不过不是很建议)，也可以使用定位，在最外层套个div，然后设置定位，按照你上面提的需求的话定位没有硬性要求要使用什么，relative或者absolute都行 

div {
    position: relative;
    top: 50%; 
}
泡泡鱼_ 2020-11-17
  • 打赏
  • 举报
 回复
问题1：最外围层（top和content外面应该被包裹在一个层内）：style="position:absolute;bottom:20px;"就从下面开始了 问题2： 你的rect加上：flex-direction:column;text-align:center;align-items:center;justify-content: center; 然后它内部应该和两个子元素，分别对应图标和文本 我说的是基于
nana_aoe_2013 2020-11-17
  • 打赏
  • 举报
 回复
引用 7 楼 泡泡鱼_ 的回复:
完全不明白你是哪里不满意…… 注册登录那块没在下面？
泡泡鱼_ 2020-11-17
  • 打赏
  • 举报
 回复
完全不明白你是哪里不满意…… 注册登录那块没在下面？
nana_aoe_2013 2020-11-17
  • 打赏
  • 举报
 回复
目前的问题有点尴尬，再详细说明一下我的问题 1、使用指定宽和高的正方形内部，可以使文字上下居中 2、使用
  .rect{
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    width: 30%;
    height: 0;
    padding-bottom: 30%;
  }
构造动态正方形，文字上下居中就失去效果。 请各路英豪，帮我解决一下，即按比例设置正方形大小，又能在正方形内部居中显示文字
nana_aoe_2013 2020-11-17
  • 打赏
  • 举报
 回复
引用 1 楼 gqkmiss 的回复:
1、文字竖排可以使用 css 的 writing-mode 属性 https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode 2、从指定位置布局 什么意思？
！~~~~ 你给的这个属性应该是文字排向，我现在需要的是文字竖直居中，例如我的示例图
nana_aoe_2013 2020-11-17
  • 打赏
  • 举报
 回复
引用 1 楼 gqkmiss 的回复:
1、文字竖排可以使用 css 的 writing-mode 属性 https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode 2、从指定位置布局 什么意思？
请在我的代码上修改一下，感觉没有起作用。 如图，注册和登录功能是在中间偏靠下的位置开始布局的。这个怎么处理
RespectF91 2020-11-17
  • 打赏
  • 举报
 回复
给div定位
gqkmiss 2020-11-17
  • 打赏
  • 举报
 回复
1、文字竖排可以使用 css 的 writing-mode 属性 https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode 2、从指定位置布局 什么意思？
2021 年该学的 CSS 框架 Tailwind CSS 实战视频
学完本课程，您将掌握：掌握 Tailwind CSS 的基础知识实战学习使用 Tailwind CSS 创造一个网站掌握 Tailwind CSS 的基础知识与技能使用 Tailwind CSS 创建自己的网站模板配置 Tailwind CSS使用 Tailwind CSS 设计响应式页面适合人群：只要懂点 HTML / CSS 即可   学习计划：1. 本套课程以实战为主，只要跟着实战视频一节节实战即可 2. 多加练习，总结，记笔记即可课程目标：带你了解 2021 年最该学习的 CSS 框架，并使用它制造一个漂亮的页面课程简介：Tailwind 是一个用于快速UI 开发的实用工具集 CSS 框架，设计理念是以实用为先，它提供了高度可组合的应用程序类，可帮助开发者轻松构建复杂的用户界面，这套视频教程从入门讲起，帮你掌握 Tailwind CSS 知识和技能实战一个完整的网页。 本套课程所有视频经过剪辑，精心制作，不浪费时间，以实战为主，视频清晰，精致。
CSS的综合练习2
我们用学到的CSS知识来实现下面的壹心理网页。
纯css实现鼠标过去显示字_我如何构建纯CSS填字游戏
纯css实现鼠标过去显示字Recently I created a pure CSS crossword puzzle implemented using CSS grid that does not need JavaScript in order to work. It gained heavy interest pretty quickly on CodePen. As ...
CSS知识点
CSS CSS (Cascading Style Sheets) 层叠样式表 或 级联样式表，用于渲染HTML元素标签的样式，是一组格式设置规则，用于控制Web页面的外观 通过使用CSS，可将页面的内容与表现形式分离：页面内容存放在HTML文档中...
mysql+HTML+css01
连接mysql服务器数据库及表操作创建、删除、查看数据库创建、删除、查看表新增、更新、删除表记录查询表记录基础查询WHERE子句查询模糊查询...查询练习多表查询练习数据库备份与恢复备份数据库恢复数据库Navicat软件
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章