其他分享
首页 > 其他分享> > 7.18 阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS

7.18 阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS

作者:互联网

阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS

一、阿里巴巴企业黄页HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿里巴巴(中国)网络技术有限公司</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;">阿里巴巴(中国)网络技术有限公司&nbsp;<button class="certification">√ 我要认证</button></h3>
        </div>
        <div class="nowfunction">
            <a href="#">风险监控</a>
            <a href="#">递名片</a>
            <a href="#">笔记</a>
            <a href="#">对比</a>
            <a href="#">关注</a>
        </div>
        <div class="mainInfo">
            <a style="position: relative;top: 10px;left: 5px;">
                电话:0571-8502****
                <a href="#" style="position: relative;top: 10px;left: 10px;text-decoration:none;">更多号码</a>
                <a href="#" style="position: relative;top: 10px;left: 10px;text-decoration:none;">编辑</a>
            </a>
            <a href="https://www.alibabagroup.com/cn/global/home" style="position: relative;top: 10px;left: 100px;text-decoration:none;">
                官网:https://www.alibabagroup.com/cn/global/h...
                <a href="#" style="position: relative;top: 10px;left: 110px;text-decoration:none;">认证</a>
            </a>
            <a href="#" style="position:absolute;top:72px;right:40px;text-decoration:none;color:orange;">
                编辑企业信息
            </a>
            <a style="position: relative;top: 37px;left: -625px;">
                邮箱:***@alibaba-inc.com
            </a>
            <a style="position: relative;top: 37px;left: -467px;">
                地址: 浙江省杭州市滨江区网商路699号
                <a href="#" style="position: relative;top: 37px;left: -457px;text-decoration:none;">附近企业</a>
            </a>
            <a style="position: relative;top: 64px;margin-left: -1175px;">
                简介:阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立,他...
                <a href="#" style="position: relative;top: 64px;margin-left: 10px;text-decoration:none;">详情</a>
            </a>
        </div>
        <div class="InfoMeau">
            <div class="InfoOpt" style="background-color: white;">
                <a href="#">
                    <h2 style="color: #128bed;">基本信息</h2>
                    <span>282</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>法律诉讼</h2>
                    <span>539</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>经营状况</h2>
                    <span>999+</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>经营风险</h2>
                    <span>27</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>企业发展</h2>
                    <span>52</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>知识产权</h2>
                    <span>159</span>
                </a>
            </div>
            <div class="InfoOpt">
                <a href="#">
                    <h2>历史信息</h2>
                    <span>88</span>
                </a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="foundInfo">
            <table class="ntable">
                <tr>
                    <td width="20%" class="tb">注册资本</td>
                    <td width="30%" class="">512233万美元</td>
                    <td width="20%" class="tb">实缴资本</td>
                    <td width="30%" class="">59690万美元</td>
                </tr>
                <tr>
                    <td class="tb">经营状态</td>
                    <td class="">存续</td>
                    <td class="tb" width="18%">成立日期</td>
                    <td class="">1999-09-09</td>
                </tr>
                <tr>
                    <td class="tb">统一社会信用代码</td>
                    <td class="">91330100716105852F</td>
                    <td class="tb">纳税人识别号</td>
                    <td class="">91330100716105852F</td>
                </tr>
                <tr>
                    <td class="tb">注册号</td>
                    <td class="">330100400015575</td>
                    <td class="tb" width="15%">组织机构代码</td>
                    <td class="">71610585-2</td>
                </tr>
                <tr>
                    <td class="tb">企业类型</td>
                    <td class="">有限责任公司(台港澳与境内合资)</td>
                    <td class="tb">所属行业</td>
                    <td class="">信息传输、软件和信息技术服务业</td>
                </tr>
                <tr>
                    <td class="tb">核准日期</td>
                    <td class="" style="max-width:301px;">2019-04-08</td>
                    <td class="tb">登记机关</td>
                    <td class="">杭州市高新区(滨江)市场监督管理局</td>
                </tr>
                <tr>
                    <td class="tb">所属地区</td>
                    <td class="" style="max-width:301px;">浙江省</td>
                    <td class="tb">英文名</td>
                    <td class="">Alibaba (China) Technology Co., Ltd.</td>
                </tr>
                <tr>
                    <td class="tb">曾用名</td>
                    <td class="">
                        <span>阿里巴巴(杭州)网络技术发展有限公司&nbsp;&nbsp;</span>
                        <span>阿里巴巴(中国)网络有限公司&nbsp;&nbsp;</span>
                    </td>
                    <td class="tb">参保人数</td>
                    <td class="">759</td>
                </tr>
                <tr>
                    <td class="tb">人员规模</td>
                    <td class="">1000人以上</td>
                    <td class="tb">营业期限</td>
                    <td class="">1999-09-09 至 2040-09-08</td>
                </tr>
                <tr>
                    <td class="tb">企业地址</td>
                    <td class="" colspan="3">
                        浙江省杭州市滨江区网商路699号
                        <a href="#" class="m-l text-primary" style="text-decoration:none;"> 查看地图</a>
                        <a data-toggle="modal" data-target="#loginModal" href="#" class="m-l text-primary" style="text-decoration:none;"> 附近企业</a>
                    </td>
                </tr>
                <tr>
                    <td class="tb">经营范围</td>
                    <td class="" colspan="3">
                        开发、销售计算机网络应用软件;设计、制作、加工计算机网络产品并提供相关技术服务和咨询服务;服务:自有物业租赁,翻译,成年人的非证书劳动职业技能培训(涉及许可证的除外)。(依法须经批准的项目,经相关部门批准后方可开展经营活动)
                    </td>
                </tr>
            </table>
        </div>
        <div class="SHInfo">
            <h3>股东信息统计分析</h3>
            <a href="#"><span>↑收起</span></a>
        </div>
        <div class="SHdetail">
            <div><a style="position: relative;top:10px;left: 10px;">股东持股比例(%)</a></div>
            <div><a style="position: relative;top:10px;left: 10px;">股东认缴出资额(万美元)</a></div>
        </div>
        <div class="shareholder">
            <h3>股东信息<a style="color:#128bed;">3</a></h3>
            <span>(查看更多1条<span style="color:orange;">历史股东</span>)</span>
        </div>
    </div>
