- 01-基础班学习路线
- 02-HTML 简介导读
- 03-网页的相关概念
- 04-常用浏览器以及内核
- 05-web标准
- 06-HTML标签导读
- 07-HTML语法规范
- 08-HTML基本结构标签
- 09-VSCode工具创建页面
- 10-DOCTYPE和lang以及字符集的作用
- 11-标签语义
- 12-标题标签
- 13-段落标签和换行标签
- 14-体育新闻案例
- 15-文本格式化标签
- 16-div和span标签
- 17-图像标签(上)
- 18-图像标签(下)
- 19-图像标签注意点
- 20-目录文件夹和根目录
- 21-相对路径(上)
- 22-相对路径(下)
- 23-绝对路径
- 24-链接标签(上)
- 25-链接标签(下)
- 26-锚点链接
- 27-注释标签和特殊字符
- 28-综合案例(上)
- 29-综合案例(下)
- 01-HTML标签(下)导读
- 02-表格标签基本使用
- 03-表头单元格标签
- 04-表格相关属性(了解)
- 05-小说排行榜案例
- 06-表格结构标签
- 07-合并单元格
- 08-表格总结
- 09-无序列表
- 10-有序列表
- 11-自定义列表
- 12-列表总结
- 13-表单使用场景以及分类
- 14-表单域
- 15-input之type属性文本框和密码框
- 16-input之type属性单选按钮和复选框
- 17-input之name和value属性
- 18-maxlength属性
- 19-input表单元素四个属性使用场景课堂问答
- 20-input之type属性提交和重置按钮
- 21-input之type属性普通按钮和文件域
- 22-label标签
- 23-select下拉表单
- 24-textarea文本域标签
- 25-表单元素几点总结
- 26-综合案例-注册页面(一)
- 27-综合案例-注册页面(二)
- 28-综合案例-注册页面(三)
- 29-综合案例-注册页面(四)
- 30-学会查阅文档
- 01-CSS层叠样式表导读
- 02-CSS简介
- 03-体验CSS语法规范
- 04-CSS代码风格
- 05-CSS选择器的作用
- 06-标签选择器
- 07-类选择器
- 08-使用类选择器画盒子
- 09-类选择器特殊使用-多类名
- 10-id选择器
- 11-通配符选择器
- 12-font-family设置字体系列
- 13-font-size字号大小
- 14-font-weight字体粗细
- 15-font-style字体样式
- 16-font复合属性写法
- 17-字体属性总结
- 18-文本颜色color
- 19-文本对齐text-align
- 20-文本装饰text-decoration
- 21-文本缩进text-indent
- 22-行间距line-height
- 23-CSS文本属性总结
- 24-内部样式表
- 25-行内样式表
- 26-外部样式表
- 27-CSS引入方式总结
- 28-综合案例-新闻页面
- 29-综合案例-修改样式(一)
- 30-综合案例-修改样式(二)
- 31-综合案例-修改样式(三)
- 32-chrome调试工具使用
- 01-CSS第二天导读
- 02-emmet语法生成html标签
- 03-emmet语法快速生成css样式
- 04-快速格式化代码
- 05-复合选择器简介
- 06-后代选择器
- 07-子元素选择器
- 08-课堂练习
- 09-并集选择器
- 10-链接伪类选择器(上)
- 11-链接伪类选择器(下)
- 12-focus伪类选择器
- 13-复合选择器总结
- 14-什么是元素显示模式
- 15-块元素
- 16-行内元素
- 17-行内块元素
- 18-元素显示模式总结
- 19-显示模式的转换
- 20-一个小工具snipaste的使用
- 21-简洁版小米侧边栏案例
- 22-单行文字垂直居中的原理
- 23-背景颜色
- 24-背景图片
- 25-背景平铺
- 26-背景位置-方位名词
- 27-背景位置案例一
- 28-背景位置案例二-王者荣耀背景图片
- 29-背景位置-精确单位
- 30-背景位置-混合单位
- 31-背景固定
- 32-背景属性复合写法
- 33-背景颜色半透明
- 34-背景总结
- 35-综合案例-五彩导航(上)
- 36-综合案例-五彩导航(二)
- 01-CSS三大特性之层叠性
- 02-CSS三大特性之继承性
- 03-行高的继承
- 04-CSS三大特性之优先级
- 05-优先级注意的问题
- 06-CSS权重的叠加
- 07-权重两个练习题
- 08-盒子模型导读
- 09-看透网页布局本质
- 10-盒子模型组成部分
- 11-盒子模型边框border
- 12-边框的复合写法
- 13-表格细线边框
- 14-边框会影响盒子实际大小
- 15-盒子模型内边距padding
- 16-padding复合属性
- 17-padding会影响盒子实际大小
- 18-padding应用-新浪导航栏(上)
- 19-padding应用-新浪导航栏(下)
- 20-小米侧边栏修改
- 21-padding不会撑开盒子的情况
- 22-盒子模型外边距margin
- 23-外边距典型应用-块级盒子水平居中对齐
- 24-行内元素和行内块元素水平居中
- 25-外边距合并-相邻块元素垂直外边距
- 26-外边距合并-嵌套块元素塌陷
- 27-清除内外边距
- 28-ps的基本操作
- 29-综合案例-产品模块布局分析
- 30-综合案例-box布局
- 31-综合案例-图片和段落制作
- 32-综合案例-评价和详情制作
- 33-综合案例-竖线细节制作
- 34-老师解惑
- 01-综合案例-快报模块布局分析
- 02-综合案例-快报模块头部制作
- 03-综合案例-快报模块列表制作
- 04-圆角边框原理
- 05-圆角边框的使用
- 06-盒子阴影
- 07-文字阴影
- 08-浮动导读
- 09-传统网页布局三种方式
- 10-为什么需要浮动
- 11-什么是浮动
- 12-浮动特性-脱标
- 13-浮动特性-浮动元素一行显示
- 14-浮动特性-浮动元素具有行内块特性
- 15-浮动元素经常搭配标准流的父元素
- 16-浮动布局练习1
- 17-浮动布局练习2
- 18-浮动练习-手机模块(上)
- 19-浮动练习-手机模块(下)
- 20-常见的网页布局
- 21-浮动的两个注意点
- 22-为什么清除浮动
- 23-清除浮动本质以及额外标签法
- 24-清除浮动之父元素overflow
- 25-清除浮动之after伪元素
- 26-清除浮动之双伪元素
- 27-清除浮动
- 01-常见的图片格式
- 02-ps切图-图层切图(上)
- 03-ps切图-图层切图(下)
- 04-ps切图-切片工具
- 05-ps切图-cutterman安装
- 06-ps切图-cutterman使用技巧
- 07-学成在线案例准备工作
- 08-CSS属性书写顺序(重要)
- 09-页面布局整体思路
- 10-学成在线-header区域制作
- 11-学成在线-logo区域制作
- 12-学成在线-导航栏nav区域制作(上)
- 13-学成在线-导航栏nav区域制作(中)
- 14-学成在线-导航栏nav区域制作(下)
- 15-学成在线-搜索search模块input制作
- 16-学成在线-搜索search模块button制作
- 17-学成在线-用户user模块制作
- 18-学成在线-banner模块制作
- 19-学成在线-subnav模块制作(上)
- 20-学成在线-subnav模块制作(下)
- 21-学成在线-course模块制作(上)
- 22-学成在线-course模块制作(中)
- 23-学成在线-course模块制作(下)
- 24-学成在线-精品推荐模块(上)
- 25-学成在线-精品推荐模块(中)
- 26-学成在线-精品推荐模块(下)
- 27-学成在线-box-hd模块制作
- 28-学成在线-box-bd模块制作
- 29-学成在线-box模块完成
- 30-学成在线-footer模块制作
- 31-学成在线-copyright模块制作
- 32-学成在线-links模块制作
- 01-定位导读
- 02-为什么需要定位
- 03-定位组成
- 04-相对定位
- 05-绝对定位-没有父级或者父级无定位情况
- 06-绝对定位-父级有定位情况
- 07-绝对定位脱标的不占有原来位置
- 08-子绝父相的由来
- 09-子绝父相案例-hot模块
- 10-固定定位
- 11-固定定位小技巧-固定到版心右侧
- 12-粘性定位(了解)
- 13-定位总结
- 14-定位的叠放顺序
- 15-绝对定位的盒子居中算法
- 16-定位的特殊特性
- 17-浮动元素不会压住标准流的文字定位会
- 18-淘宝焦点图布局分析
- 19-淘宝焦点图-大盒子制作
- 20-淘宝焦点图-左侧箭头按钮制作
- 21-淘宝焦点图-右侧箭头按钮制作
- 22-淘宝焦点图-ul盒子模块制作
- 23-淘宝焦点图-li小圆点模块制作
- 24-网页布局总结
- 25-display显示隐藏元素
- 26-visibility显示隐藏元素
- 27-overflow溢出显示隐藏
- 28-土豆案例(上)
- 29-土豆案例(下)
- 01-CSS高级技巧导读
- 02-为什么需要精灵技术
- 03-精灵图使用(原理)
- 04-精灵图使用(代码)
- 05-精灵图案例-拼出自己名字
- 06-字体图标产生和优点
- 07-字体图标下载
- 08-字体图标的使用
- 09-字体图标的追加和加载原理
- 10-CSS三角的做法
- 11-CSS三角应用-京东效果
- 12-用户界面-鼠标样式
- 13-用户界面-取消表单轮廓和防止拖拽文本域
- 14-vertical-align实现行内块和文字垂直居中对齐
- 15-图片底侧空白缝隙解决方案
- 16-单行文字溢出省略号显示
- 17-多行文字溢出省略号显示
- 18-布局技巧-margin负值巧妙运用(上)
- 19-布局技巧-margin负值巧妙运用(下)
- 20-布局技巧-文字围绕浮动元素巧妙运用
- 21-布局技巧-行内块的巧妙运用
- 22-布局技巧-CSS三角巧妙运用(上)
- 23-布局技巧-CSS三角巧妙运用(下)
- 24-CSS初始化
- 01-HTML5CSS3提高导读
- 02-HTML5提高-新增语义化标签
- 03-HTML5-新增视频标签
- 04-HTML5新增音频标签
- 05-HTML5新增input表单
- 06-HTML5新增表单属性
- 07-CSS3新增属性选择器(上)
- 08-CSS3新增属性选择器(下)
- 09-CSS3新增结构伪类选择器-选择第n个元素
- 10-CSS3新增nth-child选择器(上)
- 11-CSS3新增nth-child选择器(下)
- 11-nth-child和nth-of-type的区别
- 12-CSS3新增伪元素选择器使用场景和由来
- 13-CSS3新增伪元素选择器基本使用
- 14-伪元素选择器使用场景1-配合字体图标
- 15-伪元素选择器使用场景2-仿土豆效果
- 16-伪元素选择器使用场景3-伪元素清除浮动本质
- 17-CSS3盒子模型border-box
- 18-CSS3图片模糊处理
- 19-计算盒子宽度calc函数
- 20-CSS3新增属性过渡(上)
- 21-CSS3新增属性过渡(下)
- 22-CSS3过渡练习
- 23-广义的H5(了解)
- 01-品优购项目导读
- 02-网站制作流程
- 03-品优购项目规划
- 04-品优购项目搭建
- 05-品优购项目-样式的模块化开发
- 06-品优购项目-favicon图标制作
- 07-品优购项目-TDK三大标签SEO优化
- 08-品优购致富彩票-快捷导航shortcut结构搭建
- 09-品优购致富彩票-快捷导航左侧制作
- 10-品优购致富彩票-快捷导航右侧搭建
- 11-品优购致富彩票-快捷导航右侧字体图标
- 12-品优购致富彩票-header头部模块搭建
- 13-品优购致富彩票-logoSEO优化(上)
- 14-品优购致富彩票-logoSEO优化(下)
- 15-品优购致富彩票-search搜索模块(上)
- 16-品优购致富彩票-search搜索模块(下)
- 17-品优购致富彩票-hotwords热词模块
- 18-品优购致富彩票-shopcar模块制作
- 19-品优购致富彩票-count购物车统计模块
- 20-品优购致富彩票-nav导航模块搭建
- 21-品优购致富彩票-dropdown模块制作
- 22-品优购致富彩票-导航详细分类制作(上)
- 23-品优购致富彩票-导航详细分类制作(下)
- 24-品优购致富彩票-navitems模块制作
- 25-品优购致富彩票-footer底部模块搭建
- 26-品优购致富彩票-mod_servecie模块制作(上)
- 27-品优购致富彩票-mod_servecie模块制作(下)
- 28-品优购致富彩票-mod_help模块制作
- 29-品优购致富彩票-mod_copyright模块制作
- 01-品优购致富彩票-main主体盒子搭建
- 02-品优购致富彩票-newsflash模块搭建
- 03-品优购致富彩票-news-hd模块制作
- 04-品优购致富彩票-new-bd模块制作
- 05-品优购致富彩票-lifeservice制作(上)
- 06-品优购致富彩票-lifeservice制作(下)
- 07-品优购致富彩票-推荐模块recom(上)
- 08-品优购致富彩票-推荐模块recom(下)
- 09-品优购致富彩票-家用电器模块搭建
- 10-品优购致富彩票-家用电器模块头部制作
- 11-tab栏选项卡原理布局需求
- 12-品优购致富彩票-tab_list-item布局(上)
- 13-品优购致富彩票-tab_list-item布局(中)
- 14-品优购致富彩票-tab_list-item布局(下)
- 15-品优购列表-结构搭建
- 16-品优购列表页-秒杀模块制作
- 17-品优购列表页-导航模块修改
- 18-品优购列表页-一个小问题
- 20-品优购列表页-结束
- 21-品优购注册页-header制作
- 22-品优购列表页-注册主体模块头部制作
- 23-品优购注册页-注册主体制作(上)
- 24-品优购注册页-注册主体制作(下)
- 25-品优购注册页-安全程度模块
- 26-品优购注册页-同意模块和完成注册模块
- 27-品优购项目页面相互跳转以及作业安排
- 28-什么是服务器
- 29-申请免费空间以及网站上传
- 30-课程总结
- 00-HTML5导读
- 01_vscode 基本使用
- 02_vscode 插件安装
- 03-什么是HTML5
- 04-HTML5新增标签
- 05-多媒体音频标签
- 06-多媒体视频标签
- 07-HTML5新增input标签
- 08-HTML5新增表单属性
- 09-HTML5小结
- 10-CSS3导读
- 11-CSS3属性选择器(上)
- 12-CSS3属性选择器(下)
- 13-CSS3结构伪类选择器(上)
- 14-nth-child(n)
- 15-nth-child和nth-of-type的区别
- 16-结构伪类选择器总结
- 17-CSS3伪元素选择器
- 18-伪元素选择器案例
- 19-2D转换之translate
- 20-让一个盒子水平垂直居中
- 21-2D转换之rotate
- 22-CSS3 三角
- 23-设置转换中心点
- 24-旋转中心点案例
- 25-2D转换之scale
- 26-图片放大案例
- 27-分页按钮案例
- 28-2D转换综合写法以及顺序问题
- 29-2D转换小结
- 30-CSS3动画基本使用
- 31-动画序列
- 32-CSS3动画常见属性
- 33-CSS3动画简写
- 34-大数据热点图案例(上)
- 35-大数据热点图案例(下)
- 36-速度曲线之steps步长
- 37-奔跑的熊大案例
- 38-认识3D转换
- 39-3D转换translate3d
- 40-透视perspective
- 41-translateZ
- 42-3D旋转rotateX
- 43-3D旋转rotateY
- 44-3D旋转rotateZ
- 45-3D呈现transform-style
- 46-两面翻转盒子案例
- 47-3D导航栏(上)
- 48-3D导航栏(下)
- 49-综合案例-旋转木马案例(上)
- 50-综合案例-旋转木马案例(下)
- 51-浏览器私有前缀以及总结
- 00-移动WEB开发流式布局导读
- 01-移动端基础2
- 02-视口
- 03-meta视口标签
- 04-物理像素与物理像素比
- 05-二倍图
- 06-背景缩放background-size
- 07-背景二倍图以及多倍图切图
- 08-移动端开发选择
- 09-移动端技术解决方案
- 10-移动端特殊样式
- 11-移动端技术选型
- 12-流式布局
- 13-京东移动端致富彩票准备工作
- 14-body设置
- 15-app布局
- 16-app内容填充
- 17-搜索模块布局
- 18-搜索模块内容制作
- 19-二倍精灵图的做法
- 20-焦点图制作
- 21-品牌日模块制作
- 22-导航栏nav模块制作
- 23-新闻快报模块
- 24-京东移动端致富彩票结束2
- 00-移动WEB开发flex布局导读
- 01-flex布局体验3
- 02-flex布局原理
- 03-flex设置主轴方向
- 04-justify-content设置主轴子元素排列
- 05-flex-wrap子元素是否换行
- 06-align-items设置侧轴子元素排列
- 07-align-content设置侧轴子元素排列
- 08-flex-flow以及总结
- 09-子项flex属性使用
- 10-align-self和order
- 11-携程移动端致富彩票准备工作
- 12-致富彩票布局分析以及搜索模块布局
- 13-搜索模块user制作
- 14-搜索模块制search制作
- 15-焦点图focus模块制作
- 16-local-nav布局
- 17-local-nav内容制作
- 18-利用属性选择器更换背景图片
- 19-nav外观布局
- 20-nav内容制作
- 21-背景渐变linear-gradient
- 22-subnav-entry模块制作
- 23-热门活动模块制作
- 24-更多福利模块制作
- 25-sales-bd模块制作3
- 01-移动WEB开发rem适配布局导读
- 02-rem单位
- 03-媒体查询语法简介
- 04-媒体查询案例背景变色
- 05-媒体查询+rem实现元素动态大小变化
- 06-媒体查询引入资源
- 07-CSS的弊端
- 08-LESS简介以及使用变量
- 10-less编译easy less插件
- 11-less嵌套
- 12-less运算
- 13-rem适配方案原理
- 14-rem最终适配方案
- 15-苏宁致富彩票common.less制作
- 16-苏宁致富彩票import导入样式
- 17-苏宁致富彩票body样式设置
- 18-苏宁致富彩票search-content模块布局
- 19-苏宁致富彩票search-content内容布局
- 20-苏宁致富彩票search模块制作
- 21-苏宁致富彩票banner和广告模块制作
- 22-苏宁致富彩票nav部分制作
- 23-rem适配方案2flexible.js简介
- 24-rem适配方案2苏宁致富彩票前期准备工作
- 25-rem适配方案2body样式修改
- 26-一个神奇的vscode插件cssrem
- 27-修改flexible默认html字体大小
- 28-rem适配方案2search-content内容制作1
- 29-rem适配方案2search-content内容制作2
- 01-移动web开发响应式布局导读
- 02-响应式开发原理
- 03-响应式布局容器
- 04-响应式导航案例
- 05-Bootstrap简介
- 06-Bootstrap使用(上)
- 07-Bootstrap使用(下)
- 08-Bootstrap布局容器
- 09-Bootstrap栅格系统
- 10-Bootstrap栅格系统使用(上)
- 11-Bootstrap栅格系统使用(下)
- 12-Bootstrap列嵌套
- 13-Bootstarp列偏移
- 14-Bootstrap列排序
- 15-Bootstrap响应式工具
- 16-阿里百秀需求分析
- 17-阿里百秀前期准备工作
- 18-修改container最大宽度
- 19-阿里百秀logo制作
- 20-阿里百秀nav制作引入字体图标
- 21-阿里百秀news制作(上)
- 22-阿里百秀news制作(下)
- 23-阿里百秀publish模块制作
- 24-阿里百秀aside模块制作
- 25-阿里百秀logo响应式制作
- 26-阿里百秀nav响应式制作
- 27-阿里百秀news响应式制作
- 28-阿里百秀publish响应式制作
- 29-移动端开发总结
2.三种应用css方式:
1)创建外部样式表:
外部样式表即创建后缀为css的文件,然后在想要使用的网页中引入该文件即可。
具体的示例如下:
第一步:创建名为test.css的文件,并写入以下内容:
div {
width: 500px;
height: 500px;
background-color: red;
}
第二步:在html文件中引入该css文件,具体靠link标签实现,该标签写在head标签内,如下:
致富彩票
第三步:打开html文件,结果如下:
图片
link标签:
link标签除去引入css文件外,还有其它的作用,但是文中没有具体给出。然后,link标签的两个属性:
rel="stylesheet" 指明文件格式(stylesheet指的就是css文件)
href = “url” 指明引入css文件的地址
2)创建嵌入式样式表:
嵌入式样式表,通过html中的style标签实现,里面直接写入css代码即可。如下代码所示:
div {
width: 500px;
height: 500px;
background-color: red;
}
致富彩票
结果如下:
图片
3)创建内联式样式:
这个靠的是HTML标签内共有的一个属性style中,如下:
致富彩票
结果如下:
图片
可以看出的是,style属性值中不同的样式用分号隔开。
4)三者的比较:
首先最为推荐的是外部样式表,其次是嵌入式样式。最后才是内联式的。因为我们一般写代码的一个目标是实现代码分离,即HTML代码和CSS代码分离,这样写的代码干净易懂。
5)重要性:
前一个章节提及了对于某个标签来说,会有多个css样式,发生冲突是很常见的。而在其它条件相同的情况下,内联式是最重要的,因为它最晚出现,其它的都出现在head标签内,而内联式出现在body标签内。
3.使用与媒体相关的样式表:
可以指定一个只用于特定输出的样式表,如只用于打印,或只用于用浏览器在屏幕上查看。
其中,指定方法如下:
使用标签:link标签
使用属性:media
media属性的值:print(打印)、screen(屏幕显示)、all(默认声明)(当然还有其它值,但是这三者是最为常用的)
示例如下:
致富彩票
这段代码的意思是:当我们使用浏览器查看网页的时候,screen.css里面的代码会发挥作用,当我们打印网页时候,print.css里面的代码会发生作用。
除去上面的使用方法外,还有一种方法,就是在css代码中使用,如下:
@media print {
div {
width: 100px;
height: 100px;
background-color: pink;
}
}
div {
width: 100px;
height: 200px;
background-color: red;
}
这样,第一行代码代表当打印的时候起作用的样式。
4.提供替代的样式表:
规范允许设置一组基本的持久性样式,一组默认样式和多组可替代样式表。你可以这样理解,你有一个网页,基本的持久性的样式就是网页框架的基本样式,而一组默认样式就是我们个人主页的基本样式,我们想要调整样式,就是使用了可替代的样式表。
如下代码所示:
致富彩票
其中,rel="alternate"代表着这个样式就是可替代的样式表。
老实说,我觉得这不就是多写几个css文件嘛,只是用处不同而已^_^。