html列表元素练习以及简易简历单填写的制作

Posted 李欣没有梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html列表元素练习以及简易简历单填写的制作相关的知识,希望对你有一定的参考价值。

主要知识点如下:

代码展示如下:

<!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>list</title>

</head>

<body>

    <div>

    <h2>搜索引擎排名</h2>

    <ol type="1">

        <li>Google</li>

        <li>Baidu</li>

        <li>Bing</li>

        <li>Sougou</li>

    </ol>

    

    </div>

    <div>

    <h2>软件编程语言</h2>

    <ul>

        <li>Java</li>

        <li>C++</li>

        <li>Python</li>

        <li>javascript</li>

    </ul>

    

    </div>

    <div>

        <h2>健康食品</h2>

        <dl>

            <dt>水果</dt>

            <dd>苹果</dd>

            <dd>香蕉</dd>

            <dt>蔬菜</dt>

            <dd>西兰花</dd>

            <dd>菠菜</dd>

        </dl>

    </div>

</body>

</html>

排行榜代码:

<!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>novelsh</title>

    <style>

        body{text-align: center;} table{margin: auto;}

    </style>

</head>

<body>

   

   <div >

    <table border="1" cellspacing="0" margin:auto >

        <caption><h2>小说排行榜</h2></caption>        

        <thead>            

 

        <tr >                

            <th>排名</th> <th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th>  <th>相关链接</th>               

        </tr> 

        </thead>      

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td><img src="up.jpg" alt=""></td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>  

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td><img src="down.jpg" alt=""></td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td><img src="up.jpg" alt=""></td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>                  

        

    

       

        

       </table>

 

   </div>

</body>

</html>

简易简历表制作:

<!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>

        body {

            text-align: center;

        }

 

        table {

            margin: auto;

        }

 

        td {

            width: 70px;

            overflow: hidden;

            height: 25px;

        }

 

        input {

            width: 100%;

        }

    </style>

</head>

 

<body>

    <form action="">

        <table border="1" align="center">

            <h2>个人简历</h2>

            <tr>

                <td>姓名</td>

                <td><input type=“text”></td>

                <td>性别</td>

                <td><input type=“text”></td>

                <td>出生年月</td>

                <td><input type=“text”></td>

                <td rowspan="4" style="vertical-align: top;"><input type="file"></td>

 

            </tr>

            <tr>

                <td>民族</td>

                <td><input type=“text”></td>

                <td>政治面貌</td>

                <td><input type=“text”></td>

                <td>身高</td>

                <td><input type=“text”></td>

            </tr>

            <tr>

                <td>学制</td>

                <td><input type=“text”></td>

                <td>学历</td>

                <td><input type=“text”></td>

                <td>户籍</td>

                <td><input type=“text”></td>

            </tr>

            <tr>

                <td>专业</td>

                <td><input type=“text”></td>

                <td colspan="2">毕业学校</td>

                <td colspan="2"><input type=“text”></td>

            </tr>

            <tr>

                <td colspan="7"><b>技能、特长和爱好</b></td>

 

            </tr>

            <tr>

                <td>外语等级</td>

                <td colspan="2"><input type=“text”></td>

                <td>计算机</td>

                <td colspan="3"><input type=“text”></td>

            </tr>

            <tr>

                <td colspan="7"><b>个人履历</b></td>

 

            </tr>

            <tr>

                <td>时间</td>

                <td colspan="2">单位</td>

                <td colspan="4">经历</td>

            </tr>

            <tr>

                <td><input type=“text”></td>

                <td colspan="2"><input type=“text”></td>

                <td colspan="4"><input type=“text”></td>

            </tr>

            <tr>

                <td><input type=“text”></td>

                <td colspan="2"><input type=“text”></td>

                <td colspan="4"><input type=“text”></td>

            </tr>

            <tr>

                <td><input type=“text”></td>

                <td colspan="2"><input type=“text”></td>

                <td colspan="4"><input type=“text”></td>

            </tr>

 

            <td colspan="7">个人履历</td>

            <tr>

                <td>通信地址</td>

                <td colspan="2"><input type=“text”></td>

                <td>联系电话</td>

                <td colspan="3"><input type=“text”></td>

            </tr>

            <tr>

                <td>E-mail</td>

                <td colspan="2"><input type=“text”></td>

                <td>邮编</td>

                <td colspan="3"><input type=“text”></td>

            </tr>

 

            <td colspan="7">自我评价</td>


 

        </table>

    </form>

</body>

 

</html>

以上是关于html列表元素练习以及简易简历单填写的制作的主要内容,如果未能解决你的问题,请参考以下文章

html列表元素练习以及简易简历单填写的制作

利用css+原生js制作简易钟表

python简易购物车练习

.net core反射练习-简易版IOC容器实现

AndroidStudio制作一个简易的订餐交易小demo日常小练习

Python 练习题_简易购物车