電商項目（上）

時間  2019-11-29
標籤 項目 简体版
原文   原文鏈接

電商項目

電商項目（上）css

css3新增選擇器：html

:first-child: 選取屬於其父元素的首個子元素的指定選擇器java

:last-child: 選取屬於其父元素的最後一個子元素的指定選擇器css3

:nth-child(n): 匹配屬於其父元素的第n個子元素git

:nth-last-child(n): 選擇器匹配屬於其元素的第n個子元素的每一個元素github

header: 定義文檔的頁面chrome

nav: 定義導航連接的部分bash

footer: 定義文檔或節的頁腳app

article: 定義文檔中的節ide

aside: 定義其所處內容以外的內容

header nav footer article section main
複製代碼
<input type="email">
<input type="tel">
<input type="url">
<input type="number">
<input type="search">
<input type="range">
<input type="time"> // 小時分鐘
<input type="date"> // 年月日
<input type="datetime"> // 時間
<input type="month"> // 月年
複製代碼
placeholder
<input type="text" placeholder="請輸入用戶名">
<input type="text" autofocus> // 自動獲取焦點
<input type="file" multiple> // 多文件上傳
<input type="text" autocomplete="off"> // 自動完成功能
<input type="text" required> // 必填項 內容不爲空
<input type="text" accesskey="s"> // 使用激活元素的快捷鍵
複製代碼
<form action="">
 <fieldset>
  <legend>學生<legend>
  <label for="userName">姓名：</label>
  <input type="text" name="userName" id="userName" placeholder="請輸入用戶名"><br>
  <label for="userPhone">手機號碼:</label>
  <input type="tel" name="userPhone" id="userPhone" pattern="^\d{10}$"><br>
  <label for="email">郵箱地址:</label>
  <input type="email" required name="email" id="email"><br>
   <label for="collage">學院：</label>
   <input type="text" name="collage" id="collage" list="cList" placeholder="請選擇"><br>
   <datalist id="cList">
    <option value="學院"></option>
    <option value="java"></option>
    <option value="c"></option>
  </datalist><br>
 <label for="score">成績:</label>
 <input type="number" max="100" min="0" value="0" id="scrore"><br>
 <form action="">
  <fieldset>
   <legend>學生</legend>
   <label>姓名：<input type="text" placeholder="請輸入學生名字"/></label>
   <label>手機號：<input type="tel"/></label>
   <label>郵箱：<input type="email"/></label>
   <label>學院：<input type="text" placeholder="學院" />
複製代碼
embed 標籤
iframe 
audio // 播放音頻
video //  播放視頻
複製代碼

embed用來插入各類媒體

video
autoplay: 自動播放
controls: 是否顯示默認播放控件
loop: 循環播放
width: 播放的寬度
height: 播放的高度
複製代碼
even 偶數
odd 奇叔

class^=add 表示以add開始位置

class$=ass 表示以ass結束位置開始

class*=aa 表示以aa爲任意位置
div[class^=add]
input[type=hahaha]
複製代碼
E::first-letter 文本的第一個單詞或字

E::first-line 文本第一行

E::selection 可改變選中文本的樣式

p::first-letter {
 
}

E::before
E::after

div::befor {
 content: "開始";
}

div::after {
 content: "結束";
}
複製代碼
<style>
 span:: before {
   content: "dashu";
 }
<style>

<body>
 <span>dashu</span>
</body>
複製代碼

使用after僞元素

* {
 margin: 0;
 padding: 0;
}
em,i {
 font-style: normal;
}
li {
 list-style: none;
}
img {
 border: 0;
 vertical-align: middle;
}
button {
 cursor: pointer;
}
a {
 color: red;
 text-decoration: none;
}
// 清除浮動
.clearfix:after {
 visibility: hidden;
 clear: both;
 display: block;
 content: ".";
 height: 0;
}
.clearfix {
 *zoom: 1;
}
複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		border: 1px solid red;
		line-height: 30px;
	}
	span {
		display: inline-block;
		vertical-align: middle;
		width: 20px;
		height: 20px;
		background-color: red;
	/*	margin-top: 10px;*/
	}

	</style>
</head>
<body>
	<div>
		<span></span>  dashu
	</div>
</body>
</html>
複製代碼
<link rel="shortcut icon" href="favicon.ico"/> 
複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
 <header>
  <div class="logo">
   <h1>
    <a href="#"></a>
   </h1>
 </header>
