全自适应提示页HTML模板源码_最优秀的QQ技术网_最专业的网络资源收集平台_小辉资源网分享_小刀娱乐网

全自适应提示页HTML模板源码

2018-8-21 1230 0

此页面是我在一个站扒下来的，我感觉还挺好看的。
优化成自适应问题。加了按钮美化。
源码很简单，没有引入js，全外链可以直接拿来用！

代码如下：

<!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>全自适应提示页HTML模板源码</title>
<!--
如果你对本源码还喜欢
请到小辉网络社区
bbs.8gws.com
留下您的足迹
-->
<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='http://bbs.8gws.com/uploadfile/i/large1/005BYqpgly1fua355p7n6j30m80m8myd.jpg'/>
	</div>
	<div id='content'>
		<h1>匿名的表白</h1>
		<p>
			当你看到此页时，我已不在你身边！
		</p>
		<a href='tencent://Message/?uin=3131282664' class="btn btn-default" rel='nofollow'>对我诉说</a><a href='tencent://Message/?uin=3131282664' class="btn btn-default" rel='nofollow'>商务合作</a>
	</div>
</div>
</body>
</html>

Plugins by frpkj.com

上一篇: 无损图片压缩工具|无损图片压缩神器(CompressPNGFiles)

下一篇: 小偷家族720P|1080P蓝光_BT磁力链双语字幕迅雷磁力链接地址