Javascript 如何在html css中使用页脚
我是HTML和CSS新手，所以我尝试用w3school创建我的网站。 我在动画中使用了一个div，但我有一个问题，当我想为页脚编写代码时，页脚会回到我的div的后面或左边 我的div代码有什么问题？我想问题是位置的问题，但我改变了位置，制造了一个新问题。 请帮帮我Javascript 如何在html css中使用页脚,javascript,html,css,Javascript,Html,Css,我是HTML和CSS新手，所以我尝试用w3school创建我的网站。 我在动画中使用了一个div，但我有一个问题，当我想为页脚编写代码时，页脚会回到我的div的后面或左边 我的div代码有什么问题？我想问题是位置的问题，但我改变了位置，制造了一个新问题。 请帮帮我 <?php include'connect.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="
<?php
include'connect.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>صفحه اصلی | زود پروژه</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function function_name() {
myFunction();
})
function d() {
var data = "";
$("p").each(function(){
data += $(this).text();
});
alert(data);
}
function hide() {
$('#contact').hide();
}
function myFunction() {
// Get the snackbar DIV
var x = document.getElementById("snackbar");
// Add the "show" class to DIV
x.className = "show";
// After 3 seconds, remove the show class from DIV
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
<style type="text/css">
@font-face {
font-family: "CustomFont";
src: url("iranian.ttf");
}
.parallax {
/* The image used */
background-image: url("http://www.themesindustry.com/html/xeone/images/arrow-slide1.jpg");
position: relative;
/* Set a specific height */
height: 600px;
text-align: center;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
.flip-card {
background-color: transparent;
width: 300px;
float: right;
margin: 2px 30px 50px 20px;
height: 155px;
border: 3px #000;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.4s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front
{
background-color: #643094;
color: #ffffff;
}
/* Style the back side */
.flip-card-back
{
background-color: #00bcd4;
font-size: 12px;
color: white;
transform: rotateY(180deg);
}
#snackbar {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
background-color: #840DF0; /* Black background color */
color: #fff; /* White text color */
text-align: center; /* Centered text */
font-size: 22px;
border-radius: 2px; /* Rounded borders */
padding: 16px; /* Padding */
position: fixed; /* Sit on top of the screen */
z-index: 1; /* Add a z-index if needed */
left: 50%; /* Center the snackbar */
bottom: 30px; /* 30px from the bottom */
}
/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
.topnav {
overflow: hidden;
background-color: #1a789a;
padding-right: 20px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the "active" element to highlight the current page */
.topnav a.active {
background-color: #ff8989;
color: white;
}
/* Style the search box inside the navigation bar */
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
font-size: 17px;
}
#psen{
font-size: 14px;
font-weight: bolder;
}
#pbio{
font-size: 15px;
font-weight: bold;
padding:1px;
}
.contact{
font-size: 20px;
}
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: right;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
.caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #423e3e;
color: #19d3de;
padding: 15px;
font-size: 45px;
letter-spacing: 7px;
}
.caption2 {
position: absolute;
left: 0;
top: 55%;
width: 100%;
text-align: center;
color: #000;
}
.caption2 span.border2 {
background-color: #19d3de;
color: #000;
padding: 15px;
border-radius: 30px;
font-size: 20px;
}
footer {
position:fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="topnav" style="font-weight: bold;">
<a class="active" href="#home">صفحه اصلی</a>
<a href="#about">حساب من</a>
<a href="#contact" id="contact">لیست پروژه ها</a>
</div>
<div class="parallax">
<div class="bgimg-1">
<div class="caption">
<span class="border">زود پروژه</span>
</div>
</div>
<div class="bgimg-1">
<div class="caption2">
<span class="border2">آنلاین پروژه بگیرید یا فریلنسر استخدام کنید</span>
</div>
</div>
</div>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<div id="divv" onclick="d()" class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<p style="font-size:20px;padding-top:20px">MyWork</p>
<p style="font-size:15px;padding-top:10px">MyWork</p>
</div>
<div class="flip-card-back">
<h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1>
<p style="font-size:10px;" id="pbio">'myBio'</p>
<p id="psen">سن : 18'</p>
</div>
</div>
</div></a>
<!-- The actual snackbar -->
<div id="snackbar"><a href="https://t.me/zoodproject" style="text-decoration: none; color: #fff;" target="_blank">به زودپروژه خوش آمدید</a></div>
<footer>sdsd
</footer>
</body>
</html>
صفحه اصلی | زود پروژه
$（文档）.ready（函数名（）{
myFunction（）；
})
函数d（）{
var数据=”；
$（“p”）。每个（函数（）{
数据+=$（this.text（）；
});
警报（数据）；
}
函数hide（）{
$（“#联系人”）.hide（）；
}
函数myFunction（）{
//得到snackbar DIV
var x=document.getElementById（“snackbar”）；
//将“show”类添加到DIV
x、 className=“show”；
//3秒钟后，从DIV中删除show类
setTimeout（function（）{x.className=x.className.replace（“show”，”；}，3000）；
}
@字体{
字体系列：“自定义字体”；
src:url（“iranian.ttf”）；
}
.视差{
/*使用的图像*/
背景图像：url（“http://www.themesindustry.com/html/xeone/images/arrow-slide1.jpg");
位置：相对位置；
/*设定一个特定的高度*/
高度：600px；
文本对齐：居中；
/*创建视差滚动效果*/
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
@仅介质屏幕和（最大设备宽度：1366px）{
.视差{
背景附件：滚动条；
}
}
.翻盖卡片{
背景色：透明；
宽度：300px；
浮动：对；
保证金：2px30px 50px 20px；
高度：155px；
边界：3px#000；
}
/*需要使用该容器来定位正面和背面*/
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.4s；
变换样式：保留-3d；
}
/*在翻转框容器上移动鼠标时进行水平翻转*/
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}
/*定位前后侧*/
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
/*设置正面样式（如果缺少图像，则后退）*/
.翻转卡正面
{
背景色：#643094；
颜色：#ffffff；
}
/*背面样式*/
.把卡片翻回去
{
背景色：#00bcd4；
字体大小：12px；
颜色：白色；
变换：旋转（180度）；
}
#小吃条{
可见性：隐藏；/*默认情况下隐藏。单击后可见*/
最小宽度：250px；/*设置默认最小宽度*/
左边距：-125px；/*最小宽度值除以2*/
背景色：#840DF0；/*黑色背景色*/
颜色：#fff；/*白色文本颜色*/
文本对齐：居中；/*居中文本*/
字体大小：22px；
边界半径：2px；/*圆形边界*/
填充：16px；/*填充*/
位置：固定；/*位于屏幕顶部*/
z索引：1；/*如果需要，添加一个z索引*/
左：50%；/*将snackbar居中*/
底部：30px；/*30px距离底部*/
}
/*单击按钮时显示snackbar（使用JavaScript添加的类）*/
#snackbar.show{
可见性：可见；/*显示snackbar*/
/*添加动画：花0.5秒淡入和淡出snackbar。
但是，将淡出过程延迟2.5秒*/
-webkit动画：fadein 0.5s，fadeout 0.5s 2.5s；
动画：淡出0.5s，淡出0.5s，淡出2.5s；
}
/*淡入淡出snackbar的动画*/
@-webkit关键帧fadein{
从{底部：0；不透明度：0；}
至{底部：30px；不透明度：1；}
}
@关键帧淡入淡出{
从{底部：0；不透明度：0；}
至{底部：30px；不透明度：1；}
}
@-webkit关键帧淡出{
从{底部：30px；不透明度：1；}
到{底部：0；不透明度：0；}
}
@关键帧淡出{
从{底部：30px；不透明度：1；}
到{底部：0；不透明度：0；}
}
托普纳夫先生{
溢出：隐藏；
背景色：#1a789a；
右边填充：20px；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：对；
显示：块；
颜色：#fff；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*设置“活动”元素的样式以突出显示当前页面*/
.topnav a.active{
背景色：#ff8989；
颜色：白色；
}
/*在导航栏中设置搜索框的样式*/
.topnav输入[类型=文本]{
浮动：对；
填充：6px；
边界：无；
字号：17px；
}
#普森{
字体大小：14px；
字体大小：粗体；
}
#pbio{
字体大小：15px；
字体大小：粗体；
填充：1px；
}
.联系方式{
字体大小：20px；
}
/*当屏幕宽度小于600px时，垂直堆叠链接和搜索字段，而不是水平堆叠*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a、.topnav输入[类型=文本]{
浮动：无；
显示：块；
文本对齐：右对齐；
宽度：100%；
保证金：0；
填充：14px；
}
.topnav输入[类型=文本]{
边框：1px实心#ccc；
}
}
.标题{
位置：绝对位置；
左：0；
最高：40%；
宽度：100%；
文本对齐：居中；
颜色：#000；
}
.标题span.边框{
背景色：#423e3e；
颜色：#19d3de；
填充：15px；
字体大小：45px；
字母间距：7px；
}
.标题2{
位置：绝对位置；
左：0；
最高：55%；
宽度：100%；
文本对齐：居中；
颜色：#000；
}
.caption2 span.2{
背景色：#19d3de；
颜色：#000；
填充：15px；
边界半径：30px；
字体大小：20px；
}
页脚{
位置：固定；
底部：0；
}
زود پروژه
آنلاین پروژه بگیرید یا فریلنسر استخدام کنید
我的作品
我的作品
我的作品
“myBio”
第18页
<div id="container">
<!-- All your flip-cards in here -->
</div>
#container::after {
content: "";
clear: both;
display: table;
}
<footer id="footer">sdsd</footer>
#footer {
text-align: center;
}