HTML(作业二)

HTML(作业二)_第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>Documenttitle>
    <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>freshspan>果果的仙侠小说《仙侠奇缘之花千骨》,
            于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>

HTML(作业二)_第2张图片

二、

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

HTML(作业二)_第3张图片

三、

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

HTML(作业二)_第4张图片

你可能感兴趣的:(html,css,前端)