【HTML + CSS】 实现原神纯静态官网

已于 2022-12-31 14:15:07 修改
阅读量4.8k 收藏 87
点赞数 17
文章标签： css html css3
于 2022-12-30 19:10:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53569667/article/details/128499216
版权

文章目录

一、网页效果演示

1.1、Page1 ~ poster

在这里插入图片描述

1.2、Page2 ~ news

在这里插入图片描述

1.3、Page3 ~ city

在这里插入图片描述

二、poster code

2.1、html

<!-- 页面一 -->
<div class="poster">
	<!-- 头部导航栏 -->
	<div class="header_bar">
		<!-- 头部左边，logo -->
		<div class="header_left">
			<!-- 音乐logo -->
			<div class="musicLogo">
				<a href="###">
					<img src="img/MusicLogo.png">
				</a>
			</div>
			<!-- 原神logo -->
			<div class="GenshinLogo">
				<img src="img/Genshin.png"/>
			</div>
		</div>

		<!-- 横向导航栏 -->
		<div class="header_navbar">
			<ul>
				<li>
					<a href="###">首&nbsp;页</a>
				</li>
				<li>
					<a href="###">新&nbsp;闻</a>						
				</li>
				<li>
					<a href="###">角&nbsp;色</a>
				</li>
				<li>
					<a href="###">世&nbsp;界</a>
				</li>
				<li>
					<a href="###">漫&nbsp;画</a>
				</li>
				<li>
					<a href="###">社&nbsp;区</a>
				</li>
			</ul>
		</div>
		
		<!-- 头部右边 -->
		<div class="header_right">
			<!-- 成长关爱系统 -->
			<a href="###" class="header_cs">
				<span>成长关爱系统</span>
				<img src="img/aixin.png"/>
			</a>
			
			<!-- 登录 -->
			<a href="###" class="header_login">
				<span>登&nbsp;录</span>
				<img src="img/loginLogo.png"/>
			</a>
		</div>
	</div>
	
	<!-- 页面一的背景 -->
	<div id="background1" style="height: 1920px; height: 968px;">
		<video id="bg" poster="img/bg1.jpg" loop="loop" muted="muted" autoplay width="1920px" height="1080px">
			<source src="video/bg1.mp4" type="video/mp4"/>
		</video>
	</div>
	
	<!-- 底部标志 -->
	<div class="poster_sign">
		<!-- 播放标志 -->
		<div class="poster_video">
			<button class="poster_video_button">
			</button>
		</div>
		
		<!-- 12+ 标志 -->
		<div class="poster_badge">
			<img src="img/posterBadge.png"/>
		</div>
		
		<!-- 下载标志 -->
		<div class="download_logo">
			<!-- 二维码 -->
			<div class="Genshin_qr">
				<img src="img/Genshin_qrCode.png" class="Genshin_qr_code"/>
				<img src="img/Genshin_qr.jfif" class="Genshin_qr_icon"/>
			</div>
			
			<!-- PS4, ios -->
			<div class="download_pc_group">
				<a href="###">
					<img src="img/download_pc_ps.png" alt="ps4"/>
				</a>
				
				<a href="###">
					<img src="img/download_pc_ios.png" alt="ios"/>
				</a>
			</div>
			
			<!-- taptap, android -->
			<div class="download_pc_group">
				<a href="###">
					<img src="img/download_pc_taptap.png" alt="taptap"/>
				</a>
				<a href="###">
					<img src="img/download_pc_android.png" alt="android"/>
				</a>
			</div>
			
			<div class="download_pc_image">
				<a href="###">
					<img src="img/download_pc_image.png" alt="pc"/>
				</a>
			</div>
		</div>
	</div>
	
</div>

2.2、css

* {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: hidden;
}

/* page1 :start*/
.poster {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}


/* 头部栏 :start */
.header_bar {
	background-color: rgba(17, 17, 17, 0.75);
	display: inline-block;
	position: absolute;
	height: 66px;
	width: 1920px;
	z-index: 999;
}

/* 头部导航栏左侧 */
.header_left {
	display: flex;
	float: left;
	width: 300px;
}

