18. Enterprise Yellow Pages HTML implementation, HTML tags introduction, frameset framework, HTML5 tags, CSS

Huang enterprise HTML implementation, HTML tags introduction, frameset framework, HTML5 tags, CSS

I. enterprise Huang page HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>(China) Network Technology Co., Ltd.</title>

    <style type="text/css">
        .certification{
            background-color: orange;
            width:80px;
            height: 22px;
            color:white;
            font-size:12px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border:none;
        }
        .name{
            width:600px;
            height:23px;
            margin-left:100px;
        }
        .nowfunction{
            width:300px;
            heigth:23px;
            position: absolute;
            top:20px;
            right:0px;
        }
        .nowfunction a{
            float:left;
            margin-right:15px;
            text-decoration:none;
        }
        .mainInfo{
            width:1225px;
            height:100px;
            margin-left: 100px;
            margin-top:20px;
            background-color:#F2F9FC;
        }
        .InfoMeau{
            width: 1070px;
            height:44px;
            position:absolute;
            margin-left: 100px;
            margin-top:50px;
        }
        .InfoOpt{
            width:150px;
            float:left;
            text-align: center;
            border: 0.5px solid #eee;
            background-color: #eeeeee;
        }
        .InfoOpt a{
            text-decoration:none;
        }
        .InfoOpt h2{
            font-size:16px;
            color: #000;
            display: inline-block;
        }
        .InfoOpt span{
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }
        .foundInfo{
            width:1070px;
            margin-left: 100px;
            margin-top:120px;
        }
        .ntable{
            width: 100%;
            margin: 0 auto;
            margin-bottom: 20px;
        }
        .ntable td{
            padding: 10px 10px 11px 10px;
            border: #E4EEF6 1px solid;
            word-break: break-all;
            font-size: 14px;
            line-height: 1.6;
            color: #222;
            word-wrap: break-word;
        }
        .ntable .tb{
            background: #F2F9FC;
        }
        .SHInfo{
            width:1070px;
            margin-left:100px;
            margin-top:50px;
        }
        .SHInfo a{
            text-decoration:none;
            position: relative;
            top: -40px;
            left: 1030px;
        }
        .SHInfo span{
            font-size: 14px;
            color: #999;
            font-weight: normal;
        }
        .SHdetail{
            width:1070px;
            height: 600px;
            margin-left: 100px;
        }
        .SHdetail div{
            width: 500px;
            height: 500px;
            border:1px solid #eeeeee;
            float:left;
            margin-left: 20px;
        }
        .shareholder{
            width:1070px;
            margin-left: 100px;

        }
        .shareholder span{
            font-size: 14px;
            color: #999;
            font-weight: normal;
        }
    </style>
