02前端入门HTML5 +CSS3+电商网页制作

  • 0 来源
  • 1 CSS基础
    • 1.1 基础认识
      • 1.1.1 css demo
      • 1.1.1 css的层叠性
    • 1.2 CSS引入方式
    • 1.3 选择器
    • 1.4 文体和文本样式
      • 1.4.1 文体
      • 1.4.2 文本样式
      • 1.4.3 行高
      • 1.4.4 Chrome 调试工具
      • 1.4.5 拓展
  • 2 CSS进阶
    • 2.1 选择器
      • 2.1.1 复合选择器
      • 2.1.2 并集选择器
      • 2.1.3 交集选择器
      • 2.1.4 hover伪类选择器
    • 2.2 emmet语法练习
    • 2.3 背景
      • 2.3.1 背景颜色
      • 2.3.1 背景图
      • 2.3.2 背景图位置
      • 2.3.3 其他
      • 2.3.4 img和背景图片的区别
    • 2.4 元素显示模式
      • 2.4.1 块级元素
      • 2.4.2 行级
      • 2.4.3 行内块
        • 行内，块，行内块对比与区别
      • 2.4.4 元素显示模式的转换
      • 2.4.5 拓展：嵌套与并列
      • 2.4.6 css特性：继承性与层叠性
      • 2.4.7 优先级与权重
    • 2.5 盒子模型 Box Model
      • 2.5.1 内容content
      • 2.5.2 边框boder
      • 2.5.3 padding 内边距
      • 2.5.4 css3的内减模型
      • 2.5.5 margin 外边距
      • 2.5.6 盒子模型新闻案例
      • 2.5.7 结构伪类选择器
      • 2.5.8 伪元素
    • 2.6 浮动
      • 2.6.1 浮动特点
      • 2.6.2 css书写顺序
      • 2.6.3 常用格式
      • 2.6.4 清除浮动
    • 2.7 定位 position
      • 2.7.1 相对定位 relative
      • 2.7.2 绝对定位 absolute 及居中
      • 2.7.3 固定定位 fixed
      • 2.7.4 元素层级关系
      • 2.7.5 装饰
    • 2.8 项目样式补充
      • 2.8.1 盒子阴影：box-shadow
      • 2.8.2 过渡transition
      • 2.8.3 骨架标签
      • 2.8.4 SEO三大标签
      • 2.8.5 favcion ico图片
  • 3 项目演练
    • 3.1 学成在线
      • 3.1.1 头部版心 margin样式覆盖问题
      • 3.1.2 导航 a设置高度问题
      • 3.1.3 img与bgi使用
      • 3.1.4 常用的css设置
    • 3.2 小兔鲜儿
      • 3.2.1 项目文件目录准备
      • 3.2.2 顶部快捷导航
      • 3.2.3 Header
        • SEO补充：全页唯一的H1标题用于logo处的隐藏说明
      • 3.2.4 Footer
      • 3.2.5 Goods
      • 3.2.6 Fresh

0 来源

跳转学习路线介绍

跳转讲解视频

1 CSS基础

1.1 基础认识

cascading style sheets 层叠样式表

1.1.1 css demo

适用于本课件，实际生产环境使用外联式的引入方式
在head中的style标签中,格式：选择器名称 {}

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS体验</title><style>/* css位置 */p {color: brown;font-size: 18px;background-color: yellow;width: 500px;}</style>
</head>

1.1.1 css的层叠性

代码最终显示为blue，后层覆盖前层。与后续的属性的连写作区分

p {color: brown;color: blue;      }

拓展
当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

<div id="test">
<span>Text</span>
</div>

div#test span { color: green; }
div span { color: blue; }
span { color: red; }

无论 c​ss 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）

1.2 CSS引入方式

  • 内嵌式
    style标签内

  • 外联式
    .css文件中，通过link标签 属性 href 引入

  • 行内式
    具体标签的style中，后期配合js使用

1.3 选择器

  • 标签选择器
    标签名{}
    全部标签都被应用

  • 类选择器
    先定义，后在标签的class 属性中使用
    .类名 { css属性名:属性值;}

  • id选择器
    #id属性值{ css属性名：属性值；}
    类似类选择器，但是是唯一的，不可重复，后期配合js使用

  • 通配符选择器
    * {css属性名：属性值；}
    基本不用，用于清除标签的默认间距

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符选择器</title><style>* {            margin: 0;padding: 0;}</style>
</head>
<body><p class="red">ppppppp</p><p>zhegene</p><div>abal</div><h1>kldhalf</h1>
</body>

