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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jianzhonghao/article/details/56012361

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

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

2.

<!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{
                background:url(img/woman.jpg) no-repeat left center;
            }

            #sp1{
                font-size: 12.8px;
                color: darkgrey;
            }
            #div-sub{
                background-color:#5DB348 ;
                color: white;
                font-size: 20px;
                width: 250px;
                height: 46px;           
            }
            a{
                text-decoration: none;
            }
        </style>

        <script type="text/javascript">
            function showCheck(num){
                if (num==1){
                    var man=document.getElementById("man"); 
                    man.style.backgroundImage="url(img/man.jpg)"
                    var man=document.getElementById("woman");
                    man.style.backgroundImage="url(img/woman.jpg)"
                }else{
                    var man=document.getElementById("man"); 
                    man.style.backgroundImage="url(img/woman.jpg)"
                    var man=document.getElementById("woman");
                    man.style.backgroundImage="url(img/man.jpg)"
                }               
            }
        </script>
    </head>
<body>
<div id="div-max">
    <table cellpadding="5" cellspacing="0" width="427">
        <div id=div-top>
        <th>注册账号</th>
        </div>

    <tr>
        <td width="68">昵稱</td>
        <td><input type="text" class="nic"/></td>       
    </tr>

    <tr>
        <td>密碼</td>
        <td><input type="password" class="nic"/></td>   
    </tr>

    <tr>
        <td>確認密碼</td>
        <td><input type="password" class="nic"/></td>   
    </tr>

    <tr>
        <td>性別</td>
        <td><div class="public_sex" id="man" onclick="showCheck(1)"><input type="radio" class="sex" /></div>
        <div class="public_sex" id="woman"  onclick="showCheck(2)"><input type="radio" class="sex" /></div></td>       
    </tr>

    <tr>
        <td>手機号码</td>       
        <td><input type="password" class="nic"/></td>   
    </tr>

    <tr>
        <td></td>
        <td><div id="div-samll"><span id="sp1">可通过该手机号码快速找回密码</span><br />
                <span id="sp1">中国大陆地区以外手机号码&nbsp;&nbsp;&nbsp;<a id="div-a" href="#">点击这里</a></span>
            </div></td>
    </tr>

    <tr><td align="center" colspan="2"><input type="submit" id="div-sub" size="50" style="border-radius: 4px;" value="立即注冊"/></td></tr>

    <tr>
        <td></td>
        <td><input type="checkbox" checked="checked" style="border-radius: 8px;"/> <span id="sp1">同时开通QQ空间</span>
            <br />
            <input type="checkbox" checked="checked" style="border-radius: 8px;"/> <span id="sp1">我已阅读并同意相关服务条款和相关政策</span></td>
    </tr>
    </table>
    <!--<iframe src="frame/new_list.html" border="0"></iframe>-->

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

3.

<!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>
    </head>
<body>
    <table border="1" bgcolor="black">
        <tr bgcolor="white">
            <td width="152" height="82">1</td>
            <td rowspan="2" height="163" width="103">2</td>
            <td width="155" height="82">
                <table border="1"  bgcolor="#0166FF">
                    <tr>
                        <td width="80">a</td>
                        <td rowspan="2" width="80">b</td>
                        <td width="80">c</td>
                    </tr>
                    <tr>
                        <td>d</td>

                        <td>f</td>
                    </tr>
                    <tr>
                        <td>g</td>
                        <td>h</td>
                        <td>i</td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr bgcolor="white">
            <td><table border="1" bgcolor="#65CC00" align="center">
                <tr>
                    <td width="41">A</td>
                    <td colspan="2" width="75">B</td>

                </tr>
                <tr>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                </tr>
                <tr>
                    <td>G</td>
                    <td>H</td>
                    <td>I</td>
                </tr>
            </table></td>

            <td>6</td>
        </tr>

        <tr bgcolor="white">
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

4.

<!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>
        <style type="text/css">
            #sp{
                font-weight: bolder;
            }
            p{
                text-indent: 2em;
            }
            .u2{
                list-style: none;
                margin-top: 5px;
                margin-left: -30px;
            }
            .u1{
                margin-top: -100px;
                margin-left: -15px;
            }
            #div-green{
                background-color: #99CCFF;
                width: 100%;
            }

        </style>
    </head>
