移动端web练习题

牧之瑞001

已于 2022-03-04 15:19:33 修改

阅读量397

点赞数

文章标签：前端 css css3

于 2022-02-26 10:22:35 首次发布

本文链接：https://blog.csdn.net/csdnlirui/article/details/123145980

版权

1.空间转换导航栏-pc

遇到的问题：

li设置高100%导致a定位li把所有a定到一起。

空间观察角度推荐：x-20deg，y30deg。

图片空间旋转以后，这个图片坐标轴也会随之旋转。

<!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>国企就业安置</title>
<style>

    .nav{
        width: 600px;
        height: 50px;
        margin: 300px auto;
        
    }
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul li{
        position: relative;
        float: left;
      
        width: 200px;
        height: 50px;
        line-height: 50px;
        /* background-color: #f00; */
        transition: all .6s;
        transform-style: preserve-3d;
        /* transform: rotateX(-20deg) rotateY(30deg); */
    }
    a{  
        position: absolute;
        left: 0;
        top: 0;
       
        text-align: center;
        text-decoration: none;
        width: 100%;
        height: 100%;
     
    }
    a:first-child{
        background-color: #f00;
        /* transform: translateZ(25px); */
        transform: translateZ(25px);
    }
    a:last-child{
       
        background-color: #0f0;
        transform: rotateX(90deg)   translateZ(25px) ;
    }
    li:hover{
        transform: rotateX(-90deg);
    }
</style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">国家电网</a>
                <a href="#">State Grid</a>
            </li>
            <li>
                <a href="#">中国烟草</a>
                <a href="#">Chinese tobacco</a>
            </li>
            <li>
                <a href="#">中国铁路</a>
                <a href="#">China Railway</a>
            </li>
        </ul>
    </div>
</body>
</html>

成品（加旋转便于观察）：

2.小兔仙确认订单-sj

遇到的问题，文字不能较好使用行高定位，而是用边距定位，导致位置不够精确。有大佬的话求一下解决办法。

2.1html

<!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>填写订单</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/orders.css">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
</head>
<body>
   <div class="xinxi wrapper">
       <div class="location">
           <i class="iconfont icon-location"></i>
       </div>
       <div class="infor">
           <div class="user">
               <div class="name">李瑞</div>
               <div class="tel">15034452161</div>
           </div>
           <div class="address">北京市  海淀区  中关村软件园   信息科技大厦1号楼410#   </div>
       </div>
       <a href="#" class="iconfont icon-more"></a>
   </div> 

   <div class="goods wrapper">
       <div class="pic">
           <img src="./uploads/pic.png" alt="">
       </div>
       <div class="infor">
           <h5>康尔贝 非接触式红外体温仪<br> 
            领券立减30元 婴儿级材质 测温…</h5>
            <p>粉色<span>红外体温计</span></p>
            <i><span>¥</span>266<b><span>¥</span>299</b></i>

       </div>
       <div class="count">
           <i class="iconfont icon-x"><span>1</span></i>
       </div>
   </div>

   <div class="other wrapper">
       <div class="express">
           <h5>配送方式</h5>
           <p>顺丰快递</p>
       </div>
       <div class="more">
           <h5>买家备注</h5>
           <p>希望可以尽快发货，谢谢~</p>
       </div>
       <div class="pay">
           <h5>支付方式</h5>
           <p>支付宝<i class="iconfont icon-more"></i></p>
       </div>
   </div>

   <div class="quantity wrapper">
       <div class="sum">
            <h5>商品总价</h5>
            <p>￥<i>299.00</i></p>
       </div>
       <div class="freight">
            <h5>运费</h5>
            <p>￥<i>0.00</i></p>
       </div>
       <div class="discount">
            <h5>折扣</h5>
            <p>-￥<i>30.00</i></p>
       </div>

   </div>
   
   <div class="pay-order flex">
       <div class="sum flex">
           <div class="heji">合计：</div>
           <div class="amount">
               <p>￥<i>266.<span>00</span></i></p>
           </div>
       </div>
       <div class="pay flex">
           <a href="#">去支付</a>
       </div>
   </div>
</body>
</html>

2.2base.css

* {
  margin: 0;
  padding: 0;
  box-si

最低0.47元/天解锁文章

牧之瑞001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端web练习题

1.空间转换导航栏遇到的问题：li设置高100%导致a定位li把所有a定到一起。空间观察角度推荐：x-20deg，y30deg。图片空间旋转以后，这个图片坐标轴也会随之旋转。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