寒假：HTML

最新推荐文章于 2023-09-02 22:42:10 发布

Foog。青陵

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/qq_43071351/article/details/87037656

版权

>框架的主要作用是使页面中的部分内容实现框架实现，一般用于在页面中引用站外的页面内容

（1）：在被打开的框架上加name属性，代码如下：<iframe name=“mainFrame"src=“subframe/the_second.html1”/>
（2）：在超链接上设置target目标窗口属性为希望显示的框架窗口名：< a href=” "target=“mainFrame”></ a>

header:标题头部区域的内容（用于页面或页面中的一块区域）

footer：标记脚部区域的内容（用于整个页面或页面的一块区域）

article：独立的文章内容

section：web页面中的一块区域

aside：相关内容或应用

nav:导航类辅助内容

iframe属性

1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>免费体验登录页面</title>
   
</head>
<style>

    body,ul, li {
        margin:0px;
        padding:0px;
    }
    li {
        list-style-type:none;
    }
    #login {
        background:url(../image/bg.jpg) 0px 0px no-repeat;
        width:312px;
        height:353px;
    }
    #login .content {
        width:260px;
        margin:0px auto;
        padding-top:80px;
        color:#FFF;
        font-size:14px;
        box-sizing: border-box;
    }
    #login li {
        height:38px;
        line-height:38px;
    }
    #login li span {
        color:#F00;
        padding-right:5px;
    }
    #login input {
        border:1px #7b7b7b solid;
        border-radius: 4px;
        width:190px;
        height:17px;
    }
    #login select{
        border:1px #7b7b7b solid;
        border-radius: 4px;
    }
    #login .btnRegist {
        background:url(../image/btn.jpg) 0px 0px no-repeat;
        width:152px;
        height:49px;
        border:0px;
        cursor:pointer;
    }
    #login .btn {
        text-align:center;
    }

</style>
<body>
<div id="login">
    <div class="content">
        <form action="" method="post" name="myform">
            <ul>
                <li><span>*</span>姓名：
                    <input name="user" type="text"  />
                </li>
                <li><span>*</span>邮箱：
                    <input name="email" type="email" />
                </li>
                <li><span>*</span>电话：
                    <input name="tel" type="tel" />
                </li>
                <li>性别：
                    <select name="sex">
                        <option>请选择</option>
                        <option>男</option>
                        <option>女</option>
                    </select>
                </li>
                <li>年龄：
                    <select name="age">
                        <option>请选择</option>
                        <option>47</option>
                        <option>34</option>
                    </select>
                </li>
                <li class="btn">&nbsp;
                    <input name="" type="submit"  value=" " class="btnRegist"/>
                </li>
            </ul>
        </form>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>中心开班信息</title>
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    li{
        list-style-type:none;
    }

    .trend {
        width:250px;
        border: 1px solid #d8d8d8;
        border-radius: 8px;
        background: linear-gradient(to bottom,#5bc1f9 ,#FFF,#FFF,#FFF);
        margin: 0 auto;
        box-sizing: border-box;
    }
    .trendTitle {
        background:url(../image/bg.gif) 10px 5px no-repeat;
        height:40px;
        padding-left:45px;
        color:#FFF;
        font-size:14px;
        font-weight:bold;
        line-height:40px;
        border-bottom: 1px solid #FFFFFF;
    }

    .trendContent {
        width:190px;
        padding-left:10px;
        box-sizing: border-box;
        margin: 10px 0;
    }
    .trendContent li {
        background:url(../image/dotBg.gif) -9px center  no-repeat;
        padding-left:10px;
        width:220px;
        height:30px;
        line-height: 30px;
        box-sizing: border-box;
    }
    .trendContent a{color:#626262; text-decoration:none;}
    .trendContent a:hover{color:#F30;text-decoration:none;}

</style>
<body>
<div class="trend">
    <h2 class="trendTitle">中心开班信息</h2>
    <div class="trendContent">
        <ul>
            <li><a href="#">8月12日：学历+技能班</a></li>
            <li><a href="#">8月16日：高考特招班</a></li>
            <li><a href="#">8月23日：Java精英班</a></li>
            <li><a href="#">8月31日：学士后强化班</a></li>
            <li><a href="#">9月5日：大学生就业班</a></li>
            <li><a href="#">9月9日：企业定向委培班</a></li>
            <li><a href="#">9月16日：网络营销强化班</a></li>
        </ul>
    </div>
</div>
</body>
</html>