<body>
    <table border="0" cellpadding="0" cellspacing="2" bgcolor="#99CCFF">
        <tr bgcolor="white">
            <td colspan="3"><div id="div-green"><span id="sp">个人概况</span></div></td>        
        </tr>

        <tr bgcolor="white">
            <td width="272" height="125">
                <table cellpadding="3">
                    <tr><td>姓名:</td><td>张三</td></tr>
                    <tr><td>性别:</td><td></td></tr>
                    <tr><td>籍贯:</td><td>山东.滨州</td></tr>
                    <tr><td>生日:</td><td>1989-01-09</td></tr>
                </table>
            </td>
            <td width="315" height="125">
                <table cellpadding="3">
                    <tr><td>毕业院校:</td><td>上海经贸大学</td></tr>
                    <tr><td>所学专业:</td><td>法学.国际经济法</td></tr>
                    <tr><td>毕业时间:</td><td>2012-06</td></tr>
                    <tr><td>政治面貌:</td><td>中共党员</td></tr>
                </table>
            </td>
            <td width="100" height="125" align="center">照片</td>
        </tr>

        <tr bgcolor="white">
            <td colspan="3"><div id="div-green"><span id="sp">联系方式</span></div></td>
        </tr>

        <tr bgcolor="white">
            <td height="43">手机:13188888888</td>
            <td colspan="2">邮箱:2013aaa@163.com</td>

        </tr>

        <tr bgcolor="white">
            <td colspan="3"><div id="div-green"><span id="sp">自我评价</span></div></td>
        </tr>

        <tr bgcolor="white">
            <td colspan="3"><p>出身贫寒,诚实守信,稳重成熟,吃苦耐劳,性格开朗,善于学习,待人热情,热爱运动。有很强的事业心、进取心,对待工作积极热情,一丝不苟。具有高度的责任感和敬业精神,团队协作意识强。学习上勤奋刻苦,积极向上,成绩优秀。乐于助人,在老师同学之间取得了很好的人际关系</p></td>            
        </tr>

        <tr bgcolor="white">
            <td colspan="1"><div id="div-green"><span id="sp">专业技能证书</span></div></td>
            <td colspan="2"><div id="div-green"><span id="sp">所获荣誉证书</span></div></td>

        </tr>

        <tr bgcolor="white">
            <td colspan="1">
                <ul class="u1">
                    <li type="disc">2010年9月大学英语四级,</li>
                    <li type="square">2010年6月大学英语六级,</li>
                    <li type="square">2010年9月全国计算机一级,</li>
                    <li type="square">2010年12月上海市计算机一级,</li>
                </ul>
            </td>
            <td  colspan="2" width="405">
                <ul class="u2">
                    <li >2010-2011 年度上海政法学院品学兼优奖学金</li>
                    <li >2008-2009,2009-2010年度上海政法学院社会活动奖学金,</li>
                    <li >2008-2009,2009-2010,2010-2011年度国家励志奖学金,</li>
                    <li >2009年7月“情系国防,爱我中华”演讲比赛一等奖, </li>
                    <li >2009年11月 “东丽杯”上海国际马拉松赛高校团体二等奖,</li>
                    <li >2010年11月 上海市司法局世博先锋优秀党员,</li>
                    <li >2010年12月“中国2010年上海世博会优秀志愿者”。</li>
                </ul>
            </td>
        </tr>

        <tr bgcolor="white">
            <td colspan="3"><div id="div-green"><span id="sp">实习及在校经历</span></div></td>
        </tr>

        <tr bgcolor="white">
            <td  colspan="3">
                <ul class="u2">
                    <li >★2008年9月——2010年6月    教务处学生助理(勤工俭学岗位)。</li>
                    <li >★2009年9月——2012年6月    上海政法学院国际法商系0843班团支书</li>
                    <li >★2008年10月——2008年12月  上海洛基英语兼职讲师</li>
                    <li >★2010年4月——2010年10月   上海世博会城市志愿者上海政法学院外建站站长。</li>
                    <li >★2011年7月——2011年8月    山东省滨州市阳信县公安局暑期实习</li>
                    <li >★2011年8月——2011年9月    接受上海众合教育司法考试培训班培训</li>
                </ul>
            </td>           
        </tr>

        <tr bgcolor="white">
            <td colspan="3"><div id="div-green"><span id="sp">求职宣言</span></div></td>
        </tr>

        <tr bgcolor="white">
            <td colspan="3">努力不一定成功,但不努力就一定不成功!</span></td>
        </tr>
    </table>

    <br /><br /><br />

</body>
</html>

5.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div-max{
                margin: 0 auto;
            }
            #div-left{
                width: 659px;
                float: left;
            }
            #div-right{
                margin-top: -30px;
                margin-left: -150px;
                width: 130px;
                float: left;
            }
            input,textarea{
                border: #6795B4 1px solid;
                style="border-radius: 4px;"
                /*border-bottom-left-radius: 5px;*/
            }
        </style>
        <script type="text/javascript">
            function showPwd(){
                var obj=document.getElementById("pw");
                obj.type="text";
            }
            function hiddenpwd(){
                var obj=document.getElementById("pw");
                obj.type="password";
            }   
        </script>
    </head>
    <body>
        <div id="div-max">
