更新了部分代码和文档
jackfrued
parent
1b9aefeed4
commit
02d31714f7
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,56 @@
|
|||
/* 通配符选择器 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* 标签选择器 */
|
||||
h1 {
|
||||
width: 960px;
|
||||
height: 40px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
/* 类选择器 */
|
||||
.a {
|
||||
background-color: red;
|
||||
}
|
||||
.b {
|
||||
background-color: orange;
|
||||
}
|
||||
.c {
|
||||
background-color: yellow;
|
||||
}
|
||||
.d {
|
||||
background-color: green;
|
||||
}
|
||||
.e {
|
||||
background-color: cyan;
|
||||
}
|
||||
.f {
|
||||
background-color: blue;
|
||||
}
|
||||
.g {
|
||||
background-color: purple;
|
||||
}
|
||||
.h {
|
||||
color: blue;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.big {
|
||||
font-size: 32px;
|
||||
}
|
||||
.normal {
|
||||
font-size: 18px;
|
||||
}
|
||||
.small {
|
||||
font-size: 12px;
|
||||
}
|
||||
/* ID选择器 */
|
||||
#header, #footer {
|
||||
width: 800px;
|
||||
height: 120px;
|
||||
border: 1px solid red;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Boxes</title>
|
||||
<style>
|
||||
* {
|
||||
/* border: 1px solid black; */
|
||||
font-family: "Courier New";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background-color: rgba(192, 192, 192, 0.3);
|
||||
}
|
||||
#page {
|
||||
width: 880px;
|
||||
border: 4px double black;
|
||||
background-color: white;
|
||||
margin: 10px auto;
|
||||
padding: 20px 50px;
|
||||
}
|
||||
#logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#navigation {
|
||||
width: 600px;
|
||||
height: 60px;
|
||||
margin: 10px auto;
|
||||
border-top: 2px solid black;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
#navigation>li {
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
list-style-type:none;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#navigation>li>a {
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.15em;
|
||||
color: black;
|
||||
}
|
||||
#navigation>li:first-child>a{
|
||||
color: red;
|
||||
}
|
||||
#navigation>li>a:hover {
|
||||
color: red;
|
||||
}
|
||||
#navigation~p {
|
||||
width: 600px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="logo">
|
||||
<img src="images/logo.gif" alt="The Analog Specialists" />
|
||||
</div>
|
||||
<ul id="navigation">
|
||||
<li><a href="#" class="on">Home</a></li>
|
||||
<li><a href="#">For Sale</a></li>
|
||||
<li><a href="#">Repairs</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
|
||||
</p>
|
||||
<p>
|
||||
We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Boxes</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-size: 80%;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
letter-spacing: 0.15em;
|
||||
background-color: #efefef;
|
||||
}
|
||||
#page {
|
||||
max-width: 940px;
|
||||
min-width: 720px;
|
||||
margin: 10px auto 10px auto;
|
||||
padding: 20px;
|
||||
border: 4px double #000;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
#logo {
|
||||
width: 150px;
|
||||
margin: 10px auto 25px auto;
|
||||
}
|
||||
ul {
|
||||
width: 570px;
|
||||
padding: 15px;
|
||||
margin: 0px auto 0px auto;
|
||||
border-top: 2px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
text-align: center;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
margin: 20px auto 20px auto;
|
||||
font-weight: normal;
|
||||
}
|
||||
a {
|
||||
color: #000000;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 6px 18px 5px 18px;
|
||||
}
|
||||
a:hover, a.on {
|
||||
color: #cc3333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="logo">
|
||||
<img src="images/logo.gif" alt="The Analog Specialists" />
|
||||
</div>
|
||||
<ul id="navigation">
|
||||
<li><a href="#" class="on">Home</a></li>
|
||||
<li><a href="#">For Sale</a></li>
|
||||
<li><a href="#">Repairs</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
|
||||
</p>
|
||||
<p>
|
||||
We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Lists, Tables and Forms</title>
|
||||
<style>
|
||||
.books>li {
|
||||
list-style-image: url(images/icon-plus.png);
|
||||
}
|
||||
.schedule {
|
||||
border-spacing: 0;
|
||||
}
|
||||
.header {
|
||||
background-color: rgb(126, 164, 204);
|
||||
}
|
||||
.header>th:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
.header>th:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
.schedule td, .schedule th {
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
.header th {
|
||||
border-bottom: 2px solid rgb(68, 104, 142);
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Poetry Workshops</h1>
|
||||
<p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p>
|
||||
<p>Please note that the following events are free to members:</p>
|
||||
<ul class="books">
|
||||
<li>A Poetic Perspective</li>
|
||||
<li>Walt Whitman at War</li>
|
||||
<li>Found Poems and Outsider Poetry</li>
|
||||
</ul>
|
||||
<table class="schedule">
|
||||
<tr class="header">
|
||||
<th></th>
|
||||
<th>New York</th>
|
||||
<th>Chicago</th>
|
||||
<th>San Francisco</th>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th>A Poetic Perspective</th>
|
||||
<td>Sat, 4 Feb 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 3 Mar 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 17 Mar 2012<br />11am - 2pm</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<th>Walt Whitman at War</th>
|
||||
<td>Sat, 7 Apr 2012<br />11am - 1pm</td>
|
||||
<td>Sat, 5 May 2012<br />11am - 1pm</td>
|
||||
<td>Sat, 19 May 2012<br />11am - 1pm</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th>Found Poems & Outsider Poetry</th>
|
||||
<td>Sat, 9 Jun 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 7 Jul 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 21 Jul 2012<br />11am - 2pm</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<th>Natural Death: An Exploration</th>
|
||||
<td>Sat, 4 Aug 2012<br />11am - 4pm</td>
|
||||
<td>Sat, 8 Sep 2012<br />11am - 4pm</td>
|
||||
<td>Sat, 15 Sep 2012<br />11am - 4pm</td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="" method="post">
|
||||
<fieldset>
|
||||
<legend>Register your interest</legend>
|
||||
<p>
|
||||
<label for="name">Your name:</label>
|
||||
<input type="text" name="name" id="name"><br>
|
||||
<label for="email">Your email:</label>
|
||||
<input type="text" name="email" id="email">
|
||||
</p>
|
||||
<p>
|
||||
<label for="location">Your closest center:</label>
|
||||
<select name="location" id="location">
|
||||
<option value="ny">New York</option>
|
||||
<option value="il">Chicago</option>
|
||||
<option value="ca">San Francisco</option>
|
||||
</select>
|
||||
</p>
|
||||
<label>Are you a member?</label>
|
||||
<input type="radio" name="member" value="yes"> Yes
|
||||
<input type="radio" name="member" value="no"> No
|
||||
</fieldset>
|
||||
<div>
|
||||
<input type="submit" value="Register" />
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Lists, Tables and Forms</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
font-size: 90%;
|
||||
color: #666;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
li {
|
||||
list-style-image: url("images/icon-plus.png");
|
||||
line-height: 1.6em;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
th, td {
|
||||
padding: 5px 30px 5px 10px;
|
||||
border-spacing: 0px;
|
||||
font-size: 90%;
|
||||
margin: 0px;
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
background-color: #e0e9f0;
|
||||
border-top: 1px solid #f1f8fe;
|
||||
border-bottom: 1px solid #cbd2d8;
|
||||
border-right: 1px solid #cbd2d8;
|
||||
}
|
||||
tr.head th {
|
||||
color: #fff;
|
||||
background-color: #90b4d6;
|
||||
border-bottom: 2px solid #547ca0;
|
||||
border-right: 1px solid #749abe;
|
||||
border-top: 1px solid #90b4d6;
|
||||
text-align: center;
|
||||
text-shadow: -1px -1px 1px #666666;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
td {
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
}
|
||||
tr.even td, tr.even th {
|
||||
background-color: #e8eff5;
|
||||
}
|
||||
tr.head th:first-child {
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
-moz-border-radius-topleft: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
tr.head th:last-child {
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-moz-border-radius-topright: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
fieldset {
|
||||
width: 310px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #d6d6d6;
|
||||
background-color: #ffffff;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
legend {
|
||||
font-style: italic;
|
||||
color: #666666;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 120px;
|
||||
border: 1px solid #d6d6d6;
|
||||
padding: 2px;
|
||||
outline: none;
|
||||
}
|
||||
input[type="text"]:focus, input[type="text"]:hover {
|
||||
background-color: #d0e2f0;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
input[type="submit"] {
|
||||
border: 1px solid #006633;
|
||||
background-color: #009966;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
input[type="submit"]:hover {
|
||||
border: 1px solid #006633;
|
||||
background-color: #00CC33;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title {
|
||||
float: left;
|
||||
width: 160px;
|
||||
clear: left;
|
||||
}
|
||||
.submit {
|
||||
width: 310px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Poetry Workshops</h1>
|
||||
<p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p>
|
||||
<p>Please note that the following events are free to members:</p>
|
||||
<ul>
|
||||
<li>A Poetic Perspective</li>
|
||||
<li>Walt Whitman at War</li>
|
||||
<li>Found Poems and Outsider Poetry</li>
|
||||
</ul>
|
||||
<table>
|
||||
<tr class="head">
|
||||
<th></th>
|
||||
<th>New York</th>
|
||||
<th>Chicago</th>
|
||||
<th>San Francisco</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>A Poetic Perspective</th>
|
||||
<td>Sat, 4 Feb 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 3 Mar 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 17 Mar 2012<br />11am - 2pm</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<th>Walt Whitman at War</th>
|
||||
<td>Sat, 7 Apr 2012<br />11am - 1pm</td>
|
||||
<td>Sat, 5 May 2012<br />11am - 1pm</td>
|
||||
<td>Sat, 19 May 2012<br />11am - 1pm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Found Poems & Outsider Poetry</th>
|
||||
<td>Sat, 9 Jun 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 7 Jul 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 21 Jul 2012<br />11am - 2pm</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<th>Natural Death: An Exploration</th>
|
||||
<td>Sat, 4 Aug 2012<br />11am - 4pm</td>
|
||||
<td>Sat, 8 Sep 2012<br />11am - 4pm</td>
|
||||
<td>Sat, 15 Sep 2012<br />11am - 4pm</td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="http://www.example.com/form.php" method="get">
|
||||
<fieldset>
|
||||
<legend>Register your interest</legend>
|
||||
<p>
|
||||
<label class="title" for="name">Your name:</label>
|
||||
<input type="text" name="name" id="name"><br>
|
||||
<label class="title" for="email">Your email:</label>
|
||||
<input type="text" name="email" id="email">
|
||||
</p>
|
||||
<p>
|
||||
<label for="location" class="title">Your closest center:</label>
|
||||
<select name="location" id="location">
|
||||
<option value="ny">New York</option>
|
||||
<option value="il">Chicago</option>
|
||||
<option value="ca">San Francisco</option>
|
||||
</select>
|
||||
</p>
|
||||
<span class="title">Are you a member?</span>
|
||||
<label>
|
||||
<input type="radio" name="member" value="yes"> Yes
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="member" value="no"> No
|
||||
</label>
|
||||
</fieldset>
|
||||
<div class="submit">
|
||||
<input type="submit" value="Register" />
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Layout</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>Yoko's Kitchen</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">home</a></li>
|
||||
<li><a href="">classes</a></li>
|
||||
<li><a href="">catering</a></li>
|
||||
<li><a href="">about</a></li>
|
||||
<li><a href="">contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<article>
|
||||
<figure>
|
||||
<img src="images/bok-choi.jpg" alt="Bok Choi" />
|
||||
<figcaption>Bok Choi</figcaption>
|
||||
</figure>
|
||||
<hgroup>
|
||||
<h2>Japanese Vegetarian</h2>
|
||||
<h3>Five week course in London</h3>
|
||||
</hgroup>
|
||||
<p>
|
||||
A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle
|
||||
dishes.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<figure>
|
||||
<img src="images/teriyaki.jpg" alt="Teriyaki sauce">
|
||||
<figcaption>Teriyaki Sauce</figcaption>
|
||||
</figure>
|
||||
<hgroup>
|
||||
<h2>Sauces Masterclass</h2>
|
||||
<h3>One day workshop</h3>
|
||||
</hgroup>
|
||||
<p>
|
||||
An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese
|
||||
cookery.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<aside>
|
||||
<section>
|
||||
<h2>Popular Recipes</h2>
|
||||
<a href="">Yakitori (grilled chicken)</a>
|
||||
<a href="">Tsukune (minced chicken patties)</a>
|
||||
<a href="">Okonomiyaki (savory pancakes)</a>
|
||||
<a href="">Mizutaki (chicken stew)</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Contact</h2>
|
||||
<p>
|
||||
Yoko's Kitchen<br>
|
||||
27 Redchurch Street<br>
|
||||
Shoreditch<br>
|
||||
London E2 7DP
|
||||
</p>
|
||||
</section>
|
||||
</aside>
|
||||
<footer>
|
||||
© 2011 Yoko's Kitchen
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Layout</title>
|
||||
<style type="text/css">
|
||||
header,
|
||||
section,
|
||||
footer,
|
||||
aside,
|
||||
nav,
|
||||
article,
|
||||
figure,
|
||||
figcaption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #666666;
|
||||
background-color: #f9f8f6;
|
||||
background-image: url("images/dark-wood.jpg");
|
||||
background-position: center;
|
||||
font-family: Georgia, Times, serif;
|
||||
line-height: 1.4em;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 940px;
|
||||
margin: 20px auto 20px auto;
|
||||
border: 2px solid #000000;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 160px;
|
||||
background-image: url(images/header.jpg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: -9999px;
|
||||
width: 940px;
|
||||
height: 130px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
nav,
|
||||
footer {
|
||||
clear: both;
|
||||
color: #ffffff;
|
||||
background-color: #aeaca8;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
nav li a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
nav li a:hover,
|
||||
nav li a.current {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
section.courses {
|
||||
float: left;
|
||||
width: 659px;
|
||||
border-right: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
article {
|
||||
clear: both;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
hgroup {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
figure {
|
||||
float: left;
|
||||
width: 290px;
|
||||
height: 220px;
|
||||
padding: 5px;
|
||||
margin: 20px;
|
||||
border: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 90%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 230px;
|
||||
float: left;
|
||||
padding: 0px 0px 0px 20px;
|
||||
}
|
||||
|
||||
aside section a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
aside section a:hover {
|
||||
color: #985d6a;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #de6581;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 10px 0px 5px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0px 0px 10px 0px;
|
||||
color: #de6581;
|
||||
}
|
||||
|
||||
aside h2 {
|
||||
padding: 30px 0px 10px 0px;
|
||||
color: #de6581;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 80%;
|
||||
padding: 7px 0px 0px 20px;
|
||||
}
|
||||
</style>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<h1>Yoko's Kitchen</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="current">home</a></li>
|
||||
<li><a href="">classes</a></li>
|
||||
<li><a href="">catering</a></li>
|
||||
<li><a href="">about</a></li>
|
||||
<li><a href="">contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section class="courses">
|
||||
<article>
|
||||
<figure>
|
||||
<img src="images/bok-choi.jpg" alt="Bok Choi" />
|
||||
<figcaption>Bok Choi</figcaption>
|
||||
</figure>
|
||||
<hgroup>
|
||||
<h2>Japanese Vegetarian</h2>
|
||||
<h3>Five week course in London</h3>
|
||||
</hgroup>
|
||||
<p>
|
||||
A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle
|
||||
dishes.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<figure>
|
||||
<img src="images/teriyaki.jpg" alt="Teriyaki sauce">
|
||||
<figcaption>Teriyaki Sauce</figcaption>
|
||||
</figure>
|
||||
<hgroup>
|
||||
<h2>Sauces Masterclass</h2>
|
||||
<h3>One day workshop</h3>
|
||||
</hgroup>
|
||||
<p>
|
||||
An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese
|
||||
cookery.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<aside>
|
||||
<section class="popular-recipes">
|
||||
<h2>Popular Recipes</h2>
|
||||
<a href="">Yakitori (grilled chicken)</a>
|
||||
<a href="">Tsukune (minced chicken patties)</a>
|
||||
<a href="">Okonomiyaki (savory pancakes)</a>
|
||||
<a href="">Mizutaki (chicken stew)</a>
|
||||
</section>
|
||||
<section class="contact-details">
|
||||
<h2>Contact</h2>
|
||||
<p>
|
||||
Yoko's Kitchen<br>
|
||||
27 Redchurch Street<br>
|
||||
Shoreditch<br>
|
||||
London E2 7DP
|
||||
</p>
|
||||
</section>
|
||||
</aside>
|
||||
<footer>
|
||||
© 2011 Yoko's Kitchen
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>锚点连接</title>
|
||||
<style>
|
||||
h1 {
|
||||
margin-left: 100px
|
||||
}
|
||||
p {
|
||||
margin: 40px 120px;
|
||||
}
|
||||
#adv {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: yellow;
|
||||
background-color: rgba(0, 0, 255, 0.75);
|
||||
/* background-color: blue; */
|
||||
/* opacity: 0.5; */
|
||||
position: fixed;
|
||||
right: 50px;
|
||||
top: 20px;
|
||||
}
|
||||
/* position属性的取值 */
|
||||
/* 1. static - 静态定位 - 正常的文档流 */
|
||||
/* 2. relative - 相对定位 - 相对于原来正常的位置 */
|
||||
/* 3. absolute - 绝对定位 - 相对于父元素来设置位置 */
|
||||
/* 4. fixed - 固定定位 - 相对于浏览器窗口来设置位置 */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="adv">
|
||||
此广告位招租
|
||||
<button id="closeBtn" style="float: right;">关闭</button>
|
||||
</div>
|
||||
<h1>坚持中国特色社会主义</h1>
|
||||
<hr>
|
||||
<p>
|
||||
第一，中国特色社会主义是社会主义而不是其他什么主义，科学社会主义基本原则不能丢，丢了就不是社会主义。我们党始终强调，中国特色社会主义，既坚持了科学社会主义基本原则，又根据时代条件赋予其鲜明的中国特色。这就是说，中国特色社会主义是社会主义，不是别的什么主义。一个国家实行什么样的主义，关键要看这个主义能否解决这个国家面临的历史性课题。在中华民族积贫积弱、任人宰割的时期，各种主义和思潮都进行过尝试，资本主义道路没有走通，改良主义、自由主义、社会达尔文主义、无政府主义、实用主义、民粹主义、工团主义等也都“你方唱罢我登场”，但都没能解决中国的前途和命运问题。是马克思列宁主义、毛泽东思想引导中国人民走出了漫漫长夜、建立了新中国，是中国特色社会主义使中国快速发展起来了。不说更早的时期，就从改革开放开始，特别是苏联解体、东欧剧变以后，唱衰中国的舆论在国际上不绝于耳，各式各样的“中国崩溃论”从来没有中断过。但是，中国非但没有崩溃，反而综合国力与日俱增，人民生活水平不断提高，“风景这边独好”。历史和现实都告诉我们，只有社会主义才能救中国，只有中国特色社会主义才能发展中国，这是历史的结论、人民的选择。
|
||||
</p>
|
||||
<p class="p2">
|
||||
近些年来，国内外有些舆论提出中国现在搞的究竟还是不是社会主义的疑问，有人说是“资本社会主义”，还有人干脆说是“国家资本主义”、“新官僚资本主义”。这些都是完全错误的。我们说中国特色社会主义是社会主义，那就是不论怎么改革、怎么开放，我们都始终要坚持中国特色社会主义道路、中国特色社会主义理论体系、中国特色社会主义制度，坚持党的十八大提出的夺取中国特色社会主义新胜利的基本要求。这就包括在中国共产党领导下，立足基本国情，以经济建设为中心，坚持四项基本原则，坚持改革开放，解放和发展社会生产力，建设社会主义市场经济、社会主义民主政治、社会主义先进文化、社会主义和谐社会、社会主义生态文明，促进人的全面发展，逐步实现全体人民共同富裕，建设富强民主文明和谐的社会主义现代化国家；包括坚持人民代表大会制度的根本政治制度，中国共产党领导的多党合作和政治协商制度、民族区域自治制度以及基层群众自治制度等基本政治制度，中国特色社会主义法律体系，公有制为主体、多种所有制经济共同发展的基本经济制度。这些都是在新的历史条件下体现科学社会主义基本原则的内容，如果丢掉了这些，那就不成其为社会主义了。
|
||||
</p>
|
||||
<p>
|
||||
邓小平同志曾经深刻地、总结性地指出：“我们的现代化建设，必须从中国的实际出发。无论是革命还是建设，都要注意学习和借鉴外国经验。但是，照抄照搬别国经验、别国模式，从来不能得到成功。这方面我们有过不少教训。”过去不能搞全盘苏化，现在也不能搞全盘西化或者其他什么化。冷战结束后，不少发展中国家被迫采纳了西方模式，结果党争纷起、社会动荡、人民流离失所，至今都难以稳定下来。《庄子·秋水》中写道：“且子独不闻夫寿陵余子之学行于邯郸与？未得国能，又失其故行矣，直匍匐而归耳。”我们千万不能“邯郸学步，失其故行”。我们就是把马克思主义中国化，就是搞中国特色社会主义。近年来，随着我国综合国力和国际地位上升，国际上关于“北京共识”、“中国模式”、“中国道路”等议论和研究也多了起来，其中不乏赞扬者。一些外国学者认为，中国的快速发展，导致一些西方理论正在被质疑，一种新版的马克思主义理论正在颠覆西方的传统理论。我们始终认为，各国的发展道路应由各国人民选择。所谓的“中国模式”是中国人民在自己的奋斗实践中创造的中国特色社会主义道路。我们坚信，随着中国特色社会主义不断发展，我们的制度必将越来越成熟，我国社会主义制度的优越性必将进一步显现，我们的道路必将越走越宽广，我国发展道路对世界的影响必将越来越大。我们就是要有这样的道路自信、理论自信、制度自信，真正做到“千磨万击还坚劲，任尔东西南北风”。
|
||||
</p>
|
||||
<p>
|
||||
第二，我们党领导人民进行社会主义建设，有改革开放前和改革开放后两个历史时期，这是两个相互联系又有重大区别的时期，但本质上都是我们党领导人民进行社会主义建设的实践探索。中国特色社会主义是在改革开放历史新时期开创的，但也是在新中国已经建立起社会主义基本制度并进行了20多年建设的基础上开创的。正确认识这个问题，要把握3个方面。一是，如果没有1978年我们党果断决定实行改革开放，并坚定不移推进改革开放，坚定不移把握改革开放的正确方向，社会主义中国就不可能有今天这样的大好局面，就可能面临严重危机，就可能遇到像苏联、东欧国家那样的亡党亡国危机。同时，如果没有1949年建立新中国并进行社会主义革命和建设，积累了重要的思想、物质、制度条件，积累了正反两方面经验，改革开放也很难顺利推进。二是，虽然这两个历史时期在进行社会主义建设的思想指导、方针政策、实际工作上有很大差别，但两者决不是彼此割裂的，更不是根本对立的。我们党在社会主义建设实践中提出了许多正确主张，当时没有真正落实，改革开放后得到了真正贯彻，将来也还是要坚持和发展的。马克思早就说过：“人们自己创造自己的历史，但是他们并不是随心所欲地创造，并不是在他们自己选定的条件下创造，而是在直接碰到的、既定的、从过去承继下来的条件下创造。”三是，对改革开放前的历史时期要正确评价，不能用改革开放后的历史时期否定改革开放前的历史时期，也不能用改革开放前的历史时期否定改革开放后的历史时期。改革开放前的社会主义实践探索为改革开放后的社会主义实践探索积累了条件，改革开放后的社会主义实践探索是对前一个时期的坚持、改革、发展。对改革开放前的社会主义实践探索，要坚持实事求是的思想路线，分清主流和支流，坚持真理，修正错误，发扬经验，吸取教训，在这个基础上把党和人民事业继续推向前进。
|
||||
我之所以强调这个问题，是因为这个重大政治问题处理不好，就会产生严重政治后果。古人说：“灭人之国，必先去其史。”国内外敌对势力往往就是拿中国革命史、新中国历史来做文章，竭尽攻击、丑化、污蔑之能事，根本目的就是要搞乱人心，煽动推翻中国共产党的领导和我国社会主义制度。苏联为什么解体？苏共为什么垮台？一个重要原因就是意识形态领域的斗争十分激烈，全面否定苏联历史、苏共历史，否定列宁，否定斯大林，搞历史虚无主义，思想搞乱了，各级党组织几乎没任何作用了，军队都不在党的领导之下了。最后，苏联共产党偌大一个党就作鸟兽散了，苏联偌大一个社会主义国家就分崩离析了。这是前车之鉴啊！邓小平同志指出：“毛泽东思想这个旗帜丢不得。丢掉了这个旗帜，实际上就否定了我们党的光辉历史。总的来说，我们党的历史还是光辉的历史。虽然我们党在历史上，包括建国以后的30年中，犯过一些大错误，甚至犯过搞‘文化大革命’这样的大错误，但是我们党终究把革命搞成功了。中国在世界上的地位，是在中华人民共和国成立以后才大大提高的。只有中华人民共和国的成立，才使我们这个人口占世界总人口近1/4的大国，在世界上站起来，而且站住了。”他还强调：“对毛泽东同志的评价，对毛泽东思想的阐述，不是仅仅涉及毛泽东同志个人的问题，这同我们党、我们国家的整个历史是分不开的。要看到这个全局。”“这不只是个理论问题，尤其是个政治问题，是国际国内的很大的政治问题。”这就是一个伟大马克思主义政治家的眼界和胸怀。试想一下，如果当时全盘否定了毛泽东同志，那我们党还能站得住吗？我们国家的社会主义制度还能站得住吗？那就站不住了，站不住就会天下大乱。所以，正确处理改革开放前后的社会主义实践探索的关系，不只是一个历史问题，更主要的是一个政治问题。建议大家把《关于建国以来党的若干历史问题的决议》找出来再看看。
|
||||
</p>
|
||||
<p>
|
||||
第三，马克思主义必定随着时代、实践和科学的发展而不断发展，不可能一成不变，社会主义从来都是在开拓中前进的。坚持和发展中国特色社会主义是一篇大文章，邓小平同志为它确定了基本思路和基本原则，以江泽民同志为核心的党的第三代中央领导集体、以胡锦涛同志为总书记的党中央在这篇大文章上都写下了精彩的篇章。现在，我们这一代共产党人的任务，就是继续把这篇大文章写下去。30多年来，中国特色社会主义取得了巨大成就，加之新中国成立以后打下的基础，这是它得以站得住、行得远的重要基础。我们对社会主义的认识，对中国特色社会主义规律的把握，已经达到了一个前所未有的新的高度，这一点不容置疑。同时，也要看到，我国社会主义还处在初级阶段，我们还面临很多没有弄清楚的问题和待解的难题，对许多重大问题的认识和处理都还处在不断深化的过程之中，这一点也不容置疑。对事物的认识是需要一个过程的，而对社会主义这个我们只搞了几十年的东西，我们的认识和把握也还是非常有限的，还需要在实践中不断深化和发展。
|
||||
</p>
|
||||
<a name="bar"></a>
|
||||
<p>
|
||||
坚持马克思主义，坚持社会主义，一定要有发展的观点，一定要以我国改革开放和现代化建设的实际问题、以我们正在做的事情为中心，着眼于马克思主义理论的运用，着眼于对实际问题的理论思考，着眼于新的实践和新的发展。我们说过，世界上没有放之四海而皆准的发展道路和发展模式，也没有一成不变的发展道路和发展模式。我们过去取得的实践和理论成果，能够帮助我们更好面对和解决前进中的问题，但不能成为我们骄傲自满的理由，更不能成为我们继续前进的包袱。我们的事业越前进、越发展，新情况新问题就会越多，面临的风险和挑战就会越多，面对的不可预料的事情就会越多。我们必须增强忧患意识，做到居安思危。解放思想、实事求是、与时俱进，是马克思主义活的灵魂，是我们适应新形势、认识新事物、完成新任务的根本思想武器。全党同志首先是各级领导干部必须坚持马克思主义的发展观点，坚持实践是检验真理的唯一标准，发挥历史的主动性和创造性，清醒认识世情、国情、党情的变和不变，永远要有逢山开路、遇河架桥的精神，锐意进取，大胆探索，敢于和善于分析回答现实生活中和群众思想上迫切需要解决的问题，不断深化改革开放，不断有所发现、有所创造、有所前进，不断推进理论创新、实践创新、制度创新。
|
||||
</p>
|
||||
<p>
|
||||
第四，我们党始终坚持共产主义远大理想，共产党员特别是党员领导干部要做共产主义远大理想和中国特色社会主义共同理想的坚定信仰者和忠实践行者。对马克思主义的信仰，对社会主义和共产主义的信念，是共产党人的政治灵魂，是共产党人经受住任何考验的精神支柱。党章明确规定，党的最高理想和最终目标是实现共产主义。党章同时明确规定，中国共产党人追求的共产主义最高理想，只有在社会主义社会充分发展和高度发达的基础上才能实现。想一下子、两下子就进入共产主义，那是不切实际的。邓小平同志说，巩固和发展社会主义制度，还需要一个很长的历史阶段，需要我们几代人、十几代人、甚至几十代人坚持不懈地努力奋斗。几十代人，那是多么长啊！从孔老夫子到现在也不过七十几代人。这样看问题，充分说明了我们中国共产党人政治上的清醒。必须认识到，我们现在的努力以及将来多少代人的持续努力，都是朝着最终实现共产主义这个大目标前进的。同时，必须认识到，实现共产主义是一个非常漫长的历史过程，我们必须立足党在现阶段的奋斗目标，脚踏实地推进我们的事业。如果丢失了我们共产党人的远大目标，就会迷失方向，变成功利主义、实用主义。中国特色社会主义是党的最高纲领和基本纲领的统一。中国特色社会主义的基本纲领，概言之，就是建立富强民主文明和谐的社会主义现代化国家。这既是从我国正处于并将长期处于社会主义初级阶段的基本国情出发的，也没有脱离党的最高理想。我们既要坚定走中国特色社会主义道路的信念，也要胸怀共产主义的崇高理想，矢志不移贯彻执行党在社会主义初级阶段的基本路线和基本纲领，做好当前每一项工作。
|
||||
</p>
|
||||
<a name="foo"></a>
|
||||
<a href="javascript:history.back()">返回</a>
|
||||
<p>
|
||||
革命理想高于天。没有远大理想，不是合格的共产党员；离开现实工作而空谈远大理想，也不是合格的共产党员。在我们党90多年的历史中，一代又一代共产党人为了追求民族独立和人民解放，不惜流血牺牲，靠的就是一种信仰，为的就是一个理想。尽管他们也知道，自己追求的理想并不会在自己手中实现，但他们坚信，只要一代又一代人为之持续努力，一代又一代人为此作出牺牲，崇高的理想就一定能实现，正所谓“砍头不要紧，只要主义真”。今天，衡量一名共产党员、一名领导干部是否具有共产主义远大理想，是有客观标准的，那就要看他能否坚持全心全意为人民服务的根本宗旨，能否吃苦在前、享受在后，能否勤奋工作、廉洁奉公，能否为理想而奋不顾身去拼搏、去奋斗、去献出自己的全部精力乃至生命。一切迷惘迟疑的观点，一切及时行乐的思想，一切贪图私利的行为，一切无所作为的作风，都是与此格格不入的。一些人认为共产主义是可望而不可及的，甚至认为是望都望不到、看都看不见的，是虚无缥缈的。这就涉及是唯物史观还是唯心史观的世界观问题。我们一些同志之所以理想渺茫、信仰动摇，根本的就是历史唯物主义观点不牢固。要教育引导广大党员、干部把践行中国特色社会主义共同理想和坚定共产主义远大理想统一起来，做到虔诚而执着、至信而深厚。有了坚定的理想信念，站位就高了，眼界就宽了，心胸就开阔了，就能坚持正确政治方向，在胜利和顺境时不骄傲不急躁，在困难和逆境时不消沉不动摇，经受住各种风险和困难考验，自觉抵御各种腐朽思想的侵蚀，永葆共产党人政治本色。
|
||||
</p>
|
||||
<script>
|
||||
var closeBtn = document.getElementById('closeBtn')
|
||||
closeBtn.addEventListener('click', function () {
|
||||
// var advDiv = document.getElementById('adv')
|
||||
// advDiv.style.display = 'none'
|
||||
location.href = 'http://youku.com'
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>音视频</title>
|
||||
</head>
|
||||
<body>
|
||||
<audio controls autoplay loop>
|
||||
<source src="audio/test-audio.mp3"></source>
|
||||
</audio>
|
||||
<video width="400" controls>
|
||||
<source src="video/puppy.mp4"></source>
|
||||
</video>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BOM - 延迟跳转</title>
|
||||
</head>
|
||||
<body>
|
||||
<h3><span id="countdown">5</span>秒钟以后自动跳转到百度</h3>
|
||||
<button id="cancelBtn">取消跳转</button>
|
||||
<button id="openBtn">打开百度</button>
|
||||
<script>
|
||||
// alert(localStorage.sport)
|
||||
// alert(localStorage.fruit)
|
||||
// localStorage.sport = '乒乓球'
|
||||
// localStorage.fruit = '榴莲'
|
||||
const openBtn = document.getElementById('openBtn')
|
||||
openBtn.addEventListener('click', () => print())
|
||||
const cancelBtn = document.getElementById('cancelBtn')
|
||||
cancelBtn.addEventListener('click', () => clearInterval(timerId))
|
||||
const span = document.getElementById('countdown')
|
||||
var counter = 5
|
||||
var timerId = setInterval(function () {
|
||||
counter -= 1
|
||||
if (counter == 0) {
|
||||
// location对象代表了浏览器的地址栏
|
||||
location.href = 'http://www.baidu.com'
|
||||
} else {
|
||||
span.textContent = counter
|
||||
}
|
||||
}, 1000)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row clearfix">
|
||||
<div class="col-md-3 column">
|
||||
<img alt="140x140" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" />
|
||||
</div>
|
||||
<div class="col-md-9 column">
|
||||
<h3>
|
||||
h3. 这是一套可视化布局系统.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<div class="col-md-12 column">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#">首页</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">简介</a>
|
||||
</li>
|
||||
<li class="disabled">
|
||||
<a href="#">信息</a>
|
||||
</li>
|
||||
<li class="dropdown pull-right">
|
||||
<a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">操作</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">设置栏目</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">更多设置</a>
|
||||
</li>
|
||||
<li class="divider">
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">分割线</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<div class="col-md-12 column">
|
||||
<div class="carousel slide" id="carousel-812781">
|
||||
<ol class="carousel-indicators">
|
||||
<li class="active" data-slide-to="0" data-target="#carousel-812781">
|
||||
</li>
|
||||
<li data-slide-to="1" data-target="#carousel-812781">
|
||||
</li>
|
||||
<li data-slide-to="2" data-target="#carousel-812781">
|
||||
</li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
|
||||
<div class="carousel-caption">
|
||||
<h4>
|
||||
First Thumbnail label
|
||||
</h4>
|
||||
<p>
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
|
||||
metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
|
||||
<div class="carousel-caption">
|
||||
<h4>
|
||||
Second Thumbnail label
|
||||
</h4>
|
||||
<p>
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
|
||||
metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
|
||||
<div class="carousel-caption">
|
||||
<h4>
|
||||
Third Thumbnail label
|
||||
</h4>
|
||||
<p>
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
|
||||
metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <a class="left carousel-control" href="#carousel-812781" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
|
||||
<a class="right carousel-control" href="#carousel-812781" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS - 内部和外部样式表</title>
|
||||
<!-- 外部样式表 -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!-- 内部样式表 -->
|
||||
<style>
|
||||
* {
|
||||
border: 1px dashed black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 内嵌样式表 -->
|
||||
<div id="header" style="background-color: gray;"></div>
|
||||
<h1 class="a"></h1>
|
||||
<h1 class="b"></h1>
|
||||
<h1 class="c"></h1>
|
||||
<h1 class="d"></h1>
|
||||
<h1 class="e"></h1>
|
||||
<h1 class="f"></h1>
|
||||
<h1 class="g"></h1>
|
||||
<p class="c h big">静夜思 - 李白</p>
|
||||
床前明月光
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS - 优先级</title>
|
||||
<!-- 一般情况下网站的首页会使用内部样式表 - 首页正常渲染 -->
|
||||
<!-- 其他的页面可以共享一个或多个外部样式表 - 代码复用/减少对带宽和流量的使用 -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!-- 不冲突的样式会叠加，有冲突的样式遵循三条原则 -->
|
||||
<!-- 1. 就近原则 -->
|
||||
<!-- 2. 具体性原则（ID > 类 > 标签 > 通配符） -->
|
||||
<!-- 3. 重要性原则 -->
|
||||
<style>
|
||||
#h1 { color: blue; }
|
||||
.h1 { color: green !important; }
|
||||
.h1 {
|
||||
color: pink !important;
|
||||
border: 5px dotted #FFA500;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
padding: 100px 100px;
|
||||
}
|
||||
h1 { color: red; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 内嵌样式表 / 行内样式表 -->
|
||||
<h1 class="a big" style="background-color: #ffff00; font-family: 'courier new'; text-align: center;">Hello, world!</h1>
|
||||
<!-- Box Model（盒子模型）-->
|
||||
<h1 class="h1" id="h1">Goodbye world!</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS - 盒子模型</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "FatDog";
|
||||
src: url('fonts/chunkfive.ttf');
|
||||
}
|
||||
body {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ms {
|
||||
letter-spacing: 10px;
|
||||
width: 320px;
|
||||
height: 100px;
|
||||
border: 5px dotted gray;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
text-decoration: underline;
|
||||
text-shadow: 2px 2px gray;
|
||||
font-size: 400%;
|
||||
}
|
||||
.one {
|
||||
text-indent: 60px;
|
||||
}
|
||||
.two {
|
||||
text-indent: 40px;
|
||||
}
|
||||
.three {
|
||||
text-indent: 20px;
|
||||
}
|
||||
h3 {
|
||||
/* block / inline-block / none */
|
||||
/* display: none; */
|
||||
visibility: hidden;
|
||||
text-transform: uppercase;
|
||||
font: italic bolder 2cm/60px "FatDog";
|
||||
/* font-size: 2cm;
|
||||
font-family: "FatDog";
|
||||
font-stretch: condensed;
|
||||
font-style: oblique; */
|
||||
}
|
||||
.box {
|
||||
color: rgb(64, 128, 192);
|
||||
height: 220px;
|
||||
border: 4px double #00CC33;
|
||||
border-left-color: blue;
|
||||
border-right-color: red;
|
||||
border-radius: 10px 20px 40px 80px;
|
||||
width: 50%;
|
||||
margin: 50px auto;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
background-color: #749ABE;
|
||||
background-image: url(images/bird.gif);
|
||||
/* background-repeat: no-repeat no-repeat;
|
||||
background-position: -25px -50px; */
|
||||
}
|
||||
.box p {
|
||||
background-color: white;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
#photo {
|
||||
border: 10px solid gold;
|
||||
border-radius: 60px 60px 60px 60px;
|
||||
/* border-image: url("images/dots.gif") 10 10 10 10 round; */
|
||||
}
|
||||
#icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: url(images/icons.jpg) no-repeat no-repeat -570px -280px;
|
||||
background-color: #00FFFF;
|
||||
/* background-image: url(images/icons.jpg);
|
||||
background-repeat: no-repeat no-repeat;
|
||||
background-position: -570px -280px; */
|
||||
}
|
||||
#python {
|
||||
width: 290px;
|
||||
height: 82px;
|
||||
background-image: url(images/python-logo.png);
|
||||
background-color: #009966;
|
||||
}
|
||||
/* body {
|
||||
background-image: url(images/bird.gif);
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="python"></div>
|
||||
<div id="icon"></div>
|
||||
<img id="photo" src="images/tim.png" width="100" height="100">
|
||||
<h3>Hello, world!</h3>
|
||||
<h1 class="ms">静夜思</h1>
|
||||
<hr>
|
||||
<div class="box">
|
||||
<p class="one">床前明月光</p>
|
||||
<p class="two">疑似地上霜</p>
|
||||
<p class="three">举头望明月</p>
|
||||
<p class="four">低头思故乡</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS - 定位</title>
|
||||
<style type="text/css">
|
||||
.one {
|
||||
background-color: red;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
z-index: 100;
|
||||
}
|
||||
.two {
|
||||
background-color: green;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
z-index: 20;
|
||||
}
|
||||
.three {
|
||||
background-color: blue;
|
||||
left: 150px;
|
||||
top: 150px;
|
||||
z-index: 10;
|
||||
}
|
||||
.one, .two, .three {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div class="three"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS - 动画效果</title>
|
||||
<style>
|
||||
#one, #two, #three {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 100px;
|
||||
}
|
||||
#one {
|
||||
background-color: purple;
|
||||
left: 100px;
|
||||
animation: foo 10s;
|
||||
}
|
||||
#two {
|
||||
background-color: gold;
|
||||
left: 400px;
|
||||
animation: foo 2s infinite;
|
||||
}
|
||||
#three {
|
||||
background-color: darkgreen;
|
||||
left: 700px;
|
||||
animation: foo 0.5s infinite;
|
||||
}
|
||||
@keyframes foo {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="one"></div>
|
||||
<div id="two"></div>
|
||||
<div id="three"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>表单的例子 - 注册</title>
|
||||
<style>
|
||||
/* 属性选择器 */
|
||||
/* form input 后代选择器 */
|
||||
/* form>input 儿子选择器 */
|
||||
form input[type=text], form input[type=password] {
|
||||
border: none;
|
||||
outline: none;
|
||||
border-bottom: 1px dotted darkgray;
|
||||
}
|
||||
/* form~input 兄弟选择器 */
|
||||
/* form+input 相邻兄弟选择器 */
|
||||
form~p>input[type=text] {
|
||||
outline: none;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
form~p>input[type=text]:focus {
|
||||
outline: none;
|
||||
border: 1px solid #00FFFF;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
background-color: red;
|
||||
border: none;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<figure>
|
||||
<img src="images/bok-choi.jpg" alt="">
|
||||
<figcaption>图1. 这是一个图片</figcaption>
|
||||
</figure>
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<legend>用户基本信息</legend>
|
||||
<p>
|
||||
用户名:
|
||||
<input type="text" name="username" placeholder="用户名由6-20个字符构成" required>
|
||||
</p>
|
||||
<p>
|
||||
密码：
|
||||
<input type="password" name="password" required>
|
||||
</p>
|
||||
<p>
|
||||
确认密码：
|
||||
<input type="password" name="repassword" required>
|
||||
</p>
|
||||
<p>
|
||||
性别：
|
||||
<input type="radio" name="sex" value="1" checked>男
|
||||
<input type="radio" name="sex" value="0">女
|
||||
</p>
|
||||
<p>
|
||||
爱好：
|
||||
<input type="checkbox" name="fav" value="阅读" checked>阅读
|
||||
<input type="checkbox" name="fav" value="旅游">旅游
|
||||
<input type="checkbox" name="fav" value="美食" checked>美食
|
||||
<input type="checkbox" name="fav" value="运动">运动
|
||||
</p>
|
||||
<p>
|
||||
省份：
|
||||
<select name="province">
|
||||
<option value="110000">北京</option>
|
||||
<option value="120000">天津</option>
|
||||
<option value="310000">上海</option>
|
||||
<option value="500000">重庆</option>
|
||||
<option value="510000" selected>四川省</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
生日：
|
||||
<input type="date" name="birthday">
|
||||
</p>
|
||||
</fieldset>
|
||||
<fieldset id="">
|
||||
<legend>用户附加信息</legend>
|
||||
<p>
|
||||
邮箱：
|
||||
<input type="email" name="email" required>
|
||||
</p>
|
||||
<p>
|
||||
头像：
|
||||
<input type="file" name="photo">
|
||||
</p>
|
||||
<p>
|
||||
自我介绍：
|
||||
<textarea cols="30" rows="10" name="intro"></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<input class="button" type="submit" value="确认注册">
|
||||
<input class="button" type="reset" value="重新填写">
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
<p>
|
||||
<input type="text">
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>内部窗口</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 行级标签（元素） / 块级标签（元素）-->
|
||||
<!-- inline element / block element -->
|
||||
<!-- 块级：h1-h6 / p / div / ul / ol / dl / table / form / hr -->
|
||||
<!-- 行块级（内联块级元素）：可以像块级元素一样指定宽度和高度，但是不会独占整行 -->
|
||||
<!-- 行级：a / img / iframe / button / span / input / textarea / select / br -->
|
||||
<!-- internal frame（内部窗口）-->
|
||||
<img title="商品图片" src="images/a1.jpg" alt="">
|
||||
<img src="images/a2.jpg" alt="">
|
||||
<iframe src="http://map.baidu.com" width="400" height="400" frameborder="0"></iframe>
|
||||
<iframe src="http://www.jd.com" width="400" height="400" frameborder="0"></iframe>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<button>确定</button>
|
||||
<button>取消</button>
|
||||
<a href="">百度</a> <a href="">京东</a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
#data {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#data td, #data th {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#buttons {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table id="data">
|
||||
<caption>数据统计表</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>年龄</th>
|
||||
<th>性别</th>
|
||||
<th>身高</th>
|
||||
<th>体重</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item1</td>
|
||||
<td>Item2</td>
|
||||
<td>Item3</td>
|
||||
<td>Item4</td>
|
||||
<td>Item5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item1</td>
|
||||
<td>Item2</td>
|
||||
<td>Item3</td>
|
||||
<td>Item4</td>
|
||||
<td>Item5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item1</td>
|
||||
<td>Item2</td>
|
||||
<td>Item3</td>
|
||||
<td>Item4</td>
|
||||
<td>Item5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item1</td>
|
||||
<td>Item2</td>
|
||||
<td>Item3</td>
|
||||
<td>Item4</td>
|
||||
<td>Item5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item1</td>
|
||||
<td>Item2</td>
|
||||
<td>Item3</td>
|
||||
<td>Item4</td>
|
||||
<td>Item5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item1</td>
|
||||
<td>Item2</td>
|
||||
<td>Item3</td>
|
||||
<td>Item4</td>
|
||||
<td>Item5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="buttons">
|
||||
<button id="pretty">隔行换色</button>
|
||||
<button id="clear">清除数据</button>
|
||||
<button id="remove">删除一行</button>
|
||||
<button id="hide">表格淡出</button>
|
||||
</div>
|
||||
<!-- 引入jQuery -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
|
||||
<script>
|
||||
// $('选择器') --> jQuery对象 --> 封装了很多的方法
|
||||
$('#pretty').on('click', () => {
|
||||
$('#data>tbody>tr:odd').css('background-color', 'lightgray')
|
||||
$('#data>tbody>tr:even').css('background-color', 'lightgreen')
|
||||
})
|
||||
$('#clear').on('click', () => {
|
||||
$('#data>tbody>tr>td').empty()
|
||||
})
|
||||
$('#remove').on('click', () => {
|
||||
$('#data>tbody>tr:last-child').remove()
|
||||
})
|
||||
$('#hide').on('click', () => {
|
||||
let title = $('#hide').text()
|
||||
if (title == '表格淡出') {
|
||||
$('#data').fadeOut(1000, () => {
|
||||
$('#hide').text('表格淡入')
|
||||
})
|
||||
} else {
|
||||
$('#data').fadeIn(2000, () => {
|
||||
$('#hide').text('表格淡出')
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#fruits {
|
||||
width: 120px;
|
||||
margin: 20px 20px;
|
||||
}
|
||||
#fruits>li {
|
||||
list-style-type: none;
|
||||
height: 40px;
|
||||
color: white;
|
||||
background-color: #009966;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
}
|
||||
#fruits>li>a {
|
||||
float: right;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
#fruits~input {
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
margin: 20px 15px;
|
||||
}
|
||||
input[type=text] {
|
||||
border-bottom: 1px solid gray !important;
|
||||
}
|
||||
#ok {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
background-color: #CC3333;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<ul id="fruits">
|
||||
<li>苹果<a href="">×</a></li>
|
||||
<li>香蕉<a href="">×</a></li>
|
||||
<li>火龙果<a href="">×</a></li>
|
||||
<li>西瓜<a href="">×</a></li>
|
||||
</ul>
|
||||
<input type="text" name="fruit">
|
||||
<input id="ok" type="button" value="确定">
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script>
|
||||
function removeListItem(evt) {
|
||||
evt.preventDefault()
|
||||
// $函数的参数是一个原生的JavaScript对象,返回与原生JavaScript对象对应的jQuery对象
|
||||
$(evt.target).parent().remove()
|
||||
}
|
||||
// $函数的四种用法:
|
||||
// $函数的参数是一个匿名函数或箭头函数,传入的函数是页面加载完成后要执行的回调函数
|
||||
$(() => {
|
||||
// $函数的参数是一个样式表选择器字符串,获取页面元素得到一个jQuery对象(伪数组 - 数组中装的是原生JavaScript对象)
|
||||
$('#fruits>li>a').on('click', removeListItem)
|
||||
|
||||
$('#ok').on('click', (evt) => {
|
||||
let input = $('#ok').prev();
|
||||
let name = input.val().trim()
|
||||
if (name) {
|
||||
$('#fruits').append(
|
||||
// $函数的参数是一个标签字符串,创建一个新的元素并获得对应的jQuery对象
|
||||
$('<li>').text(name).append(
|
||||
$('<a href="">').html('×').on('click', removeListItem)
|
||||
)
|
||||
)
|
||||
}
|
||||
input.val('').get(0).focus()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ajax请求</title>
|
||||
</head>
|
||||
<body>
|
||||
<button id="load">加载更多</button>
|
||||
<div id="photos"></div>
|
||||
<script>
|
||||
(() => {
|
||||
const photos = document.querySelector('#photos')
|
||||
const loadBtn = document.querySelector('#load')
|
||||
const url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&page='
|
||||
var page = 0
|
||||
loadBtn.addEventListener('click', (evt) => {
|
||||
page += 1
|
||||
// 创建异步请求对象
|
||||
let xhr = new XMLHttpRequest()
|
||||
// open方法的第一个参数是请求类型, 第二个参数是请求的URL, 第三个参数必须设置为true(异步请求)
|
||||
xhr.open('get', url + page, true)
|
||||
// 绑定事件回调函数,在收到服务器返回的数据后要对页面进行局部刷新
|
||||
xhr.addEventListener('readystatechange', () => {
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
// 将返回的JSON字符串解析成JavaScript的对象
|
||||
let json = JSON.parse(xhr.responseText)
|
||||
json.newslist.forEach((mm) => {
|
||||
let img = document.createElement('img')
|
||||
img.src = mm.picUrl
|
||||
img.width = '300'
|
||||
photos.insertBefore(img, photos.firstElementChild)
|
||||
})
|
||||
}
|
||||
})
|
||||
// 发送异步请求
|
||||
xhr.send()
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ajax请求</title>
|
||||
</head>
|
||||
<body>
|
||||
<button id="load">加载更多</button>
|
||||
<div id="photos"></div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script>
|
||||
$(() => {
|
||||
const url = 'http://api.tianapi.com/meinv/'
|
||||
var page = 0
|
||||
$('#load').on('click', (evt) => {
|
||||
page += 1
|
||||
let data = {"key": "772a81a51ae5c780251b1f98ea431b84", "page": page}
|
||||
$.ajax({
|
||||
"url": url, // 请求的地址(统一资源定位符)
|
||||
"type": "get", // 请求的方法(get/post/delete/put)
|
||||
"data": data, // 发送给服务器的数据
|
||||
"dataType": "json", // 服务器返回的数据类型
|
||||
"headers": {}, // 请求头
|
||||
"success": (json) => { // 请求成功后要执行的回调函数
|
||||
json.newslist.forEach((mm) => {
|
||||
$('#photos').prepend($('<img width="300">').attr('src', mm.picUrl))
|
||||
})
|
||||
},
|
||||
"error": (error) => { // 请求失败后要执行的回调函数
|
||||
}
|
||||
})
|
||||
// $对象的getJSON方法可以执行异步请求(get请求)获得服务器返回的JSON格式的数据
|
||||
// 第一个参数是请求的URL(统一资源定位符)
|
||||
// 第二个参数是要发送给服务器的数据(JSON格式), 如果没有数据发给服务器可以省略不写
|
||||
// 第三个参数是请求成功服务器返回数据之后要执行的回调函数, 其参数为服务器返回的内容处理后的JSON对象
|
||||
// $.getJSON(url, data, (json) => {
|
||||
// json.newslist.forEach((mm) => {
|
||||
// $('#photos').prepend($('<img>').attr('src', mm.picUrl).attr('width', '300'))
|
||||
// })
|
||||
// })
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ajax请求</title>
|
||||
<style>
|
||||
#emp {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#emp td, #emp th {
|
||||
border-bottom: 1px solid black;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
#page {
|
||||
width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
#page a {
|
||||
text-decoration: none;
|
||||
color: darkcyan;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table id="emp">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编号</th>
|
||||
<th>姓名</th>
|
||||
<th>职位</th>
|
||||
<th>工资</th>
|
||||
<th>补贴</th>
|
||||
<th>所在部门</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="page">
|
||||
<a id="prev" href="">上一页</a>
|
||||
<a id="next" href="">下一页</a>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script>
|
||||
$(() => {
|
||||
function getEmpData(url) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'get',
|
||||
data: {},
|
||||
dataType: 'json',
|
||||
headers: {
|
||||
"token": "35ad60445cea11e99e1000163e02b646"
|
||||
},
|
||||
success: (json) => {
|
||||
$('#emp>tbody').empty()
|
||||
json.results.forEach((emp) => {
|
||||
let tr = $('<tr>')
|
||||
.append($('<td>').text(emp.no))
|
||||
.append($('<td>').text(emp.name))
|
||||
.append($('<td>').text(emp.job))
|
||||
.append($('<td>').text(emp.sal))
|
||||
.append($('<td>').text(emp.comm))
|
||||
.append($('<td>').text(emp.dept.name))
|
||||
$('#emp>tbody').append(tr)
|
||||
})
|
||||
$('#prev').attr('href', json.previous? json.previous : '')
|
||||
$('#next').attr('href', json.next? json.next : '')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function changePage(evt) {
|
||||
evt.preventDefault()
|
||||
let href = $(evt.target).attr('href')
|
||||
if (href) {
|
||||
getEmpData(href)
|
||||
}
|
||||
}
|
||||
|
||||
getEmpData('http://120.77.222.217/api/emps/')
|
||||
|
||||
$('#prev').on('click', changePage)
|
||||
$('#next').on('click', changePage)
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>猜数字</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var answer = parseInt(Math.random() * 100 + 1)
|
||||
var counter = 0
|
||||
var yourInput
|
||||
do {
|
||||
counter += 1
|
||||
yourInput = prompt('请输入你猜的数字: ')
|
||||
if (yourInput > answer) {
|
||||
alert('小一点')
|
||||
} else if (yourInput < answer) {
|
||||
alert('大一点')
|
||||
} else {
|
||||
alert('恭喜你猜对了')
|
||||
}
|
||||
} while (answer != yourInput)
|
||||
if (counter > 7) {
|
||||
alert('智商余额不足')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>判断闰年</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// var / let / const
|
||||
// JavaScript中的比较运算符带有隐式的类型转换
|
||||
// === / !== / && / || / !
|
||||
// 分支结构 - if...else... / switch...case...default...
|
||||
// 循环结构 - while / for / do...while
|
||||
// JavaScript中的数据类型:
|
||||
// - 简单数据类型: string / number / boolean / undefined / symbol / null
|
||||
// - 复杂数据类型: object
|
||||
// 检查变量或常量的数据类型可以使用typeof关键字
|
||||
var yearStr = prompt('请输入年份: ')
|
||||
var year = parseInt(yearStr)
|
||||
// && - and - 短路与运算
|
||||
// 一对花括号可以构成一个块级作用域 - let定义的变量就是块级作用域变量
|
||||
if (year == yearStr && year > 0) {
|
||||
// || - or - 短路或运算
|
||||
// 逻辑运算(短路运算)会产生一个布尔值要么是true要么是false
|
||||
let isLeap = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0
|
||||
let yesOrNo = isLeap? '是' : '不是'
|
||||
// ES6语法中的带占位符的字符串
|
||||
alert(`${year}年${yesOrNo}闰年`)
|
||||
} else {
|
||||
alert('请输入有效的年份')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>双色球随机选号</title>
|
||||
<style>
|
||||
p {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
color: white;
|
||||
font: 60px/100px Arial;
|
||||
border-radius: 50px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 浏览器中的JavaScript包含以下三样内容 -->
|
||||
<!-- ECMAScript - ES6 - 核心语法 -->
|
||||
<!-- BOM - 浏览器对象模型 - window -->
|
||||
<!-- DOM - 文档对象模型 - document -->
|
||||
<script>
|
||||
function outputBall(num, color='red') {
|
||||
document.write(`<p class="${color}">`)
|
||||
if (num < 10) {
|
||||
document.write('0')
|
||||
}
|
||||
document.write(num)
|
||||
document.write('</p>')
|
||||
}
|
||||
|
||||
var selectedBalls = []
|
||||
while (selectedBalls.length < 6) {
|
||||
let num = parseInt(Math.random() * 33 + 1)
|
||||
if (selectedBalls.indexOf(num) == -1) {
|
||||
selectedBalls.push(num)
|
||||
}
|
||||
}
|
||||
// 给红色球排序 - 需要传入一个匿名函数给出比较元素的规则
|
||||
// ES6开始支持使用箭头函数(Lambda函数 - 匿名函数)
|
||||
selectedBalls.sort((x, y) => x - y)
|
||||
// 代码有很多种坏味道 重复是最坏的一种 - Martin Fowler
|
||||
selectedBalls.forEach(item => outputBall(item))
|
||||
let num = parseInt(Math.random() * 16 + 1)
|
||||
outputBall(num, 'blue')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>显示时间日期</title>
|
||||
<style>
|
||||
#clock {
|
||||
color: white;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
background-color: blue;
|
||||
font: 16px/40px "pt mono";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="clock"></div>
|
||||
<script>
|
||||
// JavaScript - 面向对象编程
|
||||
// 定义类创建对象
|
||||
const clockDiv = document.getElementById('clock')
|
||||
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
|
||||
function showClock() {
|
||||
let now = new Date()
|
||||
let year = now.getFullYear()
|
||||
let mon = now.getMonth() + 1
|
||||
mon = mon < 10 ? '0' + mon : '' + mon
|
||||
let date = now.getDate()
|
||||
date = date < 10 ? '0' + date : '' + date
|
||||
let hour = now.getHours()
|
||||
hour = hour < 10 ? '0' + hour : '' + hour
|
||||
let min = now.getMinutes()
|
||||
min = min < 10 ? '0' + min : '' + min
|
||||
let sec = now.getSeconds()
|
||||
sec = sec < 10 ? '0' + sec : '' + sec
|
||||
let day = now.getDay()
|
||||
let fullStr = `${year}年${mon}月${date}日
|
||||
${hour}:${min}:${sec} 星期${weekdays[day]}`
|
||||
clockDiv.textContent = fullStr
|
||||
}
|
||||
|
||||
showClock()
|
||||
setInterval(showClock, 1000)
|
||||
// var timerId = setInterval(showClock, 1000)
|
||||
// clearInterval(timerId)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>类和对象</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
class Person {
|
||||
constructor(name, age) {
|
||||
this.name = name
|
||||
this.age = age
|
||||
}
|
||||
eat(food) {
|
||||
alert(`${this.name}正在吃${food}`)
|
||||
}
|
||||
watchAv() {
|
||||
if (this.age < 18) {
|
||||
alert(`${this.name}只能看《熊出没》`)
|
||||
} else {
|
||||
alert(`${this.name}正在观看岛国爱情动作片`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let person = new Person('骆昊', 39)
|
||||
person.eat('蛋炒饭')
|
||||
let person2 = new Person('王大锤', 15)
|
||||
person2.watchAv()
|
||||
|
||||
// 构造器函数
|
||||
/*
|
||||
function Person(name, age) {
|
||||
this.name = name
|
||||
this.age = age
|
||||
}
|
||||
Person.prototype.eat = function(food) {
|
||||
alert(this.name + '正在吃' + food)
|
||||
}
|
||||
Person.prototype.watchAv = function() {
|
||||
if (this.age < 18) {
|
||||
alert(this.name + '只能看《熊出没》')
|
||||
} else {
|
||||
alert(this.name + '正在观看岛国爱情动作片')
|
||||
}
|
||||
}
|
||||
let person = new Person('骆昊', 39)
|
||||
person.eat('蛋炒饭')
|
||||
let person2 = new Person('王大锤', 15)
|
||||
person2.watchAv()
|
||||
*/
|
||||
|
||||
// JSON - JavaScript Object Notation
|
||||
// JavaScript对象表达式 - 创建对象的字面量语法
|
||||
/*
|
||||
const person = {
|
||||
name: '骆昊',
|
||||
age: 39,
|
||||
eat: function(food) {
|
||||
alert(this.name + '正在吃' + food)
|
||||
},
|
||||
watchAv: function() {
|
||||
if (this.age < 18) {
|
||||
alert(this.name + '只能看《熊出没》')
|
||||
} else {
|
||||
alert(this.name + '正在观看岛国爱情动作片')
|
||||
}
|
||||
}
|
||||
}
|
||||
// person.age = 15
|
||||
person.eat('蛋炒饭')
|
||||
person.watchAv()
|
||||
*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#fruits {
|
||||
width: 120px;
|
||||
margin: 20px 20px;
|
||||
}
|
||||
#fruits>li {
|
||||
list-style-type: none;
|
||||
height: 40px;
|
||||
color: white;
|
||||
background-color: #009966;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
}
|
||||
#fruits>li>a {
|
||||
float: right;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
#fruits~input {
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
margin: 20px 15px;
|
||||
}
|
||||
input[type=text] {
|
||||
border-bottom: 1px solid gray !important;
|
||||
}
|
||||
#ok {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
background-color: #CC3333;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<ul id="fruits">
|
||||
<li>苹果<a href="">×</a></li>
|
||||
<li>香蕉<a href="">×</a></li>
|
||||
<li>火龙果<a href="">×</a></li>
|
||||
<li>西瓜<a href="">×</a></li>
|
||||
</ul>
|
||||
<input type="text" name="fruit">
|
||||
<input id="ok" type="button" value="确定">
|
||||
</div>
|
||||
<script>
|
||||
function addListItem() {
|
||||
let name = input.value.trim()
|
||||
if (name) {
|
||||
// 通过document对象的createElement方法创建新元素
|
||||
let li = document.createElement('li')
|
||||
// 可以用textContent或innerHTML属性来修改标签的内容
|
||||
li.innerHTML = name
|
||||
let a = document.createElement('a')
|
||||
a.innerHTML = '×'
|
||||
a.href = ''
|
||||
a.addEventListener('click', removeListItem)
|
||||
li.appendChild(a)
|
||||
// 通过父元素的appendChild或insertBefore可以添加子元素
|
||||
ul.appendChild(li)
|
||||
input.value = ''
|
||||
// 元素的focus和blur方法可以让元素获得或失去焦点
|
||||
input.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function removeListItem(evt) {
|
||||
// evt.stopPropagation()
|
||||
// 通过事件对象的preventDefault方法阻止事件的默认行为
|
||||
evt.preventDefault()
|
||||
// 通过元素获取父元素 - parentNode
|
||||
// 通过元素获取子元素 - children / firstElementChild / lastElementChild
|
||||
// 通过元素获取兄弟元素 - previousElementSibling / nextElementSibling
|
||||
let li = evt.target.parentNode
|
||||
// 通过父元素的removeChild方法可以删除指定的子元素
|
||||
ul.removeChild(li)
|
||||
}
|
||||
|
||||
const ul = document.querySelector('#fruits')
|
||||
const input = ul.nextElementSibling
|
||||
input.addEventListener('keypress', (evt) => {
|
||||
let code = evt.keyCode || evt.which
|
||||
if (code == 13) {
|
||||
addListItem()
|
||||
}
|
||||
})
|
||||
const ok = input.nextElementSibling
|
||||
ok.addEventListener('click', addListItem)
|
||||
let anchors = document.querySelectorAll('#fruits>li>a')
|
||||
for (let i = 0; i < anchors.length; i += 1) {
|
||||
// addEventListener方法有三个参数
|
||||
// 第一个参数是事件的名称，例如: click / dbclick / mouseover / mouseout
|
||||
// 第二个参数是事件发生时要执行的回调函数，函数的参数是事件对象:
|
||||
// ~ 传入一个已有函数的名字
|
||||
// ~ 写一个匿名函数 function(evt) {}
|
||||
// ~ 写一个箭头函数 (evt) => {}
|
||||
// 第三个参数表示使用事件捕获还是事件冒泡,如果不写表示事件冒泡(从里向外传播事件)
|
||||
// ~ 如果设置为true表示事件捕获(从外向里传播事件)
|
||||
// ~ 如果希望阻止事件的传播行为可以调用事件对象的stopPropagation方法
|
||||
anchors[i].addEventListener('click', removeListItem)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
function add() {
|
||||
alert(arguments.callee)
|
||||
alert(arguments.callee.caller)
|
||||
return arguments[0] + arguments[1]
|
||||
}
|
||||
|
||||
alert(add(1, 2))
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>经典布局</title>
|
||||
<style>
|
||||
#page {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
header, footer, #main {
|
||||
margin: 10px 0;
|
||||
}
|
||||
header {
|
||||
height: 150px;
|
||||
background-color: lightgoldenrodyellow;
|
||||
}
|
||||
#main {
|
||||
height: 600px;
|
||||
background-color: lightpink;
|
||||
}
|
||||
footer {
|
||||
height: 150px;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
#logo {
|
||||
height: 70%;
|
||||
}
|
||||
nav {
|
||||
height: 30%;
|
||||
background-color: lightgray;
|
||||
}
|
||||
#content {
|
||||
float: left;
|
||||
width: 74%;
|
||||
height: 100%;
|
||||
margin-right: 1%;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
article {
|
||||
height: 33%;
|
||||
border: 1px dashed black;
|
||||
}
|
||||
aside {
|
||||
float: left;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
background-color: lightcyan;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<!-- 页眉（logo+导航） -->
|
||||
<header>
|
||||
<div id="logo">页眉</div>
|
||||
<nav>导航菜单</nav>
|
||||
</header>
|
||||
<!-- 主体（可以分为多栏）-->
|
||||
<div id="main">
|
||||
<div id="content">
|
||||
<article>文章1</article>
|
||||
<article>文章2</article>
|
||||
<article>文章3</article>
|
||||
</div>
|
||||
<aside>侧边栏</aside>
|
||||
</div>
|
||||
<!-- 页脚（友情链接+版权信息+ICP备案信息） -->
|
||||
<footer>页脚</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>表格</title>
|
||||
<style>
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
td, th {
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
border-bottom: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
text-align: center;
|
||||
empty-cells: hide;
|
||||
}
|
||||
.bottom>td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.right {
|
||||
border-right: none;
|
||||
}
|
||||
thead>tr {
|
||||
background-color: lightgoldenrodyellow;
|
||||
}
|
||||
.even {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
.odd {
|
||||
background-color: lightblue;
|
||||
}
|
||||
th:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
th:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
tr:last-child>td:first-child {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
tr:last-child>td:last-child {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.number li {
|
||||
/* list-style-type: none; */
|
||||
list-style-position: inside;
|
||||
list-style-image: url(images/add.gif);
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
background-color: #006633;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin: 5px 5px;
|
||||
float: left;
|
||||
}
|
||||
.number li:hover {
|
||||
color: orange;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- table>tr*4>td*5 -->
|
||||
<table>
|
||||
<caption>学生考试成绩表</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="lt" width="120">姓名</th>
|
||||
<th width="100">语文</th>
|
||||
<th width="100">数学</th>
|
||||
<th width="100">英语</th>
|
||||
<th width="100" class="right">体育</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd">
|
||||
<td>王大锤</td>
|
||||
<td>90</td>
|
||||
<td>80</td>
|
||||
<td></td>
|
||||
<td class="right">60</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td>王大锤</td>
|
||||
<td>90</td>
|
||||
<td></td>
|
||||
<td>70</td>
|
||||
<td class="right">60</td>
|
||||
</tr>
|
||||
<tr class="bottom odd">
|
||||
<td>王大锤</td>
|
||||
<td>90</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td class="right">60</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="number">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
<li>Five</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vue入门</title>
|
||||
<style>
|
||||
/*
|
||||
#emp {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#emp td, #emp th {
|
||||
border-bottom: 1px solid black;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
*/
|
||||
#page {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
/*
|
||||
#page a {
|
||||
text-decoration: none;
|
||||
color: #67C23A;
|
||||
cursor: pointer;
|
||||
margin: 20px 20px;
|
||||
}
|
||||
*/
|
||||
h1 {
|
||||
color:#909399;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>员工信息表</h1>
|
||||
<hr>
|
||||
<el-table v-loading="loading" :data="emps" stripe style="width: 100%">
|
||||
<el-table-column prop="no" label="编号" width="180"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
|
||||
<el-table-column prop="job" label="职位"></el-table-column>
|
||||
<el-table-column prop="sal" label="工资"></el-table-column>
|
||||
<el-table-column prop="comm" label="补贴"></el-table-column>
|
||||
<el-table-column prop="dept.name" label="所在部门"></el-table-column>
|
||||
</el-table>
|
||||
<!--
|
||||
<table id="emp">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编号</th>
|
||||
<th>姓名</th>
|
||||
<th>职位</th>
|
||||
<th>工资</th>
|
||||
<th>补贴</th>
|
||||
<th>所在部门</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="emp in emps">
|
||||
<td>{{ emp.no }}</td>
|
||||
<td>{{ emp.name }}</td>
|
||||
<td>{{ emp.job }}</td>
|
||||
<td>{{ emp.sal }}</td>
|
||||
<td>{{ emp.comm }}</td>
|
||||
<td>{{ emp.dept.name }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
-->
|
||||
<div id="page">
|
||||
<el-button type="primary" round @click="prevPage()">上一页</el-button>
|
||||
<el-button type="primary" round @click="nextPage()">下一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
let pageSize = 5
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
emps: [],
|
||||
currentPage: 1,
|
||||
totalPage: 0,
|
||||
loading: true
|
||||
},
|
||||
created() {
|
||||
this.getEmpData()
|
||||
},
|
||||
methods: {
|
||||
getEmpData() {
|
||||
this.loading = true
|
||||
|
||||
const url = `http://120.77.222.217/api/emps/?page=${this.currentPage}`
|
||||
fetch(url, {
|
||||
headers: {
|
||||
"token": "35ad60445cea11e99e1000163e02b646",
|
||||
}
|
||||
})
|
||||
.then(resp => resp.json())
|
||||
.then(json => {
|
||||
setTimeout(() => {
|
||||
this.emps = json.results
|
||||
this.totalPage = parseInt((json.count - 1) / pageSize) + 1
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
prevPage() {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage -= 1
|
||||
this.getEmpData()
|
||||
}
|
||||
},
|
||||
nextPage() {
|
||||
if (this.currentPage < this.totalPage) {
|
||||
this.currentPage += 1
|
||||
this.getEmpData()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 330 B |
Binary file not shown.
|
After Width: | Height: | Size: 505 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 640 B |
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 324 B |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 395 B |
Binary file not shown.
|
After Width: | Height: | Size: 744 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue