電商項目（上）

羅志環發布于2019-04-23 11:45 / 2897人閱讀

摘要：勻速逐漸減慢何時開始花費時間變形縮放旋轉可以設置元素的轉換變形的原點傾斜地址定位布局邊框背景字體文本文本列表表格內容界面盒子打印媒體查詢案例小圓點部分首頁首頁過渡圖片效果

電商項目（上）

css3新增選擇器：

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

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

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

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

header: 定義文檔的頁面

nav: 定義導航鏈接的部分

footer: 定義文檔或節的頁腳

article: 定義文檔中的節

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

</>復制代碼 
header nav footer article section main

</>復制代碼 
 // 小時分鐘
 // 年月日
 // 時間
 // 月年

</>復制代碼 
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: "結束";
}

</>復制代碼 
    
          dashu

</>復制代碼

</>復制代碼

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 {
 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樣式，外觀屬性，選擇器，顯示模式，背景屬性，三大特性，盒子模型，浮動，定位。

內部樣式表

</>復制代碼

外部樣式表

</>復制代碼

內聯樣式:

</>復制代碼 
<標簽名 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;
}
 
line-height: 行間距
text-align: 水平對齊方式
text-indent:首行縮進
text-decoration 文本的裝飾
</>復制代碼 
none underline overline line-through
CSS復合選擇器：交集選擇器，并集選擇器
</>復制代碼 
:link      /* 未訪問的鏈接 */
:visited   /* 已訪問的鏈接 */
:hover     /* 鼠標移動到鏈接上 */
:active    /* 選定的鏈接 */
塊級元素：block-level每個塊級元素通常都會獨自占據一整行或多整行。
最典型的塊元素：
</>復制代碼 
~、、、、、
行內元素：inline-level
行內元素，內聯元素不占有獨立的區域
常見的行內元素：
</>復制代碼 
、、
、、、
、、、
、
p里面不能放入塊級元素，鏈接里不能放入鏈接，a里面不可以放塊級元素。
行內塊元素： inline-block
復制代碼 復制代碼 
  
標簽轉換 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 : 　
top | center | bottom | left | right 
background-attachment : 
scroll | fixed 
background:
背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
</>復制代碼 
background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;
案例：
</>復制代碼 
        
        
    
    
    1
    2
    3
    4
    
盒子邊框
</>復制代碼 
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 
 
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
</>復制代碼 
  
    導航欄
  