/* 音乐Logo */
.musicLogo {
	display: flex;
	align-items: center;
	height: 66px;
	position: relative;
	left: 80px;
}

.musicLogo a {
	padding: 0;
}

.musicLogo img {
	height: 30px;
	width: 30px;
}

/* 原神Logo */
.GenshinLogo {
	display: inline-block;
}

/* 头部导航栏 nav*/
.header_navbar {
	float: left;
	display: inline-block;
	height: 66px;
	line-height: 66px;
	text-indent: 20px;
}

/* 头部导航栏右侧 */
.header_right {
	position: absolute;
    right: 30px;
    height: 100%;
    display: flex;
    align-items: center;
}

/* 头部导航栏右侧标签 a 动画特效 */
.header_right a:hover {
	opacity: 1;
}

/* 成长关爱系统 */
.header_cs {
	margin-right: 20px;
	padding: 0px;
	display: flex;
	align-items: center;
}

/* 成长关爱系统图像 */
.header_cs img {
	margin-left: 18px;
	width: 27px;
	height: 27px;
	opacity: 0.6;
}

/* 头部导航栏右侧登录 */
.header_login {
	margin-right: 20px;
	padding: 0px;
	display: flex;
	align-items: center;
}

/* 右侧登录Logo */
.header_login img {
	margin-left: 18px;
	width: 27px;
	height: 27px;
	opacity: 0.6;
}


ul {
	list-style: none;
	overflow: hidden;
}

ul li {
	float: left
}

a {
	font-size: 17px;
	color: #ccc;
	text-decoration: none;
	padding: 22px 16px;
	opacity: 0.8;
}

/* 导航栏窗口字体鼠标接触特效 */
.header_navbar a:hover {
	text-shadow: 0 0 20px skyblue,0 0 20px skyblue,0 0 20px skyblue,0 0 20px skyblue;
	color: white;
}
/* 头部栏 :end */




.poster_sign {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;   /* 居中排列 */
	flex-direction: column;    /* 灵活的项目将垂直显示，正如一个列一样。 */
	box-sizing: border-box;
}


/* page1的播放按钮 :start*/
.poster_video {
	position: absolute;
	bottom: 200px;
	width: 356px;
	height: 76px;
	background: url("../img/poster_video_decoration.png") no-repeat center center;
	margin-bottom: 20px;
}

.poster_video_button {
	position: relative;
	height: 48px;
	width: 48px;
	border-radius: 50%;
	border: 0;
	display: block;
	cursor: pointer;
	left: 154px;
	bottom: -14px;
}

.poster_video_button::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	background: url("../img/poster_button_video.png");
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);	/* 2D转换 向左上移动*/
	background-position: center top;
}

.poster_video_button:hover {
	opacity: 0.5;
}
/* page1的播放按钮 :end*/


.poster_badge {
	position: absolute;
	width: 100px;
	bottom: 20px;
	left: 20px;
	cursor: pointer;
}

.poster_badge img {
	width: 100%;
}



/* 下载标志 :start*/
.download_logo {
	display: flex;
	position: absolute;
	width: 540px;
	height: 125px;
	bottom: 70px;
	align-items: center;
}

.Genshin_qr {
	height: 102px;
	width: 102px;
	position: relative;
}
/* 二维码上的派蒙图片 */
.Genshin_qr_icon {
	position: relative;
	left: 50%;
	top: -66px;
	width: 26px;
	height: 26px;
	border: 2px solid gray;
	border-radius: 4px;
	transform: translateX(-50%);
}
/* 二维码 */
.Genshin_qr_code {
	width: 100%;
	display: block;
}

/* 下载路径组（ps4和ios一组，TapTap和Android一组） */
.download_pc_group {
	display: flex;
	height: 112px;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 3px;
}

.download_pc_group a {
	padding: 0px;
	width: 160px;
	height: 52px;
}

.download_pc_group a img {
	width: 100%;
	height: 100%;
}

.download_pc_group a img:hover {
	opacity: 0.8;
}

/* PC 下载路径 */
.download_pc_image {
	width: 111px;
	height: 111px;
}

