随笔分类 - HTML/CSS

CSS精灵图Sprite，offset()方法获取偏移位置

摘要：一.CSS精灵图Sprite 精灵技术：就是一种处理网页背景图像的方式，它需要将一个页面中涉及到的所有或一部分较小的背景图像合并到一张较大的图片中，然后再将这个图片应用到网页中。通常情况下，我们只是将背景图像中那些较小的、零碎的图像集中到一个大的图像中，这个较大的图像被称为精灵图（也被称为雪碧图）阅读全文

posted @ 2021-11-09 21:17 白栀l 阅读(544) 评论(0) 推荐(0) 编辑

swiper轮播图

摘要：一.Swiper： swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。 swiper使用需要两个文件，一个是swiper.css，里面规定了一些在这个滑动轮播插件中常用的样式；另外一个是swiper.js这个是插件的主阅读全文

posted @ 2021-11-08 22:48 白栀l 阅读(344) 评论(0) 推荐(0) 编辑

Label标签，iframe内联框架

摘要：一.Label标签： 1.<label> 标签为 input 元素定义标注（标记）。 2.label标签中for属性是规定 label 与哪个表单元素绑定。（for属性值设置的是相关元素的id值） <input type="checkbox" name="check" id="check" /> < 阅读全文

posted @ 2021-11-01 22:11 白栀l 阅读(136) 评论(0) 推荐(0) 编辑

flex语法

摘要：一.Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 1.让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容 2.flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 3.flex包括六个属性 flex-direction：fle 阅读全文

posted @ 2021-10-29 22:24 白栀l 阅读(260) 评论(0) 推荐(0) 编辑

src和href；link和@import；line-height行高赋值方式；的区别

摘要：一.src和href的区别 1. src 用于替换当前元素2.href 用于在当前文档和引用资源之间确立联系3.src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置4.href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立阅读全文

posted @ 2021-10-28 21:31 白栀l 阅读(107) 评论(0) 推荐(0) 编辑

修改图片 text-decoration属性，vertical-align画像对齐

摘要：一.修改图片大小 1.先修改图片所在元素的父元素css样式 .content .star li{ background-color: #FFFFFF; width: 180px; margin: 0 3px;} 2.父元素修改完成才能修改图片所在元素的大小 .content .star img{wi 阅读全文

posted @ 2021-10-27 19:57 白栀l 阅读(246) 评论(0) 推荐(0) 编辑

ement语法

摘要：1.使用元素名称生成html标签： div 按下Tab键生成 <div></div> 2.定义class和id： div.header 按下Tab键生成 <div class="header"></div> 3.>嵌套： div>ul>li>a 按下Tab键生成 <div> <ul> <li> 阅读全文

posted @ 2021-10-26 18:28 白栀l 阅读(121) 评论(0) 推荐(0) 编辑

HTML/CSS 设计商业网站

摘要：一、属性font-size 字体大小text-align：center；内容居中display：inline-block；块级元素能够在同一行显示background-repeat：no-repeat不会重复background-position属性设置背景图像位置text-decoration 属阅读全文

posted @ 2021-10-25 21:58 白栀l 阅读(137) 评论(0) 推荐(0) 编辑