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

汇站网页代码

2022-09-14 0 906

js 代码描述：

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

代码如下

&lt;!DOCTYPE html&gt;
&lt;html lang='zh-cn'&gt;
&lt;head&gt;
&lt;meta charset='UTF-8'&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&gt;
&lt;title&gt;全自适应提示页 HTML 模板源码&lt;/title&gt;

&lt;link rel='stylesheet' href='https://cdn.bootcss.com/normalize/5.0.0/normalize.min.css'&gt;
&lt;style&gt;
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%;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id='container'&gt;
	&lt;div id='hero-img'&gt;
	&lt;/div&gt;
	&lt;div id='profile-img'&gt;
		&lt;img src='https://ws3.sinaimg.cn/large/005BYqpgly1fua355p7n6j30m80m8myd.jpg'/&gt;
	&lt;/div&gt;
	&lt;div id='content'&gt;
		&lt;h1&gt;匿名的表白&lt;/h1&gt;
		&lt;p&gt;
			当你看到此页时，我已不在你身边！
		&lt;/p&gt;
		&lt;a href='tencent://Message/?uin=972908224' class="btn btn-default" rel='nofollow'&gt;对我诉说&lt;/a&gt;&lt;a href='tencent://Message/?uin=972908224' class="btn btn-default" rel='nofollow'&gt;商务合作&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

js 代码效果图：

转载请注明：汇站网 » 全自适应提示页 HTML 模板源码

赏

微信扫一扫

支付宝扫一扫

感谢您的来访，获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用，禁止用于任何商业环境！

1.  本网站名称：汇站网
2.  本站永久网址：https://www.huizhanii.com/
3.  本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务！
4.  未经原版权作者许可,禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担！
5.  为尊重作者版权，请在下载24小时内删除！请购买原版授权作品，支持你喜欢的作者，谢谢！
6.  若资源侵犯了您的合法权益，请持您的版权证书和相关原作品信息来信通知我们请来信     我们会及时删除，给您带来的不便，我们深表歉意！
7.  如下载链接失效、广告或者压缩包问题请联系站长处理！
8.  如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入！
9.  本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
10.  因源码具有可复制性，一经赞助，不得以任何形式退款。
11.  更多详情请点击查看

汇站网网页代码全自适应提示页HTML模板源码 https://www.huizhanii.com/29826.html