</body>
</html>

二、HTML标签介绍

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、frameset框架、iframe框架

在这里插入图片描述

frameset、iframe框架实例

1.frameset.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frameset框架</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>

运行结果:
在这里插入图片描述
2.iframe.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="百度" 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="新浪" frameborder="3" scrolling="yes"></iframe>
</body>
</html>

运行结果如下:
在这里插入图片描述
3.iframe套iframe
iframe1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="百度" 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="新浪" frameborder="3" scrolling="yes"></iframe>
</body>
</html>

iframe2.html:

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

*其中 target="_parent 将子页面上的链接点击后返回到父页面。不写这行代码即在子页面跳转。

运行结果:
在这里插入图片描述

四、HTML5标签

h5 canvas画布标签、拖放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5特特标签</title>
</head>
<body>
<h1>html5 canvas画页标签</h1>
<canvas id="myCanvas" width="200" height="150" style="border: 1px solid #000000"></canvas>
<br>
<h1>html5 拖放(drag 和 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)"> <!--设置图片为可拖放-->


</body>
</html>
<script>

/**
* canvas画图
*/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px Arial";  //设置字体大小,字体
ctx.fillText("Hello World", 10,50);  //在canvas上给制实心的文本
ctx.strokeText("Hello World", 10,100);  //在canvas上给制空心的文本

/**
* html5拖放
*/
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}

//通过调用ondragoverg事件规定拖放元素放在何处
function allowDrop(ev){
    ev.preventDefault();
}
//放置被拖动数据时,会发生drop事件
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

运行结果:
在这里插入图片描述
鼠标拖动图片到框内:
在这里插入图片描述
在这里插入图片描述

HTML5 input类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5 input类型</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>

结果如下:
在这里插入图片描述

五、CSS

css样式分为:行内样式、内部样式表、外部样式表

HTML中选择样式时以最靠近的样式为准

css写法:选择器、属性、属性值

外部css引用方法:

    <link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css" />

内部css:

    <style>
    xxx
    </style>

class选择器:

.xxx,.xxx{
	xxx:xxx;
}

id选择器:

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

标签选择器:

a,table{
    font-family:"宋体";
}

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

通用选择器:

通用属性  
*{
	font-family:"宋体";
}

级联选择器

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

相关资料

阿里巴巴矢量图标库:https://www.iconfont.cn/
在这里插入图片描述

标签:frameset,color,标签,width,HTML,font,margin,left
来源: https://blog.csdn.net/pyhkobe/article/details/96424527