电商项目（上）
2019-03-15 本文已影响14人
魔王哪吒
电商项目
电商项目（上）
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>
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。
努力努力再努力Jeskson
