自适应提示页HTML模板-钻芒网

<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>友情提示</title>

<link rel='stylesheet' href='https://cdn.bootcss.com/normalize/5.0.0/normalize.min.css'>
<style>
html,body {height: 100%;margin: 0;padding: 0;}body {font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;align-items: center;display: flex;}a{text-decoration:none;}#container {max-width: 400px;flex-basis: 100%;margin: 0 auto;background: #FFF;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);overflow: hidden;}#container #hero-img {width: 100%;height: 200px;background: #007bff;}#container #profile-img {width: 160px;height: 160px;margin: -80px auto 0 auto;border: 6px solid #FFF;border-radius: 50%;box-shadow: 0 0 5px rgba(90, 90, 90, 0.3);}#container #profile-img img {width: 100%;background: #FFF;border-radius: 50%;}#container #content {text-align: center;width: 320px;margin: 0 auto;padding: 0 0 50px 0;}#container #content h1 {font-size: 29px;font-weight: 500;margin: 50px 0 0 0;}#container #content p {font-size: 18px;font-weight: 400;line-height: 1.4;color: #666;margin: 15px 0 40px 0;}#container #content a {color: #CCC;font-size: 14px;margin: 0 10px;transition: color .3s ease-in-out;-webkit-transition: color .3s ease-in-out;}#container #content a:hover {color: #007bff;}.btn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF !important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px;  padding: 6px 10%;}.btn:hover,.yanshibtn:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; font-size: 14px; padding: 8px 10%;}
</style>
</head>
<body>
<div id='container'>
	<div id='hero-img'>
	</div>
	<div id='profile-img'>
		<img src='https://ws3.sinaimg.cn/large/005BYqpgly1fua355p7n6j30m80m8myd.jpg'/>
	</div>
	<div id='content'>
		<h1>匿名的表白</h1>
		<p>
			当你看到此页时，我已不在你身边！
		</p>
		<a href='tencent://Message/?uin=774740085' class="btn btn-default" rel='nofollow'>立即跳转</a><a href='tencent://Message/?uin=20838641' class="btn btn-default" rel='nofollow'>QQ联系</a>
	</div>
</div>
</body>
</html>

版权声明 1 本网站名称：钻芒博客
2 本站永久网址：www.zuanmang.net
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新

THE END

前端笔记

自适应提示页HTML模板

Typecho 导航主题Webstack 钻芒博客二开美化版新增暗黑模式全屏切换等

WPS Office政府企业版-专业版无广告带VBA组件

Time相册主题 for Typecho模板 [2020年2月12日更新至V1.1.2 支持懒加载]

钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题

钻芒博主汉化主题-Contentberg-内容营销和个人博客

WordPress主题 iDowns V1.8.4 最新版带会员管理卡密插件