1.4 文体和文本样式

1.4.1 文体

  • font-size
    默认16px
  • font-weight
    `font-weight: 700; /* normal 400 bord: 700 *
  • font-style
    normal，italic
  • font-family
    无衬线字体 sans-serif：粗细均匀，网页
    衬线字体：笔锋，报刊书籍
    等宽字体：宽度相等，程序代码编写
  • font属性连写（简写）与复合
    顺序不能乱，可以省略前两个
    可以把单独的属性写在复合属性的下面
/*  选择器{font: font-style  font-weight  font-size/line-height  font-family;} */
font: italic 700 66px  宋体；
font:  300px  宋体；
font-style： nomal

延伸例子

font-family: 微软雅黑，隶书,sans-serif;

tips： 区别css层叠的覆盖

1.4.2 文本样式

  • 文本缩进 text-indent
    数字+px：具体像素
    数字+em：当前标签、id等字号的两倍

  • 水平对齐方式 text-align:center等

    • 文本
    • span a input img 标签

  • 文本修饰 text-decoration
    underline（常用）
    line-through 删除线
    overline
    none（常用，用于清除超链接默认的下划线）

1.4.3 行高

line-height
数字+px：具体像素
数字：当前标签、id等font-size的倍数

1.4.4 Chrome 调试工具

略

1.4.5 拓展

  • 颜色的属性值：
    关键词
    rgb
    rgba表示法：a表示透明度，用小数表示
    十六进制表示法
  • 标签居中
    复合写法：0 上下居中，atuo 左右居中
    margin:0 auto

2 CSS进阶

2.1 选择器

2.1.1 复合选择器

  • 后代选择器 空格
    父类选择器 子类选择器 {css}。 所有后代选择器都会选上
<style>div p {color: brown;}</style>
</head>
<body><p>pbiaoqian</p><div><p>div的p选择器</p></div>
</body>
  • 特定子代选择器 >
    选择器1>选择器2 {css} 。 只选择标记的子代
div>a {color: red;}</style>
</head>
<body><div>父级<a href="#">div里的a</a><p>div的p选择器<a href="#">div里的p的a </a></p></div></body>

2.1.2 并集选择器

  • ，
    同时选择多个不同的标签选择器

2.1.3 交集选择器

选择器连写：选择器1选择器2 {css}

 p.box {color: red;}</style>
</head>
<body><div class="box">div里的box</div><p>pppppp</p><p class="box"> p里的box</p>    </body>

2.1.4 hover伪类选择器

hover：鼠标悬停选择
选择器：hover {css}

a:hover {color: red;background-color: green;}div:hover {color: blue;}</style>
</head>
<body><div>父级<a href="#">div里的a</a><p>div的p选择器<a href="#">div里的p的a </a></p></div></body>

2.2 emmet语法练习

vscode的代码简写

2.3 背景

2.3.1 背景颜色

bgc：background-color
background-color: pink;
默认为透明

2.3.1 背景图

bgi：background-image
background-image: url(../前端html.png);
背景图平铺
bgr：background-repeat
repeat-x，repeat-y，no-repeat
background-repeat: repeat-x;

2.3.2 背景图位置

bgp：background-position
left-center-right
top-center-bottom
原点，左上角（0,0）

background-position: center bottom;

2.3.3 其他

推荐连写属性顺序，可以颠倒
background：color image repeat position

2.3.4 img和背景图片的区别

img默认有宽高，用来实现项目里重要的图片，body里面
背景图片要元素的宽高的布局，css里设置

2.4 元素显示模式

2.4.1 块级元素

独占一行，可以设置特定数值
div，p，h系列

2.4.2 行级

宽高可以由内容默认撑开
不可以设置宽高
a,span,b.u.i.s,strong,ins,em,del…

2.4.3 行内块

一行可以多个，可以修改宽高
input，textarea，buton，select
img

行内，块，行内块对比与区别

文字说明
代码示例说明

2.4.4 元素显示模式的转换

属性 效果 使用频率
centered 文本居中 right-aligned 文本居右 right-aligned 文本居右
display:block 转换成块级元素 较多
display:inline-block 转换成行内块元素 较多
display:inline 转换成行内元素 极少

2.4.5 拓展：嵌套与并列

p标签中不要嵌套div，p，h标签
a不能嵌套a自己，其他标签均可

2.4.6 css特性：继承性与层叠性

  • 继承性
    文字控制属性都能继承
    color
    font
    text-indent，text-align
    line-height等
    子级a标签不会继承父级颜色
  • 层叠性
    同一优先级的选择器，后边属性覆盖前面的

2.4.7 优先级与权重

当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行
  1. 优先级
    不同选择器优先级不同,geng：
    继承—通配符选择器—标签选择器—类选择器—id选择器—行内样式—!important
    注意：
    !important 写在对应的样式后边，不需要写在继承的样式里面，直接写在自己的样式里
  2. 权重叠加计算
    复合选择器，css通过计数各选择器的多少来进行渲染
    sum{行内样式-id-类-标签-通配符}
    此外，!important 如果不是继承 级别最高

2.5 盒子模型 Box Model

网页布局核心：盒子模型（标签/元素）的拼接
margin，border，padding， content

2.5.1 内容content

wedth，height，background-color

2.5.2 边框boder

搜索框，border-top边框颜色等地方用
可以连写
border：8px solid red；
快捷键：bd + tab键

2.5.3 padding 内边距

直接设置会把盒子模型扩大，需要重新计算尺寸
连写模式，padding后跟4个值按照顺时针从上开始：上右下左顺序设置；3个值上——右左——下；2个值：上下——左右

2.5.4 css3的内减模型

box-sizing: border-box;

2.5.5 margin 外边距

同padding

  • 上下外边距的问题：
    上下两个margin设置会合并最大值，故设置一个就可以
  • 嵌套问题（塌陷）：
    互相嵌套的块级元素,子元素的margin-top会作用在父级元素上
    导致父级元素一起往下移动
    方法：
  1. 父级元素设置boder-top或者padding-top
  2. 父级元素设置overflow：hidden 不影响原结构，推荐
  3. 转换成行内块
  4. 设置浮动
  • 行内标签修改边距
    问题：
    margin，padding只改变左右距离，不改变上下距离
    方法：
    line-height修改上下边距

2.5.6 盒子模型新闻案例

列表去点（标号）

ul {list-style: none;}

2.5.7 结构伪类选择器

根据元素在html中的结构关系查找元素

<style>li:first-child {background-color: red;}li:last-child {background-color: blue;}/* 第n个子元素 */li:nth-child(2) {background-color: green;}</style>
</head>
<body><!-- ul>li{这是第$个li}*8 -->

其中，nth-child(n)的里面呢可以填写公式：
n为0,1,2,3…

功能 公式
偶数 2n、even
奇数 2n+1、odd
前5个 -n+5
找到从第5个往后的 n+5

2.5.8 伪元素

元素：html设置的标准标签
伪元素：由css模拟出的标签效果，默认是行内元素,用于装饰性的小元素
::before ——在父元素内容的前面添加子级伪元素
::after ——在父元素内容的后面添加
伪类元素的css属性
中必须包含content内容，不然不会显示

2.6 浮动

原用于图文环绕，现常用于标准流转化的网页布局
float：left；right

2.6.1 浮动特点

  1. 脱离标准流控制
  2. 浮动元素币标准流高半个级别，可覆盖标准流里的元素
  3. 下一个浮动左右跟随，顶对齐
  4. 一行可多个，且可以修改宽高——同行内块元素特点
  5. 不可margin：auto居中

2.6.2 css书写顺序

浏览器按此顺序执行渲染效率高
建议遵循以下顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

举例：

 .jdc {display: block;position: relative;float: left;width: 100px;height: 100px;background-color: green;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);border-radius: 10px;}

2.6.3 常用格式

* {margin: 0;padding: 0;}
/* li标签去点 */ul {list-style: none;}
/* 文字居中表示 */text-align: center;line-height: 50px;
/* a标签去下划线 */text-decoration: none;
/* 光标补货改css样式 */.nav li a:hover {background-color: green;}

2.6.4 清除浮动

清除浮动给别的元素带来影响：
父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响

  1. 直接父级元素加高度属性
  2. 父级元素的body内容最后加一个块级元素，并添加属性 clear：both——清除左右两侧浮动的影响
  3. 单伪元素清除法,css里操作 ::after
.clearfix::after {content: "";display: block;clear: both;/* 版本兼容性 */height: 0;visibility: hidden;}
  1. 双伪元素 ：推荐使用
/* 4 双伪元素法 *//* 解决外边距塌陷问题：父子便签，都是块级，子级添加margin会影响父级的位置 */.clearfix::before,.clearfix::after {content: "";display: table;}/* 真正清除浮动的标签 */.clearfix::after {clear: both;}
  1. 同塌陷，父级元素添加属性overflow：hidden

2.7 定位 position

布局方式：标准流，浮动，定位
用于让元素自由的摆放，盒子模型的层叠
定位方式+方向上的偏移量

2.7.1 相对定位 relative

  1. 占有原来的位置
  2. 仍然具有标签原有的显示模式特点：独占一行等
  3. 改变位置参照自己原来的位置——本质上没有脱离标准流的控制
  4. 水平以left为准，上下以top为准

2.7.2 绝对定位 absolute 及居中

先找已经定位（相对，绝对都可以，推荐相对定位）的父级，若存在，以此为参照进行定位
若父级无定位，则以body(浏览器窗口)定位

  1. 脱标，不占用标准流位置
  2. 改变标签的显示模式特点——变成了行内块
  3. 子绝父相，就近找父级，最远即body标签浏览器窗口
    绝对定位中的margin：0 auto 居中失效问题：
    笨方法辅助：
    left 50%；
    margin-left: -150px;
    常用方法：
    transform: translate(-50%,50%);

2.7.3 固定定位 fixed

  1. 脱标，不占位置
  2. 行内块特点
  3. 针对浏览器标定距离

2.7.4 元素层级关系

  • 不同布局方式元素的层级关系
    标准流<浮动<定位

  • 不同定位之间的层级关系
    相对，绝对，固定默认层级相同——在HTML中下面的元素层级更高，会覆盖上面元素。
    此外，可以设置z-index 属性：

    1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
    2. 如果属性值相同，则按照书写顺序，后来居上；
    3. 数字后面不能加单位。

2.7.5 装饰

  1. 垂直对齐

字母的基线baseline问题
vertical-align：middle 中间对齐，默认：baseline，其他还有top，bottom
该属性只能加在行内或者行内块标签里（浏览器当做文字处理），加在块标签里无效
2. 光标类型
cursor：
default 默认，箭头
pointer 小手，提示可点击
text 工字型，提示可选择文字
move 十字光标，提示可以移动
3. 边框圆角
boeder-radius 数字+px，百分比
省略的角度：对角一样
4. 溢出部分
overflow：
visible 默认，溢出可见
hidden 溢出隐藏，最常用
scroll 无论是否溢出，显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条

  1. 元素本身隐藏
    visibility：hidden 占位隐藏
    display：none 不占位隐藏 常用

  2. 二维码

默认图片设置为不显示。鼠标悬停父级标签，子级img标签显示

.nav li a:hover img {display:block;
}
  1. 元素整体透明
    opacity：标签整体透明，单独html，css不使用，结合js使用

2.8 项目样式补充

2.8.1 盒子阴影：box-shadow

h-shadow :必须，水平偏移量
v-shadow: 必须垂直偏移量
blur：模糊度
spread： 阴影扩大
color： 阴影颜色
inset：改为内部阴影

2.8.2 过渡transition

配合hover，长度+时间

             transition: height 1.5s, background-color 2s;}.box:hover {height: 600px;background-color: greenyellow;}

2.8.3 骨架标签

<!DOCTYPE html> <!-- html5规范 -->
<html lang="en"> <!-- 语种 -->
<head><!-- 字符编码 ,zh-CN 中文--><meta charset="UTF-8"><!-- ie兼容 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 移动端使用 --><meta name="viewport" content="width=device-width, initial-scale=1.0">

2.8.4 SEO三大标签

  • 竞价排名
  • 网页制作成html
  • 标签语义化 h1，strong等：
    京东示例：title，description，Keywords
<meta charset="utf8" version='1'/><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/><meta name="description"content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

后面案例中有seo的H1标题补充

2.8.5 favcion ico图片

放置在根目录
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

3 项目演练

3.1 学成在线

3.1.1 头部版心 margin样式覆盖问题

<!-- 头部 版心--><div class="header wrapper">1</div>

margin: 30px 0;不生效问题：

/* 版心 */
.wrapper {width: 1200px;margin: 0 auto;
}/* 头部 */
.header {height: 42px;background-color: pink;/* 版心和头部不是父子级关系，直接写margin: 30px 0;会覆盖上面的版心css样式 */margin: 30px auto;}

3.1.2 导航 a设置高度问题

导航:a标签设置同li标签同样高度，方便点击。需要变为行内块才能更改生效——变为块元素后仍然可以排在一行是因为每个标签的各自父级li标签有做浮动

<div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div>

.nav li {float: left;margin-right: 26px;
}
.nav li a {/* a标签高，需要变为行内块才能更改高度生效：方便点击 */height: 42px;/* 文字高 */line-height: 42px;
}

3.1.3 img与bgi使用

头像等重要部分用img标签，
搜索等不重要按钮用background-img 背景图css样式

.search button {float: left;width: 50px;height: 40px;/* 背景图表示搜索按钮 */background-image: url(../images/btn.png);
}/* 图片垂直居中 */
.user img {vertical-align: middle;
}

3.1.4 常用的css设置

/* 盒子模型初始化，内减模型。需注意后期设置数据后，子级标签的数值计算问题 */
* {margin: 0;padding: 0;box-sizing: border-box;
}/* li标签去除 · */
li {list-style: none;
}/* a标签去除下划线 */
a {text-decoration: none;
}/* 清除浮动影响： */
/* 本项目代码中为版权部分受到上层无高度影响：注意清除上层的li的父级content浮动影响 */
/* li浮动之后，脱标，父级没有高度 */
.clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both;}/* 网页底色   */
body {background-color: #f3f5f7;
}

3.2 小兔鲜儿

3.2.1 项目文件目录准备

  1. 命名 xtx_pc_client
  2. favicon.ico 到根目录
  3. images和uploads图片文件夹
  4. 主页HTML：index.html
  5. css文件夹：
    base.css ：基础公共样式——拷贝通用设置
    common.css： 公用的重复样式
    index.css等：首页等各页面样式
    本处多代码笔记，以供复习

3.2.2 顶部快捷导航

嵌入精灵图片时，用的行内标签span（a标签等）,设置宽高不生效，需要转换为块

.shotcut .wrapper li a span {/* span行内标签，设置宽高不生效 */display: inline-block;margin-right: 8px;width: 11px;height: 16px;background-image: url(../images/sprites.png);background-position: -160px -70px;vertical-align: middle;
}

3.2.3 Header

1 . float: right时候，多个标签使用margin-right时，按照标签的顺序进行定位（同left的定位左右方向相反），可以取负值 。比如

.search {float: right;margin-right: 50px;width: 172px;height: 30px;background-color: pink;}.shopping_cart {float: right;margin-right: -210px;width: 23px;height: 23px;background-color: green;}

处理此问题也可以在html文件中交换search和shopping_cart 标签的上下顺序，似的css中的margin-right均为正值，但仍需重新计算偏移值。
2 . placeholder 设置样式

/* ::placeholder的样式 */
.search input::placeholder {font-size: 14px;color: #ccc;
}

3 .购物车及角标

.shopping_cart {position: relative;float: right;margin-top: 28px;margin-right: -210px;width: 23px;height: 23px;background-image: url(../images/sprites.png);background-position: -120px -70px;}.shopping_cart span {position: absolute;top: -6px;right: -13px;width: 20px;height: 15px;background-color: #e26237;border-radius: 8px;font-size: 15px;color: #fff;text-align: center;line-height: 15px;}

SEO补充：全页唯一的H1标题用于logo处的隐藏说明

其他副标题均用H2及下级标题

3.2.4 Footer

  1. 定位及伪元素：
    定位：子绝父相
    伪元素：必须有content 属性，一般用来补充标签后面的小精灵图标
    bgi一般结合bgp来确定位置，也可以直接用position方法定位
    对齐行内元素一般用：vertical-align: middle
.footer .top li::before {position: absolute;top: 0;left: 0;/* display: inline-block; */content: "";width: 58px;height: 58px;background-image: url(../images/sprites.png);/* background-position: 0 -2px;     */vertical-align: middle;
}
  1. 轮播图下面的圆点提示一般用ol>li 标签表示,并辅以class="current"类表示当前
<ol><li></li><li></li><li class="current"></li><li></li><li></li><li></li></ol>

.banner ol .current {background-color: #fff;
}

3.2.5 Goods

当标签多时，尽量避免不同位置使用重复类型标签，也可添加不同类名。

<div class="bd clearfix"><ul><li><a href="#"><img src="./uploads/new_goods_1.jpg" alt=""><h3>睿米无线吸尘器F8</h3><div>¥<span>899</span></div><b>新品</b></a>


.goods .bd li b {position: absolute;left: 17px;top: 18px;width: 28px;height: 51px;border: 1px solid #27ba9b;border-radius: 2px;font-size: 18px;font-weight: 400;color: #27ba9b;line-height: 24px;
}

3.2.6 Fresh

float的使用应该遵循盒子模型的先大后小原则，如下bug代码展示，a标签浮动后hover时发现位置不对。已经注释掉：

.fresh .hd ul li {float: right;
}.fresh .hd ul li a {/* float: right; */margin-right: 6px;padding: 2px 7px;font-size: 16px;    }
.fresh .hd ul li a:hover {background-color: #27ba9b;color: #fff;
}

02前端入门HTML5 +CSS3+电商网页制作：CSS相关推荐

  1. 01前端入门HTML5 +Css3+电商网页制作：HTML5

    01前端入门HTML5 +Css3+电商网页制作 0. 来源 1. 基础认识 1.1 Web 标准构成 1.2 基本语法 2. vscode使用 3. HTML 3.1 注释 3.2 标签 3.2.1 ...

  2. html5手机电商网页设计代码_Html5网站制作，干货！20个视觉体验和内容俱佳的优秀网页设计...

    如何创建一个网页?"Html5网站制作"和"灵感干货!20个视觉.体验和内容俱佳的优秀网页设计"有什么关系和内在关联?在图片方面,有三个具体方案:图片地图.Cs ...

  3. html5手机电商网页设计代码_一部手机，万物皆可复制粘贴，这位兼职写代码的设计师将AR玩出了新高度...

    看到什么就复制什么,这是魔法还是孙悟空的神通?都不是.这是 AR 的魔力. 机器之心报道,参与:蛋酱.魔王.杜伟. 如何将一件物品的图像导入 Photoshop?首先你要拍摄照片,然后将这张照片通过网 ...

  4. HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码

    HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...

  5. HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码...

    HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...

  6. 视频教程-web前端经典教程之电商专题页开发-HTML5/CSS

    web前端经典教程之电商专题页开发 曾就职于富士康电商平台.尚德机构流量中心,授课风格明显的特点就是旁证博引,喜欢用大型互联网企业的相关的案例来讲某个知识点-- 蒋新合 ¥299.00 立即订阅 扫码 ...

  7. 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程

    [尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...

  8. HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板

    HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学 ...

  9. HTML5期末大作业：京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载

    HTML5期末大作业:京东网站设计--仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人. ...

最新文章

  1. flash build 4.6 不能debug 报错 C:\WINDOWS\system32\...
  2. C语言 内存管理之栈
  3. php调用mysql库_PHP调用三种数据库的方法(1)
  4. SuperSocket源码解析之开篇 (转)
  5. 【数据结构与算法】之深入解析“缺失的第一个正数”的求解思路与算法示例
  6. Android studio提示Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
  7. 【转】系统缓存全解析二：动态缓存（2）－页面局部缓存的两种方式
  8. 二分法求非线性方程组Java_用C#编写二分法解一元非线性方程
  9. gbk转utf-8 iconv 编码转换
  10. Java速成（10/30）-多态
  11. JRTPLib的编译步骤
  12. 设置android模拟器的ip地址,设置Android模拟器IP地址
  13. 读书笔记——刘鹗《老残游记》《老残游记续集》
  14. Day715. 适配不同的类型的switch匹配 -Java8后最重要新特性
  15. 去除痘痘祛斑ps教程学习抠图ps婚纱照修图课程入门基础
  16. java和vue实现拖拽可视化_可视化拖拽页面编辑器 一__Vue.js
  17. arcgis api for javascript 3.33 清空、删除图层
  18. word替换妙用：批量去除多余空格、空行、换行2020-11-30
  19. iOS App 打包上架AppStore超详细流程
  20. Java基本sql_SQL基本语句

热门文章

  1. 怎么写软件功能测试报告，分享详细专业的功能检测报告模板
  2. 撒旦撒旦阿三的撒的撒
  3. 无监督学习 聚类分析②
  4. Element Ui 表格固定列，出现底部和右侧空白的问题
  5. 25匹马，5个跑道，最少比几次可以得出跑得最快的前三匹吗？
  6. MybatisX插件的使用
  7. AD更改原理图纸大小
  8. 随身理财专家“挖财”推iPad应用，新增帐号对比功能
  9. 昆明拟整治11类陋习 行人翻越隔离设施罚50元
  10. 72. git jenkin实践二 ------ 中心服务器gitlab