文章目录
- 引言
- 实战一：渐变背景
- 实战二：轮播图
- 轮播图（1）
- 轮播图（2）
- 实战三：简单的综合应用
引言
此文为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
