电商项目(上)

电商项目

电商项目(上)

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
<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 :  
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>

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图标

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

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

案例:

<!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>

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

作者简介

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券