</body>
</html>
複製代碼

text-indent屬性：縮進 縮進文本首行

p {
 text-indent: 10px;
}
複製代碼

overflow屬性：用來表示溢出時如何處理

visible 出如今框外
hidden 內容不會出現
scroll 滾動方式處理
auto自動
inherit 從父元素繼承overflow
複製代碼
nav li {
 float: left;
 height: 40px;
 line-height: 40px;
 margin-left: 25px;
}
nav li a {
 display: block;
 height: 40px;
 font-size: 18px;
 padding: 0 10px;
}
nav li a:hover {
 border-bottom: 2px solid #00a4ff;
}
複製代碼
<input class="search-text" type="search" id="search" name="keyword" autocomplete="off">

input {
 width: 361px;
 height: 40px;
 border: 1px solid #00a4ff;
 outline: none; 
 padding-lefr: 10px;
}

// outline 元素周圍，邊框外
outline-color 邊框顏色
outline-style 邊框的樣式
outline-width 邊框的寬度
inherit 從父元素繼承outline
複製代碼
transition: 要過分的屬性
transition-property: 應用過渡的css屬性的名稱
transition-duration: 定義過渡效果花費的時間
transition-delay: 規定過渡效果什麼時候開始
transition-timing-function 過渡效果的時間曲線

linear 勻速
ease 逐漸慢下來
ease-in 加速
ease-out 減速

transition-duration 花費時間 單位 s
複製代碼

css樣式，外觀屬性，選擇器，顯示模式，背景屬性，三大特性，盒子模型，浮動，定位。

內部樣式表

<head>
<style type="text/css">
 選擇器 {屬性一：屬性值一;}
</style>
</head>
複製代碼

外部樣式表

<head>
  <link href="CSS文件路徑"  rel="stylesheet" />
</head>
複製代碼

內聯樣式:

<標籤名 style="屬性1:屬性值1; "> 內容 </標籤名>
複製代碼

清除全部HTML標記的默認邊距

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}
複製代碼
div {
 width: 180px;
 height: 120px;
 border: 1px solid red;
 overflow: hidden;
}
div img {
 width: 180px;
 height: 120px;
 transition: all 0.4s;
}
div:hover img {
margin-left: -10px;
}

<div>
 <img src="1.jpg" alt="">
</div>
複製代碼

transform

移動translate(x,y)
縮放scale(x,y)
旋轉rotate(deg)
傾斜skew(deg,deg)
複製代碼
font-size 字號大小

相對長度單位：
em 相對於當前對象內文本的字體尺寸
px 像素
絕對長度單位：
in 英寸
cm 釐米
mm 毫米
pt 點
複製代碼

font-family 屬性 用於設置字體

儘可能使用英文：

font-family:"Microsoft Yahei"
複製代碼

font-weight:字體粗細

normal、bold、bolder、lighter
400 normal
700 bold
複製代碼

font-style:字體風格

normal 標準的字體樣式
italic 斜體
oblique 傾斜的字體樣式
複製代碼
font-style  font-weight  font-size/line-height  font-family
複製代碼

color: 文本顏色 line-height: 行間距 text-align: 水平對齊方式 text-indent:首行縮進 text-decoration 文本的裝飾

none underline overline line-through
複製代碼

CSS複合選擇器：交集選擇器，並集選擇器

:link      /* 未訪問的連接 */
:visited   /* 已訪問的連接 */
:hover     /* 鼠標移動到連接上 */
:active    /* 選定的連接 */
複製代碼

塊級元素：block-level每一個塊級元素一般都會獨自佔據一整行或多整行。

效果

最典型的塊元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
複製代碼

行內元素：inline-level 行內元素，內聯元素不佔有獨立的區域

常見的行內元素：

<a>、<strong>、
<b>、<em>、<i>、
<del>、<s>、<ins>、
<u>、<span>
複製代碼

效果

p裏面不能放入塊級元素，連接裏不能放入連接，a裏面不能夠放塊級元素。

行內塊元素： inline-block

<img/> <input/> <td>
複製代碼

效果

標籤轉換 display

display: inline;
display: block;
display: inline-block;
複製代碼

css規範：

.btn { }
font-size: 10px;
複製代碼

行高

行高 等於 高度 垂直居中 行高 大於 高度，文字偏下 不然，偏上

效果

效果 

background-image : 
none | url (url) 

