项目第一阶段问题与总结

猫眼项目是我学HTML和CSS用来一周写出来的分别有PC端和移动端，我从以下2个方面来讲解问题。

1、PC端

1、如何让input标签中的文本框对齐 以及相关字体对齐

   <section>
                 <!-- 手机号 -->
            <div>
                <label for="mobile">手机号</label>
                <input type="text" maxlength="11" number id="mobile" required autofocus>
            </div>
            <!-- 确认密码 -->
            <div>
                <label for="verify">确认密码</label>
                <input type="passworod" required id="verify">
            </div>  
        </section>
    

CSS代码

    <style>
      input{
        width: 200px;
        height: 30px;
        /* 去轮廓 */
        outline:none;
        /* 设置轮廓颜色
        outline-color: red; */
        /* 去边框 */
        border:none;
     
      }
      div{
          margin-bottom:20px;
      }

      label{
          /* label(是行内元素) */
          display: inline-block;
          width: 200px;
          text-align: right;
      }
    </style>

效果图:

2、如何让脱离文档流的元素居中；

方法一：

方法二：父元素

方法三：弹性布局 想要水平垂直居中给一个高度

3、如何让鼠标经过a从左到右显示下划线

4、制作按钮(用input标签和label标签相连)

CSS代码:

5、当点击图片会显示剩余的文字：

<div>
    <input type="checkbox" id="intr">
    <div>
        <p>影片讲述了职业杀手亚瑟为解救爱人不得不完成一系列不可能的暗杀任务。在一桩看似意外的事件中，亚瑟·毕索（杰森·斯坦森 饰）的红颜知己梅（杨紫琼 饰）请求亚瑟解救屡遭毒打的神秘女子吉娜（杰西卡·阿尔芭 饰），哪料向来对爱情免疫的亚瑟，竟与吉娜坠入了爱河，但因此打破了他已远离是非五年风平浪静的生活。亚瑟以为自己早已和过去的杀手生涯告别，然而宿命难敌的他竟被人暗中盯上，他的身世之谜也渐渐浮出水面。原来亚瑟年幼时和小伙伴们被军火商抓去，难以忍受被训练杀人的他从军火商手中逃脱，而他的一位小伙伴克雷恩（山姆·哈兹尔丁 饰）长大后却成了军火商的接班人。像亚瑟这种高手想要全身而退谈何容易，一个组织绑架了吉娜来要挟亚瑟，让他被迫完成三次不可能的暗杀行动，深知组织残暴的亚瑟在成功暗杀了前两个目标之后，与第三个暗杀目标麦克斯
            （汤米·李·琼斯 饰）联手结成同盟，一同对付他们共同的敌人。</p>
    </div>
<label for="intr"><img src="img/xiangqingxiajiatou.jpg" alt=""></label>
</div>

CSS代码

// 具体文字介绍
div{
   position: relative;
  width: 100%;
input{
    display: none;
}
    label{
        display: inline-block;
        font-size: 0.42rem;
        color:#1e1e1e;
        img{
            display: inline-block;
         position: absolute;
            width: 0.62rem;
            height: 0.3rem;
            bottom:0;
          margin-left:4.43rem;
        }
    }
div{font-size: 0;
    height: 3rem;
    overflow: hidden;
    p{
        font-size: 0.42rem;
    }
}
    input:checked+div{
        height:auto;
     }

    //  让图片下三角旋转
    input:checked~label>img{
        transform: rotate(180deg);
    }

}

效果

点击箭头后

6、怎样出先横线滚动条：(oveflow:auto; /overflow-x: auto;)