快速搭建个人网站,贵阳讯玛网站建设,网站域名费用多少钱一年,建邺html5响应式网站精灵图
为什么要使用精灵图
一个网页中往往会应用很多小的背景图像作为修饰#xff0c;当网页中的图像过多时#xff0c;服务器就会频繁地接收和发送请求图片#xff0c;造成服务器请求压力过大#xff0c;这将大大降低页面的加载速度,因此#xff0c;为了有效地减少服务…精灵图
为什么要使用精灵图
一个网页中往往会应用很多小的背景图像作为修饰当网页中的图像过多时服务器就会频繁地接收和发送请求图片造成服务器请求压力过大这将大大降低页面的加载速度,因此为了有效地减少服务器接收和发送请求的次数提高页面的加载速度出现了 CSS 精灵技术(也称CSS Sprites、CSs 雪碧)。 核心原理:将网页中的一些小背景图像整合到一张大图中这样服务器只需要一次请求就可以了 精灵技术目的:为了有效地减少服务器接收和发送请求的次数提高页面的加载速度
精灵图(sprites)的使用
使用精灵图核心:
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为sprites 精灵图 或者 雪碧图移动背景图片位置此时可以使用 background-position移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同因为一般情况下都是往上往左移动所以数值是负值。使用精灵图的时候需要精确测量每个小背景图片的大小和位置
字体图标
字体图标的产生
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。 精灵图是有诸多优点的但是缺点很明显。 1.图片文件还是比较大的。 2.图片本身放大和缩小会失真。 3.一旦图片制作完毕想要更换非常复杂。 此时有一种技术的出现很好的解决了以上问题就是字体图标iconfont。 字体图标可以为前端工程师提供一种方便高效的图标使用方式展示的是图标本质属于字体。
字体图标的优点
轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了图标就会马上渲染出来减少了服务器请求灵活性:本质其实是文字可以很随意的改变颜色、产生阴影、透明效果、旋转等 兼容性:几乎支持所有的浏览器请放心使用. 注意:字体图标不能替代精灵技术只是对工作中图标部分技术的提升和优化。
精灵图与字体图标的使用总结
如果遇到一些结构和样式比较简单的小图标就用字体图标。 如果遇到一些结构和样式复杂一点的小图片就用精灵图。
字体图标的使用
字体图标是一些网页常见的小图标我们直接网上下载即可。 因此使用可以分为 1.字体图标的下载 2.字体图标的引入(引入到我们htm页面中) 3.字体图标的追加(以后添加新的小图标 2.3 字体图标的下载
推荐下载网站:
icomoon字库 http://icomoon.io阿里 iconfont 字库 http://www.iconfont.cn/
字体图标的引用
下载完毕之后注意原先的文件不要删后面会用。
把下载包里面的 fonts 文件夹放入页面根目录下 在 CSS 样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面中定注意字体文件路径的问题。 这段文字在文件里有。
font-face{
font-family:icomoon;
url(fonts/icomoon.eot?7kkyc2);
src: url(fonts/icomoon.eot?7kkyc2#iefix)format(embedded-opentype)
src: url(fonts/icomoon.ttf?7kkyc2)format(truetype),url(fonts/icomoon.woff?7kkyc2)format(woff)url(fonts/icomoon.svg?7kkyc2#icomoon)format(svg);
font-weight:normal;
font-style:normal;
}html 标签内添加小图标。
span {font-family:icomoon;font-size: 100px;
}字体图标的追加
如果工作中原来的字体图标不够用了我们需要添加新的字体图标到原来的字体文件中。 把压缩包里面的 selectionjson 重新上传然后选中自己想要新的图标,重新下载压缩包并替换原来的文件即可。
HTML5新增属性
HTML5新增的input类型
属性值说明type“email”限制用户输入必须为Email类型type“url”限制用户输入必须是URL类型type“data”限制用户输入必须为日期类型type“time”限制用户输入必须为时间类型type“month”限制用户输入必须为月类型type“week”限制用户输入必须为周类型type“number”限制用户输入必须为数字类型type“tel”手机号码type“search”搜索框type“color”生成一个颜色选择表单
重点记住number tel search 这三个
HTML5新增的表单属性
属性值说明requiredrequired表单拥有该属性表示内容不能为空必填placeholder提示文本表单的提示信息存在默认值将不显示autofocusautofocus自动聚焦属性页面加载完成自动聚焦到指定表单autocompleteoff/on当用户在字段开始键入时浏览器基于之前键入过的值应该显示出在字段中填写的选项。默认已经打开如autocomplete“on”,关闭autocompleteoff需要放在表单内同时加上name属性同时成功提交multiplemultiple可以多选文件提交
HTML5新增的语义化标签 header: 头部标签
nav: 导航标签article内容标签
section: 定义文档某个区域
aside: 侧边栏标签
footer: 尾部标签注意: 这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次。在IE9 中需要把这些元素转换为块级元素。其实我们移动端更喜欢使用这些标签HTML5 还增加了很多其他标签
video视频标签
属性值描述autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)controlscontrols向用户显示播放控件widthpx设置播放器宽度heightpx设置播放器高度looploop播放完是否继续播放该视频循环播放preloadauto(预先加载视频)none(不应加载视频)规定是否加载视频(如果有了autoplay就忽略该属性)srcurl视频url地址posterImgurl加载等待的画面图片mutedmuted静音播放
属性选择器
属性选择器可以根据元素特定属性来显示元素。这样就可以不用借助于类或者id选择器。
选择符简介E[att]选择具有 att 属性的 E元素E[att“val”]选择具有 att 属性且属性值等于 val 的E元素E[att^“val”]匹配具有 att 属性且值以 val 开头的 E元素E[att$“val”]匹配具有 att 属性且值以 val 结尾的 E元索E[att*“val”]匹配具有 att 属性且值中含有 val 的 E元素
注意:类选择器、属性选择器、伪类选择器权重为 10。
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素常用于根据父级选择器里面的子元素
选择符简介E:first-child匹配父元素中的第一个子元素 EE:last-child匹配父元素中最后一个E元素E:nth-child(n)匹配父元素中的第 n个子元素EE:first-of-type指定类型E的第一个E:last-of-type指定类型E的最后一个E:nth-of-type(n)指定类型E的第n个
nth-child(n)选择某个父元素的一个或多个特定的子元素
n 可以是数字关键字和公式n 如果是数字就是选择第n个子元素里面数字从1开始…n 可以是关键字:even偶数odd 奇数n可以是公式:常见的公式如下(如果n是公式则从0开始计算但是第0个元素或者超出了元素的个数会被忽略)
公式取值2n偶数2n1奇数5n5 10 15…n5从第5个开始(包含第五个)到最后-n5前5个(包含第5个)
区别:
nth-child 对父元素里面所有孩子排序选择(席号是固定的) 先找到第n个孩子然后看看是否和E匹配nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E然后再根据E 找第n个孩子
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素而不需要HTML标签从而化HTML结构
选择符简介:: before在元素内部的前面插入内容::after在元素内部的后面插入内容
注意
before 和 after 创建一个元素但是属于行内元素新创建的这个元素在文档树中是找不到的所以我们称为伪元素语法: element::before {}before 和 after 必须有 content 属性before 在父元素内容的前面创建元素after在父元素内容的后面插入元素伪元素选择器和标签选择器一样权重为1
p::before {
position:absolute;
right:20px;
top: 10px;e91e;content:font-size:20px;
}伪元素清除浮动
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
.clearfix:after {
content:;
display: blolk;
height:0;
clear: both;
visibility: hidden;
}.clearfix:before,.clearfix:after{
content:;
display:table;
}
.clearfix:after{
clear:both;
}CSS创建三角
网页中常见一些三角形使用CSS直接画出来就可以不必做成图片或者字体图标张图 CSS 三角做法如下
div {
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:pink;
}界面样式
所谓界面样式就是更改一些用户操作样式以提高更好的用户体验。
更改用户的鼠标样式表单轮廓防止表单域拖拽
鼠标样式cursor
li {cursor : pointer}设置过检索在对象上移动的鼠标指针采用何种系统定义的光标形状。
属性值描述default默认pointer小手move移动text文本not-allowed禁止
轮廓线outline
给表单添加outline 0;或者outline: none;样式之后就可以去掉默认的蓝色边框。
input {outline: none;}防止拖拽文本域 resize
实际应用过程中文本域右下角是不可以拖拽的。
textarea {resize:none;}vertical-align属性
CSS 的 vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐官方解释:用于设置一个元素的垂直对齐方式但是它只针对于行内元素或者行内块元素有效。
vertical-align :baseline l top | middle l bottom值描述baseline默认。元素放置在父元素的基线上top把元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部bottom把元素的顶端与行中最低的元素的对齐 vertical-align 属性应用
图片、表单和文字对齐
图片、表单都属于行内块元素默认的 vertical-align 是基线对齐。 默认文字与图片是基线对齐。 此时可以给图片、表单这些行内块元素的vertical-align 属性设置为 middle 就可以让文字和图片垂直 居中对齐了。
解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙原因是行内块元素会和文字的基线对齐 主要解决方法有两种
给图片添加vertical-align:middle|top|bottom等。(提倡使用的)把图片转换为块级元素 display: block
文本溢出显示省略号
单行文本溢出显示省略号
/*1.先强制一行内显示文本*/
默认 normal 自动换行)white-space: nowrap;/*2.超出的部分隐藏*/公
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow:ellipsis;多行文本溢出显示省略号 多行文本溢出显示省略号有较大兼容性问题适合于webKit浏览器或移动端(移动端大部分是webkit内核)
overflow:hidden;
text-dverflow: ellipsis;
/*弹性伸缩盒子模型显示 */
display:-webkit-box;
/*限制在一个块元素显示的文本的行数 */
webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
webkit-box-orient:vertical;常见布局技巧
margin负值的运用
让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框 果有定位则加z-index)鼠标经过某个盒子的时候提高当前盒子的层级即可(如果没有有定位则加相对定位(保留位置)如果有定位则加z-index)
文字围绕浮动元素
巧妙运用浮动元素不会压住文字的 特性
行内块的巧妙运用 CSS三角强化
width:0;
height:0;
border-color:transvarent red transparent transparent;solid;border-style:
border-width:22px8px00;CSS初始化
不同浏览器对有些标签的默认值是不同的为了消除不同浏览器对HTML文本呈现的差异照顾浏览器的兼容我们需要对CSS初始化 简单理解: CSS初始化是指重设浏览器的样式。(也称为CSSreset) 每个网页都必须首先进行CSS初始化。 这里我们以以 京东css初始化代码为例。
Unicode编码字体:
把中文字体的名称用相应的Unicode编码来代替这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。 比如: 黑体 \9ED1\4F53宋体\5B8B\4F53 微软雅黑\5FAE\8F6F\96C5\9ED1
CSS盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为content-box、border-box这样我们计算盒子大小的方式就发生了改变。 可以分成两种情况:
box-sizing:content-box 盒子大小为 width padding border (以前默认的)box-sizing:border-box 盒子大小为width 如果盒子模型我们改为了box-sizing:border-box 那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
CSS其他特性
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如filter:blur(5px);blur模糊处理 数值越大越模糊filter: CSS3 calc 函数:
calc()此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% -80px);括号里面可以使用 、-、*、/来进行计算。
CSS3 过渡
过渡(transition)是CSS3中具有颠覆性的特征之一我们可以在不使用 Flash 动画或JavaScript 的情况下当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画 : 是从一个状态 渐渐的过渡到另外一个状态可以让我们页面更好看动感十足虽然 低版本浏览器不支持(ie9以下版本 ) 但是不会影响页面布局。 我们现在经常和 :hover 一起 搭配使用。
transition:要过渡的属性 花费时间 运动曲线 何时开始;1.属性 : 想要变化的 css 属性宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡写一个a 就可以。 2.花费时间 :单位是 秒(必须写单位 )比如 0.5s 3.运动曲线:默认是 ease (可以省略) 4.何时开始 :单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s(可以省略)
网站 favicon 图标
favicon.ico 一般用于作为缩略的网站标志它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持favicon.ico 图标。
制作favicon图标
把品优购图标切成png图片。把 png 图片转换为ico 图标这需要借助于第三方转换网站例如比特虫:http://www.bitbug.net/
favicon图标放到网站根目录下
HTML页面引入favicon图标
1.在html页面里面的 元素之间引入代码。
link relshortcut icon hreffavicon.ico
typeimage/x-icon/