background-repeat : 
repeat | no-repeat | repeat-x | repeat-y 

background-position : length || length

background-position : position || position 

position : &emsp;
top | center | bottom | left | right 

background-attachment : 
scroll | fixed 
複製代碼

background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;
複製代碼

案例：

<head>
        <meta charset="utf-8">
        <style>
		body {
			background-color: #000;
		}
		a {
			width: 100px;
			height: 100px;

			display: inline-block;  
			text-align: center;  
			line-height: 100px;  
			color: #fff;
			font-size: 22px;
			text-decoration: none;  /* 取消下劃線 文本裝飾 */
		}
		a:hover {  
			background: url(images/1.png) no-repeat; 
		}
        </style>
    </head>
    <body>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    </body>
複製代碼

效果

盒子邊框

border : 
border-width || border-style || border-color 
複製代碼
none: 沒有邊框
solid: 單實線
dashed：邊框爲虛線  
dotted：邊框爲點線
double：邊框爲雙實線
border-top: 1px solid red; /*上邊框*/
複製代碼
border-collapse:collapse; 
表示相鄰邊框合併在一塊兒
複製代碼

效果

效果 

.btn { width: 100px; margin: 0 auto; }
複製代碼
text-align: center;
margin: 10px auto;
複製代碼

清除元素的默認內外邊距

* {
   padding:0;         /* 清除內邊距 */
   margin:0;          /* 清除外邊距 */
}
複製代碼

塊級元素相鄰的外邊距的合併，大的那個爲準。

穩定性來分：

width >  padding  >  margin   
複製代碼

盒子陰影

box-shadow:
水平陰影 垂直陰影 
模糊距離（虛實）  
陰影尺寸（影子大小）  
陰影顏色  內/外陰影；
複製代碼
h-shadow
v-shadow
blur
spread
color
inset
複製代碼
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); 
水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色  內/外陰影；
複製代碼

normal flow

效果

浮動float

選擇器{float:屬性值;}
left right none
複製代碼

浮動，其餘的元素都要浮動。

清除浮動本質

選擇器{clear:屬性值;}  
left 清除左側浮動
right 清除右側浮動
both 同時清除左右兩側浮動
複製代碼
overflow hidden|auto|scroll
複製代碼

使用after僞元素清除浮動

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

.clearfix {*zoom: 1;} 
複製代碼
.clearfix:before, .clearfix:after {
 content: "",
 display: table;
}

.clearfix:after {
 clear: both;
}

.clearfix {
 *zoom: 1;
}
複製代碼

切片工具，切片工具

效果

新建基於圖層的切片，基於參考線的切片

效果 

position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
margin-left: 20px;
複製代碼
top bottom left right
複製代碼
position: 
static 自動定位
relative 相對定位
absolute 絕對定位
fixed 固定定位
複製代碼

效果

疊放次序：z-index 正整數、負整數和0

元素的顯示與隱藏

display 
visibility
overflow
複製代碼
display : none
隱藏以後，再也不保留位置
複製代碼

效果

效果 

outline : outline-color ||outline-style || outline-width 
outline: 0;   或者  outline: none;
style="outline: 0;"
複製代碼

防止拖拽文本域

resize：none 
<textarea></textarea> 
<textarea  style="resize: none;"></textarea>

top line
middle line
base line
bottom line
vertical-align: baseline | top | middle | bottom

vertical-align: baseline;
vertical-align: middle;
vertical-align: top;

img { vertical-align: top; border: 0; }
.clearfix{ *zoom: 1; }
.clearfix:after { display: block; overflow: hidden; clear: both; }
複製代碼

text-overflow 文字溢出

text-overflow : clip | ellipsis
複製代碼

效果

效果 

<li>
  <a href="#">
    <span>導航欄</span>
  </a>
</li>
複製代碼

icomoon.io www.iconfont.cn/ www.iconfont.cn/ fontello.com/ glyphicons.com/ fortawesome.github.io/Font-Awesom… icons8.com/

效果

效果

引入ico圖標

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
複製代碼

W3C 統一驗證工具

