CSS 常用效果样式以及布局技巧
- 一、常用效果样式
- 二、 PS 基本操作以及常用快捷键
- 三、PxCook - 轻便免费的切图设计工具
- 四、移动适配
- 五、小技巧
一、常用效果样式
1. 圆角边框
在 CSS3 中，新增了圆角边框样式，这样盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
-
语法：
border-radius: length;-
参数值可以为数值或百分比的形式
-
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
-
属性分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
-
兼容性： ie9+ 浏览器支持，但是不会影响页面布局，可以放心使用
-
-
示例
/* 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% */ width: 200px; height: 200px; background-color: pink; border-radius: 50%; /* 如果是矩形，想要设置为一个圆角矩形，把数值修改为高度或者宽度的一半即可，或者直接写为 50% */ width: 300px; height: 100px; background-color: pink; border-radius: 50px; /* 只给两个值，第一个值表示 左上和右下，第二个值表示 右上和左下 */ width: 200px; height: 200px; border-radius: 10px 40px; background-color: pink; -
运行结果
2. 盒子阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
-
语法:
box-shadow: h-shadow v-shadow blur spread color inset/outset; box-shadow: 水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；属性值 描述 h-shadow 必需。水平阴影的位置，允许负值。 v-shadow 必需。垂直阴影的位置，允许负值。 blur 可选。模糊的距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。 inset 可选。将外部阴影（outset）改为内部阴影。 -
注意
-
默认的是外阴影(outset)，但是不可以写这个单词，否则造成阴影无效
-
盒子阴影不占用空间，不会影响其他盒子排列。
-
-
示例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子阴影</title> <style> .test li { list-style: none; width: 500px; height: 50px; background-color: #eee; margin-top: 20px; padding: 10px; } .test .outset { box-shadow: 2px 2px rgba(0, 0, 0, .6); } .test .outset-blur { box-shadow: 7px 7px 7px rgba(0, 0, 0, .6); } .test .outset-blur-extension { box-shadow: 7px 7px 8px 3px rgba(0, 0, 0, .6); } .test .inset { box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, .6) inset; } .test .more-outset { box-shadow: 9px 9px 3px 3px rgba(255, 0, 0, .6), 13px 13px 3px 6px rgba(0, 255, 0, .6), 20px 20px 3px 9px rgba(0, 0, 255, .6); } </style> </head> <body> <ul class="test"> <li class="outset">外阴影常规效果</li> <li class="outset-blur">外阴影模糊效果</li> <li class="outset-blur-extension">外阴影模糊外延效果</li> <li class="inset">内阴影效果</li> <li class="more-outset">多层外阴影效果</li> </ul> </body> -
运行结果
3. 文字阴影
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
-
语法
text-shadow: h-shadow v-shadow blur color;属性值 描述 h-shadow 必需。水平阴影的位置，允许负值，正值方向向右。 v-shadow 必需。垂直阴影的位置，允许负值，正值方向向下。 blur 可选。模糊的距离。 color 可选。阴影的颜色。 -
示例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文字阴影</title> <style> div { font-size: 50px; color: orangered; font-weight: 700; text-shadow: 5px 5px 6px rgba(0, 0, 0, .3); } </style> </head> <body> <div> 你是阴影,我是火影 </div> </body> -
运行结果
4. 元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。
4.1 display 属性实现元素的显示与隐藏
display 属性可以用于设置一个元素显示或隐藏。
| 属性值 | 描述 |
|---|---|
| none | 隐藏对象 |
| block | 除了转换为块级元素之外，同时还有显示元素的意思 |
注意：display 隐藏元素后，不再占有原来的位置。
4.2 visibility 属性实现元素的显示与隐藏
visibility 属性用于指定一个元素应可见还是隐藏。
| 属性值 | 描述 |
|---|---|
| visible | 元素可视 |
| hidden | 元素隐藏 |
注意：visibility 隐藏元素后，继续占有原来的位置。
4.2 overflow 属性实现元素的显示与隐藏
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出部分隐藏掉 |
| scroll | 不管是否超出，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
注意：
-
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
-
但是如果有定位的盒子，需要慎用 overflow:hidden; 因为它会隐藏多余的部分。
5. 精灵图
5.1 为什么需要精灵技术
上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。
5.2 精灵技术讲解
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，因此需要精确定位到精灵图中的某个小图。
这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
我们需要使用CSS的：
- background-image
- background-repeat
- background-position
- 其中最关键的是使用 background-position 属性精确地定位。
5.3 精灵技术使用的核心总结
首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
-
精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。
-
这个大图片也称为 sprites 精灵图 或者 雪碧图。
-
移动背景图片位置， 此时可以使用 background-position。
-
移动的距离就是这个目标图片在大图片中的 x 和 y 坐标。
-
因为一般情况下都是往上往左移动，所以数值是负值。
-
使用精灵图的时候需要精确测量每个小背景图片的大小和位置。
5.4 制作精灵图
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工做。
制作细节：
-
精灵图上放的都是小的装饰性质的背景图片， 插入图片不能往上放。
-
可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙。
-
在精灵图的最低端，留一片空隙，方便以后添加其他精灵图。
小型网站，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。
6. 字体图标
6.1 字体图标的产生
字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。
为什么不用精灵图？
-
图片文件还是比较大的。
-
图片本身放大和缩小会失真。
-
一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
总结：
-
如果遇到一些结构和样式比较简单的小图标，就用字体图标。
-
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
6.2 字体图标的优点
-
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
-
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
-
兼容性：几乎支持所有的浏览器，可以放心使用。
注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
6.3 使用字体图标 - 下载
推荐两个网站：
-
IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
-
阿里 iconfont 字库：http://www.iconfont.cn/
这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。 重点是，免费！
6.4 icomoon 用法
6.4.1 字体图标 - 引入
以 icomoon 为例。
-
下载好的文件夹解压，解压后会有下面这些文件
-
font文件夹中是字体文件。不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
-
TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
-
Web Open Font Format(.woff)格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
-
Embedded Open Type(.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；
-
SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
-
-
-
将 font 文件在复制到项目根目录下
-
在 CSS 样式中全局声明字体：就是把这些字体文件通过css引入到我们页面中。
声明语句可以在解压好的文件夹中的 style.css 文件中拿到。
@font-face { font-family: 'icomoon'; /* icomoon 是字体图标名，可以修改。如果修改，下面的所有 icomoon 都要修改 */ src: url('fonts/icomoon.eot?35ulpc'); /* 一定注意字体文件路径的问题 */ src: url('fonts/icomoon.eot?35ulpc#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?35ulpc') format('truetype'), url('fonts/icomoon.woff?35ulpc') format('woff'), url('fonts/icomoon.svg?35ulpc#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } -
在html标签内添加小图标
<span></span> <!-- 或者 --> <span>\e900</span>span标签里的内容是从解压后的文件夹中的 demo.html 中拿到的
-
在浏览器中打开 demo.html，找到需要使用的图标
-
图标下面的方框就是我们需要的内容
-
或者前面的符号，但是放入标签时要在前面加斜杠，例如：\e900
-
-
给标签定义字体
span { font-family: 'icomoon'; /* 必须和前面字体声明时定义的字体一致 */ }
6.4.2 字体图标 - 追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把解压后的文件夹里面的 selection.json 重新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。
-
进入icomoon 的网站
-
选择 IcoMoon App
-
选择 import icons
-
之前选择的图标会出现在上面，继续选择想要的图标，然后下载即可
-
将下载好的文件解压，用里面的font文件夹替换项目中已有的font文件夹
6.5 iconfont 用法
-
选择需要的图标加入购物车
-
下载代码
-
将下载好的代码解压到项目根目录，并重命名为iconfont
-
在页面引入iconfont.css 样式文件
<link rel="stylesheet" href="./iconfont/iconfont.css"> -
在标签中加入类名
iconfont icon-xxx。注意，类名
iconfont必须添加，因为这个类中定义了font-family: "iconfont" !important;，没有这行代码，字体图标就会失效。
<i class="iconfont icon-gongwenbao"></i>
6.5.1 如果图标库没有项目所需的图标怎么办
7. CSS 三角形
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
-
做法：
-
我们用 css 边框（border）可以模拟三角效果
-
宽度高度为 0
-
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明即可
-
为了兼容低版本的浏览器，加上
font-size: 0; line-height: 0;
-
-
示例1 全三角：
div { width: 0; height: 0; line-height: 0; font-size: 0; border-top: 20px solid red; border-right: 20px solid green; border-bottom: 20px solid blue; border-left: 20px solid yellow; } -
效果如下：
-
示例2 只保留需要的三角
div { width: 0; height: 0; line-height: 0; font-size: 0; border: 20px solid transparent; border-bottom-color: orange; } -
效果如下：
7.1 CSS 三角强化
只对行内和行内块元素有效。
原理：
主要代码：
.box {
width: 0;
height: 0;
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
}
示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS三角强化的巧妙运用</title>
<style>
.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>
</head>
<body>
<div class="price">
<span class="miaosha">
¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>
效果：
8. CSS 用户界面样式
-
所谓的界面样式， 就是更改一些用户操作样式，以便提高用户体验。
-
更改用户的鼠标样式
-
表单、文本域轮廓
-
防止表单域拖拽
-
8.1 鼠标样式（cursor）
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
-
语法
cursor: XXX;属性值 描述 default 小白箭头，默认值 pointer 小手 move 移动，十字箭头 text 文本 not-allowed 禁止 -
示例
<ul> <li style="cursor:default">我是小白</li> <li style="cursor:pointer">我是小手</li> <li style="cursor:move">我是移动</li> <li style="cursor:text">我是文本</li> <li style="cursor:not-allowed">我是禁止</li> </ul>
8.2 轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0; 或者 outline: none;
示例：
-
去掉输入框获取焦点后的轮廓线
<input type="text" style="outline: 0;"/> -
去掉文本域获取焦点后的轮廓线
<textarea style="outline: none;"></textarea>
8.3 防止拖拽文本域resize
实际开发中，我们文本域右下角是不可以拖拽：
<textarea style="resize: none;"></textarea>
8.4 用户界面样式总结
| 属性 | 用途 | 用途 |
|---|---|---|
| 鼠标样式 | 更改鼠标样式 cursor | 样式很多，重点记住 pointer |
| 轮廓线 | 修改表单默认 outline | outline 轮廓线，我们一般直接去掉；border 是边框，我们会经常用 |
| 防止拖拽 | 主要针对文本域 resize | 防止用户随意拖拽文本域，造成页面布局混乱 |
9 vertical-align 垂直对齐
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
-
语法
vertical-align : baseline |top |middle |bottom
| 属性值 | 描述 |
| baseline | 默认值，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高的元素顶端对齐 |
| middle | 把元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 | -
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素， 特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
9.1 去除图片底侧空白缝隙
-
原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
所以图片底侧会有一个空白缝隙。
-
解决的方法就是：
- 给图片添加 vertical-align:middle | top| bottom 等（提倡使用）
- 把图片转换为块级元素 display: block;
- 给图片添加 vertical-align:middle | top| bottom 等（提倡使用）
10. 溢出的文字省略号显示
10.1 white-space 对象内文本显示方式
white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容。
语法：
white-space: normal; /* 默认处理方式 */
white-space: nowrap; /* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 标签对象才换行。*/
10.2 text-overflow 文字溢出
text-overflow 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
text-overflow: clip; /* 不显示省略标记（...），而是简单的裁切 */
text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记（...）*/
注意：
一定要首先强制一行内显示，再和 overflow 属性 搭配使用。
10.3 溢出的文字一行内显示
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
10.4 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）。
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素内显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
11. CSS 初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化。
简单理解： CSS 初始化是指重设浏览器的样式 (也称为 CSS reset）,增强跨浏览器渲染的一致性。
常用的有 reset.css 文件，或者 normalize.css 文件。
下面以京东CSS初始化代码为例：
/* 自动计算宽高 */
* {
box-sizing: border-box;
}
/* 把所有标签的内外边距清零 */
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
/* 去除a标签中字体默认颜色和下划线*/
a {
color: #666;
text-decoration: none
}
/*统一设置所有 a 标签鼠标经过时字体颜色*/
a:hover {
color: #c81623
}
/* 统一设置按钮和输入框的字体 */
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
/* 去除input默认样式 */
input {
border: none;
outline: none;
color: #333;
}
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 的盒子 */
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1
}
12. margin 负值的运用
当两个有边框的盒子使用浮动靠在一起时，相邻边框在浏览器中显示时会变粗。
解决方法：
-
让每个盒子margin 往左侧移动边框粗细的像素值正好压住相邻盒子边框。
margin: -1px; /* 假设border-size: 1px; */
这样虽然可以解决相邻边框变粗的问题，但是如果想要使鼠标移动到左侧盒子上时，盒子的边框突出显示的效果，这时左侧盒子的右边框是显示不出来的，因为被右侧盒子给压住了。
解决方法：
-
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）。
div: hover { position: relative; /* 假设相邻的盒子都没有定位 */ z-index: 9; /* 假设相邻的盒子有定位 */ }
综合示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin负值的巧妙运用</title>
<style>
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;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
13. 文字围绕浮动元素
像这种布局方式，可以采取文字围绕浮动元素的方式。
示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字围绕浮动元素的妙用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: orange;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
</body>
14. 行内块巧妙运用
页码在页面中间显示：
- 把这些链接盒子转换为行内块， 行内块元素中间有缝隙，并且给父级添加 text-align: center; 行内块元素会水平会居中。
示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内块的巧妙运用</title>
<style>
* {
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>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
15. 滑动门
-
背景
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，怎么解决呢？
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
-
应用：
滑动门最常见于各种导航栏，例如微信导航栏：http://weixin.qq.com/
-
核心
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度，以便能适应不同字数的导航栏。padding 撑开的部分是显示会背景的。
-
一般的经典布局都是这样的：
<li> <a href="#"> <span>导航栏内容</span> </a> </li>css样式：
/*1. a 是 设置 左侧 背景 （左门）*/ a { /*因为我们是滑动门，左右推拉 跟文字内容多少有关系，此时需要用文字撑开盒子， 就要用到行内块*/ display: inline-block; height: 33px; background: url(images/to.png) no-repeat; margin: 100px; padding-left: 15px; color: #fff; } /*2. span 是设置 右侧 背景 （右门）*/ a span { display: inline-block; height: 33px; /*一定注意 span 需要背景图片 右对齐*/ background: url(images/to.png) no-repeat right top; padding-right: 15px; } -
完整示例：
<head> <meta charset="UTF-8"> <title>微信导航栏案例</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } body { background: url(images/wx.jpg) repeat-x; } .nav { margin-top: 20px; } .nav li { float: left; margin: 0 5px; } .nav a { display: inline-block; height: 33px; background: url(images/to.png) no-repeat; padding-left: 15px; color: #fff; line-height: 33px; font-size: 14px; } .nav a span { display: inline-block; height: 33px; background: url(images/to.png) no-repeat right; padding-right: 15px; } /*鼠标经过了a 链接首先换背景图片 然后 链接里面的span 也要换*/ /* 注意，此处继承了 no-repeat 和 right 属性值*/ .nav a:hover, .nav a:hover span { background-image: url(images/ao.png); } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#"> <span>首页</span> </a> </li> <li> <a href="#"> <span>帮助与反馈</span> </a> </li> <li> <a href="#"> <span>公众平台</span> </a> </li> <li> <a href="#"> <span>开放平台</span> </a> </li> <li> <a href="#"> <span>联系我</span> </a> </li> </ul> </div> </body>
总结：
-
a 设置背景左侧，padding 撑开合适宽度。
-
span 设置背景右侧， padding 撑开合适宽度，剩下由文字继续撑开宽度。
-
之所以 a 包含 span 就是因为整个导航都是可以点击的。
16. 渐变背景
<!DOCTYPE html>
<html lang="en">
<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>
.mask {
width: 200px;
height: 200px;
background-image: linear-gradient(transparent, rgba(0, 0, 0, .3));
}
</style>
</head>
<body>
<div class="mask"></div>
</body>
</html>
16. 透明度 (opacity)
Opacity 属性设置一个元素了透明度级别。
-
语法
opacity: value | inherit -
说明
-
value：指定不透明度。从0.0（完全透明）到1.0（完全不透明）
-
inherit：Opacity属性的值应该从父元素继承
-
17. Unicode 编码字体
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
-
黑体 \9ED1\4F53
-
宋体 \5B8B\4F53
-
微软雅黑 \5FAE\8F6F\96C5\9ED1
示例
font-family: 'Microsoft YaHei' \5B8B\4F53;
18. 《beats耳机》按钮效果实现
当鼠标经过按钮的时候，有一个灰色的背景的背景升上来。
-
代码
<body> <div class="button"> <ul> <li> <a href="#"> <span class="button-inner">探索</span> </a> </li> </ul> </div> </body> <style> .button ul li { float: left; position: relative; /* 所有的li中的元素超出部分都会被隐藏，并且是以圆角边框为界限 */ overflow: hidden; border-radius: 48px; /* 使用阴影而不用边框的原因是防止遮罩层上来之后边框内一圈会有缝隙 */ box-shadow: 0 0 0 2px #d6d6d6 inset; } .button a { display: block; text-decoration: none; font-size: 20px; color: #000; } .button .button-inner { display: block; position: relative; /* 提高定位层级，否则里面的内容会被遮罩层盖住 */ z-index: 1; /* 使用内边距撑开盒子 */ padding: 20px 50px; } .button li::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #d6d6d6; transition: all .3s; /* 把遮罩层移动到父盒子下面，鼠标经过父盒子时再升上来 */ transform: translate(0, 125px); } .button li:hover::after { transform: none; } </style> -
知识点
-
父盒子 li 不能有宽高，宽高只能由内容或者内边距撑开。这样在设置了 border-radius 和 overflow 时，子元素或者内容才会被圆角边框裁剪，否则会被原来的的矩形边框裁剪。这样的话圆角边框的外围和原来的矩形框之间会有元素溢出。
-
把 box-shadow 当边框用，设置阴影为内部阴影 inset，防止遮罩层上来之后有空白缝隙。
-
19. 使用一个标签实现太极图案
只使用一个标签，实现太极图案，并且鼠标放在上面时，图案旋转360度。
-
代码
<body> <div></div> </body> <style> * { margin: 0; padding: 0; } body { background-color: #ccc; } div { width: 100px; height: 200px; margin: 50px auto; border-left: 100px solid #000; border-radius: 50%; background-color: #fff; transition: all .5s; } div:hover { transform: rotate(360deg); } div::before, div::after { content: ""; display: block; width: 30px; height: 30px; margin-left: -50px; border-radius: 50%; } div::before { border: 35px solid #fff; background-color: #000; } div::after { border: 35px solid #000; background-color: #fff; } </style> -
知识点
- border 和 border-radius 的特殊用法
- 通过给标签本身和 border 不同的颜色，可以让一个盒子看起来是由多个盒子堆叠而成
20. 双飞翼布局
-
左右中布局占满屏幕，其中左、右盒子固定宽度200px，中间自适应宽度
-
要求先加载中间盒子
-
代码
<!DOCTYPE html> <html lang="en"> <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> /* 注意：container 不能设置宽度，否则不会有自适应效果 */ .container { height: 200px; } .container div{ float: left; } .left { margin-left: -100%; width: 200px; height: 100%; background-color: red; } .center { width: 100%; height: 100%; background-color: green; } .center .main { padding: 0 200px; } .right { margin-left: -200px; width: 200px; height: 100%; background-color: blue; } </style> </head> <body> <div class="container"> <div class="center"> <div class="main"> 中 </div> </div> <div class="left">左</div> <div class="right">右</div> </div> </body> </html>
二、 PS 基本操作以及常用快捷键
因为网页美工大部分效果图都是利用ps 来做的，所以我们大部分切图工作都是在ps里面完成。
-
文件–>打开：可以打开 我们要测量的图片
-
ctrl+r：可以打开标尺，右击标尺，把里面的单位改为 像素
-
视图 – 标尺：可以打开标尺，右击标尺，把里面的单位改为 像素
-
ctrl+ 加号：可以放大视图
-
ctrl+ 减号：缩小视图
-
按住空格键：鼠标可以变成小手，拖动 ps 视图
-
用选区工具：可以测量大小
-
ctrl+ d：可以取消选区，或者旁边空白处点击一下也可以取消选区
1. PS切图
PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。
-
图层切图
最简单的切图方式：右击图层 -> 导出 PNG 切片。
2. 切片切图
1. 利用切片选中图片
利用切片工具手动划出
2. 导出选中的图片
文件菜单 -> 存储为 web 设备所用格式 -> 选择我们要的图片格式 -> 存储 。
3. PS 插件切图
Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工"导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
[官网：http://www.cutterman.cn/zh/cutterman](http://www.cutterman.cn/zh/cutterman)
三、PxCook - 轻便免费的切图设计工具
PxCook（像素大厨）是一款切图设计工具软件。自2.0.0版本开始，支持PSD文件的文字，颜色，距离自动智能识别。
优点在于将标注、切图这两项设计完稿后集成在一个软件内完成，支持Windows和Mac双平台。
标注功能包括：支持长度，颜色，区域，文字注释。
最重要的是不仅功能强大，而且完全免费。
四、移动适配
五、小技巧
-
去掉 li 前面的项目符号(小圆点)
list-style: none; -
在导航栏中，我们不会直接用链接 a 而是用 li 包含链接（li+a）的做法。
1） li+a 语义更清晰，一看这就是有条理的列表型内容。
2） 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字有被搜索引擎降权的风险），从而影响网站排名。
-
使用固定定位时，如果盒子中没有内容，需要指定宽度
-
最好不要同时使用 left 和 right 边偏移属性
-
文本域 textarea 标签的开始标签和结束标签使用时放在一行，不然在浏览器中点击文本域时会有空行
-
letter-spacing属性可以用于设置字符间距，属性值可以是小数，单数是像素 px。对于这个属性来说：每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”！。 -
word-spacing属性增加或减少单词间的空白。在这个属性中，“字” 定义为由空白符包围的一个字符串。也就是说该属性是以空格为基准进行调节间距的，如果多个字母被连在一起，则会被 word-spacing 视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing 属性此时有效。 -
如果子盒子在父盒子中水平垂直居中，这时增加子盒子的宽或高，是从子盒子中心向四周增加的
-
li 元素默认有1 像素的边框。如果盒子模型使用 border-box，同时使用 li:hover {border: 1px solid #ccc}，这时鼠标放在 li 元素上时元素会抖动。这是因为border-box 盒子加边框不会撑大盒子，里面的元素会相应缩小，所以就会出现抖动。
解决方法：
li { /* 先给li一个边框，并使用透明色 */ border: 1px solid transparent; } li:hover { border: 1px solid #ccc; } -
标准布局时，多个行内元素或者行内块元素之间会有空格。这是因为这些元素标签定义时换了行，浏览器就会解析一个空格回来。把这些定义代码放在一行书写就不会有这个问题，但是一般不会这么做，而是利用浮动。
<!-- 这就是行内元素或行内块元素之间多一个空格的原因 --> <span></span> <span></span>