<div id="div-left">
        <form enctype="multipart/form-data">
            <table border="0" cellspacing="0" cellpadding="5">

                <tr>
                    <td>名字:</td>
                    <td><input type="text" name="username" /></td>

                </tr>

                <tr>
                    <td>姓氏:</td>
                    <td><input type="text" name="username" /></td>

                </tr>

                <tr>
                    <td>登錄名:</td>
                    <td><input type="text" name="username" />(可包含a-z、0-9和下划线)</td>

                </tr>

                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" id="pw" onfocus="showPwd()" onblur="hiddenpwd()"/>(至少包含6个字符)</td>

                </tr>

                <tr>
                    <td>再次重新输入:</td>
                    <td><input type="password" name="repassword" /></td>

                </tr>

                <tr>
                    <td>电子邮箱:</td>
                    <td><input type="email" name="email" />(必須包含@字符)</td>

                </tr>

                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex" value="男"/><img src="img/man.png" />
                        <input type="radio" name="sex" value="女"/><img src="img/woman.png" />
                    </td>

                </tr>

                <tr>
                    <td>头像:</td>
                    <td><input type="file" name="repassword" /></td>

                </tr>

                <tr>
                    <td>爱好:</td>
                    <td>
                        <input type="checkbox" name="sports" value="sports" checked="checked"/>运动
                        <input type="checkbox" name="chatting" value="chatting"/>聊天
                        <input type="checkbox" name="playgame" value="playgame"/>玩游戏
                    </td>

                </tr>

                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="data" value="yyyy"/><select>
                            <option>[请选择月份]</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>                            
                        </select><input type="text" size="3" value="dd"/></td>                   
                </tr>

                <tr>
                    <td align="center" colspan="2">
                        <input type="submit" value="提交"/>
                        <input type="reset"  value="重填"/>
                    </td>   

                </tr>                       
            </table>            
        </form>
</div>

<div id="div-right">
    <table>
    <tr><td><h3><img src="img/yuedu.png" />阅读淘宝网服务协议</h3></td></tr>
        <tr>
            <td colspan="4"><textarea cols="30" rows="10">歡迎...</textarea></td>
        </tr>
    </table>
</div>

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

6.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div-max{
                margin: 0 auto;
            }
            #sp{
                color: red;
            }
            #sp1{
                margin-top: -10px;
                font-size: 12.8px;
                color: darkgrey;
            }
            #sp2{
                color: #003399;
                font-size: 12.8px;
            }
            #div-samll{
                margin-top: -20px;
            }
            #div-sub{
                background-color:#5DB348 ;
                color: white;
                font-size: 20px;
                /*font-family: "agency fb";*/
                width: 130px;
                height: 46px;           
            }
            #div-yan{
                margin-left: -144px;
                /*margin-top: -20px;*/
            }

        </style>
    </head>
<body>
    <div id="div-max">
        <form enctype="multipart/form-data">            
        <table border="0" cellspacing="2" cellpadding="12">     
            <tr>
                <td><span id="sp">*</span>郵件地址</td>
                <td><input type="text" name="username" style="border-radius: 4px;" size="35" placeholder="建議用手機號注冊"/>
                @<select size="1" style="border-radius: 4px;">
                    <option>163.com</option>
                    <option>QQ.com</option>
                </select></td>
            </tr>

            <tr><td></td>
                <td><div id="div-samll"><span id="sp1">6~8個字符,可使用字母、數字、下劃綫、蓄意字符開頭</span></div></td>
            </tr>

            <tr>
                <td><span id="sp">*</span>密码</td>
                <td><input type="password" size="51.5" style="border-radius: 4px;" name="password" id="pw" onfocus="showPwd()" onblur="hiddenpwd()"/></td>          
            </tr>

            <tr><td></td>
                <td><div id="div-samll"><span id="sp1">6~16個字符,區分大小寫</span></div></td>
            </tr>

            <tr>
                <td><span id="sp">*</span>確認密碼</td>
                <td><input type="email" size="51.5" style="border-radius: 4px;" name="email" /></td>                
            </tr>

            <tr><td></td>
                <td><div id="div-samll"><span id="sp1">請再次填寫密碼</span></div></td>
            </tr>

            <tr>
                <td><span id="sp">*</span>驗證碼</td>
                <td>
                    <input type="text" size="31.5" style="border-radius: 4px;" name="sex" />                    
                </td>
                <td><div id="div-yan"><img src="img/yanzheng.png" /></div></td>
            </tr>

            <tr><td></td>
                <td><div id="div-samll"><span id="sp1">請填寫圖片中的字符,不區分大小寫</span>                  
                    <br /><br />
                    <input type="checkbox" checked="checked" style="border-radius: 8px;"/> <span id="sp1">同意</span><span id="sp2">"服務條款"</span><span id="sp1"></span><span id="sp2">"隱私權相關政策"</span>
                </div>
            </td>               
            </tr>

            <tr>                
                <td align="center" colspan="2"><input type="submit" id="div-sub" size="50" style="border-radius: 4px;" value="立即注冊"/></td>                  
            </tr>

        </table>            
    </form>
    </div>
</body>
</html>

先上这些个基础,练练手, 愿与诸君共勉。

展开阅读全文

没有更多推荐了,返回首页