摘要：匀速逐渐减慢何时开始花费时间变形缩放旋转可以设置元素的转换变形的原点倾斜地址定位布局边框背景字体文本文本列表表格内容界面盒子打印媒体查询案例小圆点部分首页首页过渡图片效果

电商项目（上）

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:"结束";
}
案例：



 
 
 


 

 


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
案例：
// 小圆点

 
 
 
 
 



过渡：



    
    
    


    



图片效果：



    
    
    


    

        
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服务器
                                             
                         GPU云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               java电商项目
                                                                                                           php 电商项目
                                                                                                           php 电商 项目
                                                                                                           java电商项目下载
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/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条评论