您的位置：首页 > Web前端 > JavaScript

初次接触HTML+CSS+JS遇到的问题

2017-04-16 13:39 489 查看

自从在SAE上创建了个应用后，只是用来实现网页控制LCD显示动态网页控制lcd显示太浪费也太简陋了，自然更多的功能会在后面实现，但实在太low了（连主页都没有！），为此从未接触过web前端的我开始摸索着学习web前端。

创建个简单的主页

从网上不明所以的扒了个HTML下来（这时候不知道有css这东西，具体来说是不知道它和html还有js三者的关系，后来了解到形象的比喻是:

html是骨架，CSS是肌肉，JS肌肤毛发等等

由于这个html文件中css是内置的，所以不用考虑css文件的位置问题，具体后面详细说。

简单的修改了些我知道的参数后，页面大概是这个样子

这是一个简单的图片轮播（不知道怎么说，专业术语是怎样？！！）的界面，根据实际所需，弄了四个，点击下边的导航可划页，并且把之前的那个lcd控制页面绑定到“实验内容”按钮上（其实这里面用到的href=”textInput”到底是什么，应该是跳转页面用的吧）

下面是源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<style type="text/css">
/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
background: red;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;

display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
align-content: center;

-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* each slide background color */
.slide1 {
background: #000000;
left: 0;
}
.slide2 {
background: #487d8d;
left: 100%
}
.slide3 {
background: #7d7d8d;
left: 200%
}
.slide4 {
background: #9f7d8d;
left: 300%;
}
.slider > div {
text-align: center;
}
/* Slider inner content */
.slider h2 {
color: #FFF;
font-weight: 900;
text-transform: uppercase;
font-size: 95px;
line-height: 120%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider .button {
color: #FFF;
padding: 5px 50px;
background: rgba(255,255,255,0.3);
text-decoration: none;
opacity: 0;
font-size: 15px;
line-height: 30px;
display: inline-block;
-webkit-transform: translateX(-500px);
transform: translateX(-500px);
}
.slider h2, .slider .button {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
/* Next and previous button */
.control {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 55;
}
.control label {
z-index: 0;
margin: 10px;
display: none;
text-align: center;
line-height: 50px;
font-size: 50px;
color: #FFF;
cursor: pointer;
opacity: 0.2;
}
.control label:hover {
opacity: 0.5;
}
.next {
right: 1%;
}
.previous {
left: 1%;
}

/* Slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255,255,255,0.2);
margin: 0 2px;
border: solid 1px rgba(255,255,255,0.4);
cursor: pointer;
}

/* Slider control active css */
.slide-radio1:checked ~ .next .numb2,
.slide-radio2:checked ~ .next .numb3,
.slide-radio3:checked ~ .next .numb4,
.slide-radio2:checked ~ .previous .numb1,
.slide-radio3:checked ~ .previous .numb2,
.slide-radio4:checked ~ .previous .numb3 {
display: block;
z-index: 1
}
/* Slider pagination active css */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
background: rgba(255,255,255,1)
}

/* css for sliding  effect when you click on control button*/
.slide-radio1:checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}

.slide-radio1:checked ~ .slide1 h2,
.slide-radio2:checked ~ .slide2 h2,
.slide-radio3:checked ~ .slide3 h2,
.slide-radio4:checked ~ .slide4 h2,
.slide-radio1:checked ~ .slide1 .button,
.slide-radio2:checked ~ .slide2 .button,
.slide-radio3:checked ~ .slide3 .button,
.slide-radio4:checked ~ .slide4 .button {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}

@media only screen and (max-width: 767px) {
.slider h2 {
font-size: 20px;
}
.slider > div {
padding: 0 2%
}
.control label {
font-size: 35px;
}
.slider .button {
padding: 0 30px;
}
}
</style>
</head>
<body>
<div class="css-slider-wrapper">

<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">

<div class="slider-pagination">

<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>

<div class="next control">
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-right"></i></label>
</div>
<div class="previous control">
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-left"></i></label>
</div>

<div class="slider slide1">
<div>
<h2>The experiment content</h2>
<a href="textInput" class="button">实验内容</a>