[http://validator.w3.org/unicorn](http://validator.w3.org/unicorn)/
複製代碼

tool.chinaz.com/Tools/CssFo… css 代碼壓縮

autoplay 自動播放

controls 是否顯示默認播放控件

loop 循環播放

width 設置播放窗口寬度

height 設置播放窗口的高度
複製代碼
E::first-letter文本的第一個單詞或字
E::first-line 文本第一行
E::selection 可改變選中文本的樣式

div::befor {
  content:"開始";
}
div::after {
  content:"結束";
}
複製代碼

案例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  div {
   width: 100px;
   height: 100px;
   background-color: red; 
   transition: all 1s; // 過渡
  }
  div:hover {
   background-color: green;
  }
  </style>
</head>
<body>
 <div>
 </div>
</body>
</html>
複製代碼

transition: 過渡的屬性， 花費時間，運動曲線，什麼時候開始！

transition簡寫屬性，四個過渡屬性，transition-property應用過渡css屬性的名稱，transition-duration定義過渡效果花費的時間，transition-timing-function過渡的效果，時間曲線，ease默認值，transition-delay規定過渡效果什麼時候開始，默認值爲0。

全部屬性都變化過渡，爲all。

linear 勻速
ease 逐漸減慢
// 0s 什麼時候開始 1s 花費時間
transition: all 1s ease 0s;
複製代碼

transform變形： translate(x,y)

transform: translate(100px, 100px);
複製代碼

scale(x,y)縮放 rotate(45deg)旋轉 transform-origin能夠設置元素的轉換變形的原點

// transform-origin: 10px 10px;
div { transform-origin: left top; transform: rotate(45deg); }
複製代碼

skew(deg,deg)傾斜

.book dt {
 height: 50px;
 background-color: red;
 font-weight: 300;
 color: yellow;
 line-height: 50px;
 font-size: 20px;
 text-align: center;
}
.book dd {
 padding: 15px 20px 0;
}
.book dd li {
 height: 60px;
 border-bottom: 1px solid #ccc;
 background-color: pink;
 padding-top: 5px;
}
.book h5 {
 font-size: 15px;
 font-weight: normal;
}
複製代碼

效果 

地址： 
https://pan.baidu.com/s/1vye5PeNeEp_RPcVhAez4lQ
複製代碼

定位：

position z-index top right bottom left clip
複製代碼

佈局：

display float clear visibility overflow overflow-x overflow-y
複製代碼
margin margin-top margin-right margin-bottom margin-left
複製代碼

邊框：

border 
border-width border-style border-color

border-top 
border-top-width border-top-style border-top-color

border-right
border-right-width border-right-style border-right-color

border-bottom 
border-bottom-width border-bottom-style border-bottom-color

border-left 
border-left-width border-left-style border-left-color

border-radius
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

box-shadow

border-image 
border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
複製代碼

背景：

background
background-color background-image background-repeat background-attachment background-position background-origin background-clip background-size
複製代碼

字體：

font font-style font-variant font-weight font-size font-family font-stretch font-size-adjust
複製代碼

文本text

text-transform white-space tab-size word-break word-wrap overflow-wrap text-align text-align-last text-justify word-spacing letter-spacing text-indent vertical-align line-height text-size-adjust
複製代碼

css:

// 文本
text-decoration text-decoration-line text-decoration-color text-decoration-style text-decoration-skip text-underline-position text-shadow

direction unicode-bidi writing-mode
複製代碼
// 列表
list-style list-style-image list-style-position list-style-type
複製代碼
// 表格
table-layout border-collapse border-spacing caption-side empty-cells
// 內容
cotent counter-increment counter-reset quotes
// 界面
appearance text-overflow outline outline-width
outline-style outline-color outline-offset nav-index
nav-up nav-right nav-down nav-left 
cursor zoom box-sizing resize ime-mode
user-select pointer-events
// 盒子
box-orient box-pack box-align box-flex
box-flex-group box-ordinal-group box-direction box-lines
// 打印Printing
page page-break-before page-break-after page-break-inside
// 媒體查詢:
width height device-width device-height orientation aspect-ratio device-aspect-ratio color
color-index monochrome resolution scan grid
複製代碼

案例：

// 小圓點
<div class="circle">
 <i class="current"></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
</div>
複製代碼
<!-- nav部分 -->
<nav>
 <ul>
  <li><a href="#">首頁</a></li>
  <li><a href="#">首頁</a></li>
 </ul>
</nav>
複製代碼

過渡：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;

		transition: all 0.5s; 
	}
	div:hover {
		width: 500px;
		height: 200px;

	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
複製代碼

圖片效果：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 185px;
		height: 130px;
		border: 1px solid red;
		overflow: hidden;
	}
	div img {
		width: 195px;
		height: 130px;
		transition: all 0.4s;
	}
	div:hover img {
		margin-left: -10px;
	}
	</style>