.download_pc_image a {
	padding: 0px;
}

.download_pc_image a img:hover {
	opacity: 0.8;
}
/* 下载标志 :end*/

/* page1 :end */

三、news code

3.1、html

<div class="news">
	<h3>新闻资讯</h3>
	
	<!-- 新闻主题 -->
	<div class="news_main">
		<!-- 轮播图 -->
		<div class="carousel_map">
			<div class="slide">
				<input type="radio" name="pic" id="pic1" checked/>
				<input type="radio" name="pic" id="pic2"/>
				<input type="radio" name="pic" id="pic3"/>
				<input type="radio" name="pic" id="pic4"/>
				
				<div class="labels">
					<label for="pic1"></label>
					<label for="pic2"></label>
					<label for="pic3"></label>
					<label for="pic4"></label>
				</div>
				
				<ul class="list">
					<li class="item">
						<a href="###">
							<img src="img/news1.jpg" style="height: 100%; width: 100%;"/>
						</a>
					</li>
					<li class="item">
						<a href="###">
							<img src="img/news2.jpg" style="height: 100%; width: 100%;"/>
						</a>
					</li>
					<li class="item">
						<a href="###">
							<img src="img/news3.jpg" style="height: 100%; width: 100%;"/>
						</a>
					</li>
					<li class="item">
						<a href="###">
							<img src="img/news4.jpg" style="height: 100%; width: 100%;"/>
						</a>
					</li>
					<li class="item">
						<a href="###">
							<img src="img/news1.jpg" style="height: 100%; width: 100%;"/>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
		<!-- 新闻内容 -->
		<div class="news_content">
			<ul class="news_table_list">
				<li id="t1">最新</li>
				<li id="t2">新闻</li>
				<li id="t3">公告</li>
				<li id="t4">活动</li>
			</ul>
			
			<ul class="news_list" id="news_1">
				<li>
					<a href="###" class="news_item" title="凯亚生日快乐｜如果山上风大的话，可以把披风借给你。">
						<p class="news_title">凯亚生日快乐｜如果山上风大的话，可以把披风借给你。</p>
						<p class="news_date">2022/11/30</p>
					</a>
				</li>
				<li>
					<a href="###" class="news_item" title="《原神》新玩法预告PV：「来一局七圣召唤吧！」">
						<p class="news_title">《原神》新玩法预告PV：「来一局七圣召唤吧！」</p>
						<p class="news_date">2022/11/30</p>
					</a>
				</li>
				<li>
					<a href="###" class="news_item" title="《原神》「无相交响诗」活动小贴士 回旋曲·森郁之笼">
						<p class="news_title">《原神》「无相交响诗」活动小贴士 回旋曲·森郁之笼</p>
						<p class="news_date">2022/11/30</p>
					</a>
				</li>
				<li>
					<a href="###" class="news_item" title="《原神》「花坂豪快」荒泷一斗同人绘画作品征集开启">
						<p class="news_title">《原神》「花坂豪快」荒泷一斗同人绘画作品征集开启</p>
						<p class="news_date">2022/11/28</p>
					</a>
				</li>
				<li>
					<a href="###" class="news_item" title="《原神》「无相交响诗」活动小贴士 谐谑曲·束浪之池">
						<p class="news_title">《原神》「无相交响诗」活动小贴士 谐谑曲·束浪之池</p>
						<p class="news_date">2022/11/28</p>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

3.2、css

/* page2 :start*/
.news {
	display: flex;
	position: absolute;
	height: 910px;
	width: 100%;
	background-image: url("../img/bg2.jpg");
}

/* 标题 */
.news h3 {
	position: relative;
	font-size: 50px;
	color: aliceblue;
	font-weight: 400;
	text-align: center;
	margin: 183px auto 60px;
	height: 66px;
}
/* 标题前图 */
.news h3::before {
	content: '';
	position: absolute;
	top: 28px;
	left: -354px;
	background: url("../img/header_decoration.png");
	height: 14px;
	width: 385px;
}
/* 标题后图 */
.news h3::after {
	content: '';
	position: absolute;
	top: 36px;
	left: -255px;
	background: url("../img/header_decoration.png");
	height: 14px;
	width: 385px;
	transform: translate(calc(100% + 32px), -50%) rotateY(180deg); 		/* 将图片翻转为镜像 */
}


