HTML（作业二）

发布于：2022-10-21 ⋅ 阅读:(233) ⋅ 点赞:(0)

在这里插入图片描述

一、

<!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>
    <style>
        div span:first-of-type {
            text-decoration: underline;
            color: red;
        }
        div span:nth-of-type(2) {
            color: blue;
        }
        div span:nth-of-type(3) {
            color: pink;
        }
        div span:nth-of-type(4) {
            color: blueviolet;
        }
        div span:nth-of-type(5) {
            color: palegoldenrod;
        }
        div span:last-of-type {
            color: firebrick;
        }
        div h1:first-of-type {
            color: red;
        }
        div h1:last-of-type {
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <h1>花千骨</h1>
        <p>《花千骨》<span>英语：The Journey of Flower）</span>，是改编自<span>fresh</span>果果的仙侠小说《仙侠奇缘之花千骨》，
            于2014年5月6日在<span>广西</span>开机，9月杀青[1][2]。主要讲述<span>白子画</span>与<span>花千骨</span>师徒的爱情故事。
            主演见面会和定妆照于5月至6月曝光[3][4][5]。2015年6月9日湖南卫视钻石独播剧场首播，
            是首部影剧网络播放量破两百亿的电视剧，并打破多项收视记录，其中凭借网络首播破2亿、网络指数突破300万、
            创造了<span>湖南卫视</span>2015年播出以来的份额最高值等成绩获封年度剧王[6]。LiTV 线上影视全套上架。 </p>
            <h1>主要演员</h1>
            <div>
                <img src="./imgs/花千骨.jpg" alt="">
                <img src="./imgs/花千骨.jpg" alt="">
            </div>
        </div>
</body>
</html>

在这里插入图片描述

二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            width: 230px;
            height: 1150px;
            border: 5px solid gray;
        }
        #container p:first-child {
            color: white;
            background-color: black;
            font: normal bold 30px whilte;
            margin-top: 0px;
        }
        #haha {
            margin-top: 0px;
        }
        #box1 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }

        #box2 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }

        #box3 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }

        #box4 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }

        #box5 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }

        #box6 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }

        #box7 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }

        #box8 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }

        #box9 span:first-of-type {
            color: black;
            font: normal bold 18px ”宋体“;
        }
        div hr {
            border: 1px dashed gray;
        }
    </style>
</head>
<body>
<div id="container">
    <p>全部分类</p>
    <div id="haha">
        <div id="box1">
            <img src="图片素材1/icon_01.gif"/>
            <span>护肤</span>
            <p>
                洁面 化妆水 喷雾 美容液 眼霜<br/>
                眼部精华 眼膜 面膜 面膜贴<br/>
                水洗面膜 免洗面膜 精华 精油<br/>
                啫哩 凝露 乳液 面霜 日霜 晚霜
            </p>
        </div>
        <hr/>
        <div id="box2">
            <img src="图片素材1/icon_02.gif"/>
            <span>彩妆</span>
            <p>
                卸妆 防晒 隔离 BB霜 粉底 粉饼<br/>
                睫毛膏 眼影 唇彩 腮红 眼线笔<br/>
                底妆 遮瑕 蜜粉 眉笔 美甲
            </p>
        </div>
        <hr/>
        <div id="box3">
            <img src="图片素材1/icon_03.gif"/>
            <span>香氛</span>
            <p>
                男香 女香 小Q装 中性香水
            </p>
        </div>
        <hr/>
        <div id="box4">
            <img src="图片素材1/icon_04.gif"/>
            <span>身体护理</span>
            <p>
                洗发 护发 沐浴 身体乳 手足护理<br/>
                护手霜 纤体 身体精油 颈部护理<br/>
                个人护理 卫生用品 脱毛
            </p>
        </div>
        <hr/>
        <div id="box5">
            <img src="图片素材1/icon_05.gif"/>
            <span>
                礼盒套装
            </span>
            <p>
                护肤套装 身体护理套装 彩妆套装<br/>
                旅行装 香水套装 男士套装
            </p>
        </div>
        <hr/>
        <div id="box6">
            <img src="图片素材1/icon_06.gif"/>
            <span>
                美容工具
            </span>
            <p>
                护肤 彩妆 美发 美体 美甲<br/>
                美容仪器 其他美容工具
            </p>
        </div>
        <hr/>
        <div id="box7">
            <img src="图片素材1/icon_07.gif"/>
            <span>
                母婴专区
            </span>
            <p>
                奶粉 尿裤湿巾 母婴洗护
            </p>
        </div>
        <hr/>
        <div id="box8">
            <img src="图片素材1/icon_08.gif"/>
            <span>
                男士专区
            </span>
            <p>
                洁面 爽肤水 面霜 啫哩 男香
                眼霜 凝胶 乳液 精华 沐浴
            </p>
        </div>
        <hr/>
        <div id="box9">
            <img src="图片素材1/icon_09.gif"/>
            <span>
                食品保健
            </span>
            <p>
                瘦身类 保健类 美容类 食品类
            </p>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

三、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div>
    <form id="haha" name="TestFrom" action="https://www.baidu.com/">
        用户名：<input type="text" name="username"/>
        <br/>
        密码：<input type="password" name="password"/>
        <br/>
        Email: <input type="email" name="email" placeholder="请输入你的 Email"/>
        <br/>
        输入框：<textarea></textarea>
        <br/>
        Hobby：
        <select>
            <option value="-1" selected/>选择你的爱好
            <option value="听音乐">听音乐</option>
            <option value="长跑">长跑</option>
            <option value="看电影">看电影</option>
            <option value="旅游">旅游</option>
        </select>
        <br/>
        性别：
        <input type="radio" name="gender" checked/> 男
        <input type="radio" name="gender"> 女
        <br/>
        你喜欢吃什么?
        <br/>
        <input type="checkbox" name="面条"/>面条
        <input type="checkbox" name="米饭"/>米饭
        <br/>
        提交：<input type="submit" name="submit"/>
        <br/>
        重置：<input type="reset"/>
        <br/>
    </form>
</div>
</body>
</html>

在这里插入图片描述

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布