简单考核题（前台）

来源：互联网发布：网络转串口调度器编辑：程序博客网时间：2024/05/13 16:39

1) 在页面中心显示一个上下边缘颜色为#44667F,左右边缘颜色为#0F2376,且边缘宽度为5px的信息框,信息框内要有一个外边距均为10PX的一个信息框。在该信息框中显示“Hello World”.点击“Hello World”发送一个Post 请求（地址为：“localhost “,数据为“PostTest”，传输成功之后，会有一个提示框，提示“SENd DaTa Successfully“）.

页面截图：

源码：

<html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>test1</title>  <script src="jquery-1.3.1.js" type="text/javascript"></script>  <style>    .aa:before {      content: "";      display: inline-block;      height: 100%;      width: 0;      vertical-align: middle;      margin-left: -.25em; //这里是为了去除inline-block的空隙的影响    }    html,    body {      padding: 0;      margin: 0;      height: 100%;      width: 100%;    }    .aa {      width: 100%;      height: 100%;      text-align: center;    }    .aaa {      width: 300px;      height: 110px;      color: #fff;      text-align: center;      line-height: 220px;      border-top: 5px solid #44667F;      border-bottom: 5px solid #44667F;      border-left: 5px solid #0F2376;      border-right: 5px solid #0F2376;    }    .aaaa {      width: 280px;      height: 90px;      background: #666;      color: #fff;      font-size: 40px;      font-family: "Comic Sans MS", cursive;      text-align: center;      line-height: 100px;      margin: 10px;    }    .aa>.aaa {      display: inline-block;      vertical-align: middle;    }  </style>  <script type="text/javascript">    $(document).ready(function () {      $("#qq").click(function () {        $.ajax({          type: "POST",          dataType: "text",          url: "localhost",          data: { text: 'PostTest' },          success: function () {            alert("SENd DaTa Successfully");          }        });      });    });  </script></head><body>  <div class="aa">    <div class="aaa">      <div class="aaaa" id="qq">        Hello World      </div>    </div>  </div></body></html>

2) 用纯粹的CSS+HTML画出下面这个图,背景图另附(请注意半透明图层的使用)

效果图

源码：

<html><head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>test1</title>        <style>                #dd {                        width: 55px;                        height: 55px;                        background-color: #44667F;                        color: white;                        text-align: center;                        border-radius: 100px;                        /*-webkit-border-radius: 100px;*/                        -moz-border-radius: 100px;                }                #ddd {                        width: 240px;                        height: 240px;                        background-color: #CEDEDF;                        color: white;                        text-align: center;                        border-radius: 300px;                        /*-webkit-border-radius: 100px;*/                        -moz-border-radius: 300px;                }                #dddd {                        width: 320px;                        height: 320px;                        color: #ffffff;                        background-color: #ffffff;                        text-align: center;                        border-radius: 300px;                        /*-webkit-border-radius: 100px;*/                        -moz-border-radius: 300px;                }                #wujiao {                        width: 0;                        height: 0;                        margin: 300px 300px;                        color: #f00;                        position: relative;                        display: block;                        border-right: 100px solid transparent;                        border-bottom: 70px solid #f00;                        border-left: 100px solid transparent;                        -moz-transform: rotate(35deg);                        -webkit-transform: rotate(35deg);                        -ms-transform: rotate(35deg);                        -o-transform: rotate(35deg);                }                #wujiao:before {                        width: 0;                        height: 0;                        position: absolute;                        display: block;                        top: -45px;                        left: -65px;                        border-bottom: 80px solid #f00;                        border-left: 30px solid transparent;                        border-right: 30px solid transparent;                        content: '';                        -webkit-transform: rotate(-35deg);                        -moz-transform: rotate(-35deg);                        -ms-transform: rotate(-35deg);                        -o-transform: rotate(-35deg);                }                #wujiao:after {                        width: 0;                        height: 0;                        position: absolute;                        display: block;                        top: 3px;                        left: -105px;                        color: #F00;                        border-right: 100px solid transparent;                        border-bottom: 70px solid #f00;                        border-left: 100px solid transparent;                        content: '';                        -webkit-transform: rotate(-70deg);                        -moz-transform: rotate(-70deg);                        -ms-transform: rotate(-70deg);                        -o-transform: rotate(-70deg);                }                #rectangle {                        width: 300px;                        height: 160px;                        background-color: #ffffff;                }                #ppap {                        filter: alpha(Opacity=90);                        -moz-opacity: 0.9;                        opacity: 0.6;                }        </style>        <script type="text/javascript">        </script></head><body background="Wechat_sm.png" style=" background-repeat:no-repeat ;background-size:100% 100%;background-attachment: fixed;">        <div id="ppap">                <div id="dddd" style="position: fixed;top:140px; left: -100px; right: auto;  bottom: auto; ">                </div>                <div id="rectangle" style="position: fixed;top:220px; left: 198px; right: auto;  bottom: auto; ">                </div>        </div>        <div id="ddd" style="position: fixed;top:180px; left: -60px; right: auto;  bottom: auto; ">        </div>        <div id="dd" style="position: fixed;top:160px; left: 30px; right: auto;  bottom: auto; ">        </div>        <div id="wujiao" style="position: fixed;top:-39px; left: -340px; right: auto;  bottom: auto; "></div>        <div id="dd" style="position: fixed;top:260px; left: 145px; right: auto;  bottom: auto; ">        </div>        <div id="dd" style="position: fixed;top:380px; left: 30px; right: auto;  bottom: auto; ">        </div></body></html>

阅读全文

0 0