/* 新闻主体 */
.news_main {
	display: flex;
	position: absolute;
	justify-content: center;
	top: 110px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 400px;
}

/* 轮播图 :start*/
.carousel_map {
	width: 640px;
	height: 400px;
}

.slide {
	width: inherit;
	height: inherit;
	overflow: hidden;
	position: relative;
}

/* 鼠标放上去显示按钮 */
.slide:hover .labels {
	display: flex;
}

.slide:hover .list {
	animation: none;
}

.slide input {
	display: none;
}

/* 按钮位置 */
.labels {
	position: absolute;
	bottom: 0.5em;
	z-index: 1;
	width: inherit;
	justify-content: center;
	display: none;	/* 鼠标移开隐藏按钮 */
}

/* 按钮样式 */
.labels label {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	margin: 0 0.3rem;
	border: 0.1rem solid #fff;
	background-color: transparent;
	box-sizing: border-box;
	cursor: pointer;
}


/* 选择哪个按钮就有被点击的效果 */
input[id=pic1]:checked ~ .labels label[for=pic1],
input[id=pic2]:checked ~ .labels label[for=pic2],
input[id=pic3]:checked ~ .labels label[for=pic3],
input[id=pic4]:checked ~ .labels label[for=pic4] {
	background-color: #fff;
	border: 0.1rem solid #fff;
}
/* 按钮控件选择图片 */
input[id=pic1]:checked ~ .list {
	transform: translate(calc(0 * 640px));
}
input[id=pic2]:checked ~ .list {
	transform: translate(calc(-1 * 640px));
}	
input[id=pic3]:checked ~ .list {
	transform: translate(calc(-2 * 640px));
}
input[id=pic4]:checked ~ .list {
	transform: translate(calc(-3 * 640px));
}

.list {
	width: calc(5 * 640px);
	height: inherit;
	position: relative;
	
	/* 设置动画效果 */
	animation: move 15s ease 1s infinite;
}
/* 动画关键帧轮播 */
@keyframes move {
	0% {
		transform: translate(calc(0 * 640px));
	}
	25% {
		transform: translate(calc(-1 * 640px));
	}
	50% {
		transform: translate(calc(-2 * 640px));
	}
	75% {
		transform: translate(calc(-3 * 640px));
	}
	100% {
		transform: translate(calc(-4 * 640px));
	}
}

.item {
	width: 640px;
	height: 400px;
	box-sizing: border-box;
	float: left;
}

.item a {
	padding: 0;
	opacity: 1;
}
/* 轮播图 :end*/

/* 新闻内容 */
.news_content {
	width: 640px;
	height: 400px;
	background: rgba(17, 17, 17, 0.3);
}

.news_table_list {
	display: flex;
	position: relative;
	width: 592px;
	justify-content: flex-start;
	margin-left: 30px;
	margin-top: 10px;
	border-bottom: 3px solid rgba(255,255,255,0.1);
}

.news_table_list li {
	color: white;
	margin: 25px 20px 10px;
	font-size: 18px;
	cursor: pointer;
	position: relative;
}


.news_table_list li:active {
	color: #ffd49f;
}

.news_list {
	height: 260px;
	width: 592px;
	margin: 0 24px;
}

.news_item {
	display: flex;
	align-items: center;
	font-size: 16px;
	height: 50px;
	width: 100%;
	padding: 0;
	opacity: 1;
	color: white;
	border-bottom: 2px solid rgba(255,255,255,0.08);
}

.news_item:hover {
	background: rgba(80, 80, 80, 0.3);
}

.news_title {
	height: 20px;
	width: 480px;
	padding-left: 10px;
}

.news_date {
	height: 50px;
	font-size: 14px;
	line-height: 50px;
	opacity: 0.5;
}
/* 新闻内容 */
/* page2 end */

四、city code

4.1、html

