HTML网页设计 科幻风格引入页

成品如下

html

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引入页</title>
		<link href="css/引入页.css" type="text/css" rel="stylesheet" />
		<style>
		body{
		    background-image:url("image/www2.jpg");
		    background-size:cover;
		}
		</style>
	</head>
	<body>
		<div class="YR">
					<h2>Science is a great treasure house of knowledge accumulated by mankind.</h2>
					<h2>科学是人类积累的知识的巨大宝库<br>欢迎你,朋友</h2><br>
					<a href="index.html" class="BB"><b>立即探索</b></a>
				</div>
	</body>
</html>

css

html 复制代码
.YR {
						width: 550px;
						height: 300px;
						margin: auto;
						margin-top: 200px;
						background-color: transparent;
						padding: 50px 50px 30px;
						box-shadow: 10px 10px 15px black;
						text-align: center;
		
					}
					.BB {
						text-decoration: none;
						font-size: larger;
						color: #1f4e5f;
					}
		
					h2 {
						font-family: Courier New;
					}
					a:hover {
						background-color: #f4f7f7;
						padding: 10px;
					}

背景图片

相关推荐
子兮曰19 分钟前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭30 分钟前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路3 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒4 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
Kagol5 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉5 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau5 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生5 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼5 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君879975 小时前
Flutter 如何给图片添加多行文字水印
前端·flutter