http://icomoon.io
http://www.iconfont.cn/
http://www.iconfont.cn/
http://fontello.com/
http://glyphicons.com/
http://fortawesome.github.io/Font-Awesome/
https://icons8.com/
引入ico圖標
</>復制代碼 
W3C 統一驗證工具
</>復制代碼 
[http://validator.w3.org/unicorn](http://validator.w3.org/unicorn)/
http://tool.chinaz.com/Tools/CssFormat.aspx css 代碼壓縮
</>復制代碼 
autoplay 自動播放
controls 是否顯示默認播放控件
loop 循環播放
width 設置播放窗口寬度
height 設置播放窗口的高度
</>復制代碼 
E::first-letter文本的第一個單詞或字
E::first-line 文本第一行
E::selection 可改變選中文本的樣式
div::befor {
  content:"開始";
}
div::after {
  content:"結束";
}
案例：
</>復制代碼 
 
 Document
 
 
 
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
案例：
</>復制代碼 
// 小圓點
 
 
 
 
 
</>復制代碼 
   
首頁
  
首頁
 
過渡：
</>復制代碼 
    
    dashu
    
    
圖片效果：
</>復制代碼 
    
    dashu
    
    
        
           
               
                                           
                       
                 
            
                     
                 
                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               java電商項目
                                                                                                           php 電商項目
                                                                                                           php 電商 項目
                                                                                                           java電商項目下載
                                                         
                 
               
              
             
               
                    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1114.html
               
                      
                                
                                  
上一篇：蓋房子建材——標簽
                                                  
                                       
下一篇：新注冊博客
                                  
              
              
                相關文章
                                             
                                                                    
                                                
                          #私藏項目實操分享# 介紹一款開源電商網站的購物車添加功能的實現
                                                     摘要：目前電商領域有兩款比較出名的開源電商網站解決方案，分別是基于開發框架，代號為的開源項目，以及基于的作為開源項目的開發成員之一，今天我想通過本文，給大家介紹一下我們平時購物時最常使用到的功能之一，添加產品到購物車的技術實現。        
                             目前電商領域有兩款比較出名的開源電商網站解決方案，分別是基于 Angular 開發框架，...
                                                   
                          
                                
                                    不知名網友
                                    2021-11-29 10:50
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
                                                                                        
                                                
                          【Copy攻城獅日志】借助Taro暴改Nideshop實現電商支付寶小程序雛形
                                                     摘要：接下來，在支付寶小程序開發者工具中打，不出意外能跑起來一個電商支付寶小程序雛形。地址以上是我這個攻城獅對使用轉換原生微信小程序為支付寶小程序的一次微不足道的實踐。
showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑開局一張圖，故事全靠編↑
從一個需求說起
作為底層的程序猿，哦不，我連猿都算不上，混的好的叫碼神，混得一...
                                                   
                          
                                
                                    gnehc
                                    2019-08-23 14:54
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
                                                                                        
                                                
                          Selenuim Java 借用某寶某地區的電商數據
                                                     摘要：剛下載時項目中使用后得不到某寶的數據，因為數據是動態生成的。使用去獲取數據某寶的取不到用某度的首頁試了下是可以的。我是根據店鋪名稱賣家地區中包含特定關鍵字來過濾的。把寶貝列表的做為輸入循環寶貝列表并進入抓取交易量數據并保存。
項目背景
  因前段時間公司有需求，想得到我們公司所在地區（四線城市）的電商企業的銷售額排名情況，時間緊急，調研無
  果，花費RMB若干買了某工具的數據服務（避...
                                                   
                          
                                
                                    Arno
                                    2019-08-16 12:39
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
                                                                                        
                                                
                          Laravel 開源電商體驗與部署
                                                     摘要：體驗開源項目已經部署了體驗環境，開源通過掃描下方小程序碼進行體驗我們部署了環境，訪問地址訪問默認是的歡迎頁面，可通過文檔了解請求地址和相關參數說明。商品示例數據文件在目錄下，可以通過使用各類管理工具或者命令執行文件導入。
體驗
開源項目已經部署了體驗環境，開源通過掃描下方小程序碼進行體驗：
showImg(https://segmentfault.com/img/remote/1460...
                                                   
                          
                                
                                    charles_paul
                                    2019-07-01 11:06
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
                                                                                        
                                                
                          黑馬前端v7（含Vue3.0小兔鮮兒電商項目）完整代碼下載
                                                     摘要：沒有過時，它仍然是前端基礎的一部分。但無論如何，同時掌握和才是合格的前端同學。。前端綜合協議跨域通信安全問題瀏覽器渲染機制異步和單線程頁面性能優化防抖動和節流閥前端錯誤監控虛擬等。另外，前端常見的有兩個和。是的標準，是的超集。                                    2021已完結??Download：百度網盤??提取碼：k4H5?前端技術知識匯總：1、HTML...
                                                   
                          
                                
                                    senntyou
                                    2021-11-22 15:29
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
                                                                            
                
              
              
               
                  
                  發表評論
                   
                                      
                      
                        登陸后可評論
                                         
               
              
                
                  0條評論


           
               
                
                    
                    羅志環
                    男|高級講師
                    
                     
                                                                      我要關注
      
                                                                                        我要私信
                     
                                            
                    
                    
                          TA的文章
                          閱讀更多
                    
                      
                                                  云虛擬主機如何清除數據-如何清理虛擬主機的垃圾文件？
                            閱讀 2232·2021-09-22 15:25
                                                       怎樣打造一個DOM元素位置引擎 (一)
                            閱讀 3618·2019-08-30 12:48
                                                       position定位有哪些？各有什么特點？
                            閱讀 2206·2019-08-30 11:25
                                                       vue 核心之一 計算屬性computed 和偵聽屬性watch
                            閱讀 2339·2019-08-30 11:05
                                                       圖片自適應
                            閱讀 726·2019-08-29 17:28
                                                       React 學習之路 （四） state &  生命周期
                            閱讀 3286·2019-08-26 12:16
                                                       promise 基礎版（雛形）
                            閱讀 2609·2019-08-26 11:31
                                                       一名【合格】前端工程師的自檢清單
                            閱讀 1705·2019-08-23 17:08
                                                
                      
                

                   
              
  
                  最新活動 
           
         
                    
                      
                                                                                                                       
                          
                                                             
                          
                        
                                                
                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              

                    
                        企业采购季！
                        极致性价比！云服务器续费无忧！
                        
                          中国区
                          亚太区
                          美洲区
                        
                      
                        多种GPU机型限时特惠
                        Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起，不限台数，续费同价。
                        
                          易用
                          弹性
                          低成本
                        
                                      
                        GPU算力平台
                        NVIDIA RTX 40系，高性价比推理显卡，满足AI应用场景需要。
                        
                          4090                          24G显存
                          高性价比 
                        
                      
                      高等级、高电力的数据中心托管服务
                        乌兰察布+上海青浦，满足东推西训AI场景需要
                         
                          40A高电机柜
                           东数西算
                          视频短信

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

電商項目（上）

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

~

、、、、、

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

</>復制代碼

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`、、`
`、`
`、`
`、`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`

`</>復制代碼`