MY PIE

最新推荐文章于 2021-05-30 00:22:19 发布

原创最新推荐文章于 2021-05-30 00:22:19 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

11 篇文章

订阅专栏

在前往深圳的火车上，作者利用空闲时间完成了MyPie项目的首个模块编码，即菜单部分。通过对网页结构进行分析并做好规划，整个界面被合理地划分为五个板块。此文中详细记录了开发过程，包括头部信息、列表元素的使用及局部样式设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

My Pie

在来深圳的火车上无聊完成了菜单，也就是第一个板块的代码。正好打发了无聊的时光

分析网页结构，做好规划

对于整个版面有一个较为清晰的认识，根据要求划分为五个板块，结构化界面

添加元素

将各板块的元素添加进去

具体实现

头部

<!--copyright@Anwhere-->
<head>
    <title>My Pie</title>
    <meta charset="utf-8" http-equiv="Content-Type" content="text/html">
    <meta name="author" content="Anwhere">
    <meta name="revised" content="2016/7/6">
    <meta name="generator" content="Subime Text3">
    <meta name="description" content="For the first block.">

    <link rel="stylesheet" type="text/css" href="css/recipe.css" media="screen">
    <link rel="shortcut icon" type="image/gif" href="images/pie_icon.gif">

</head>

有序和无序列表

具体实现里面包有序和无序列表的包含关系

<ol>
    <li>one line</li>
    <li>two line</li>
    <li>three line</li>
    <ul>
        <li>first line</li>
        <li>second line</li>
    </ul>
</ol>

局部文字的样式

<li><span class = "strong-font">Preheat Oven:</span> Preheat oven to 350 degrees F (175 degrees C).</li>
            <!-- Order2 -->
            <li><span class = "strong-font">Make Lemon Filling:</span> In a medium saucepan ...

Link相关Link

<div class="step5">
        <h2>LINKS</h2>
        <a href="http://www.google.com.hk/search?q=lemon+meringue+pie+recipe">Search for other lemon meringue pie recipes</a><br/>
            <a href="index.html">Home</a><br/>

            <br/>

            <a href="http://validator.w3.org/check/referer"><img src="images/valid-xhtml11.png" alt="xhtml11"></a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/vcss.gif" alt="vcss"></a>
    </div>