用html 做一个低调的邮箱名片

最新推荐文章于 2024-07-01 17:42:31 发布

我是唐

最新推荐文章于 2024-07-01 17:42:31 发布

阅读量1.5k

点赞数 1

分类专栏：其他文章标签： html

本文链接：https://blog.csdn.net/qq_41673920/article/details/104313588

版权

其他专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、效果如下

简约大气颜色可自由调整
在这里插入图片描述

二、源码

<!DOCTYPE html>
<html>
	<body align="center">
		<div id="mingpian">
			<div id="logoimg">
				<img src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1"/>
				<company>北京CSDN科技股份有限公司</company>
		    </div>
			<div id="msg">
				<name>唐熙然</name>
				<class>☞  软件部</class>
				<phone>☏  13333333333</phone>
				<mail>✉  abcd@csdn.com</mail>
			</div>
			<div class="clearDiv"></div>
		</div>
		<style>
			#mingpian{
				width:350px;
				height:200px;
				border-radius:5px;
				background-color:#EEEEEE;
				font-family:"微软雅黑";
			}
			#logoimg{
				padding-top:30px;
				float:center;
				width:350px;
				height:80px;
			}
			#logoimg img{
				width:100px;
				height:30px;
			}
		    #logoimg company{
				float:left;
				padding-top:10px;
				padding-left:40px;
				font-size:22px;
			}
			#msg {
				width:350px;
				height:60px;
				font-size:14px;
				color:#555555;
				padding-top:10px;
				background-color:#DDDDDD;
			}

			#msg name{
				float:left;
				font-family:"Simhei";
				padding-top:10px;
				padding-left:30px;
				font-size:30px;
				font-weight:bold;	
			}
			#msg class,phone,mail{
				float:left;
				text-align:left;
				padding-left:20px;
				width:180px;
			}
			.clearDiv{clear:both;}
		</style>
	</body>
</html>

我是唐

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
用html 做一个低调的邮箱名片

一、效果如下简约大气颜色可自由调整二、源码<!DOCTYPE html><html> <body align="center"> <div id="mingpian"> <div id="logoimg"> <img src="https://csdnimg.cn/cdn/content-toolb...
复制链接

扫一扫