h5-源码-红色营销页面-落地页-教育行业-适用于咨询与表单

于 2024-09-30 17:23:01 发布
阅读量599 收藏 4
点赞数 13
文章标签： html5 css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65951650/article/details/142661042
版权

【html部分】

<!DOCTYPE html>

<html>

    <head>

        <title>教育考证类营销页面模板</title>

        <meta charset="utf-8">

        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>

    <body>

        <div id="con">

            <div id="nav">

                <div id="barleft">&nbsp;&nbsp;&nbsp;&nbsp;报考中心</div>

                <div id="barright">···&nbsp;&nbsp;&nbsp;&nbsp;</div>

            </div>

            <div id="banner">

                <div id="bannerone">·&nbsp;------&nbsp;·&nbsp;&nbsp;2024&nbsp;&nbsp;·&nbsp;------&nbsp;·</div>

                <div id="bannertwo">* * * 资 格 证</div>

                <div id="bannerthree">Elderly care worke</div>

                <div id="bannerfour">报 名 咨 询 服 务 中 心</div>

                <div id="bannerthree">Registration consultation service guide</div>

                <div id="bannerbutton">

                    <button class="ccaa" style="margin-left: 15%; float: left; ">报考条件查询</button>

                    <button class="ccaa" style="margin-right: 15%; float: right;">报名时间查询</button>

                </div>

            </div>

            <br>

            <div id="neet">

                <div id="neetbk">

                   <br>

                   <div id="neetbt">* * * 报 考<span style="color: red;"> 在 线 查 询</span></div>

                    <br>

                     <div id="neetxx">

                        <span style="color: red; font-weight: 600;">第一步：请选择学历</span><br><br>

                      <form>  

                        <label>  

                            <input type="radio" name="gender" value="male">  

                            中专及以下  

                        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                        <label>  

                            <input type="radio" name="gender" value="female">  

                            大专  

                        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  

                        <label>  

                            <input type="radio" name="gender" value="other">  

                            本科及以上  

                        </label>

                      </form><br><br>

                      <span style="color: red; font-weight: 600;">第二步：请选择年龄</span><br><br>

                      <form>  

                        <label>  

                            <input type="radio" name="gender" value="male">  

                            25岁以下  

                        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                        <label>  

                            <input type="radio" name="gender" value="female">  

                            25-40岁  

                        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  

                        <label>  

                            <input type="radio" name="gender" value="other">  

                            40岁以上  

                        </label>

                      </form><br><br>

                      <span style="color: red; font-weight: 600;">第三步：点击下方按钮咨询</span>

                      <div id="bannerbutton">

                        <button class="ccaa" style="margin: auto; ">点击立即咨询</button>

                        <br><br>

                      </div>

                     </div>

                </div>

            </div><br>

            <div id="neet">

                <div id="neetbt">* * * 报 考<span style="color: red;"> 在 线 查 询</span></div><br>

                <table style="width: 100%; text-align: center;">  

                    <tr>  

                        <td class="neetcad">报考<br>条件</td>  

                        <td class="neetcbd">报名<br>时间</td>  

                        <td class="neetcad">最新<br>政策</td>  

                    </tr>  

                    <tr>  

                        <td></td>

                    </tr>  

                    <tr>  

                        <td class="neetcbd">考试<br>大纲</td>  

                        <td class="neetcad">考试<br>科目</td>  

                        <td class="neetcbd">专业<br>要求</td>  

                    </tr>  

                </table>  

            </div>

            <div id="neet">

                <br><div id="neetbt">* * * <span style="color: red;">最 新 资 讯</span></div><br>

                <div id="neetfk">

                    <br>

                    <div id="neetfkrq">

                        <span style="float: left; margin-left: 5%; color: white;">【政策】陪诊师报名条件</span>

                        <span style="float: right; margin-right: 5%; background-color: yellow; color: #CF100D;">点击咨询</span>

                        <br>

                        <div style="color: white; text-align: center; margin: auto;">--------------------------------------</div>

                    </div>

                    <div id="neetfkrq">

                        <span style="float: left; margin-left: 5%; color: white;">【通知】陪诊师报名时间已公布</span>

                        <span style="float: right; margin-right: 5%; background-color: yellow; color: #CF100D;">点击咨询</span>

                        <br>

                        <div style="color: white; text-align: center; margin: auto;">--------------------------------------</div>

                    </div>

                    <div id="neetfkrq">

                        <span style="float: left; margin-left: 5%; color: white;">【通知】陪诊师报名条件查询</span>

                        <span style="float: right; margin-right: 5%; background-color: yellow; color: #CF100D;">点击咨询</span>

                        <br>

                        <div style="color: white; text-align: center; margin: auto;">--------------------------------------</div>

                    </div>

                    <div id="neetfkrq">

                        <span style="float: left; margin-left: 5%; color: white;">【通知】陪诊师往期考试大纲</span>

                        <span style="float: right; margin-right: 5%; background-color: yellow; color: #CF100D;">点击咨询</span>

                        <br>

                        <div style="color: white; text-align: center; margin: auto;">--------------------------------------</div>

                    </div>

                    <div id="neetfkrq">

                        <span style="float: left; margin-left: 5%; color: white;">【通知】2024年陪诊师科目包含...</span>

                        <span style="float: right; margin-right: 5%; background-color: yellow; color: #CF100D;">点击咨询</span>

                        <br>

                        <div style="color: white; text-align: center; margin: auto;">--------------------------------------</div>

                    </div>

                    <br>

                    <button style="margin-left: 30%; float: left; color: red; background-color: white; width: 40%; line-height: 40px; border: 0px; border-radius: 10px 10px 10px 10px; font-weight: 600; ">报考条件自评</button>

                </div>

            </div>

            <div id="neet">

                <br><div id="neetbt">全 国 各 地 区<span style="color: red;"> 报 考 政 策 查 询</span></div><br>

                <table style="width: 100%; text-align: center;">  

                    <tr>  

                        <td></td>

                        <td class="neetcfd">山东</td>

                        <td></td>

                        <td class="neetcud">江苏</td>

                        <td></td>

                        <td class="neetcud">广东</td>

                        <td></td>

                        <td class="neetcud">河南</td>

                        <td></td>

                    </tr>  

                    <tr></tr>

                    <tr></tr>

                    <tr></tr><tr></tr>

                    <tr>  

                        <td></td>

                        <td class="neetcud">山东</td>

                        <td></td>

                        <td class="neetcud">江苏</td>

                        <td></td>

                        <td class="neetcfd">广东</td>

                        <td></td>

                        <td class="neetcud">河南</td>

                        <td></td>

                    </tr>

                    <tr></tr>

                    <tr></tr>

                    <tr></tr><tr></tr>

                    <tr>  

                        <td></td>

                        <td class="neetcud">山东</td>

                        <td></td>

                        <td class="neetcfd">江苏</td>

                        <td></td>

                        <td class="neetcud">广东</td>

                        <td></td>

                        <td class="neetcud">河南</td>

                        <td></td>

                    </tr>

                    <tr></tr>

                    <tr></tr>

                    <tr></tr><tr></tr>

                    <tr>  

                        <td></td>

                        <td class="neetcud">山东</td>

                        <td></td>

                        <td class="neetcud">江苏</td>

                        <td></td>

                        <td class="neetcud">广东</td>

                        <td></td>

                        <td class="neetcfd">河南</td>

                        <td></td>

                    </tr>  

                    <tr></tr>

                    <tr></tr>

                    <tr></tr><tr></tr>

                    <tr>  

                        <td></td>

                        <td class="neetcud">山东</td>

                        <td></td>

                        <td class="neetcud">江苏</td>

                        <td></td>

                        <td class="neetcud">广东</td>

                        <td></td>

                        <td class="neetcud">更多</td>

                        <td></td>

                    </tr>  

                </table>  

            </div>

            <br><br>

            <div style="width: 100%; line-height: 80px; color: white; background-color: #333; font-size: 14px; text-align: center; font-weight: 600;">* * * * 教 育 科 技 有 限 公 司</div>

        </div>

    </body>