<!-- 页面三 -->
<div class="city">
	<ul class="city_list">
		<!-- city1 -->
		<li class="city_list_item">
			<div class="city_bg1"></div>
			<a href="###">
				<p>蒙德城</p>
			</a>
		</li>
		
		<!-- city2 -->
		<li class="city_list_item">
			<div class="city_bg2"></div>
			<a href="###">
				<p>璃月港</p>
			</a>
		</li>
		
		<!-- city3 -->
		<li class="city_list_item">
			<div class="city_bg3"></div>
			<a href="###">
				<p>稻妻城</p>
			</a>
		</li>
		
		<!-- city4 -->
		<li class="city_list_item">
			<div class="city_bg4"></div>
			<a href="###">
				<p>须弥城</p>
			</a>
		</li>
		
		<!-- city-end -->
		<li class="city_list_item">
			<div class="city_end"></div>
			<a href="###">
				<p>敬请期待</p>
			</a>
		</li>
	</ul>
</div>

4.2、css

/* page3 :start*/
/* 城市内容 :start*/
.city {
	height: 1300px;
	width: 100%;
	display: block;
	position: absolute;
	top: calc(910px + 968px);
}

.city_list {
	height: 100%;
}
	
.city_list_item {
	position: relative;
	width: 100%;
	height: 260px;
}	

.city_list_item a{
	background: url("../img/city_dc.png") no-repeat center;
	position: absolute;
	opacity: 1;
	padding: 0;
	width: 100%;
	height: 260px;
}
	
.city_list_item p {
	position: relative;
	font-size: 36px;
	color: #fff;
	text-align: center;
	line-height: 260px;
}
	
.city_bg1 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/city1.jpg");
}

.city_bg2 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/city2.jpg");
}

.city_bg3 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/city3.jpg");
}

.city_bg4 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/city4.jpg");
}

