Jyue

2019年3月10日

摘要：雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。步骤： 1、使用Photoshop新建一张背景透明的图片 2、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小阅读全文

posted @ 2019-03-10 02:21 Jyue 阅读(729) 评论(0) 推荐(0)

photoshop批量切图技巧

摘要：切图，就是从效果图中把网页制作需要的小图片裁剪出来。 1、使用psd格式并且带有图层的图像切图 2、在图像上用切片工具切出需要的小图 3、双击切片，给切片命名 4、将需要制作透明背景图像的切片的背景隐藏 5、执行菜单命令存储为web所用格式 6、点选切片，设置切片的图片格式 7、存储切片，选择“所阅读全文

posted @ 2019-03-10 02:20 Jyue 阅读(2186) 评论(0) 推荐(0)

2019年3月9日

定位

摘要：文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。关于定位我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 阅读全文

posted @ 2019-03-09 18:29 Jyue 阅读(185) 评论(0) 推荐(0)

background属性

摘要：属性解释 background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项： background-color 设置背景颜色 background-image 设置背景图片地址 backgrou 阅读全文

posted @ 2019-03-09 18:29 Jyue 阅读(266) 评论(0) 推荐(0)

块元素、内联元素、内联块元素

摘要：元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。块元素块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽阅读全文

posted @ 2019-03-09 18:28 Jyue 阅读(152) 评论(0) 推荐(0)

浮动

摘要：浮动特性 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮阅读全文

posted @ 2019-03-09 18:28 Jyue 阅读(207) 评论(0) 推荐(0)

css元素溢出

摘要：当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。 overflow的设置项： 1、visible 默认值。内容不会被修剪，会呈现在元素框之外。2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margi 阅读全文

posted @ 2019-03-09 18:25 Jyue 阅读(1313) 评论(0) 推荐(0)

盒模型使用技巧及相关问题

摘要： margin相关技巧 1、设置元素水平居中： margin:x auto;2、margin负值让元素位移及边框合并理解练习 1、制作一个600*100的盒子，边框1像素黑色，距离浏览器顶部100px，水平居中。2、制作下面的菜单效果：外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形阅读全文

posted @ 2019-03-09 18:24 Jyue 阅读(151) 评论(0) 推荐(0)

盒模型的实际尺寸

摘要：按照下面代码制作页面：页面显示效果如下：通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：盒子宽度 = width + padding左右 + border左右盒子高度 = height + padding上下阅读全文

posted @ 2019-03-09 18:23 Jyue 阅读(806) 评论(0) 推荐(0)

CSS盒子模型

摘要：盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(p 阅读全文

posted @ 2019-03-09 18:01 Jyue 阅读(133) 评论(0) 推荐(0)

公告