引言
此文为html+css+JavaScript的项目实战，是全栈开发的前端基础，这项基础会持续到ssm框架后进行拓展至mpvue，vue3，uniapp，React.
下面主要实现为使网页更加美观我们先进行两个基础实战，渐变背景和轮播图，最后进行一个项目实战做一个简单的前端网站
实战一：渐变背景
这个为css文件，可以加入任意css文件中设置渐变背景，颜色可以进行更改，下面有代码详解，帮助二次开发
*{ margin: 0; padding: 0; } body{ font-family: "monotype corsiva"; background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c); background-size: 400%; animation:jb 15s infinite; } .text{ color: white; text-align: center; text-transform: uppercase; margin: 300px 0; font-size: 22px; } @keyframes jb{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; }| }
代码分析：
这是一个CSS样式代码片段，它描述了一个网页的背景渐变色、字体样式、文字颜色和动画效果。具体解释如下：
第一行 *{ margin: 0; padding: 0; } 表示将所有HTML标签的外边距和内边距设置为0，这是初始化页面样式的常见做法。
body{ ... } 表示组合选择器，下面的代码块描述了 body 标签的样式，其中：
font-family: "monotype corsiva"; 表示使用"monotype corsiva"字体，用于设置页面中所有字体的样式。
background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c); 表示使用 linear-gradient 属性创建一个从左上角到右下角的渐变背景色，并设置了四个颜色值，参与渐变的颜色范围。颜色值以逗号分隔。
background-size: 400%; 表示设置背景图片大小为父元素的400%。
animation:jb 15s infinite; 表示将动画效果应用于 jb 关键帧，动画播放时间为15秒，重复播放无限次。
.text{ ... } 表示类选择器，下面的代码块描述了 .text 类的样式，其中：
color: white; 表示文字颜色为白色。
text-align: center; 表示文字居中对齐。
text-transform: uppercase; 表示将文字转换为全大写。
margin: 300px 0; 表示文字的上下边距为300像素。
font-size: 22px; 表示文字大小为22像素。
@keyframes jb{ ... } 表示定义一个名为 jb 的关键帧动画，其中：
0%{ ... } 表示动画开始时的状态。
50%{ ... } 表示动画播放到一半时的状态。
100%{ ... } 表示动画结束时的状态。
background-position: 0% 50%; 表示背景图片位置，第一个值表示水平方向位置，第二个值表示垂直方向位置。在这个动画中，背景图片的位置会从左到右不断变化，最终回到初始位置。
资源下载连接地址：链接: link
实战二：轮播图
轮播图为小项目，可以放到页面顶页或index页面进行二次开发，下面介绍两种轮播图，下面为css文件
轮播图（1）
* { /* 初始化 取消页面的内外边距 */ padding: 0; margin: 0; /* 盒子模型 */ box-sizing: border-box; } body { /* 弹性布局 让页面元素垂直+水平居中 */ display: flex; justify-content: center; align-items: center; /* 让页面始终占屏幕总高 */ height: 100vh; } .swiper { /* 相对定位 */ position: relative; width: 857px; height: 441px; overflow: hidden; } input { display: none; } label { position: absolute; bottom: 30px; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; background-color: #fff; } label[for="btn1"] { left: 35%; } label[for="btn2"] { left: 40%; } label[for="btn3"] { left: 45%; } label[for="btn4"] { left: 50%; } label[for="btn5"] { left: 55%; } label[for="btn6"] { left: 60%; } label[for="btn7"] { left: 65%; } ul { /* 让li水平排列 */ display: flex; /* 自动计算宽度 */ width: calc(857px * 7); /* 过渡时间 */ transition: all 0.5s; } li { list-style-type: none; } #btn1:checked ~ ul { margin-left: 0; } #btn2:checked ~ ul { margin-left: -857px; } #btn3:checked ~ ul { margin-left: calc(-857px * 2); } #btn4:checked ~ ul { margin-left: calc(-857px * 3); } #btn5:checked ~ ul { margin-left: calc(-857px * 4); } #btn6:checked ~ ul { margin-left: calc(-857px * 5); } #btn7:checked ~ ul { margin-left: calc(-857px * 6); } #btn1:checked ~ label[for="btn1"] { background-color: #f00; } #btn2:checked ~ label[for="btn2"] { background-color: #f00; } #btn3:checked ~ label[for="btn3"] { background-color: #f00; } #btn4:checked ~ label[for="btn4"] { background-color: #f00; } #btn5:checked ~ label[for="btn5"] { background-color: #f00; } #btn6:checked ~ label[for="btn6"] { background-color: #f00; } #btn7:checked ~ label[for="btn7"] { background-color: #f00; }
该轮播图为自己点击切换，设置好图片信息即可
代码详解：
这段代码是实现一种轮播图效果的CSS样式代码，具体实现过程如下：
给所有元素的内外边距设置为0，盒子模型设置为border-box，保证元素的宽高不会因为边框和内边距而发生变化。
给body元素设置display属性为flex，通过justify-content和align-items属性实现页面元素的垂直和水平居中，同时通过height属性让页面始终占据屏幕总高度。
给轮播图.swiper元素设置position属性为relative，为子元素提供定位的参考点，同时设置宽度和高度，overflow属性为hidden，让超出部分隐藏。
给input元素设置display属性为none，让其在页面中不可见。
给label元素设置position属性为absolute，bottom属性为30px，使其在轮播图的底部，并通过left属性设置每个按钮的位置。
给ul元素设置display属性为flex，让li元素水平排列，width属性设置为7个轮播图的总宽度，transition属性设置过渡时间。
给li元素设置list-style-type属性为none，去掉li元素的默认样式。
对7个轮播图分别设置:checked伪类，每个伪类对应一个label元素和ul元素的样式，通过margin-left属性实现轮播图的切换，同时通过background-color属性控制哪个按钮处于选中状态。
这段代码实现的轮播图效果是通过7个单选框和7个label元素控制图片的切换，通过CSS伪类:checked控制轮播图的位置，同时通过label元素的背景色标示哪张图片处于选中状态。
资源下载地址：链接: link
轮播图（2）
改轮播图为自动轮播，可以通过鼠标控制轮播图的暂停与开始或者跳转，只需设置一个 .js 文件即可，下面为css文件
*{ margin: 0; padding:0; } body{ position: absolute; width: 100%; height: 100%; perspective:2000px; } .back{ position: absolute; width: 100%; height: 100%; top: 0; } h1{ position: relative; top:100px; color: white; text-align: center; font-family: "微软雅黑"; font-size: 50px; z-index: 999; } .section{ position:absolute; width: 300px; height: 300px; transform-style: preserve-3d; margin: 200px auto; top:10%; left: 40%; animation: rotate 5s linear infinite; z-index: 999; } .section div{ position: absolute; width: 300px; height: 300px; border-radius: 30px; font-family: "微软雅黑"; font-size: 50px; display: flex; justify-content: center; align-items: center; } .section:hover{ animation-play-state: paused; } @keyframes rotate{ 0%{ transform: rotateY(0); } 100%{ transform: rotateY(360deg); } } .section div:nth-child(1){ transform: rotateY(60deg) translateZ(300px); background:url(../img/be297bc5ly1gjlx659lprj20jg0jg18a.jpg) no-repeat; } .section div:nth-child(2){ transform: rotateY(120deg) translateZ(300px); background:url(../img/be297bc5ly1gkl0cpboyhj20jg0jg195.jpg) no-repeat; } .section div:nth-child(3){ transform: rotateY(180deg) translateZ(300px); background: white; background: url(../img/be297bc5ly1gkl0cpsrixj20jg0jgnbw.jpg) no-repeat; } .section div:nth-child(4){ transform: rotateY(240deg) translateZ(300px); background: url(../img/be297bc5ly1gkl0cqpmuvj20jg0jgnbs.jpg) no-repeat; } .section div:nth-child(5){ transform: rotateY(300deg) translateZ(300px); background: url(../img/be297bc5ly1gkl0cqbgghj20jg0jg7jz.jpg) no-repeat; } .section div:nth-child(6){ transform: rotateY(360deg) translateZ(300px); background: url(../img/be297bc5ly1gkl0cr6d1ij20jg0jg4b4.jpg) no-repeat; }
代码解释
这是一个CSS代码，用于创建一个带有不同图像的三维旋转立方体。该立方体位于屏幕中心，并无限旋转。当鼠标悬停在其上方时，动画会暂停。 以下是代码功能的详细解释：
将页面上所有元素的边距和内边距设置为0。
将透视设置为2000px，以创建三维效果。
定义一个覆盖整个屏幕的背景元素。
在页面上方定义一个带有文本的h1元素。
定义一个section元素，其中包含六个div元素，每个表示立方体的一个面。
将transform-style设置为preserve-3d，以维持3D效果。
对section元素应用rotate动画，以旋转立方体。
对每个div元素定义一个背景图像，并应用transform来使用rotateY和translateZ属性将其定位在立方体面上。
当鼠标悬停在section元素上方时，动画暂停。
你可以使用此代码创建带有自己的图像的旋转立方体，或修改它以适应你的需求。具体成果：
资源下载地址：链接: link
实战三：简单的综合应用
插画展示平台，使用了html+css+JavaScript综合应用以及表单的使用
主要代码为
html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/hldt.css" /> <script> window.onload=function(){ var oul=document.getElementById("ul1"); window.setInterval(function(){ oul.appendChild(oul.children[0]); },800) } </script> </head> <body> <header class="header"> <div class="head"> <img src="img/logo.png" class="logo"/> <strong class="elegant">插画</strong> <div class="btn"> <div class="yy"><a href="index.html">网站首页</a></div> <div class="yyx"><a href="#">画廊动态</a></div> <div class="yy"><a href="hlzs.html">画廊展示</a></div> <div class="yy"><a href="lxfs.html">联系方式</a></div> </div> <div class="by"> <div class="banner"> <span class="text1">水彩是一种清淡，优美的绘画材料，色彩纯度偏低，绘画效果多变，具有一定随机性。<br /> 调色方便，目前越来越受到广大艺术家欢迎。<br /> 在Elegant里,水彩是我们的主要创作材料。让我们通过它，带给你更加新奇的视觉享受。 </span> </div> <div class="lst"> <ul class="lst-wrap" id="ul1"> <li href="#"><img src="img/11.jpg" class="photo"></li> <li href="#"><img src="img/33.jpg" class="photo"></li> <li href="#"><img src="img/22.jpg" class="photo"></li> </ul> </div> </div> <div class="bottom"> <span> 雪碧有白泡泡<br /> qq <br /> 联系方式 </span> </div> </div> </header> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/hlzs.css" /> </head> <body> <header class="header"> <div class="head"> <img src="img/logo.png" class="logo"/> <strong class="elegant">插画</strong> <div class="btn"> <div class="yy"><a href="index.html">网站首页</a></div> <div class="yy"><a href="hldt.html">画廊动态</a></div> <div class="yyx"><a href="#">画廊展示</a></div> <div class="yy"><a href="lxfs.html">联系方式</a></div> </div> <div class="by"> <div class="lst"> <ul class="lst-wrap"> <li><a href="#"><img src="img/1.jpg"</a></li> <li><a href="#"><img src="img/2.jpg"</a></li> <li><a href="#"><img src="img/3.jpg"</a></li> <li><a href="#"><img src="img/4.jpg"</a></li> </ul> </div> </div> <div class="bottom"> <span> 雪碧有白泡泡<br /> qq<br /> 联系方式 </span> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <header class="header"> <div class="head"> <img src="img/logo.png" class="logo"/> <strong class="elegant">插画</strong> <div class="btn"> <div class="yyx"><a href="#">网站首页</a></div> <div class="yy"><a href="hldt.html">画廊动态</a></div> <div class="yy"><a href="hlzs.html">画廊展示</a></div> <div class="yy"><a href="lxfs.html">联系方式</a></div> </div> <div class="by"> <div class="banner"> <span class="text1">最具活力的画坛信-息集散地 </span> <span class="text2">最权威的造型艺术展示平台 </span> </div> <strong><span class="zxdt">最新动态</span></strong> <div class="xw"> <strong><span>—插画 </span></strong><br /> <strong><span>插画 </span></strong><br /> <strong><span>插画 </span></strong> </div> </div> <div class="bottom"> <span> 雪碧有白泡泡<br /> qq <br /> 联系方式 </span> </div> </div> </header> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/lxfs.css" /> <script> window.onload=function{ } </script> </head> <body> <header class="header"> <div class="head"> <img src="img/logo.png" class="logo"/> <strong class="elegant">插画</strong> <div class="btn"> <div class="yy"><a href="index.html">网站首页</a></div> <div class="yy"><a href="hldt.html">画廊动态</a></div> <div class="yy"><a href="hlzs.html">画廊展示</a></div> <div class="yyx"><a href="#">联系方式</a></div> </div> <div class="by"> <form class="form1"> <p>姓名:<input type="text" name="username" size="30"/></p> <p>职业:<input type="text" name="zhiye" size="30"/></p> <p> 联系目的:<input type="radio" name="radio1" />加入我们 <input type="radio" name="radio1" />购买插画 <input type="radio" name="radio1" />展示插画 <input type="radio" name="radio1" />其他 </p> <p>联系电话:<input type="text" name="lxdh" size="25"/></p> <span class="zj">注解:</span> <input type="text" class="txt"></input> </span> </form> </div> <div class="bottom"> <span> 雪碧有白泡泡<br /> qq <br /> 联系方式 </span> </div> </div> qq </header> </body> </html>
具体成果展示
资源下载地址：链接: link
