今天吃神马前端网页


<html lang="zh" style="height: 100%;"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <title>eattitle>
    <link rel="stylesheet" href="https://cdn.bootcss.com/mdui/0.4.2/css/mdui.min.css">
    <link rel="stylesheet" href="https://gcunetworkcenter.gitee.io/self-cdn/cdn/dropload/v0.9.1/css/dropload.min.css">
    <style id="__WXWORK_INNER_SCROLLBAR_CSS">::-webkit-scrollbar { width: 12px !important; height: 12px !important; }::-webkit-scrollbar-track:vertical {  }::-webkit-scrollbar-thumb:vertical { background-color: rgba(136, 141, 152, 0.5) !important; border-radius: 10px !important; background-clip: content-box !important; border:2px solid transparent !important; } :-webkit-scrollbar-track:horizontal {  }::-webkit-scrollbar-thumb:horizontal { background-color: rgba(136, 141, 152, 0.5) !important; border-radius: 10px !important; background-clip: content-box !important; border:2px solid transparent !important; } ::-webkit-resizer { display: none !important; }.mdui-typo-headline h3{
    font-family: "楷体";
}
.mdui-card-content{

  -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}
@-webkit-keyframes mymove {
    55% {font-size: 20px;}
    50% {text-shadow: 5px 5px 10px red;}
}/* Standard syntax */
@keyframes mymove {
    30% {font-size: 20px;}
    50% {text-shadow: 5px 5px 10px blue;}
}

style>head>
<body class="mdui-bottom-nav-fixed" >
div>
<div class="mdui-appbar">
    <div class="mdui-toolbar mdui-color-black">
      <a  class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menui>a>
      <a  class="mdui-typo-headline"><h3>今天要吃什么h3>a>
      <div class="mdui-toolbar-spacer">div>
      <a href="#" class="mdui-btn"><button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-pink" onclick="breakfast()" >早餐button>a>
      <a href="#" class="mdui-btn"><button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green" onclick="lunch()">午餐button>a>
      <a href="#" class="mdui-btn"><button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-blue"  onclick="dinner()">晚餐button>a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">searchi>a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refreshi>a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_verti>a>
    div>
  div>
  <div class="mdui-bottom-nav">
    <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
      <i class="mdui-icon material-icons">historyi>
      <label>Recentslabel>
    a>
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-icon material-icons">favoritei>
      <label>Favoriteslabel>
    a>
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-icon material-icons">location_oni>
      <label>Nearbylabel>
    a>
  div>
  
  <div class="mdui-container mdui-m-t-5" style="height:100%;">
    <div class="mdui-card" style="height:75%;">
        <div style="height:70%;" class="mdui-card-content">
            <h1 id="fillbox">今天<span class="time" id="c">span><span class="w" id="what">吃神马span>h1>
            
        div>
        
        <body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
        <div class="mdui-card-actions">
        div>
    div>
div>
<div class="mdui-container mdui-p-t-5 mdui-theme-primary-indigo mdui-theme-accent-green">
  <button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#example-1'}">菜谱button>
  <ul class="mdui-menu" id="example-1">
    <li class="mdui-menu-item">
      <a href="javascript:;" class="mdui-ripple" onclick="cake()">吃面包a>
    li>
    <li class="mdui-menu-item">
      喝牛奶a>
    li>
    <li class="mdui-divider">li>
    <li class="mdui-menu-item">
      <a href="javascript:;" class="mdui-ripple" onclick="pot()">吃火锅a>
    li>
    <li class="mdui-divider">li>
    <li class="mdui-menu-item">
      <a href="javascript:;" class="mdui-ripple" onclick="barbecue()">吃烧烤a>
    li>
  ul>
div>

<script src="https://cdn.bootcss.com/mdui/0.4.2/js/mdui.min.js">script>
<script src="https://gcunetworkcenter.gitee.io/self-cdn/cdn/jquery/v1.11.0/js/jquery.min.js">script>
<script src="https://gcunetworkcenter.gitee.io/self-cdn/cdn/dropload/v0.9.1/js/dropload.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script type="text/javascript">
    function breakfast(){
      element=document.getElementById("c").innerHTML="早餐";
      }
      function lunch(){
      element=document.getElementById("c").innerHTML="午餐";
      }
      function dinner(){
      element=document.getElementById("c").innerHTML="晚餐";
      }
      function cake(){
        element=document.getElementById("what").innerHTML="吃面包";
      }
      function milk(){
        element=document.getElementById("what").innerHTML="喝牛奶";
      }
      function pot(){
        element=document.getElementById("what").innerHTML="吃火锅";
      }
      function barbecue(){
        element=document.getElementById("what").innerHTML="吃烧烤";
      }
      

script>
body>html>

你可能感兴趣的:(html5,css,javascript)