外卖界面(上)

4 篇文章 0 订阅

静态点餐界面
要想学好前端,写界面是必不可少的,没事就得多练,多敲,好记性不如烂笔头,记十遍都不如上手敲一遍,今天用花了点时间写了一个app点外卖,没啥技术可言就是练练,等后面来实现功能。

在这里插入图片描述
html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>美食香坊</title>
    <link rel="stylesheet" type="text/css" href="css/wmai.css"/>
    <link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
</head>
<body>
    <div class="head">
        <div class="bgimg">
             <div class="title">
                <div class="pic1"><img src="img/w1.jpg"></div>
                <div class="info">
                    <h4><span class="pp">品牌</span>外卖香坊</h4>
                    <p>蜂鸟专送/38分钟送达</p>
                    <span class="jian">减</span><span>在线支付满28减5,满50减10</span>
                </div>
             </div>
             <div class="five"><sapn>5个></sapn></div>
            <div class="notice">
                <span class="gg">公告</span>
                <span class="notice-info">其原料秘方其烹饪原料秘料秘料秘方其烹饪原料秘方...></span>
             </div>
        </div>
        <ul class="list">
            <li>商品</li>
            <li>评价</li>
            <li>商家</li>
        </ul>
    </div>
    <main>
        <ul class="good-list">
            <li>热销榜</li>
            <li>
                <span class="te">特</span>单人套餐
            </li>
            <li>特色粥品</li>
            <li>精选热菜</li>
            <li>爽口凉菜</li>
            <li>半成品</li>
            <li>饭类</li>
            <li>面类</li>
        </ul>
        <ul class="pro-list">
            <li>
                <p>热销榜</p>
                <div class="pro-info">
                    <div class="pic2"></div>               
                    <div class="details">
                        <p>皮蛋瘦肉粥配包子套餐</p>
                        <span>咸粥</span><br>
                        <span>月售1132份 好评率100%</span><br>
                        <span class="price"><i class="iconfont icon-icon-price-sure"></i>24</span><del class="yuan"><i class="iconfont icon-icon-price-sure"></i>28</del>
                    </div>
                    <div class="jiaru"><i class="iconfont icon-add"></i></div>
                </div>
            </li>
            <li>                   
                    <div class="pro-info">
                        <div class="pic3"></div>               
                        <div class="details">
                            <p>皮蛋瘦肉粥配包子套餐</p>
                            <span>咸粥</span><br>
                            <span>月售1132份 好评率100%</span><br>
                            <span class="price"><i class="iconfont icon-icon-price-sure"></i>22</span>
                        </div>
                        <div class="jiaru"><i class="iconfont icon-add"></i></div>
                    </div>
            </li>
            <li>
                 <div class="pro-info">
                    <div class="pic4"></div>               
                        <div class="details">
                             <p>皮蛋瘦肉粥配包子套餐</p>
                             <span>咸粥</span><br>
                            <span>月售1132份 好评率100%</span><br>
                            <span class="price"><i class="iconfont icon-icon-price-sure"></i>20</span>
                        </div>
                    <div class="jiaru"><i class="iconfont icon-add"></i></div>
                </div>
            </li>
            <li>
                    <div class="pro-info">
                       <div class="pic5"></div>               
                           <div class="details">
                                <p>皮蛋瘦肉粥配包子套餐</p>
                                <span>咸粥</span><br>
                               <span>月售1132份 好评率100%</span><br>
                               <span class="price"><i class="iconfont icon-icon-price-sure"></i>18</span>
                           </div>
                       <div class="jiaru"><i class="iconfont icon-add"></i></div>
                   </div>
               </li>
               <li>
                    <div class="pro-info">
                       <div class="pic2"></div>               
                           <div class="details">
                                <p>皮蛋瘦肉粥配包子套餐</p>
                                <span>咸粥</span><br>
                               <span>月售1132份 好评率100%</span><br>
                               <span class="price"><i class="iconfont icon-icon-price-sure"></i>24</span>
                           </div>
                       <div class="jiaru"><i class="iconfont icon-add"></i></div>
                   </div>
               </li>        
        </ul>
    </main>
    <footer>
        <div class="zj">
            <div class="shopping"><i class="iconfont icon-qicheqianlian-1-copy"></i></div>
            <span><i class="iconfont icon-icon-price-sure"></i>0</span>
        </div>
        <div class="ps">
            <p>另需配送费<i class="iconfont icon-icon-price-sure"></i>4元</p>
        </div>
        <div class="qs">
            <p><i class="iconfont icon-icon-price-sure"></i>20起送</p>
        </div>
    </footer>
</body>
</html>

