signed

QiShunwang

“诚信为本、客户至上”

HTML结构及常用标签的使用

2021/6/3 17:59:50   来源:

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <!-- 引入主页样式文件 -->
    <link rel="stylesheet" href="index.css">
    <title>综合练习一 诗词</title>
</head>

<body>
    <!-- 顶部 -->
    <div class="top w">
        <div class="top_left fl">
            <img src="images/logo.png" alt="">
        </div>
        <div class="top_right fr">
            <input type="text">
            <!-- <img src="images/search_btn.png" alt=""> -->
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav w">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">影视大全</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">影视大全</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">影视大全</a></li>
        </ul>
    </div>
    <!-- container -->
    <div class="container w">
        <img src="images/promo.jpg" alt="">
    </div>
    <!-- 诗韵模块 -->
    <div class="introduce w borpa">
        <ul>
            <li>
                <h2>神韵</h2>
                <P>整合《汉语大诗词》《汉语大诗词》《汉语大诗词》汉语大诗词》等多种资源,等多种资源,等多种资源,等多种资源。</P>
                <a href="#">更多</a>
            </li>
            <li>
                <h2>神韵</h2>
                <P>整合《汉语大诗词》《汉语大诗词》《汉语大诗词》汉语大诗词》等多种资源,等多种资源,等多种资源,等多种资源。</P>
                <a href="#">更多</a>
            </li>
            <li>
                <h2>神韵</h2>
                <P>整合《汉语大诗词》《汉语大诗词》《汉语大诗词》汉语大诗词》等多种资源,等多种资源,等多种资源,等多种资源。</P>
                <a href="#">更多</a>
            </li>
        </ul>
    </div>
    <!-- pic -->
    <div class="pic w">
        <img src="images/pic.png" alt="">
        <div>曾子曰<br>:”君子也文会有;以友辅人。”</div>
    </div>

    <!-- 介绍 -->
    <div class="box w">
        <!-- 左侧 -->
        <div class="box_left">
            <ul>
                <li>
                    <h3>简繁转换</h3>
                    <img src="images/post.png" alt="">
                    <div class="box_left_conter">蔡文姬(生卒年不详),名琰,字文姬(一说字昭姬 [1] ,晋朝避司马昭讳称文姬)。陈留郡圉县(今河南省杞县)人,东汉末年女性文学家,文学家蔡邕之女。 博学多才,擅长文学、音乐、书法。初嫁于卫仲道,丈夫死后回家。东汉末中原大乱诸侯割据,原本归降汉朝的南匈奴趁机叛乱。曹操统一北方后,花费重金赎回,嫁给董祀。
                        <br><a href="#" class="astyle">更多</a>
                    </div>
                </li>
                <li>
                    <h3>简繁转换</h3>
                    <img src="images/post.png" alt="">
                    <div class="box_left_conter">蔡文姬(生卒年不详),名琰,字文姬(一说字昭姬 [1] ,晋朝避司马昭讳称文姬)。陈留郡圉县(今河南省杞县)人,东汉末年女性文学家,文学家蔡邕之女。 博学多才,擅长文学、音乐、书法。初嫁于卫仲道,丈夫死后回家。东汉末中原大乱诸侯割据,原本归降汉朝的南匈奴趁机叛乱。曹操统一北方后,花费重金赎回,嫁给董祀。
                        <br><a href="#" class="astyle">更多</a>
                    </div>
                </li>
                <li>
                    <h3>简繁转换</h3>
                    <img src="images/post.png" alt="">
                    <div class="box_left_conter">蔡文姬(生卒年不详),名琰,字文姬(一说字昭姬 [1] ,晋朝避司马昭讳称文姬)。陈留郡圉县(今河南省杞县)人,东汉末年女性文学家,文学家蔡邕之女。 博学多才,擅长文学、音乐、书法。初嫁于卫仲道,丈夫死后回家。东汉末中原大乱诸侯割据,原本归降汉朝的南匈奴趁机叛乱。曹操统一北方后,花费重金赎回,嫁给董祀。
                        <br><a href="#" class="astyle">更多</a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 右侧 -->
        <div class="box_rigth">
            <div class="box_rigth_one">
                <h3>诗词大全</h3>
                <a href="#">诗经实物图解</a>
                <a href="#">诗经实物图解</a>
                <a href="#">诗经实物图解</a>
                <a href="#">诗经实物图解</a>
                <a href="#">诗经实物图解</a>
                <a href="#">诗经实物图解</a>
            </div>
            <div class="box_rigth_two">
                <h3>诗词大全</h3>
                <a href="#">2021.6.1</a><a href="#">诗经实物图解</a>
                <a href="#">2021.6.1</a><a href="#">诗经实物图解</a>
                <a href="#">2021.6.1</a><a href="#">诗经实物图解</a>
                <a href="#">2021.6.1</a><a href="#">诗经实物图解</a>
                <a href="#">2021.6.1</a><a href="#">诗经实物图解</a>
            </div>
        </div>
    </div>

    <!-- 底部模块 -->
    <div class="bottom w">
        <img src="images/icon_qq.png" alt="">
        <img src="images/icon_wx.png" alt="">
        <img src="images/icon_wb.png" alt="">
        <span>copyright@实训2021</span>
    </div>
</body>

</html>