</head>
<body>
	<div>
		<img src="1.jpg" alt="">
	</div>
</body>
</html>
複製代碼

側邊欄：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	.subnav {
		margin: 100px auto;
		width: 20px;
	}
	.subnav li {
		width: 20px;
		height: 20px;
		margin: 3px 0;
		background-color: pink;
		position: relative;
	}
	.subnav div {
		position: absolute;
		right: 0;
		top: 0;
		height: 20px;
		width: 0;
		background-color: purple;
		transition: all 0.6s;
		z-index: -1;
	}
	.subnav li:hover div {
		width: 100px;
	}
	</style>
</head>
<body>
	<div class="subnav">
		<ul>
			<li>
				<div></div>
			</li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
		</ul>
	</div>
</body>
</html>
複製代碼

位移：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		transition: all 0.4s;
	}
	div:hover {
		transform: translate(100px, 100px);
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
複製代碼

盒子居中：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		position: absolute;
		width: 200px;
		height: 200px;
		background-color: pink;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
複製代碼

圖片放大：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 386px;
		height: 260px;
		overflow: hidden;

	}
	div img {
		transition: all 0.5s;
	}
	div:hover img {
		transform: scale(1.1);
	}
	</style>
</head>
<body>
	<div>
		<img src="1.jpg" height="260" width="386" alt="">
	</div>
</body>
</html>
複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
	}
	div:hover {
		transform: scale(0.8);
	}
	</style>
</head>
<body>
	<div>
		
	</div>
</body>
</html>
複製代碼

旋轉：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		margin: 100px auto;
		transition: all 0.6s;
		transform-origin: right bottom; 
	}
	div:hover {
		transform: rotate(360deg); 
	}

	</style>
</head>
<body>
	<div>123</div>
	
</body>
</html>
複製代碼

風車：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		margin: 100px auto;
		transition: all 0.6s;
	}
	img {
		transition: all 0.6s;
	}

	img:hover {
		transform: rotate(360deg); 
	}
	</style>
</head>
<body>
	<img src="images/fengche.png" height="585" width="585" alt="">
</body>
</html>
複製代碼

過渡：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: red;
		transition: all 2s;
	}
	div:hover {
		background-color: blue;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
複製代碼
// skew 傾斜
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			transform: skew(30deg);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
複製代碼

顯示陰影

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>

	<style>
	div {
		width: 150px;
		height: 150px;
		border: 1px solid #ccc;
		transition: all 0.6s;
	}
	div:hover {
		box-shadow: 0 10px 20px rgba(0,0,0,0.5);
		transform: translateY(-20px);
	}
	
	</style>
</head>
<body>
	<div></div>
</body>
</html>
複製代碼

圖片旋轉：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 250px;
		height: 170px;
		border: 1px solid red;
		margin: 150px auto;
		position: relative;
	}
	div img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 0.6s;
		transform-origin: top right;
	}
	div:hover img:first-child {
		transform: rotate(60deg);
	}
	div:hover img:nth-child(2) {
		transform: rotate(120deg);
	}
	div:hover img:nth-child(3) {
		transform: rotate(180deg);
	}
	div:hover img:nth-child(4) {
		transform: rotate(240deg);
	}
	div:hover img:nth-child(5) {
		transform: rotate(300deg);
	}
	div:hover img:nth-child(6) {
		transform: rotate(360deg);
	}
	</style>
</head>
<body>
	<div>
		<img src="images/2.jpg" alt="">
		<img src="images/3.jpg" alt="">
		<img src="images/4.jpg" alt="">
		<img src="images/5.jpg" alt="">
		<img src="images/6.jpg" alt="">
		<img src="images/1.jpg" >
	</div>
</body>
</html>
複製代碼

結言

好了，歡迎在留言區留言，與你們分享你的經驗和心得。

感謝你學習今天的內容，若是你以爲這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

做者簡介

達叔，理工男，簡書做者&全棧工程師，感性理性兼備的寫做者，我的獨立開發者，我相信你也能夠！閱讀他的文章，會上癮！，幫你成爲更好的本身。長按下方二維碼可關注，歡迎分享，置頂尤佳。

努力努力再努力Jeskson
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程