web第四次上级作业

2021-01-26 15:47:22 浏览数 (2)

先看图吧

代码:

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>By CaesarChang张旭</title>
    <style>
        #top {
            position: relative;
            width: 800px;
        }
        
        #logo {
            float: left;
            width: 120px;
        }
        
        #nav {
            position: absolute;
            top: 40px;
            left: 80px;
        }
        
        #nav li {
            list-style: none;
            font-size: 13px;
            float: left;
            margin-left: 19px;
        }
        
        #nav li a {
            text-decoration: none;
            color: black;
        }
        
        #top2 {
            width: 800px;
            position: relative;
        }
        
        #banner {
            position: absolute;
            top: 100px;
            left: 0px;
            width: 800px;
        }
        
        #top3 {
            position: relative;
        }
        
        #text1 {
            position: absolute;
            left: 0px;
            top: 300px;
        }
        
        #text2 {
            position: absolute;
            top: 300px;
            left: 250px;
            font-size: 25px;
            font-weight: bold;
        }
        
        #text3 {
            position: absolute;
            left: 470px;
            top: 307px;
            text-decoration: none;
            color: coral;
        }
        
        #top4 {
            position: relative;
            border: 1px solid gainsboro;
            top: 329px;
            width: 200px;
            height: 200px;
        }
        
        #top5 {
            position: relative;
            border: 1px solid gray;
            top: 250px;
            height: 130px;
        }
        
        #son1 {
            position: absolute;
        }
        
        #son1_text {
            color: orange;
            font-size: 13px;
            margin-top: 169px;
            height: 35px;
            overflow: hidden;
        }
        
        #son2 {
            position: absolute;
            top: 210px;
            left: 0px;
        }
        
        #son3 {
            position: absolute;
            top: 11px;
            left: 9px;
        }
        
        #son4 {
            position: absolute;
            top: 88px;
            left: 28px;
        }
        
        #son5 {
            position: absolute;
            top: 410px;
        }
        
        #son6 {
            position: absolute;
            left: 256px;
            top: 10px;
        }
        
        #son7 {
            position: absolute;
            left: 257px;
            top: 88px;
        }
        
        #son8 {
            position: absolute;
            height: 20px;
            background-color: black;
            top: 690px;
            width: 800px;
        }
        
        #son9 {
            background-color: gray;
            position: absolute;
            height: 50px;
            top: 710px;
            width: 780px;
            padding: 10px;
        }
        
        #son10 {
            position: absolute;
            height: 70px;
            top: 470px;
            width: 500px;
            left: 256px;
            padding: 10px;
            border: 1px solid black;
            appearance: none;
            display: hidden;
        }
    </style>
    <script>
        function product() {

            var product = document.getElementById("product").value;
            if (product.length < 1) {
                alert("请填写产品名称");
            }
        }

        function number() {

            var number = document.getElementById("number").value;
            if (number.length < 1) {
                alert("请填写数量");
            }
        }

        function company() {

            var company = document.getElementById("company").value;
            if (company.length < 1) {
                alert("请填写公司");
            }
        }

        function contect() {

            var product = document.getElementById("contect").value;
            if (product.length < 1) {
                alert("请填写联系人");
            }
        }

        function phone() {

            var phone = document.getElementById("phone").value;
            if (phone.length < 1) {
                alert("请填写手机号码");
            }
        }

        function chuanzhen() {

            var chuanzhen = document.getElementById("chuanzhen").value;
            if (chuanzhen.length < 1) {
                alert("请填写传真");
            }
        }

        function Email() {

            var pattern = /^w{0,}@{1}w{0,}.{1}w{0,}$/;
            var e = document.getElementById("email").value;
            if (pattern.test(e)) {


            } else if (!pattern.test(e)) {
                alert("请填写有效的邮箱！");

            }

        }

        function ok() {
            var arr = ["亲爱的客户,您订购产品为"];
            var all = document.getElementsByName("username");
            arr.push(all[0].value   ",订购数量为");
            arr.push(all[1].value   ".您公司");
            arr.push(all[2].value   "联系人");
            arr.push(all[3].value   "的电话为");
            arr.push(all[4].value   ",邮箱");
            arr.push(all[5].value   ",感谢您的订购");
            var son10 = document.getElementById("son10");
            son10.innerText = arr;
            son10.style.cssText = "visibility: visible;";

            // alert(arr);
        }
    </script>