</head>
<body>
    <div class="header-panel">
        <div style="float:left;">
            <img src="${ctxPath}\images\aliLogo.png">
        </div>
        <div class="name">
            <h3 style="width:500px;">(China) Network Technology Co., Ltd.&nbsp;<button class="certification">√ I want to certify.</button></h3>
        </div>
        <div class="nowfunction">
            <a href="#">Risk monitoring</a>
            <a href="#">Deliver a business card</a>
            <a href="#">note</a>
            <a href="#">Contrast</a>
            <a href="#">follow</a>
        </div>
        <div class="mainInfo">
            <a style="position: relative;top: 10px;left: 5px;">
                //Tel: 0571-8502****
                <a href="#" style="position: relative;top: 10px;left: 10px;text-decoration:none;">More numbers</a>
                <a href="#" style="position: relative;top: 10px;left: 10px;text-decoration:none;">edit</a>
            </a>
            <a href="https://www.alibabagroup.com/cn/global/home" style="position: relative;top: 10px;left: 100px;text-decoration:none;">
                //Official website: https://www.alibabagroup.com/cn/global/h...
                <a href="#" style="position: relative;top: 10px;left: 110px;text-decoration:none;">Authentication</a>
            </a>
            <a href="#" style="position:absolute;top:72px;right:40px;text-decoration:none;color:orange;">
                //Editing Enterprise Information
            </a>
            <a style="position: relative;top: 37px;left: -625px;">
                //Email: ***@alibaba-inc.com
            </a>
            <a style="position: relative;top: 37px;left: -467px;">
                //Address: No. 699, No.
                <a href="#" style="position: relative;top: 37px;left: -457px;text-decoration:none;">Nearby Enterprises</a>
            </a>
            <a style="position: relative;top: 64px;margin-left: -1175px;">
                //Introduction: the Network Technology Co., Ltd. (referred to as: Group) was founded in 1999 by Ma Yun, the former head of English teacher, who was founded in 18.
                <a href="#" style="position: relative;top: 64px;margin-left: 10px;text-decoration:none;">details</a>
            </a>
        </div>
        <div class="InfoMeau">
            <div class="InfoOpt" style="background-color: white;">
                <a href="#">
                    <h2 style="color: #128bed;">Essential information</h2>
                    <span>282</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>legal proceedings</h2>
                    <span>539</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>Management condition</h2>
                    <span>999+</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>business risk</h2>
                    <span>27</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>Enterprise development</h2>
                    <span>52</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>intellectual property right</h2>
                    <span>159</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>historical information</h2>
                    <span>88</span>
                </a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="foundInfo">
            <table class="ntable">
                <tr>
                    <td width="20%" class="tb">registered capital</td>
                    <td width="30%" class="">512233 Ten thousand dollars</td>
                    <td width="20%" class="tb">Paid in capital</td>
                    <td width="30%" class="">59690 Ten thousand dollars</td>
                </tr>
                <tr>
                    <td class="tb">Management state</td>
                    <td class="">subsist</td>
                    <td class="tb" width="18%">date of establishment</td>
                    <td class="">1999-09-09</td>
                </tr>
                <tr>
                    <td class="tb">Unified Social Credit Code</td>
                    <td class="">91330100716105852F</td>
                    <td class="tb">Taxpayer identification number</td>
                    <td class="">91330100716105852F</td>
                </tr>
                <tr>
                    <td class="tb">Registration number</td>
                    <td class="">330100400015575</td>
                    <td class="tb" width="15%">Organizational code</td>
                    <td class="">71610585-2</td>
                </tr>
                <tr>
                    <td class="tb">Types of enterprises</td>
                    <td class="">Company with limited liability(Taiwan, Hong Kong, Macao and Domestic Joint Venture)</td>
                    <td class="tb">Industry</td>
                    <td class="">Information transmission, software and information technology services</td>
                </tr>
                <tr>
                    <td class="tb">Approval date</td>
                    <td class="" style="max-width:301px;">2019-04-08</td>
                    <td class="tb">registration authority</td>
                    <td class="">Market supervision and Administration Bureau</td>
                </tr>
                <tr>
                    <td class="tb">Region of origin</td>
                    <td class="" style="max-width:301px;">Zhejiang Province</td>
                    <td class="tb">English name</td>
                    <td class="">Alibaba (China) Technology Co., Ltd.</td>
                </tr>
                <tr>
                    <td class="tb">Name used before</td>
                    <td class="">
                        <span>Network Technology Development Co., Ltd.&nbsp;&nbsp;</span>
                        <span>Alibaba(China)Network Co., Ltd.&nbsp;&nbsp;</span>
                    </td>
                    <td class="tb">Number of insured persons</td>
                    <td class="">759</td>
                </tr>
                <tr>
                    <td class="tb">Personnel scale</td>
                    <td class="">1000 Above human</td>
                    <td class="tb">Business term</td>
                    <td class="">1999-09-09 Up to 2040-09-08</td>
                </tr>
                <tr>
                    <td class="tb">Enterprise address</td>
                    <td class="" colspan="3">
                        //No. 699, No.
                        <a href="#" class="m-l text-primary" style="text-decoration:none;"> consult a map</a>
                        <a data-toggle="modal" data-target="#loginModal" href="#" class="m-l text-primary" style="text-decoration:none;"> Nearby Enterprises</a>
                    </td>
                </tr>
                <tr>
                    <td class="tb">Business scope</td>
                    <td class="" colspan="3">
                        //Develop and sell computer network application software; design, manufacture and process computer network products and provide related technical services and advisory services; service: lease of own property, translation, adult non certificate labor vocational skills training (except for licenses). (Projects subject to approval in accordance with the law may not carry out business activities until approved by relevant departments)
                    </td>
                </tr>
            </table>
        </div>
        <div class="SHInfo">
            <h3>Statistical Analysis of Shareholder Information</h3>
            <a href="#"><span>↑Retract</span></a>
        </div>
        <div class="SHdetail">
            <div><a style="position: relative;top:10px;left: 10px;">Shareholder Shareholding Ratio(%)</a></div>
            <div><a style="position: relative;top:10px;left: 10px;">Contributions pledged by shareholders ($10,000)</a></div>
        </div>
        <div class="shareholder">
            <h3>Shareholder Information<a style="color:#128bed;">3</a></h3>
            <span>(See more 1<span style="color:orange;">Historical shareholder</span>)</span>
        </div>
    </div>