.city_end {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/city_end.jpg");
}
/* 城市内容 :end */
/* page3 :end */
Fetters04
关注
  • 17
    点赞
  • 踩
  • 87
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
纯html+css静态网站
07-14
html+css做的一个静态的网站，该网站是模仿“惠州乐网科技”，只可用于学习，不得用于商业用途，谢谢
html+css的原神静态页面
10-03
此文件为html+css的简单原神静态页面适用于前端初学者，以及大学生。 可以通过此代码了解定位流思想，其中涵盖了标准层，浮动层以及定位层的布局方式，有助于帮助初学者理清代码中的思想
网页大作业仿《原神》官网 HTML+CSS
04-23
HTML小作业 这是一款国产游戏《原神》的介绍网站主要由“首页，宣传视频，照片墙，角色情报，玩家评论，pc端下载，关于，登录/注册”。首页用了弹性盒子，浮动布局，弹性布局并且超链接去除下划线等技术；宣传视频页面运用了滑动特效，视频盒子绝对定位，溢出隐藏，scale缩小等技术；照片墙用了固定定位，过渡效果var函数并且运用了伪类选择器来实现复选框默认被选中技术；角色情报对其中的文字介绍进行了绝对定位和溢出隐藏等；玩家评论正常流布局和溢出隐藏，用了js插入了背景音乐实现点击视口播放；pc端下载直接链接了官网下载超链接；关于页面用了iframe插入一首音乐并且@keyframe动画 注册/登录页面运用清除浮动和溢出隐藏等。 初次上传，如有错误，还希望大佬见谅指出，我来进行修改。
2024年前端最全原神—薄樱初绽时（html+css+js仿原神2，拿了offer还能接着面试吗
最新发布
2401_84447417的博客
05-13 945
函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
HTML+CSS+JS原神官网实现
05-11
原生js实现原神动态页面，基于HTML，CSS，JS的一些中级操作，可以熟悉语法加上为项目开发做一定的基础，熟悉语法等
自创简易原神网页，包含了部分源代码
07-09
源代码
原神游戏主题网页设计 html源码 大作业
m0_37916936的博客
04-23 317
dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。主要分为 首页、关于原神、精彩图集·、最新活动、联系我们。【html+css】游戏5页原神主题5页。网页比较简单，适合初学者 ,学生网页。用到的是flex弹性布局。
原 ！神静态网页布局详解，html+css布局实战，附详细代码
qq_60614034的博客
10-04 9685
国庆七天，悄悄练一手，回到学校耍耍酷，或者在女朋友面前露两手。让对象不仅爱原神，更爱你！同时附上详细代码以及图片素材。
各行业网站静态网页模板，纯静态页面网站案例，网站素材分享
04-01
很高兴为大家提供丰富的行业的网站模板、HTML5模板、Wordpress主题模板、CSS Menu等实用资源， 模板都是从国外大小网站收集而来，旨在为朋友们在工作或学习时提高效率、节省时间。 由于网站大部份是英文网站，有的朋友下了某些HTML模板不知道怎么修改，可以百度Dreamweaver网站制作
HTML5+CSS3实现小米官网（完整版）
m0_63512120的博客
03-10 8101
纯html+css实现的小米官网，文章结尾附有源代码和图片素材。希望能够帮助到大家！！！
36个精美完整网站网页完整源码HTML+CSS+JS
热门推荐
叶绿体不忘呼吸
07-13 3万+
如果有搭建网站的需要，可以考虑使用云产品，而云产品现在比较推荐腾讯的，感兴趣的可以看看，现在有很多优惠https://curl.qcloud.com/CURGxRiw微信公众号：创享日记 发送：36 获取全部完整源码（打开.html文件均即可用） 以下列举前9个效果图，源码详见微信公众号下载①效果图 ②效果图 ③效果图 ④效果图 ⑤效果图 ⑥效果图 ⑦效果图 ⑧效果图 ⑨效果图
企业网站纯静态页面
06-01
很漂亮的H5页面设计，包括源代码，很多项目都在用！
纯静态页面
07-28
一个纯html+css写的页面
简洁精美的企业单页门户网站（纯静态模板）
07-03
简洁精美的企业单页门户网站，html+css+js制作。虽然页面单一，但内容全面。适合企业宣传、招商、招聘
小米官网源代码
06-11
小米官网源代码
【html+css+jquery】仿原神静态官网
01-22
【html+css+jquery】仿原神静态官网，使用了HTML+css+js+jQuery：轮播图效果 回到顶部 下拉菜单 tab切换 登录 等等.....
web前端(html+css+js)简单的仿原神官网静态项目
05-29
仅实现了部分功能：轮播图，播放音乐，视频，返回首页等 演示视频：https://www.bilibili.com/video/BV1C5411m7rn?spm_id_from=333.999.0.0 阅读建议： HTML为主要结构,所有内容都是定义在html上的,css则负责对网页...
基于Html+css+js实现的静态购物网站
06-30
2.添加并设计网站导航栏(导航栏目内容和样式自定)，链接为空链接； 3.添加并设计商品轮播图，图片、位置、大小等自定义; 4.设计商品分类展示效果(样式自定义)，每件商品必须有：商品名称、图片、价格内容；商品数目...
HTML+CSS+JS实现原神官网静态页面代码
05-04
很遗憾，我无法提供完整的HTML CSS JS代码实现原神官网静态页面，因为这需要涉及到版权问题，同时原神官网的页面结构也非常复杂，需要大量的HTML和CSS技术。但是，我可以给您一些实现静态页面的一般步骤和技术： 1. 分析原神官网页面结构和布局，包括头部、导航栏、轮播图、内容区域等。 2. 使用HTML语言构建静态页面结构，可以使用语义化标签和CSS框架来加速开发。 3. 使用CSS样式表对页面进行美化和布局，包括字体、颜色、背景、边框等。 4. 使用JavaScript技术实现页面交互效果，如轮播图、下拉菜单、滚动效果等。 5. 最后，进行调试和优化，确保页面在不同浏览器和设备上都能正常显示和工作。 总之，实现静态页面需要掌握HTML、CSS、JavaScript等技术，还需要有良好的代码编写习惯和设计能力。如果您是初学者，可以从学习HTML和CSS基础开始，逐步学习JavaScript和框架库，才能实现更复杂的页面效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值