HTML5+CSS3网页设计视频教程【零基础入门】

最新推荐文章于 2024-05-21 14:09:22 发布

STU网页设计与制作

最新推荐文章于 2024-05-21 14:09:22 发布

阅读量403

点赞数

分类专栏：网页建设文章标签： html5 css3 前端 css

本文链接：https://blog.csdn.net/qq_38517811/article/details/127100610

版权

网页建设专栏收录该内容

1136 篇文章 37 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

B42JP 狐妖小红娘(6页)html+css+js

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE HTML>
<html>

<head>
  <title>首页</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<!--bootstrap-->
		<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<!--coustom css-->
		<link href="css/style.css" rel="stylesheet" type="text/css"/>
		<!--script-->
		<script src="js/jquery-2.1.4.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		
	</head>
	<body>
		<div class="banner-background" id="to-top">
			<div class="container">
				<div class="nav-back">
				
					<div class="navigation">
						<nav class="navbar navbar-default">
							
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								<ul class="nav navbar-nav">
								<li><a href="index.html"  class="active">首页</a></li>
									<li><a href="about.html">分篇剧情</a></li>
									<li><a href="juese.html">动漫角色</a></li>
									<li><a href="jieshuo.html" >用语解说</a></li>
									<li><a href="news.html">相关新闻</a></li>
									<li><a href="contact.html">给我留言</a></li>
								</ul>
							</div>
						</nav>
						<div class="clearfix"></div>
					</div>
					<div class="logo">
						<img src="images/logo.png" width="150"/>
					</div>
					
					<div class="banner-slider">
						<div id="myCarousel" class="carousel slide" data-ride="carousel">
						  <!-- Indicators -->
						  <ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1"></li>
							<li data-target="#myCarousel" data-slide-to="2"></li>
						  </ol>
						  <!-- Wrapper for slides -->
						  <div class="carousel-inner" role="listbox">
							<div class="item active">
							  <img src="./images/1.jpg" alt="dog" class="img-responsive">
							</div>
							<div class="item">
							  <img src="./images/2.jpg" alt="cat" class="img-responsive">
							</div>
							<div class="item">
							  <img src="./images/4.jpg" alt="wolfdog" class="img-responsive">
							</div>
						  </div>
						  <!-- Controls -->
						  <a class="carousel-control left" href="#myCarousel" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						  </a>
						  <a class="carousel-control right" href="#myCarousel" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						  </a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--header-ends-->
        
		<!--content-->
		<div class="our-products">
			<div class="container">
				<div class="products-gallery">
					<h2>动漫人物</h2>
					<div class="col-md-3 arr">
						<div class="bg">
						  <img src="./images/b.jpg" alt="pet" class="img-responsive">
						  <span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
						  <div class="caption">
							<h3>白月初</h3>
							<p>财迷，吃货。<br/>史上最厉害的无节操道士。<br/>涂山苏苏的未婚夫。</p>
							<p><a href="#" class="btn btn-danger" role="button">More</a></p>
						</div>
						</div>
					</div>
					<div class="col-md-3 arr">
						<div class="bg">
						  <img src="./images/c.jpg" alt="pet" class="img-responsive">
						  <span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
						  <div class="caption">
							<h3>涂山苏苏</h3>
							<p>涂山姐妹的三当家。<br/>
天然呆妖力弱，<br/>目标是成为优秀的狐妖。</p>
							<p><a href="#" class="btn btn-danger" role="button">More</a> </p>
						  </div>
						</div>
					</div>
					<div class="col-md-3 arr">
						<div class="bg">
						  <img src="./images/d.jpg" alt="pet" class="img-responsive">
						  <span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
						  <div class="caption">
							<h3>涂山雅雅</h3>
							<p>涂山姐妹的大当家，<br/>如今的涂山一族最强者。<br/>
擅长的技能是冰系法术。</p>
							<p><a href="#" class="btn btn-danger" role="button">More</a></p>
						  </div>
						</div>
					</div>
					<div class="col-md-3 arr">
						<div class="bg">
						  <img src="./images/e.jpg" alt="pet" class="img-responsive">
						  <span class="glyphicon glyphicon-heart pst" aria-hidden="true"></span>
						  <div class="caption">
							<h3>涂山容容</h3>
							<p>涂山姐妹二当家。<br/>
拥有涂山一族最厉害的头脑。<br/>
负责管理涂山的所有产业。 </p>
							<p><a href="#" class="btn btn-danger" role="button">More</a></p>
						  </div>
						 </div>
					</div>
					<div class="clearfix"></div>
				</div>
					
			</div>
		</div>
		<!--content-ends-->
	
		<!--footer-->
			<div class="footer">
				
						<p>Copyright &copy; All rights reserved.</p>
			</div>
		
	</body>
</html>

🏠CSS样式代码


.navbar-default .navbar-nav>li>a:focus{
	color: #fff;
	background-color: #FF6666;
}

.logo {
	text-align: center;
	margin:0;
	padding:16px 0px 26px;
}
.logo h1 {
	margin: 0;
}
.logo a {
	font-family: 'Quicksand', sans-serif;
	font-weight: bold;
	font-size: 35px;
	text-decoration: none;
	color: #000;
}
.logo a span.hlf{
	text-decoration: none;
	color: #FF6666;
}

.carousel-indicators .active {
	background-color: #FF6666;
}
.carousel-indicators li {
	border: 1px solid #444343;
 }
 /*--header-nav--*/
 
 /*--our-products--*/
 .our-products {
	background-color: #fff;
}
.products-gallery {
	margin: 0em 0em 5em;
}
.products-gallery h2 {
	text-align: center;
	font-weight: 400;
	font-size: 3em;
	margin: 0px;
	color: #FDA2A2;
	padding: 1em 0em;
	font-family: 'Quicksand', sans-serif;
}
 .caption {
	text-align: center;
	padding: 50px 40px 0px;
}
.arr:hover{
  padding: 0;
  transform: scale(1.02,1.02);
  transition: 0.5s all ease-in-out;
  cursor:pointer;
}
.arr {
	padding: 0;
}
.bg {
	background-color: #f9e4ca;
	margin: 0px 8px;
	border-radius: 5px;
	position: relative;
}
.arr img{
	width:100%;
	border-bottom: 6px solid #E55151;
	border-radius: 5px 5px 0px 0px;
}

.about-pg{
	border-top: 3px solid rgb(255, 192, 203);
	padding: 3em 0em 3em;
}
.about-pg>h3{
	font-size: 3em;
	font-weight: 400;
	text-align: center;
	color: #FDA2A2;
	margin: 0px 0px 45px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
.about-list{padding:0 40px;margin-top:20px;}
.about-list img{width:160px;float:left;margin-right:30px;margin-bottom:20px;}
.about-list p{line-height:25px;}
.l{border-bottom:1px solid #ffc0cb;box-shadow: 1px 1px 10px #ffc0cb;}	
/*--about--*/

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

STU网页设计与制作

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5+CSS3网页设计视频教程【零基础入门】

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