微信小程序視頻點播在線視頻學習系統 畢業設計 課程設計（1）首頁

wxml代碼

<view>
    <!--廣告圖片 mode="widthFix" 設定高度隨寬度自動變化-->
    <image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="chaxun">
    <input  class="chaxun_zuo" type="text" name="cx_neirong" value="{{cx_neirong}}" placeholder="請輸入關鍵字"></input>
    <button  class="chaxun_you" type="mini" form-type="submit" >查詢</button>
</view>
<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">最新資訊</view>
    <navigator class="qukuai_you" url="/pages/xinxi/list?cs_lxid=241&mc=資訊中心">所有>></navigator>
</view>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 八月份上架新試題目錄通知</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 用戶微信直接登錄功能開通</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 關於違規會員處理的通知</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator class="fenlei"  url="/pages/shu/fenlei" open-type="switchTab">視 頻 分 類</navigator>



<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">最新更新課程</view>
    <view class="qukuai_you">所有課程</view>
</view>
<view class="zuixin">
    <view  class="zuixin_kecheng">
        <navigator class="zuixin_kecheng_fengmian" url="/pages/shipin/xiangqing">
            <image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="http://www.hzyaoyi.cn/ke/01-HTML%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A.png"></image>
        </navigator>
        <view class="zuixin_kecheng_biaoti">HTML入門到精通</view>
        <view class="zuixin_kecheng_xinxi">
            <view class="zuixin_kecheng_xinxi_zuo">3651 人報名</view>
            <view class="zuixin_kecheng_xinxi_you">免費</view>
        </view>
    </view>
    <view  class="zuixin_kecheng">
        <navigator class="zuixin_kecheng_fengmian" url="/pages/shipin/xiangqing">
            <image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="http://www.hzyaoyi.cn/ke/02-CSS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A%E5%AE%9E%E6%88%98.png"></image>
        </navigator>
        <view class="zuixin_kecheng_biaoti">HTML入門到精通</view>
        <view class="zuixin_kecheng_xinxi">
            <view class="zuixin_kecheng_xinxi_zuo">3651 人報名</view>
            <view class="zuixin_kecheng_xinxi_you">免費</view>
        </view>
    </view>
    <view  class="zuixin_kecheng">
        <navigator class="zuixin_kecheng_fengmian" url="/pages/shipin/xiangqing">
            <image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="http://www.hzyaoyi.cn/ke/12-JavaScript%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A.png"></image>
        </navigator>
        <view class="zuixin_kecheng_biaoti">HTML入門到精通</view>
        <view class="zuixin_kecheng_xinxi">
            <view class="zuixin_kecheng_xinxi_zuo">3651 人報名</view>
            <view class="zuixin_kecheng_xinxi_you">免費</view>
        </view>
    </view>        
    <view  class="zuixin_kecheng">
        <navigator class="zuixin_kecheng_fengmian" url="/pages/shipin/xiangqing">
            <image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="http://www.hzyaoyi.cn/ke/05-Flex%20Box%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E4%B8%93%E9%A2%98(%E7%BD%91%E9%A1%B5%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BE%AE%E4%BF%A1%E7%AD%89).png"></image>
        </navigator>
        <view class="zuixin_kecheng_biaoti">HTML入門到精通</view>
        <view class="zuixin_kecheng_xinxi">
            <view class="zuixin_kecheng_xinxi_zuo">3651 人報名</view>
            <view class="zuixin_kecheng_xinxi_you">免費</view>
        </view>
    </view>        
</view>

wxss代碼

/* 廣告圖片*/
.ad01{ 
    width: 100%; /* 寬度100%*/
}

.qukuai{display: flex;align-items:center;background-color: #f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;}
.qukuai_you{font-size: 14px; color: gray;padding-right: 10px;}

.xinxi {
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
    color: gray;
  }

  .xinxi-icon {
    width: 19px;
    height: 19px;
  }
  
  .xinxi-text {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .xinxi-arrow {
    width: 13px;
    height: 13px;
  }

.chaxun{
    background-color:#f2f2f2;
    display: flex;
    margin: 10px;
    align-items: center;
}
.chaxun_zuo{
    padding-left: 15px;
    flex-grow: 1;
}
.chaxun_you{
    border-radius: 0px;
    background-color: orange;
    color: white;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.fenlei{ background-color: orangered;text-align: center;padding: 7px; color: white; margin: 5px; border-radius: 5px;}




.zuixin{ padding: 2px;display: flex; flex-wrap: wrap;}
.zuixin_kecheng{
    width: 48%;
    margin: 3px;
    padding: 3px;
    box-sizing: border-box;
    border:1px solid #f2f2f2;
    box-shadow: 1px 1px 2px gainsboro;
    color: gray;
}
.zuixin_kecheng_fengmian{
    width: 100%;
}
.zuixin_kecheng_fengmian_img{
    width: 100%;
}
.zuixin_kecheng_biaoti{
    font-size: 14px; 
}
.zuixin_kecheng_xinxi{
    display: flex;
    align-items: center;
}
.zuixin_kecheng_xinxi_zuo{
    font-size: 12px;
    flex-grow: 1;
}
.zuixin_kecheng_xinxi_you{
    color: red;
    font-size: 14px;
}