</head>

<body>
    <div id="top">
        <img id="logo" src="./实验四材料/images/maintop001.gif">
        <ul id="nav">
            <li><a href="#">首页 </a>|</li>
            <li><a href="#">公司简介</a>|</li>
            <li><a href="#">新闻中心</a>|</li>
            <li><a href="#">产品展示</a>|</li>
            <li><a href="#">新品推荐</a>|</li>
            <li><a href="#">合作伙伴</a>|</li>
            <li><a href="#">网上订单</a>|</li>
            <li><a href="#">人才招聘</a>|</li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <div id="top2">
        <img id="banner" src="./实验四材料/images/main_banner_r3_c1.jpg">
    </div>
    <div id="top3">
        <span id="text1">最新公告</span>
        <span id="text2">ONLINE ORDERS</span>
        <a id="text3" href="#">网上订单</a>

    </div>
    <div id="top4">
        <div id="son1">
            <div id="son1_text">本公司将一如即往，服务好新老客户，为客户提供最优价产品，欢迎联系我们！ 热线：0755-83155222 传真：0755-83155366 电邮：dulonglp@vip.163.com QQ:59223322 228238633</div>
        </div>
        <div id="son2">友情链接</div>
        <div id="top5">
            <div id="son3"><img src="实验四材料/images/link002.gif"></div>
            <div id="son4">
                <select onchange="window.location=this.value;">
                    <option value="#">
                        --友情链接--
                    </option>
                    <option  value="https://www.baidu.com/">
                        百度
                    </option>
                    
                </select>
            </div>
        </div>

        <div id="son5">
            <img src="实验四材料/images/newp001.jpg">
        </div>
        <div id="son6">
            <img src="./实验四材料/images/newp006.jpg">
        </div>
        <div id="son7">
            <table align="left">
                <tr>
                    <td colspan="2">订购产品:<input type="text" name="username" id="product" onblur="product()" /></td>

                </tr>
                <tr>
                    <td colspan="2">订购数量:<input type="text" name="username" id="number" onblur=" number()" /></td>

                </tr>
                <tr>
                    <td colspan="2">订购公司: <input type="text" name="username" id="company" onblur=" company()" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">联系人:<input type="text" name="username" id="contect" onblur=" contect()" /></td>

                </tr>
                <tr>
                    <td colspan="2">联系电话:<input type="text" name="username" id="phone" onblur=" phone()" /></td>

                </tr>
                <tr>
                    <td colspan="2">联系传真:<input type="text" name="username" id="chuanzhen" onblur=" chuanzhen()" /></td>

                </tr>
                <tr>
                    <td colspan="2">Email: <input type="text" name="username" id="email" onblur=" Email()" /></td>

                </tr>
                <tr>
                    <td colspan="2">备注:<textarea cols="39" rows="6"></textarea></td>


                </tr>

                <tr class="but" style="margin-left:40px;">
                    <td colspan="2">
                        <button onclick="ok()">提交订单</button>
                        <input type="reset" name="reset" value="重写" />
                    </td>
                </tr>
            </table>

        </div>
        <div id="son8"></div>
        <div id="son9">
            <font style="font-size: 8px;">版权所有：深圳市都龙实业发展有限公司　网站备案编号: <span style="color: orange;"> 粤ICP备05054648号</span>　服务热线：0755-83155222 传真：0755-83155366 E-mail:dulonglp@vip.163.com

            </font>
        </div>
        <div id="son10" style="visibility:hidden;">

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

</html>

By CaesarChang 张旭 合作: root121toor@gmail.com

~关注我 带你看更多精品技术和面试必备

干项目了,想要进修一下基础的可以加群

号码 1153132260

干项目了

拜了个拜

com gmail 基础 面试

0 人点赞