触屏版网站模板,保定软件开发网站制作,国家建设规范网站,怎么在网站添加paypalCSS 即 层叠样式表/CSS样式表/级联样式表#xff0c;也是标记语言#xff0c; 用于设置HTML页面中的文本内容#xff08;字体、大小、对齐方式等#xff09;、图片的外形#xff08;宽高、边框样式、边距#xff09;以及版面的布局和外观显示样式 目录 准备工作 Chrome调… CSS 即 层叠样式表/CSS样式表/级联样式表也是标记语言 用于设置HTML页面中的文本内容字体、大小、对齐方式等、图片的外形宽高、边框样式、边距以及版面的布局和外观显示样式 目录 准备工作 Chrome调试工具
Emmet语法
第一章 引入方式
第二章 基本语法
语法规范
代码风格
CSS选择器
1.基础选择器 2.CSS复合选择器
CSS三大特性
1.层叠性
2.继承性
3.优先级
第三章 常见属性
CSS字体属性
CSS文本属性 CSS背景属性
第四章 显示模式
第五章 盒子模型
网页布局本质
盒子模型组成
综合案例
第六章 CSS3新增样式
1.圆角边框
2.盒子阴影
3.文字阴影
第七章 CSS布局方式
CSS浮动
浮动概念
浮动特性
常见网页布局
浮动布局注意点
清除浮动 定位
定位组成
定位模式
定位总结
堆叠顺序(z-index)
定位拓展
定位特殊特性 练习学成在线案例
网页布局总结
CSS属性书写顺序
页面布局整体思路
标准流浮动定位应用场景
元素的显示和隐藏
第八章 扩展
精灵图
字体图标
CSS三角做法
用户界面样式
常见技巧
行内块元素和行内元素实现垂直居中对齐
溢出的文字省略号显示
常见布局技巧 准备工作 Chrome调试工具 注意选elements Emmet语法
使用缩写用于提高html/css的编写速度Vsode已集成该语法
1.快速生成HTML结构语法 注
5默认div若想其他标签则在“.”前先输其他标签名
6在需要有顺序标号的位置后紧跟加上$可以是标签名后也可以是类名id名后后续还 可使用*n等符号 2.快速生成CSS样式语法 第一章 引入方式
按照CSS样式书写位置引入方式CSS样式表分为三大类行内样式表行内式、内部样式表嵌入式、外部样式表链接式 内部样式表 行内样式表 外部样式表
实际开发经常使用样式单独写到CSS文件中之后把CSS文件引入到HTML页面 总结: 第二章 基本语法
语法规范 代码风格
1.样式格式书写 尽量采用展开格式
2.样式大小写
可大写可小写一般采用全小写
3.空格规范 CSS选择器 1.基础选择器
单个选择器组成
包括标签选择器、类选择器、id选择器和通配符选择器 1.1标签选择器 1.2类选择器起的类名不能为标签名类名为词组时可用短横线“-”分割类命名规则可查询web前端开发规范手册 实例 一个标签可以有多个类名多个类名中间必须用空格分开 使用场景 1.3id选择器 具有唯一性只能调用一次 1.4通配符选择器 基础选择器总结 修改样式类选择器是使用最多的 2.CSS复合选择器
复合选择器可以更准确、更高效地选择目标元素标签
复合选择器由两个或多个基础选择器通过不同的方式组合而成
常用的复合选择器后代选择器、子选择器、并集选择器、伪类选择器等 2.1后代选择器
又称为包含选择器可以选择父元素里的子元素外层标签写在前面内岑标签写在后面中间用空格分隔。当标签发生嵌套时内层标签就成为外层标签的后代 2.2子元素选择器
只能选择作为某元素的最近一级子元素 对比后代选择器 2.3并集选择器
可以选择多组标签定义相同的样式通常用于集体声明
各选择器用英文逗号连接 2.4伪类选择器
用于向某些选择器添加特殊的效果比如给链接添加特殊效果或选择第n个元素 2.4.1链接伪类选择器 注意事项 a.按顺序声明LVHAlink-visited-hover-active b.a链接在浏览器中具有单独的默认样式实际工作中需要给链接单独指定样式 实际常用写法需要功能不多 2.4.2focus伪类选择器 复合选择器总结 CSS三大特性
1.层叠性
给相同选择器设置相同样式若样式冲突离结构体更近的样式值覆盖另一个就近原则不冲突的部分不覆盖。 2.继承性
子标签会继承父标签的某些样式主要是文字相关颜色相关属性作用在于简化代码降低CSS样式复杂性。
行高的继承:可以继承父元素的行高不带单位是一个倍数和子元素文字大小相乘 3.优先级
同一个元素由多个选择器指定有优先级产生
相同选择器就近原则
不同选择器权重越高优先级越高 等级判断从左至右1比0大
复合选择器则各个选择器权重叠加
第三章 常见属性
CSS字体属性
字体系列 字体大小 字体粗细 文字样式 font复合属性写法 字体属性总结 CSS文本属性
CSS Text(文本)属性可定义文本的外观比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等 文本颜色
开发最常使用十六进制 文本对齐 文本装饰 文本缩进 行间距
注意行间距上间距下间距文本高度 文本属性总结 CSS背景属性
通过CSS背景属性可以给页面元素添加背景样式如背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等 1.背景颜色
语法Background-color: 颜色;
一般情况下背景颜色默认值是transparent(透明)
CSS3新增属性IE9版本浏览器支持实际开发不考虑兼容性:背景色半透明
语法background: rgba(x,x,x,a)
最后一个参数介于0-1之间表示透明度小数点前的0可以省略0表示完全透明 2.背景图片
描述元素的背景图像实际开发常见于logo或者一些装饰性的小图片或者是超级大的背景图片。优点是便于控制位置精灵图也是一种运用场景
语法background-image:none|url(url);括号里写图片绝对或相对路径 3.背景平铺
图片是否平铺默认横纵向都平铺沿横向纵向平铺
语法background-repeat: repeat|no-repeat|repeat-x|repeat-y;
页面元素可以既有背景颜色也有背景图片背景图片置于颜色上层 4.背景图片位置
图片在背景中的位置可以利用background-position属性改变
语法background-position: x y|方位名词|精确单位; 注意
4.1参数是方位名词 两个参数是方位名词则左右顺序没有影响 只指定了一个方位名词则默认另一个方位居中对齐
4.2参数是精确单位 如果参数是精确坐标第一个肯定是x坐标第二个一定是y坐标 只有一个参数则一定为x坐标y默认垂直居中
4.3参数是混合单位 一个是精确单位一个是方位名词顺序一定是x-y 5.背景图像固定背景附着
Background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动。
语法background-attchment:scroll(滚动)|fixed(固定)默认滚动 6.背景复合写法
没有顺序要求一般约定顺序
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
例如 background: transparent url(image.jpg) repeat-y fixed top; 7.总结 第四章 显示模式
什么是元素显示模式
元素标签以什么方式进行显示不同种类的标签有不同的显示特点例如HTML元素一般分为两种类型块元素和行内元素
元素显示模式分类
1.常见的块元素h1-h6、p、div、ul、ol、li等div是最典型的块元素 2.行内元素又叫内联元素常见行内元素有a、strong、b、em、i、del、s、ins、u、spanspan是最典型的行内元素 3.行内块元素同时具有块元素和行内元素的特点如img、input、td 4.总结 元素显示模式的转换
增加一些元素的特性 第五章 盒子模型
网页布局本质
1.准备好相关网页元素网页元素基本都是盒子Box
2*.利用CSS设置盒子样式
3.盒子里放内容 盒子模型组成
盒子封装周围的HTML元素边框border外边距margin内边距padding内容content 1.1边框border 边框复合写法 边框分开写法 表格细线边框 边框会增大盒子实际大小 1.2内边距padding
padding属性用于设置内边距即边框与内容之间的距离 可以简写有四种情况 内边距也会影响盒子的实际大小会撑大盒子解决方法是width/height减去多出来的内边距大小原本未指定宽或高则不会改变盒子大小
作用导航栏文字字数不同利用padding让盒子宽度设置更合适 1.3外边距margin 简写方式和内边距padding一样 如果是行内元素/行内块元素水平居中给其父元素添加text-align:center即可
嵌套块元素垂直外边距的塌陷 还有方法如浮动、固定、绝对定位的盒子不会有塌陷问题 不同浏览器自带不同的默认内外边距布局前首先清除网页元素的内外边距CSS的第一行代码 行内元素转换为照顾兼容性尽量只设置左右边距 综合案例 第六章 CSS3新增样式
i9及以上版本支持但对整体页面布局没有影响可以放心使用
1.圆角边框 2.盒子阴影 h正方向向右v正方向向下 3.文字阴影 第七章 CSS布局方式
CSS传统布局方式有三种标准流/普通流标签按默认方式排列 、浮动、定位
实际开发中一个页面基本包含三种布局方式移动端学习新的布局方式flex
网页布局第一准则多个块级元素纵向排列找标准流多个块级元素横向排列找浮动 CSS浮动
可以改变元素标签默认的排列方式
最典型应用多个块级元素一行内排列显示
浮动概念 浮动特性
1.脱标脱离标准流的控制浮动到指定位置
2.浮动盒子不再保留原先的位置
3.多个浮动盒子按属性值在一行显示顶端对齐排列注意属性相同则靠在一起没有缝隙父级宽度装不下盒子则另起一行对齐
4.浮动元素具有行内块元素特性故如果行内元素有浮动则不需转换模式就可以直接给高度和宽度 浮动应用 网页布局第二准则先设置盒子大小之后设置盒子的位置 常见网页布局 浮动布局注意点
1.浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置之后内部子元素采取浮动排列左右位置
2.一个元素浮动理论上一定要设置其余同级兄弟元素浮动
浮动的盒子只影响后面的标准流被浮动盒子覆盖不影响前面的标准流已经独占一行 清除浮动
在很多情况下父级盒子不方便直接给出高度但子盒子浮动不占有位置会使父级盒子高度变为0这时就会影响下面的标准流盒子
由于浮动元素不再占用原文档流的位置所以会对后面的元素排版产生影响 本质清除浮动元素造成的影响
清除浮动后父级会根据浮动的子盒子自动检测高度。父级有了高度就不会影响后续的标准流
语法 清除浮动方法
1.额外标签法也叫隔墙法W3C推荐做法 这个空标签必须是块级元素 这里最后一个子盒子div是标准流作为墙 2.父级添加overflow属性
给父级CSS添加overflow属性将其属性值设置为hidden、auto或scroll
优点代码简洁
缺点无法显示溢出的部分 3.父级添加after伪元素
注意父盒子class中要添加上clearfix
本质也在父盒子里末尾增加了一个空的子盒子 4.父级添加双伪元素
也要注意在父盒子class中添加clearfix
本质是首尾添加两个空的子盒子 总结 定位
1.某个元素可以自由地在一个盒子内移动位置并且压住其他盒子
2.滚动窗口时盒子固定在屏幕某个位置 定位组成
定位定位模式边偏移 边偏移
属性Top bottom left right 上下和左右只能各取其一如果有左右默认取左有上下默认取上
属性值长度单位
边偏移必须搭配定位模式反之不必 定位模式
通过possition属性设置
属性值定位模式static静态定位 relative相对定位 absolute绝对定位 fixed固定定位
static为默认定位方式(无定位) 1.Relative 移动位置参照他自己原来的位置原来的标准流位置继续占有后续盒子以标准流方式对待它不会脱标 2.Absolute移动位置参照父级/祖先元素的定位若没有祖先元素/父元素没有定位则浏览器左上角为基点完全脱标原位置可以被后续盒子占据 定位口诀子绝父相 父级占据位置子级任意摆放
子盒子绝对定位一定搭配父盒子不占位置脱标不影响兄弟盒子
父盒子布局需要占据位置则是相对定位也有不需要占据位置的情况出现 3.fixed固定于浏览器可视区的位置浏览器页面滚动元素位置也不会改变
完全脱标
以浏览器的可视窗口为参照点 4.sticky粘性定位以浏览器可视窗口为参考点移动元素
不脱标
必须和边偏移任意一个搭配否则无效
使用少兼容差IE不支持 定位总结 堆叠顺序(z-index)
定位可能出现盒子重叠的情况使用z-index控制盒子的前后次序
1.属性值越大盒子越靠上
2.属性值相同按书写顺序后来者居上
3.数字只表示顺序没有单位 定位拓展
绝对定位和固定定位的盒子不能设置margin:auto水平居中
水平居中
1.Left:50%先让盒子左侧移动到父级盒子水平中心
2.Margin-left-width/2 盒子向左移动自身宽度的一半
垂直居中
1.top:50% 先让盒子上侧移动到父级盒子竖直中心
2.margin-top:-height/2 盒子向上移动自身高度的一半 定位特殊特性
1.行内元素添加绝对或固定定位可以直接设置高度和宽度转换为行内块
2.块级元素添加绝对或固定定位不设置宽高默认是内容大小
3.浮动、定位都可以解决垂直外边距合并的问题脱标的盒子都不会触发外边距塌陷
4.定位绝对、相对会将盒子、内容一起压住浮动元素只压住盒子不会压住内容环绕效果 练习学成在线案例
准备工作 注意点
导航栏实际开发中不会直接使用链接a而是用li包含链接lia的做法 代码
style.css
* {margin: 0;padding: 0;
}/* 版心 公共类名 */
.w {width: 1200px;margin: auto;
}body {background-color: #f3f5f7;height: 2000px;
}li {list-style: none;
}a {text-decoration: none;
}.clearfix:before,
.clearfix:after {content: ;display: table;
}.clearfix:after {clear: both;
}.clearfix {zoom: 1;
}.header {height: 42px;/* 此地方会层叠w里面的margin */margin: 30px auto;
}.logo {float: left;width: 195px;height: 42px;
}/* 清除浮动 *//* 导航栏 */
.nav {float: left;margin-left: 60px;
}.nav ul li {float: left;margin: 0 15px;
}.nav ul li a {/* 转换为块级元素才有高度 */display: block;height: 42px;/* 不设置宽度直接设置padding撑开盒子得到每个盒子之间的稳定缝隙 */padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}/* 搜索模块 */
.search {float: left;width: 411px;height: 40px;margin-left: 50px;
}/* input button都是行内块元素之间有默认缝隙 浮动则没有空隙*/
.search input {float: left;width: 345px;height: 39px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}.search button {float: left;width: 50px;height: 40px;/* 去掉默认边框 */border: 0;background: url(images/fa-search.png);
}/* 用户模块 */
.user {float: left;line-height: 42px;margin: 0 30px;font-size: 14px;color: #666;}.user img {vertical-align: middle;
}/* banner通栏 */
.banner {height: 420px;background-color: #1c036c;
}.banner .w {height: 420px;background: url(images/banner2.png) no-repeat top center;
}/* banner左侧导航栏 */
.subnav {float: left;height: 420px;width: 190px;background-color: rgba(0, 0, 0, 0.3);
}.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}.subnav ul li a {/* a是行内元素没有高度 */text-decoration: none;font-size: 14px;color: white;
}.subnav ul li a:hover {color: #00a4ff;
}.subnav ul li a span {float: right;
}.course {float: right;width: 230px;height: 300px;/* 子盒子浮动不会导致父盒子塌陷即不会发生外边距合并的问题 */margin: 60px 0;background-color: #ffffff;
}.course h2 {height: 48px;background-color: #9bceea;font-size: 18px;line-height: 48px;color: #fff;text-align: center;
}.course .bd {padding: 0 20px;
}.course .bd ul li {padding-top: 15px;height: 50px;border-bottom: 1px solid #eaeaea;text-align: center;
}.course .bd ul li a {font-size: 16px;color: #4e4e4e;
}.course .bd ul li p {color: #a5a5a5;font-size: 12px;
}.course .bd .all {margin-top: 5px;height: 40px;width: 190px;border: 1px solid #00a4ff;text-align: center;line-height: 40px;font-size: 18px;color: #00a4ff;
}.course .bd ul li a:hover {color: #00a4ff;
}/* 精品推荐导航模块 */
.goods {margin-top: 10px;height: 60px;background-color: #fff;/* 盒子阴影 */box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);/* 行高会继承给三个子元素 */line-height: 60px;
}.goods h3 {float: left;margin: 0 30px;font-size: 16px;color: #00a4ff;
}.goods ul li {float: left;/* 采用竖直方向margin也可以实现垂直居中 */margin: 22px 0;padding: 0 30px;border-left: 1px solid #bfbfbf;line-height: 16px;font-size: 16px;color: #050505;
}.goods .mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}/* 精品推荐大区域 */
.box {margin-top: 30px;
}.box-hd {height: 40px;
}.box-hd h3 {float: left;font-size: 20px;color: #494949;
}.box-hd a {float: right;margin-top: 10px;margin-right: 30px;font-size: 12px;color: #a5a5a5;
}.box-bd ul li {position: relative;float: left;height: 270px;width: 228px;margin-right: 15px;margin-bottom: 15px;background-color: #ffffff;box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);}.box-bd ul li.ri {margin-right: 0;
}.box-bd ul liimg {/* 强制让下一级图片和父盒子宽度一致 */width: 100%;
}.box-bd ul li em {position: absolute;top: 4px;right: -4px;
}.box-bd ul li h4 {margin: 25px 20px 0 25px;font-size: 14px;font-weight: 400;color: #050505;}.box-bd .info {margin: 20px 20px 0 25px;font-size: 12px;color: #999;
}.box-bd .info span {color: #ff7c2d;
}/* footer模块 */
.footer {padding: 35px 30px 0 20px;height: 415px;background-color: #ffffff;
}.footer .copyright {/* 不使用margin会和.footer外边距合并 */float: left;width: 440px;
}.footer .copyright p {margin: 20px 0 15px 0;font-size: 12px;color: #666;
}.footer .copyright .app {/* a是行内元素要转换为块级元素 */display: block;width: 120px;height: 35px;border: 1px solid #00a4ff;line-height: 35px;text-align: center;font-size: 16px;color: #00a4ff;
}.footer .links {float: right;
}.footer .links dl {float: left;margin-left: 120px;
}.footer .links dl dt {font-size: 16px;color: #333;margin-bottom: 15px;
}.footer .links dl dd a {font-size: 12px;color: #333;
}.footer .links dl dd a:hover {color: #00a4ff;
}
index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学成在线首页/titlelink relstylesheet hrefstyle.css
/headbody!-- 1.头部区域 --div classheader wdiv classlogoimg srcimages/logo.png alt/div!-- 导航栏 --div classnavullia href#首页/a/lilia href#课程/a/lilia href#职业规划/a/li/ul/div!-- 搜索框 --div classsearchinput typetext value输入关键词button/button/div!-- 用户模块 --div classuserimg srcimages/user.png altuser-dyp/div/div!-- 2.banner区域 --div classbannerdiv classw!-- 侧边栏模块 --div classsubnavullia href#前端span/span/a/lilia href#后端开发span/span/a/lilia href#移动开发span/span/a/lilia href#人工智能span/span/a/lilia href#商业预测span/span/a/lilia href#云计算大数据span/span/a/lilia href#运维从测试span/span/a/lilia href#UI设计span/span/a/lilia href#产品span/span/a/li/ul/div!-- 课程表模块 --div classcourseh2我的课程表/h2div classbdullia href#h4继续学习-程序语言设计/h4/ap正在学习-使用对象/p/lilia href#h4继续学习-程序语言设计/h4/ap正在学习-使用对象/p/lilia href#h4继续学习-程序语言设计/h4/ap正在学习-使用对象/p/li/uldiv classalla href#全部课程/a/div/div/div/div/div!-- 3.精品推荐导航模块 --div classgoods wh3精品推荐/h3ullia href#jQurey/a/lilia href#Spark/a/lilia href#MySQL/a/lilia href#javaWeb/a/lilia href#javaScript/a/lilia href#TypeScript/a/li/ula href# classmod修改兴趣/a/div!-- 4.精品推荐大模块 --div classbox wdiv classbox-hdh3精品推荐/h3a href#查看全部/a/divdiv classbox-bdul classclearfixliemimg srcimages/形状24.png alt/emimg srcimages/图层133.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliemimg srcimages/new.png alt/emimg srcimages/图层135.png alth4Android 网络图片加载框架详解/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcimages/图层136.png alth4Angular 2 最新框架主流技术项目实战/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcimages/图层137.png alth4Android Hybrid APP开发实战 H5原生/h4div classinfospan高级/span • 1125人在学习/div/lili classriimg srcimages/图层137.png alth4Android Hybrid APP开发实战 H5原生/h4div classinfospan高级/span • 1125人在学习/div/liliemimg srcimages/形状24.png alt/emimg srcimages/图层133.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • 1125人在学习/div/liliemimg srcimages/new.png alt/emimg srcimages/图层135.png alth4Android 网络图片加载框架详解/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcimages/图层136.png alth4Angular 2 最新框架主流技术项目实战/h4div classinfospan高级/span • 1125人在学习/div/liliimg srcimages/图层137.png alth4Android Hybrid APP开发实战 H5原生/h4div classinfospan高级/span • 1125人在学习/div/lili classriimg srcimages/图层137.png alth4Android Hybrid APP开发实战 H5原生/h4div classinfospan高级/span • 1125人在学习/div/li/ul/div/div!-- 5.底部区域footer模块 --div classfooterdiv classwdiv classcopyrightimg srcimages/logo.png altp学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号/pa href# classapp下载APP/a/divdiv classlinksdldt关于学成网/dtdda href#关于/a/dddda href#管理团队/a/dddda href#工作机会/a/dddda href#客户服务/a/dddda href#帮助/a/dd/dldldt新手指南/dtdda href#如何注册/a/dddda href#如何选课/a/dddda href#如何拿到毕业证/a/dddda href#学分是什么/a/dddda href#考试未通过怎么办/a/dd/dldldt合作伙伴/dtdda href#合作机构/a/dddda href#合作导师/a/dd/dl/div/div/div
/body/html
网页布局总结 一些常见图片格式 CSS属性书写顺序 页面布局整体思路 大部分html标签都是盒子
标准流浮动定位应用场景
1.标准流块级元素垂直排列
2.浮动多个块级盒子水平排列
3.定位多个盒子层叠显示元素自由在某个盒子内移动则用定位布局 元素的显示和隐藏
1.display设置对象是否及如何显示
Display: none 隐藏对象
Display: block 转换为块级元素并显示
display隐藏元素后不再占有原来的位置
2.visibility属性可以指定一个元素应可见还是隐藏
Visibility: visible 可见
Visibility: hidden 隐藏
visibility隐藏元素后继续占有原来的位置
3.overflow属性设置当内容溢出一个元素的框时会发生什么 实际应用场景清除浮动隐藏超出父盒子的内容
一般开发时都选择隐藏溢出的内容
有定位的盒子慎用overflow: hidden因为尤其子盒子超出的部分会被隐藏掉 第八章 扩展
精灵图
1.多个背景小图整合到一张大图上减少请求服务器次数
2.大图称为sprits精灵图或雪碧图
3.移动背景图片位置属性background-position或直接简写数值在background属性值后
4.移动距离是目标图片的x,y坐标一般是往上往左移动所以数值是负值
5.需要精确测量每个背景小图的大小和位置 字体图标
1.显示网页中通用、常用的小图标 2.本质是字体文字大小颜色可以随意修改
3.轻量级渲染快无需请求服务器
4.几乎兼容所有浏览器
避免了这些缺点但不能完全替代精灵图修改麻烦放大会失真图片较大
使用
1.网上下载 下载包里的fonts文件夹放到网页根目录中
2.引入到html中 下载包里的style.css文件中font-face这一部分粘贴到html中进行字体声明 盒子中写入该字体 3.字体图标的追加 CSS三角做法
利用边框实现大小为零的盒子四个边框实际就是四个三角可以分别设置这四个三角的颜色、大小取决于边框粗细、透明度 Line-height、font-size为了兼容性添加 用户界面样式
1.鼠标样式cursor 2.表单轮廓线
Input{outline: none;}
取消默认蓝色轮廓线 3.防止拖拽文本域resize
Textarea{ resize: none; }
避免右下角拖拽改变文本域大小影响其他标签
注意textarea标签尽量在一行写否则会影响文字光标位置空出一行 常见技巧 行内块元素和行内元素实现垂直居中对齐 一般默认基线对齐改为middle就可以设置为垂直居中对齐 溢出的文字省略号显示
1.单行文本溢出显示省略号 2.多行文本溢出显示省略号 建议后台实现设置显示多少字 常见布局技巧
1.margin负值应用
对于浮动并排排列的有边框盒子出去重叠加粗部分的边框margin-left: -1px;
向左移动1px恰好压住相邻盒子边框
鼠标经过该盒子时提高当前盒子的层级没有定位可以加相对定位压住标准流和福哦的那个盒子盒子都有定位可以利用z-index属性提高层级
2.文字围绕浮动元素
运用浮动元素不会压住文字的特性
例如图片所放盒子添加浮动则文字可以实现环绕效果
3.行内块元素的巧妙运用
父盒子添加text-align: center则行内块元素都可以实现水平居中
4.CSS三角强化
想得到不规则的三角形可以border-bottom设为0砍掉下半截border-top拉高这样就不会是等腰三角形
5.CSS初始化
消除不同浏览器对html文本呈现的差异照顾兼容性需要先进行初始化重设浏览器的样式