css代码:

@media screen and (max-width:375px){
    *{       
        box-sizing: border-box
    }
    body,ul,li,h4,p{
        margin: 0;
        padding: 0;
    }
    body{
        background: #F4F5F7;
    }
    li{
        list-style: none;
    }
    .head{
        width: 100%;
        height: 190px;
    }
    .bgimg{
        position: relative;
        width:100%;
        height: 150px;
        background:url(../img/w1.jpg) no-repeat -50px center;           
    }
    .bgimg:after{
        content:"";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 5;
    }
    .title{
        width: 75%;
        height: 60%;
        position: absolute;
        z-index: 6;
        top: 25px;
        left: 20px;        
    }
    .title .pic1{
        width: 90px;
        height: 70px;
        float: left;
        border-radius: 5px;
    }
    .title .pic1 img{
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }
    .title .info{
        float: left;
        margin-left: 10px;
    }
    .title h4{
        line-height: 1.75;
    }
    .title .info h4,.title .info p,.title .info span{
        color: #fff;
    }
    .title .info span{
        font-size: 12px
    }
    .title .info .pp{        
        background: rgb(241, 12, 12);
        margin-right: 5px;
        padding: 2px;
    }    
    .title .info p{
        font-size: 14px;
    }
    .title .info .jian{
        background: #fff;
        margin-right: 5px;
        color: red;
    } 
    .five{
        position: absolute;
        right: 10px;
        top: 70px;
        width: 48px;
        height: 26px;
        border-radius: 20px;
        background: rgba(0, 0, 0, .5);
        z-index: 6;
        padding:2px 8px;
    }
    .five sapn{
        color: #fff;
       font-size: 12px      
    }
    .notice{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;       
        background: rgba(0, 0, 0, .5); 
        color: #fff;
        z-index: 6;
        padding: 3px 10px;
    }
    .notice .gg{
        background: #fff;
        color: #000;
        font-size: 12px;
        border-radius: 2px;
        font-weight: bold;
        padding: 2px
    }
    .notice .notice-info{
        font-size: 12px;
        margin-left: 5px;
        overflow: hidden;      
    }
    .list{
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
    }
    .list li{
        float: left;
        width: 33%;
        height: 100%;
        text-align: center;
         
    }
    .list li:nth-child(1){
        color: red;
    }
    main{     
        width: 100%;
        height: 660px;
       overflow: hidden;
    }
    main .good-list{
        margin-top: 30px;
        width: 27%;
        height: 100%;
        padding: 10px;
        float: left;
        background: #fff;
        border-right:1px solid #ccc;
    }
    main .good-list li{
        width: 100%;
        height: 70px;
        color: rgb(65, 64, 64);
        font-weight: bold;
        line-height: 70px;
        text-align: center;
        border-bottom:1px solid #ccc; 
        
    }
    main .good-list .te{
        background: rgb(1, 116, 16);
        color: #fff;
        font-size: 12px;
        padding: 2px;
        border-radius: 2px;
    }
    main .pro-list{
        width: 73%;
        height: 100%;      
        float: left;
        background: #fff;     
    }
    main .pro-list li{
        border-bottom: 1px solid #eee;
    }
    main .pro-list p{
        color: rgb(37, 37, 37);
        
        padding: 5px 10px;
    }
    .pro-info{
        background: #fff;
        width: 100%;
        height: 110px;
        padding: 15px;
    }
    .pro-info .pic2{      
        background: url(../img/w2.jpg) no-repeat;     
     }  
     .pro-info .pic3{ 
        background: url(../img/w3.jpg) no-repeat;      
     }
     .pro-info .pic4{ 
         background: url(../img/w4.jpg) no-repeat;   

      }
      .pro-info .pic5{ 
         background: url(../img/w5.jpg) no-repeat;      
      }
     
    .pro-info .pic2,.pro-info .pic3,.pro-info .pic4,.pro-info .pic5{
        width: 60px;
        height: 60px;
        float: left;
        margin-top: 5px;
        background-size: cover;  
        background-position: -12px center;
    }
    
    .pro-info .details{
        float: left;
       margin-left: 10px;
    }
    .pro-info .details p{
        height: 18px;
        color: #000;
        font-weight: bold;
        padding: 0;
        font-size: 14px;
    }
    .pro-info .details span{      
        font-size: 12px;
        color: #aaa;
    }
    .pro-info .details .price{
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
    .pro-info .details .yuan{
        font-size: 12px;
        font-weight: bold;
        color: #aaa;
        margin-left: 5px;
       
    }
    .pro-info .jiaru{
        float: right;
        margin-top: 60px;
    }
    
    .pro-info .jiaru .icon-add{
        font-size: 20px;
        color: red;  
    }
    footer{
        
        width: 100%;
        height: 60px;
        background: #131D26;
        bottom: 0;
        position: fixed;
    }
    footer:after{
        content: "";
        clear: both;
        display: block;
        width: 60px;
        height: 60px;
        background: #121C25;
        border-radius: 50%;
        top: -15px;
        left: 18px;
        position: absolute;
        z-index: 5;
    }
    footer .zj{
        width: 33%;
        padding: 0px 10px;
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        border-right: 1px solid #81858A;
        text-align: right;
        float: left;
        color: #81858A;
    }
    footer .zj .shopping{
        width: 50px;
        height: 50px;
        background: #2B343D;
        border-radius: 50%;
        position: absolute;
        top: -8px;
        left: 23px;
        z-index: 6;
    }
    footer .zj .shopping .icon-qicheqianlian-1-copy{
        position: absolute;
        left: 8px;
        top: 10px;
        font-size: 34px;
        color: #eee;
    }
    footer .zj span{
        font-size: 18px; 
        font-weight: bold;
    }
    footer .zj span .icon-icon-price-sure{
        font-size: 22px;
    }
    footer .ps{
        font-size: 14px; 
        width: 40%;
        padding: 0px 10px;
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        text-align: left;
        float: left;
        color: #81858A;
    }
    footer .qs{
        float: left;
        width: 27%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #81858A;
        background: #2B343B;
    }
    footer .qs .icon-icon-price-sure{
        font-size: 20px;
    }
}


做的小屏375分辨率的,主要写的就是html和css,图片那些网上可以找,然后就先到此位置吧,脖子都僵硬了~~

  • 7
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个简单的 Android Studio 外卖界面页面代码示例: activity_main.xml: ``` <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/restaurant_image" android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop" android:src="@drawable/restaurant_image"/> <TextView android:id="@+id/restaurant_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/restaurant_image" android:layout_marginTop="16dp" android:layout_marginStart="16dp" android:text="Restaurant Name" android:textColor="@color/black" android:textSize="20sp"/> <TextView android:id="@+id/restaurant_address" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/restaurant_name" android:layout_marginTop="8dp" android:layout_marginStart="16dp" android:text="Restaurant Address" android:textColor="@color/grey" android:textSize="16sp"/> <TextView android:id="@+id/restaurant_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/restaurant_address" android:layout_marginTop="8dp" android:layout_marginStart="16dp" android:text="4.5" android:textColor="@color/black" android:textSize="18sp"/> <RatingBar android:id="@+id/restaurant_rating_bar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/restaurant_address" android:layout_marginTop="8dp" android:layout_marginStart="8dp" android:layout_toEndOf="@+id/restaurant_rating" android:numStars="5" android:rating="4.5" android:stepSize="0.5"/> <TextView android:id="@+id/restaurant_delivery_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/restaurant_rating" android:layout_marginTop="8dp" android:layout_marginStart="16dp" android:text="Delivery Time: 30 mins" android:textColor="@color/grey" android:textSize="16sp"/> <TextView android:id="@+id/restaurant_menu_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/restaurant_delivery_time" android:layout_marginTop="16dp" android:layout_marginStart="16dp" android:text="Menu" android:textColor="@color/black" android:textSize="20sp"/> <ListView android:id="@+id/restaurant_menu_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/restaurant_menu_title" android:divider="@null" android:dividerHeight="0dp"/> </RelativeLayout> ``` MainActivity.java: ``` public class MainActivity extends AppCompatActivity { private ImageView restaurantImage; private TextView restaurantName; private TextView restaurantAddress; private TextView restaurantRating; private RatingBar restaurantRatingBar; private TextView restaurantDeliveryTime; private TextView restaurantMenuTitle; private ListView restaurantMenuList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); restaurantImage = findViewById(R.id.restaurant_image); restaurantName = findViewById(R.id.restaurant_name); restaurantAddress = findViewById(R.id.restaurant_address); restaurantRating = findViewById(R.id.restaurant_rating); restaurantRatingBar = findViewById(R.id.restaurant_rating_bar); restaurantDeliveryTime = findViewById(R.id.restaurant_delivery_time); restaurantMenuTitle = findViewById(R.id.restaurant_menu_title); restaurantMenuList = findViewById(R.id.restaurant_menu_list); // Set up the ListView with a simple adapter String[] menuItems = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"}; ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, menuItems); restaurantMenuList.setAdapter(adapter); } } ``` 注意:这只是一个简单的示例,实际的外卖应用程序可能需要更多的功能和布局。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值