网站建设公司shundeit,网站建设解决问题,音乐门户网站模板,如何在网站做qq群链接文章目录前言系列文章目录1 精灵图Sprites1.1 为什么需要精灵图#xff1f;1.2 精灵图的使用2 字体图标iconfont2.1 字体图标的产生2.2 字体图标的优点2.3 字体文件格式2.4 字体图标的使用2.5 字体图标的引入2.6 字体图标的追加3 CSS三角3.1 普通三角3.2 案例4 CSS用户界面样式…
文章目录前言系列文章目录1 精灵图Sprites1.1 为什么需要精灵图1.2 精灵图的使用2 字体图标iconfont2.1 字体图标的产生2.2 字体图标的优点2.3 字体文件格式2.4 字体图标的使用2.5 字体图标的引入2.6 字体图标的追加3 CSS三角3.1 普通三角3.2 案例4 CSS用户界面样式4.1 什么是界面样式4.2 鼠标样式cursor4.3 轮廓线outline4.4 防止拖拽文本域resize5 vertical-align属性应用5.1 图片、表单和文字对齐5.2 解决图片底部默认空白缝隙问题6 溢出文字省略显示6.1 单行文本6.2 多行文本7 布局技巧7.1 margin负值的运用7.2 文字围绕浮动元素7.3 行内块巧妙运用7.4 CSS三角强化8 CSS初始化前言
这篇文章为我跟随pink老师重新系统学习前端时做的一些笔记。
系列文章目录
【HTML5与CSS3篇】 D1HTML基础简介常用标签 D2CSS入门简介基础选择器字体文本属性引入方式 D2CSS基础复合选择器元素显示模式背景 D3CSS进阶层叠继承优先级盒子模型圆角边框盒子文本阴影浮动 D4CSS进阶定位元素的显示与隐藏 D5CSS进阶字体图标CSS三角光标样式vertical-align属性布局技巧 D5CSS提高 【JavaScript篇】 D1JavaScript入门计算机基础变量数据类型 D2JavaScript基础运算符运算流程分支控制命名规范与语法格式 D3JavaScript进阶 1 精灵图Sprites
1.1 为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰。当网页中的图像过多时服务器就会频繁地接收和发送请求图片造成服务器请求压力过大这将大大降低页面的加载速度。因此为了有效地减少服务器接收和发送请求的次数提高页面的加载速度出现了CSS精灵技术也成CSS Sprites、CSS雪碧。
核心原理将网页中的一些小背景图像整合到一张大图中这样服务器只需要一次请求就可以了。 我没用过精灵图一直用的阿里字体图标。理解了一下也就是说精灵图其实是通过background: url(url) no-repeat x y;属性定位并截取一张大图的一小部分作为展示内容。
1.2 精灵图的使用
使用精灵图的核心
精灵技术主要针对于背景图片的使用就是把多个小背景图片整合到一张大图片中。这个大图片也称为sprites精灵图或者雪碧图。移动背景图片的位置此时可以使用background-position属性。移动的距离就是这个目标图片的x和y坐标注意网页中的坐标有所不同x轴右边走是正值左边走是负值y轴下边走是正值上边走是负值。一般情况下都是往上往左移动所以数值是负值。使用精灵图的时候需要精确测量每个小背景图片的大小和位置。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle利用精灵图拼出自己名字/titlestyle/* 善用公共标签、公共类、并集选择器 */span {display: inline-block;background: url(images/abcd.jpg) no-repeat;}.p {width: 100px;height: 112px;background-position: -493px -276px;}.i {width: 60px;height: 108px;background-position: -327px -142px;}.n {width: 108px;height: 109px;background-position: -215px -141px;}.k {width: 105px;height: 114px;background-position: -495px -142px;}/style/headbodyspan classpp/spanspan classii/spanspan classnn/spanspan classkk/span/body
/html2 字体图标iconfont
2.1 字体图标的产生
精灵图的缺点
图片文件还是比较大的。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。
有一种技术的出现很好的解决了以上问题就是字体图标iconfont。字体图标可以提供一种方便高效的图标使用方式展示的是图标本质属于字体即可以随意更改尺寸和颜色。 字体图标使用场景主要用于显示网页中通用、常用的一些小图标。
2.2 字体图标的优点
轻量级一个图标字体比一系列的图像要小一旦字体加载了图标就会马上渲染出来减少了服务器的请求。灵活性本质其实是文字可以很随意的改变颜色产生阴影透明效果旋转等。兼容性几乎支持所有的浏览器。
但是字体图标不能替代精灵技术只是对工作中图标部分技术的提升和优化。复杂的背景图片还是需要使用精灵图以图片的形式展示。
如果遇到一些结构和样式比较简单的小图标就用字体图标。如果遇到一些结构和样式复杂一点的小图片如需要渐变、立体等效果就用精灵图。
2.3 字体文件格式
不同浏览器所支持的字体格式是不一样的字体图标之所以兼容就是因为包含了主流浏览器支持的字体文件.ttf 格式、.woff 格式、.eot 格式、.svg 格式不同浏览器支持不同的格式。
2.4 字体图标的使用
字体图标是一些网页常见的小图标直接网上下载即可。
字体图标的下载字体图标的引入引入到我们html页面中字体图标的追加以后添加新的小图标
推荐下载网站
icomoon字库外网无需登录 IcoMoon App -- 选择需要的图标 -- 自定义编辑 -- Generate Font -- Download阿里iconfont字库国内需要登录注意商业用途的授权问题
2.5 字体图标的引入
将压缩包里面的fonts文件夹放入页面根目录下。在CSS样式中全局声明字体简单理解把这些字体通过css引入到页面中注意字体文件路径问题以下代码可在压缩包下的style.css中直接复制。font-face {font-family: icomoon;src: url(fonts/icomoon.eot?7kkyc2);src: url(fonts/icomoon.eot?7kkyc2#iefix) format(embedded-opentype),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标签内添加小图标。 打开解压文件中的demo.html复制想要的图标粘贴进span/span标签中。给标签定义字体注意标签中的font-family的值和之前引入字体图标的font-family必须一致此处均为icomoon。/* span使用字体图标 */
span {font-family: icomoon;
}2.6 字体图标的追加
如果工作中原来的字体图标不够用了我们需要添加新的字体图标到原来的字体文件中。 以icomoon字库网为例import icons -- 重新加载压缩包下的selection.json -- Generate Font -- Download -- 更换压缩包
3 CSS三角
网页中常见一些三角形使用CSS直接画出来即可不必做成图片或者字体图标。
3.1 普通三角
.box1 {width: 0;height: 0;/* border: 10px solid pink; */border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;
}
.box2 {width: 0;height: 0;border: 50px solid transparent;border-left-color: pink;margin: 100px auto;
}3.2 案例
.jd {position: relative;width: 120px;height: 60px;background-color: pink;
}
.jd span {position: absolute;right: 15px;/* border为5px为实现三角压在盒子上向上移动10px */top: -10px;width: 0;height: 0;/* 为了照顾兼容性 */line-height: 0; font-size: 0;border: 5px solid transparent;border-bottom-color: pink;
}4 CSS用户界面样式
4.1 什么是界面样式
所谓的界面样式就是更改一些用户操作样式以便改善用户体验。
4.2 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
li {cursor: pointer;
}default小白箭头默认pointer小手move移动text文本not-allowed禁止
4.3 轮廓线outline
给表单input添加outline: 0;或者outline: none;样式后就可以去掉默认的蓝色边框即取消表单轮廓。
input {outline: none;
}4.4 防止拖拽文本域resize
实际开发中文本域右下角是不可以拖拽的。
textarea {resize: none;
}尽量把文本域标签写在一行内。分行写会赋默认值为一部分空格。
textarea name id cols30 rows10/textarea5 vertical-align属性应用
vertical-align属性用于设置一个元素的垂直对齐方式但是它只针对于行内元素或者行内块元素有效。 使用场景经常用于设置图片或者表单行内块元素和文字垂直对齐。
vertical-align: baseline | top | middle | bottombaseline默认值元素放置在父元素的基线上top把元素的顶端与行中最高元素的顶端对齐顶线对齐middle把此元素放置在父元素的中部中线对齐即图片和文字垂直居中bottom把元素的顶端与行中最低的元素的顶端对齐底线对齐
5.1 图片、表单和文字对齐
图片、表单都属于行内块元素默认的vertical-align是基线对齐。此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。
5.2 解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙原因是行内块元素会和文字的基线对齐给图片加边框就可以看见。 主要解决办法
给图片添加vertical-align: middle | top | bottom等。提倡使用把图片转换为块级元素display:block;因为块级元素不会有vertical-align属性。但可能影响其他元素的布局
6 溢出文字省略显示
6.1 单行文本
必须满足三个条件
/* 1.先强制一行内显示文本 */
white-space: nowrap; /* 默认normal是自动换行nowrap是强制一行显示文本 */
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/*ellipsis:省略号*/6.2 多行文本
多行文本溢出显示省略号有较大的兼容性问题适合于webKit浏览器或移动端移动端大部分是webKit内核。
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient : vertical;更推荐让后台实现这个效果后台操作更简单。
好神奇。。我以前都是用JS判断字符串的长度然后切掉后面部分再衔接省略号。直接在CSS控制文本溢出方便多了不过确实要考虑IE的兼容性
7 布局技巧
7.1 margin负值的运用
两个相邻的盒子加边框1px浮动贴紧会出现边框变粗的问题。 解决方案给右边盒子添加margin-left: -1px;使边框完全重合注意正数向右边走负数向左边走。 因为浏览器是依次渲染元素的所以不需要担心每个标签添加margin-left: -1px;属性后边框无法完全重合的问题。
ul li {float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;
}
ul li:hover {border: 1px solid blue;
}但是当鼠标经过除最后一个盒子外的其他某个盒子时右边框被右侧盒子的左边框覆盖无法正常显示。 解决方案当鼠标悬停时提高当前盒子的层级即可。
如果没有定位则加相对定位保留位置如果有定位则加 z-index
ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;
}
/* ul li:hover {1. 如果盒子没有定位则鼠标经过添加相对定位即可position: relative;border: 1px solid blue;
} */
ul li:hover {/* 2.如果li都有定位则利用 z-index提高层级 */z-index: 1;border: 1px solid blue;
}7.2 文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle文字围绕浮动元素的妙用/titlestyle* {margin: 0;padding: 0;}.box {width: 300px;height: 70px;background-color: pink;margin: 0 auto;padding: 5px;}.pic {float: left;width: 120px;height: 60px;margin-right: 5px;}.pic img {width: 100%;}/style/headbodydiv classboxdiv classpicimg srcimages/img.png alt/divp【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场/p/div/body
/html7.3 行内块巧妙运用
分页器
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle行内块的巧妙运用/titlestyle* {margin: 0;padding: 0;}.box {text-align: center;}.box a {/* 行内块元素才可以设置大小 */display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;/* 取消轮廓线 */outline: none;}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}/style/headbodydiv classboxa href# classprevlt;lt;上一页/aa href# classcurrent2/aa href#3/aa href#4/aa href#5/aa href#6/aa href# classelp.../aa href# classnextgt;gt;下一页/a到第 input typetext页button确定/button/div/body
/html7.4 CSS三角强化 但是之前画的都是等腰三角形这里需要直角三角形。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle行内块的巧妙运用/titlestyle* {margin: 20px; }.box1 {width: 0;height: 0;border-top: 50px solid pink;border-right: 50px solid skyblue;border-bottom: 50px solid blue;border-left: 50px solid green;}.box2 {width: 0;height: 0;border-top: 50px solid transparent;border-right: 50px solid skyblue;/* 左边和下边的边框宽度设置为0 */border-bottom: 0 solid blue;border-left: 0 solid green;}.box3 {width: 0;height: 0;/* 把上边框宽度调大 */border-top: 100px solid transparent;border-right: 50px solid skyblue;/* 左边和下边的边框宽度设置为0 */border-bottom: 0 solid blue;border-left: 0 solid green;}/style/headbodydiv classbox1/divdiv classbox2/divdiv classbox3/div/body
/html价格标签
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titleCSS三角强化的巧妙运用/titlestyle.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}/style/headbodydiv classpricespan classmiaosha¥1650i/i/spanspan classorigin¥5650/span/div/body
/html8 CSS初始化
不同浏览器对有些标签的默认值是不同的。为了消除不同浏览器对HTML文本呈现的差异照顾浏览器的兼容需要对CSS初始化。简单理解CSS初始化就是指重设浏览器的样式也称为CSS Reset。 每个网页都必须首先进行CSS初始化。 以京东网站为例获取CSS初始化代码
右键“查看网页源代码”单击CSS文件link的网址打开CSS文件Ctrl F弹出搜索框输入’body’复制body的所有属性
/* 把所有标签的内外边距清零 */
* {margin: 0;padding: 0
}
/* em和i斜体标签的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li的小圆点 */
li {list-style: none
}
img {/* 照顾低版本浏览器。如果图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle
}
button {/* 鼠标悬停button按钮时的光标样式 */cursor: pointer
}
a {color: #666;text-decoration: none
}
a:hover {color: #c81623
}
button,
input {/* \5B8B\4F53就是宋体的意思这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, \5B8B\4F53, sans-serif
}
body {/* CSS3抗锯齿形让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, \5B8B\4F53, sans-serif;color: #666
}
.hide,
.none {display: none
}
/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: .;height: 0
}
.clearfix {*zoom: 1
}把中文字体的名称用相应的Unicode编码来代替这样就可以有效避免浏览器解释CSS代码时出现乱码的问题。