</body>
</html>

Introduction of HTML Tags


















3. Frameeset Framework and iframe Framework

Examples of frameset and iframe frameworks

1. Frameeset. HTML code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frameset frame</title>
</head>
<frameset cols="25%,50%,*" boder="5">
    <frame src="http://www.baidu.com" scrolling="no"></frame>
    <frameset rows="50%,*" boder="5">
        <frame src="http://www.qq.com" scrolling="no"></frame>
        <frame src="http://www.weibo.com"></frame>
    </frameset>
    <frame src="http://www.sina.com"></frame>
</frameset> 
</html>

Operation results:

2. The iframe. HTML code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe frame</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="Xie" frameborder="3"
width="100%" height="400"
 scrolling="yes"></iframe>
<iframe src="http://www.qq.com" name="qq" frameborder="3" scrolling="yes"
width="50%" height="400"
></iframe>
<iframe src="http://www.sina.com" name="Sina" frameborder="3" scrolling="yes"></iframe>
</body>
</html>

The results are as follows:

3.iframe set iframe
iframe1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe frame</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="Xie" frameborder="3"
width="100%" height="400"
 scrolling="yes"></iframe>
<iframe src="iframe2.html" name="_parent" frameborder="3" scrolling="yes"
width="50%" height="400"
></iframe>
<iframe src="http://www.sina.com" name="Sina" frameborder="3" scrolling="yes"></iframe>
</body>
</html>

iframe2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe frame</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="Xie" frameborder="3"
width="100%" height="400"
 scrolling="yes"></iframe>
<p>
    <a href="http://www.baidu.com" target="_parent">Xie</a>
    <a href="http://www.sina.com">Sina</a>
</p>
<iframe src="http://www.sina.com" name="Sina" frameborder="3" scrolling="yes"></iframe>
</body>
</html>

* Where target="_parent clicks the link on the child page and returns to the parent page. If you don't write this line of code, you jump on the sub-page.

Operation results:

IV. HTML5 Tags

h5 canvas canvas label, drag and drop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5 Te tag</title>
</head>
<body>
<h1>html5 canvas Tab</h1>
<canvas id="myCanvas" width="200" height="150" style="border: 1px solid #000000"></canvas>
<br>
<h1>html5 Drag and drop ( drag and drop)</h1>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px;height:200px; border: 1px solid #000000;"></div>
<br>
<img id="drag1" src="girl.gif" draggable="true" ondragstart="drag(event)"> <!--Set pictures to be draggable-->


</body>
</html>
<script>

/**
* canvas Drawing
*/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px Arial";  //Set font size, font
ctx.fillText("Hello World", 10,50);  //Make solid text on canvas
ctx.strokeText("Hello World", 10,100);  //Hollow text on canvas

/**
* html5 Drag and drop
*/
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}

//Where to place drag-and-drop elements by calling ondragoverg events
function allowDrop(ev){
    ev.preventDefault();
}
//drop event occurs when dragging data is placed
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

Operation results:

Drag the picture into the frame with the mouse:

HTML5 input type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5 input type</title>
</head>
<body>
<input type="email" name="user_email" />
<input type="url" name="user_url" />
<input type="nymber" name="points" min="1" max="10" />
<input type="date" name="user_date" />
</body>
</html>

The results are as follows:

Five, CSS

css style is divided into: in-line style, internal style sheet, external style sheet

When choosing a style in HTML, the nearest style should prevail.

css: selector, attribute, attribute value

External css reference method:

    <link href="external CSS Documentation URL Route" rel="stylesheet" type="text/css" />

Internal css:

    <style>
    xxx
    </style>

class selector:

.xxx,.xxx{
	xxx:xxx;
}

id selector:

.name>#divId{
	color:#00B83F;
}

Label selector:

a,table{
    font-family:"Song style"}

html{
	background-color:#ffffff;
	text-align:center;
	maragin:auto;
}

Universal selector:

General attribute  
*{
	font-family: Song Style;
}

Cascade selector

.name>h3>span{
	color:#00B83F;
}

Related information

Vector vector library: https://www.iconfont.cn/

Tags: html5 network Attribute

Posted on Tue, 08 Oct 2019 07:04:32 -0700 by imderek