ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2019-08-06 17:00:31  阅读：192  来源： 互联网

标签：frameset color 标签 width HTML font margin left


阿里巴巴企业黄页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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有