</div>
</div>
<div class="slider slide2">
<div>
<h2>GROUP MEMBERS</h2>
<a href="members" class="button">组员详情</a>
</div>
</div>
<div class="slider slide3">
<div>
<h2><img src="http://17148203126-pic.stor.sinaapp.com/qrcode.png" width=180 height=180/><br></h2>
<h2>JOIN US</h2>
<a href="#" class="button">加入我们</a>
</div>
</div>
<div class="slider slide4">
<div>
<h2>MORE</h2>
<a href="#" class="button">更多功能正在开发中...</a>
</div>
</div>
</div>
</body>
</html>

写个注册登入界面

主页有了，功能页有了，主页上按钮跳转功能页有了，下面打算搞个注册登入界面，注册了的用户登入成功后才可前往相应功能页实现相关功能，这个貌似比较难，还要连接数据库。（而后来事实证明真是有够折腾，也才让我更深入的体会和了解了CSS和JS）

在codepen-Sign-Up/Login Form 扒了相关网页简单的“修改”汉化了下，本地运行了下，效果大概是这个样子

接下来问题就来了，当我svn commit到sae上后，打开是这个样子的：

这….这就比较尴尬了…

也是在这个时候我开始明白了CSS存在的意义，sae上应该是没调用css，于是我看源码的css的地址调用：

1是绝对地址调用，2是相对地址调用

可是我其他的文件像css，js什么的都是按一样的位置上传的啊，按道理不会有问题啊（相对地址并没有改变），后来看网上说用绝对地址，于是把css和js文件上传到sae的storage上再用绝对地址调用。可是，免费的storage每天访问次数是有限的，这样没访问一次就得调用一次？于是乎，我看到了sae上之前其他网页创的static文件夹，里面是存了一个css文件的，后来才知道要把css、js包括图片这些都存放在static文件夹下。

下面是代码：

html

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<link rel="stylesheet" href="static/sty.css">

</head>

<body>
<form action="signup.php" method="post">
<div class="form">

<ul class="tab-group">
<li class="tab active"><a href="#signup">注册/Sign Up</a></li>
<li class="tab"><a href="#login">登入/Log In</a></li>
</ul>

<div class="tab-content">
<div id="signup">
<h1>免费注册/Sign Up for Free</h1>

<form action="/" method="post">

<div class="top-row">
<div class="field-wrap">
<label>
名/First Name<span class="req">*</span>
</label>
<input type="text" name="firstName" required autocomplete="off" />
</div>

<div class="field-wrap">
<label>
姓/Last Name<span class="req">*</span>
</label>
<input type="text" name="lastName" required autocomplete="off"/>
</div>
</div>

<div class="field-wrap">
<label>
邮箱/Email Address<span class="req">*</span>
</label>
<input type="email" name="email" required autocomplete="off"/>
</div>

<div class="field-wrap">
<label>
设置密码/Set A Password<span class="req">*</span>
</label>
<input type="password" name="password" required autocomplete="off"/>
</div>

<button type="submit" name="submit" class="button button-block"/>注册/Get Started</button>

</form>

</div>

<div id="login">
<h1>欢迎回来！/Welcome Back!</h1>

<form action="/" method="post">

<div class="field-wrap">
<label>
邮箱/Email Address<span class="req">*</span>
</label>
<input type="email" name="loginEmail" required autocomplete="off"/>
</div>

<div class="field-wrap">
<label>
密码/Password<span class="req">*</span>
</label>
<input type="password" name="loginPassword" "required autocomplete="off"/>
</div>

<p class="forgot"><a href="#">忘记密码？/Forgot Password?</a></p>

<button class="button button-block" name="loginButton"/>登入/Log In</button>

</form>

</div>

</div><!-- tab-content -->

</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src="static/js/index.js"></script>

</body>
</html>

CSS：

*, *:before, *:after {
box-sizing: border-box;
}

html {
overflow-y: scroll;
}

body {
background: #c1bdba;
font-family: 'Titillium Web', sans-serif;
}

a {
text-decoration: none;
color: #1ab188;
-webkit-transition: .5s ease;
transition: .5s ease;
}
a:hover {
color: #179b77;
}

.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 179, 176, 0.25);
color: #a0b3b0;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.tab-group li a:hover {
background: #179b77;
color: #ffffff;
}
.tab-group .active a {
background: #1ab188;
color: #ffffff;
}

