您的位置：首页 > Web前端 > CSS

css3圆角效果代码

2017-01-03 18:01 246 查看

兼容模式无效时追加标签：<meta http-equiv ="X-UA-Compatible" content="IE=9" /> 或者 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta http-equiv ="X-UA-Compatible" content="IE=9" />

    <title>Login_Page</title>

    <script src="js/jquery-1.12.2.min.js"></script>

    <script src="js/jscookies.js"></script>

    <script type="text/javascript" >

        $(document).ready(function () {

            if (checkCookie("valID")) {

                var user = getCookie("valID");

                $("#username").val(user);

            }

        });

        function logon() {

            if ($("#username").val().length < 6 || $("#password").val().length < 5) {

                alert("UserID and Password length less than 5 bits, enter 5 -digit UserID and password ");

            } else {

                var valID = $("#username").val();

                var valPS = $("#password").val();

                setCookie("valID", valID, 365);

                //valPS = valPS.replace(/\+/g, "%2B");

                valPS = encodeURI(valPS, "UTF-8");

                valPS = encodeURI(valPS, "UTF-8");

                var valtest = encodeURIComponent(valPS);

                window.location.replace("Forms/logon.aspx?" + "valID=" + valID + "&valPS=" + encodeURIComponent(valPS) + "&valtest=" + valtest);

            }

        }

        function quit() {

            $(".text").val("");

        }

    </script>

    <style type="text/css">

        body{

            background-color:#fce8fc ;

        }

        #win {

            position: absolute;

            width: 230px;

            height: 130px;

            background-color: #ff9fff;

            text-align: center;

            left: 50%;

            top: 50%;

            margin-top: -110px;

            margin-left: -110px;

            border-radius: 20px;

        }

            #win:hover {

                border: solid 1px;

                border-color: blue;

                background-color: #fce8fc;

            }

        table{

            border-collapse:collapse;

            margin:10px 10px;

        }



        .text {

            width: 120px;

            color:blue;

        }

        th{

            text-align:left;

            border-left:none;

            border-top:none;

            border-right:non
4000
e;

            color:blue;

            height:25px;

        }

        td{

            border:1px solid;

        }

        #test {

            width: 300px;

            /*position: relative;*/

            position: absolute;

            height: 210px;

            background-color: #ff9fff;

            border-top-right-radius: 30px;

            -moz-border-top-right-radius: 30px;

            -moz-border-top-right-radius: 30px;

            -moz-border-radius-bottomright: 30px;

            -webkit-border-top-left-radius: 30px;

            -webkit-border-bottom-left-radius: 30px;

            border-radius: 30px;

            -moz-border-radius: 30px;

            -webkit-border-radius: 30px;

            left: 50%;

            top: 50%;

            margin-top: -170px;

            margin-left: -150px;

            text-align:center;

            font-size:18px ;

            font-weight:bold ;

            font-family:'Microsoft YaHei';

        }



        #testL {

            width: 50px;

            position: absolute;

            height: 50px;

            background-color: #ff9fff;

            border-radius: 50px;

            -moz-border-radius: 50px;

            -webkit-border-radius: 50px;

            left: 50%;

            top: 50%;

            margin-top: 10px;

            margin-left: -180px;

            border-width:5px;

        }

        #testD {

            width: 300px;

            /*position: relative;*/

            position: absolute;

            height: 210px;

            background-color: #ffd800;

            border-top-right-radius: 30px;

            -moz-border-top-right-radius: 30px;

            -moz-border-top-right-radius: 30px;

            -moz-border-radius-bottomright: 30px;

            -webkit-border-top-left-radius: 30px;

            -webkit-border-bottom-left-radius: 30px;

            border-radius: 30px;

            -moz-border-radius: 30px;

            -webkit-border-radius: 30px;

            left: 50%;

            top: 50%;

            margin-top: -166px;

            margin-left: -146px;

        }

    </style>

</head>

<body>

    <div id="testD"></div>

    <div id="test" >

        <br/>

    </div>

    <div id="win">

        <table >

            <tr>

                <th colspan="2">Logon:</th>

            </tr>

            <tr>

                <td>用户名：</td>

                <td><input type="text" id="username" class="text" placeholder="请输入用户名" /></td>

            </tr>

            <tr>

                <td>密码：</td>

                <td><input type="password" id="password" class="text" placeholder="请输入密码" /></td>

            </tr>

            <tr>

                <td colspan="2">

                    <input type="submit" id="submit" value="确定" onclick="logon()" />

                    <input type="reset" id="reset" value="取消" onclick="quit()" />

                </td>

            </tr>

        </table>

    </div>

    <div id="testL"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航