Web前端-html页面-01（锚点、表单、个人简历）

最新推荐文章于 2024-05-09 06:53:16 发布

艺术2333

最新推荐文章于 2024-05-09 06:53:16 发布

阅读量4.4k

点赞数 3

分类专栏： Web前端文章标签： web前端 html

本文链接：https://blog.csdn.net/jianzhonghao/article/details/56012361

版权

Web前端学习中-01

先来几张图镇楼!
1.锚点链接
这里写图片描述
2.单选框图片背景更换

3.嵌套表格

4.HTML版个人简历

5.表单输入框

6.邮箱注册表单

代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <!--连接外部样式表-->
        <!--<link rel="stylesheet" type="text/css" href="css/Demo1.css" />-->
        <style type="text/css">

            #div-max{
                margin:0 auto;
                width: 961px;
            }

            #div-top {
                margin:0 auto;
                width: 961px;
                height: 58px;
                line-height: 58px;
                position: fixed;                
                background-color: #960500;
            }
            #div-top a{
                width: 961px;
                height: 58px;
                line-height: 58px;
                color: white;
                font-weight: bold;
                font-size: 20px;
                margin-left: 100px;
                text-decoration: none;
            }
            #div-img{               
                width: 961px;
                height: 58px;
                margin:0 auto;
                clear: both;
                padding-top: 62px;
                padding-bottom: 18px;
                margin-left: auto;
            }
            #div-img1{
                width: 961px;
                height: 58px;
                margin:0 auto;
                margin-left: auto;
                margin-bottom: auto;
                clear: both;
            }
            #div-bei{
                width: 961px;
                margin:10 auto;
                margin-left: auto;
                clear: both;
            }
            #div-img2{
                width: 961px;
                height: 58px;
                margin:0 auto;
                margin-top: auto;
                margin-left: auto;
                clear: both;
            }
            #div-content{
                width: 961px;
                height: auto;
                margin:0 auto;
            }

            .content-left{
                float: left;
                width: 616px;
                /*margin-right: 3px;*/
            }   
            .content-right{
                float: right;
                width: 345px;
            }

        </style>
    </head>
    <body bgcolor="" >
    <div id="div-max">
        <div id="div-top">
            <a href="#record-time">紀錄時刻</a>
            <a href="#record-win">冠軍時刻</a>
            <a href="#record-bad">悲情時刻</a>
            <a href="#record-data">數據時刻</a>
            <a href="#tips">球迷心聲</a>
        </div>

        <div id="div-img"></a><img src="img/1234.jpg"  width="961"/></div>

        <div id="div-content">
            <div class="content-left"><a name="record-win"></a><img src="img/01.jpg"  width="616"/></div>
            <div class="content-right"><a name="record-data"></a><img src="img/02.jpg"  width="342"/></div>
        </div>
        <br />
        <div id="div-img1"></a><img src="img/1234.jpg"  width="961"/></div>
        <br />
        <div id="div-bei"><a name="record-bad"></a>悲情时刻，悲情时刻，悲情时刻，悲情时刻，悲情时刻，悲情时刻</div>
        <br />
        <div id="div-img2"><a name="record-time"></a><img src="img/1234.jpg"  width="961px"/></div>

    </div>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div-max{
                margin: 0 auto;
            }           
            .nic{
                width:298px;
                height: 35px;
                background-image: url(img/nic.jpg);
                border: 0;
            }
            .sex{
                opacity:0;
                filter:Alpha(opacity=0)
            }
            .public_sex{
                width: 40px;
                height: 20px;
                float: left;
            }
            #man{
                background:url(img/man.jpg) no-repeat left center;
            }
            #woman{

最低0.47元/天解锁文章

艺术2333

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端-html页面-01（锚点、表单、个人简历）

最近对Web前端很感兴趣，学习之01先来几张图镇楼! 1.锚点链接 2.单选框图片背景更换 3.嵌套表格 4.HTML版个人简历 5.表单输入框 6.邮箱注册表单代码部分：1.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><
复制链接

扫一扫