.tab-content > div:last-child {
display: none;
}

h1 {
text-align: center;
color: #ffffff;
font-weight: 300;
margin: 0 0 40px;
}

label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: #1ab188;
}

label.active {
-webkit-transform: translateY(50px);
transform: translateY(50px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}

label.highlight {
color: #ffffff;
}

input, textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #1ab188;
}

textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}

.field-wrap {
position: relative;
margin-bottom: 40px;
}

.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}

.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #1ab188;
color: #ffffff;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #179b77;
}

.button-block {
display: block;
width: 100%;
}

.forgot {
margin-top: -20px;
text-align: right;
}

JS:

$('.form').find('input, textarea').on('keyup blur focus', function (e) {

var $this = $(this),
label = $this.prev('label');

if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {

if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}

});

$('.tab a').on('click', function (e) {

e.preventDefault();

$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');

target = $(this).attr('href');

$('.tab-content > div').not(target).hide();

$(target).fadeIn(600);

});

还有个scss文件不知道是什么用的，我没有放在static文件夹下也没有看出什么变化，而且html中也没找到它的地址调用

scss：

@import "compass/css3";

$body-bg: #c1bdba;
$form-bg: #13232f;
$white: #ffffff;

$main: #1ab188;
$main-light: lighten($main,5%);
$main-dark: darken($main,5%);

$gray-light: #a0b3b0;
$gray: #ddd;

$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;

*, *:before, *:after {
box-sizing: border-box;
}

html {
overflow-y: scroll;
}

body {
background:$body-bg;
font-family: 'Titillium Web', sans-serif;
}

a {
text-decoration:none;
color:$main;
transition:.5s ease;
&:hover {
color:$main-dark;
}
}

.form {
background:rgba($form-bg,.9);
padding: 40px;
max-width:600px;
margin:40px auto;
border-radius:$br;
box-shadow:0 4px 10px 4px rgba($form-bg,.3);
}

.tab-group {
list-style:none;
padding:0;
margin:0 0 40px 0;
&:after {
content: "";
display: table;
clear: both;
}
li a {
display:block;
text-decoration:none;
padding:15px;
background:rgba($gray-light,.25);
color:$gray-light;
font-size:20px;
float:left;
width:50%;
text-align:center;
cursor:pointer;
transition:.5s ease;
&:hover {
background:$main-dark;
color:$white;
}
}
.active a {
background:$main;
color:$white;
}
}

.tab-content > div:last-child {
display:none;
}

h1 {
text-align:center;
color:$white;
font-weight:$thin;
margin:0 0 40px;
}

label {
position:absolute;
transform:translateY(6px);
left:13px;
color:rgba($white,.5);
transition:all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size:22px;
.req {
margin:2px;
color:$main;
}
}

label.active {
transform:translateY(50px);
left:2px;
font-size:14px;
.req {
opacity:0;
}
}

label.highlight {
color:$white;
}

input, textarea {
font-size:22px;
display:block;
width:100%;
height:100%;
padding:5px 10px;
background:none;
background-image:none;
border:1px solid $gray-light;
color:$white;
border-radius:0;
transition:border-color .25s ease, box-shadow .25s ease;
&:focus {
outline:0;
border-color:$main;
}
}

textarea {
border:2px solid $gray-light;
resize: vertical;
}

.field-wrap {
position:relative;
margin-bottom:40px;
}

.top-row {
&:after {
content: "";
display: table;
clear: both;
}

> div {
float:left;
width:48%;
margin-right:4%;
&:last-child {
margin:0;
}
}
}

.button {
border:0;
outline:none;
border-radius:0;
padding:15px 0;
font-size:2rem;
font-weight:$bold;
text-transform:uppercase;
letter-spacing:.1em;
background:$main;
color:$white;
transition:all.5s ease;
-webkit-appearance: none;
&:hover, &:focus {
background:$main-dark;
}
}

.button-block {
display:block;
width:100%;
}

.forgot {
margin-top:-20px;
text-align:right;
}

持续更新…

多个按钮触发不同事件

连接数据库

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html web前端 sae js

相关文章推荐

新的分享

章节导航