前端简单案例

最新推荐文章于 2024-04-27 15:22:50 发布

huster0828

最新推荐文章于 2024-04-27 15:22:50 发布

阅读量622

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/huster0828/article/details/116716811

版权

案例

1. 新闻案例
2. HTML注册页面
3. 侧边栏
4. 导航栏

1. 新闻案例

运用标题标签、段落标签和换行标签写的简单新闻页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<html>
    <body>
        <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
        <h4>数据统计：水花兄弟合砍61分</h4>
        <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>

        <p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>

        <h4>兄弟对决升级：小库里给哥哥造成压力</h4>
        <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>

        <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>

        <p>作者: 老师<br />2019-8-8</p>
    </body>
</html>

在这里插入图片描述
在这个案例里需要注意的就是标题大小的不同，还有最两句是用的换行标签。换行标签和段落标签的区别就是，字体间距的不同。换行标签的字体间距会更小一点。

2. HTML注册页面

<body>
    <h3>青春不长在，抓紧谈恋爱</h3>
    <form>
        <table width="500">
            <!-- 第一行 -->
            <tr>
                <td>性别</td>
                <td> 
                     <input type="radio" id="nan" name="sender"/> <img src="images/man.jpg"> <label for="nan">男</label>
                     <input type="radio" id="nv" name="sender"/> <img src="images/women.jpg"> <label for="nv">女</label> 
                </td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>生日</td>
                <td>
                    <select value="--请选择年--">
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                        <option>2005</option>
                        <option>2006</option>
                        <option>2007</option>
                    </select>
                    <select>
                        <option>1</option>
                        <option>2</option>
                        <option

最低0.47元/天解锁文章

huster0828

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
前端简单案例

案例1. 新闻案例1. 新闻案例运用标题标签、段落标签和换行标签写的简单新闻页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