Développement PHP pour créer une page frontale de calendrier simple

Cette section présente principalement la page d'accueil du calendrier simple

Le menu déroulant et la fonction de recherche sont utilisés dans le coin supérieur gauche, ce qui nécessite le utilisation du formulaire <form>

L'ensemble du calendrier est affiché sous la forme d'un <table>. La partie supérieure du contenu principal est la semaine, l'extrême gauche est le dimanche et l'extrême droite est le dimanche. Samedi Il est assorti de différentes couleurs. La partie inférieure du contenu principal est le mois et la date, allant de 1 à 31.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>PHP日历</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
  </head>
  <body>
    <form method="post">
        <div style="padding:20px">
        <select name="ddlYear">
             <option value= ""></option>
        </select>
        <select name="ddlMonth">
           <option value =""></option>
        </select>
        <input type="submit" value="修改"/>
        <span style="margin-left: 5%; font-size: 16px; font-weight: bold;color: #002DFF">当前时间：</span>
        <span></span>
        </div>
        <table width="80%" cellspacing="0" class="table_calendar">
            <thead class="f14">
                <tr>
                    <td width="5%">日</td>
                    <td width="5%">一</td>
                    <td width="5%">二</td>
                    <td width="5%">三</td>
                    <td width="5%">四</td>
                    <td width="5%">五</td>
                    <td width="5%">六</td>
                </tr>
            </thead>
            <tbody class="f14">
                <tr>
                    <td>
                    <p></p>
                    </td>
                 </tr>
             </tbody>
        </table>
    </form>
  </body>
</html>

Nous encapsulons les styles CSS dans un fichier style.css.

Référencé par<link rel="stylesheet" href="style.css" type="text/css"/>

<style>
    .table_calendar {padding:10px 20px}
    .table_calendar  thead{line-height:30px;color:#444;text-align:center}
    .table_calendar  thead td{border-bottom:3px solid #d1d1d1}
    .table_calendar  tbody{text-align:center;color:#444}
    .table_calendar  tbody td{border-bottom:2px solid #d1d1d1;padding:10px 2px;cursor:pointer}
    .table_calendar  tbody td.rest{background:#fef3f3}
    .table_calendar  tbody td .holiday{color:#aa160d}
    .table_calendar  tbody td .outter{color:#bbbbbb}
    .table_calendar  tbody td.cur{background:#f0675d}
    .table_calendar  tbody td.cur p{color:#fff}
    .table_calendar  tbody td:hover{background:#f0675d}
    .table_calendar  tbody td:hover p{color:#fff}
</style>

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title>PHP日历</title> <style> .table_calendar {padding:10px 20px} .table_calendar thead{line-height:30px;color:#444;text-align:center} .table_calendar thead td{border-bottom:3px solid #d1d1d1} .table_calendar tbody{text-align:center;color:#444} .table_calendar tbody td{border-bottom:2px solid #d1d1d1;padding:10px 2px;cursor:pointer} .table_calendar tbody td.rest{background:#fef3f3} .table_calendar tbody td .holiday{color:#aa160d} .table_calendar tbody td .outter{color:#bbbbbb} .table_calendar tbody td.cur{background:#f0675d} .table_calendar tbody td.cur p{color:#fff} .table_calendar tbody td:hover{background:#f0675d} .table_calendar tbody td:hover p{color:#fff} </style> </head> <body> <form method="post"> <div style="padding:20px"> <select name="ddlYear"> <option value= ""></option> </select> <select name="ddlMonth"> <option value =""></option> </select> <input type="submit" value="修改"/> <span style="margin-left: 5%; font-size: 16px; font-weight: bold;color: #002DFF">当前时间：</span> <span></span> </div> <table width="80%" cellspacing="0" class="table_calendar"> <thead class="f14"> <tr> <td width="5%">日</td> <td width="5%">一</td> <td width="5%">二</td> <td width="5%">三</td> <td width="5%">四</td> <td width="5%">五</td> <td width="5%">六</td> </tr> </thead> <tbody class="f14"> <tr> <td> <p>1</p> </td> </tr> </tbody> </table> </form> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Développement PHP pour créer une page frontale de calendrier simple

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]