</html>

【css部分】

html,body{margin: 0; padding: 0;}

#con {width: 100%; max-width: 1080px; margin: auto;}

#nav {width: 100%; max-width: 1080px; height: 40px; margin: auto; box-sizing: border-box; background-color:#CF100D; border-bottom: 3px solid #ccc;}

#barleft {color:white; font-weight: 600; width: 50%; max-width: 540px; float: left; line-height: 40px; text-align: left;}

#barright {color:white; font-weight: 600; width: 50%; max-width: 540px; float: right; line-height: 40px; text-align: right;}

#banner {height: 400px; width: 100%; max-width: 1080px; margin: auto; background-image: url(http://bd.hczhiying.cn/whpeizhen-gy/yd/static/images/banner.png);}

#bannerone {width: 100%; max-width: 1080px; margin: auto; text-align: center; font-size: 24px; font-weight: 400; color: #CF100D; padding-top: 50px;}

#bannertwo {width: 100%; max-width: 1080px; margin: auto; text-align: center; font-size: 36px; font-weight: 600; color: #CF100D; padding-top: 40px;}

#bannerthree {width: 100%; max-width: 1080px; margin: auto; text-align: center; font-size: 14px; font-weight: 400; color: #CF100D; padding-top: 5px;}

#bannerfour {width: 100%; max-width: 1080px; margin: auto; text-align: center; font-size: 32px; font-weight: 400; color: #CF100D; padding-top: 30px;}

#bannerbutton {width: 100%; max-width: 1080px; margin: auto; margin-top: 30px;}

.ccaa {width: 30%; color: white; background-color: #CF100D; line-height: 40px;  border: 0px; border-radius: 10px 10px 10px 10px; font-weight: 600;}

#neet {width: 100%; max-width: 1080px; margin: auto; }

#neetbk {width: 96%; border: #CF100D dotted 2px; margin: auto; border-radius: 20px 20px 20px 20px;}

#neetbt {width: 100%; max-width: 1080px; margin: auto; text-align: center; font-weight: 600; font-size: 24px;}

#neetxx {width: 100%; max-width: 1080px; margin: auto; text-align: center; }

#neetbj {width: 100%; max-width: 1080px; margin: auto; text-align: center; }

.neetcad {background-color: #CF100D; color: white; font-weight: 400; line-height: 50px; border-radius: 10px 10px 10px 10px;}

.neetcbd {color: #CF100D; font-weight: 400; border: #CF100D 2px dotted; line-height: 50px; border-radius: 10px 10px 10px 10px;}

#neetfk {width: 96%; margin: auto; background-color: #CF100D; border-radius: 10px 10px 10px 10px; height: 300px;}

#neetfkrq {width: 100%; margin: auto;  font-weight: 600; }

.neetcud {color: #CF100D; font-weight: 400; border: #CF100D 2px dotted; line-height: 20px; border-radius: 10px 10px 10px 10px;}

.neetcfd {color: white; font-weight: 400; border: 0; line-height: 20px; border-radius: 10px 10px 10px 10px; background-color: #CF100D;}

小熊ber
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值