HTML+CSS
山山而川-T
这个作者很懒,什么都没留下…
展开
-
溢出的文字如何省略号显示
溢出的文字用省略号显示: <style> div { width: 150px; height: 25px; border: 1px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style></head><body> <div> 前不见古人后不见来者念天地之悠悠独怆然而涕下.原创 2020-07-28 22:05:52 · 131 阅读 · 0 评论 -
vertical-align(文字与图片、表单垂直对齐,清除图片底侧空白间隙)
1. vertical-align 垂直对齐vertical-align设置或检索对象内容垂直对齐的方式。垂直对齐:vertical-align:baseline | middle | top | bottom 选择器 { /* 默认的是基线对齐 */ vertical-align: baseline; /* 图片的中线 与 文字的中线对齐 垂直对齐 */ vertical-align: middle; /* 让图片的顶线 与 文字的顶线对齐 */ vertic原创 2020-07-27 22:12:42 · 360 阅读 · 0 评论 -
鼠标样式cursor、取消轮廓线、防止拖拽文本域
鼠标样式:设置或检索在对象上移动的鼠标指针采用何种系统定义的光标形状。属性含义default小白 默认pointer小手move移动text文本not-allowed禁止取消轮廓线:outline: none;防止拖拽文本域:resize: none;...原创 2020-07-27 20:21:27 · 359 阅读 · 0 评论 -
CSS电影海报特效(当鼠标移动到海报上时,海报颜色会变暗同时出现点击播放的按钮)
当鼠标移动到海报上时,海报颜色会变暗同时出现点击播放的按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { position: relative; width: 212px; height: 120px; margin: 100px a原创 2020-07-27 19:02:10 · 650 阅读 · 2 评论 -
CSS将元素隐藏/显示
1. display隐藏/显示display设置或检索对象是否显示及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素之外,同时还有显示元素的意思特点:隐藏之后,不再保留原来的位置2. visibility可见性visibility设置或检索是否显示对象 visibility: visible; 对象可视 visibility: hidden; 对象隐藏特点:隐藏之后,继续保留原有位置。3. overflo原创 2020-07-27 12:06:15 · 180 阅读 · 0 评论 -
改变display属性(CSS)
可以改变显示模式有以下方式:可以用inline-block转换为行内块可以用浮动float默认转换为行内块(并不完全一样,因为浮动的元素是脱离标准流的)绝对定位、固定定位也和浮动类似,默认转换为行内块。注意:所以一个行内盒子,如果加了浮动、绝对定位、固定定位,不用主动添加display属性去转换了,就可以给这个盒子直接设置宽高。并且,浮动、绝对定位、固定定位的元素都不会触发外边距合并的问题。...原创 2020-07-26 10:41:50 · 749 阅读 · 0 评论 -
堆叠顺序(z-index)
在使用定位布局时,可能出现盒子重叠的情况,如下图所示:通过定位盒子实现的,默认后来者居上,后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以调整盒子的堆砌顺序。z-index的语法如下: 1. 属性值: 正整数、负整数、0,数值越大,盒子越靠上; 2. 如果属性值相同,则按照书写顺序,后来者居上。 3. 属性值无单位。注意:z-index只能应用于相对定位、绝对定位、和固定定位的元素,其他标准流、浮动和静态定位无效。例如,原来的粉色盒子调到最上边来:代码如下:原创 2020-07-26 00:06:25 · 619 阅读 · 0 评论 -
绝对定位的盒子如何水平/垂直居中显示
绝对定位的盒子水平居中绝对定位/固定定位的盒子,是不能通过设置margin:auto;来实现水平居中的。在使用绝对定位时实现水平居中,可以使用如下图所示的方法:left:50%;:先让盒子左侧移动到父级元素的水平中心位置;margin-left:-100px;:再让盒子向左移动自身宽度的一半。绝对定位的盒子垂直居中top: 50%;:先让盒子上侧移动到父级元素的垂直中心位置margin-top: -50px;:再让盒子向上移动自身高度的一半...原创 2020-07-25 22:40:51 · 392 阅读 · 0 评论 -
清除浮动
1. 为什么要清除浮动因为父级盒子很多情况下是不方便给高度的,但是子盒子浮动就不占有位置,浮动的盒子就不会撑开父级盒子,最后父级盒子高度就为0,因此就会影响下面的标准流盒子。2. 清除浮动的本质清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后,父级会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面标准流的盒子了。3. 清除浮动的方法1) 额外标签法 是W3C推荐的做法,通过在浮动元素末尾添加一个空的标签。例如:<div style="clear: b原创 2020-07-25 00:04:53 · 155 阅读 · 0 评论 -
CSS 布局的三种机制
一. CSS布局的三种机制CSS提供了3中机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(标准流)◾ 块级元素独占一行,从上向下顺序排列(比如:div、p、h1~h6、ul、ol、from、table);◾ 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行(比如:如:span、a、i、em等)。浮动◾ 概念:元素的浮动是指设置了浮动属性的元素会浮起来,脱离标准流的控制,移动到指定位置。◾ 作用:可以让多个盒子水平排列成一行,使得浮动原创 2020-07-23 22:31:34 · 299 阅读 · 0 评论 -
圆角边框、盒子阴影
1. 圆角边框(CSS3)语法border-radius:length;/* 其中每一个值可以为数值,也可以是百分比*/要让一个正方形变成圆:border-raduis:50%;矩形圆角边框, 这个就不能用百分比了,因为百分比表示高度和宽度的一半。而矩形圆角边框只需设置高度的一半即可。上图矩形圆角边框代码如下: <style type="text/css"> input { width: 200px; height: 20px; border原创 2020-07-23 19:23:29 · 114 阅读 · 0 评论 -
新闻列表综合案列
要点:盒子box有宽度,padding值会撑开盒子,为保证盒子实际大小不变,宽就要改变宽高,即减去padding值去掉列表的默认样式:list-style: none;去掉a的默认下划线:text-decoration: none;一般情况下li 没有宽度 所有padding不会撑开盒子块级盒子水平居中:margin:0 auto;单行文本垂直居中:行高等于高;背景图片移动位置:background-position: 5px center;(水平:5px 垂直:居中);鼠标移动到 li.原创 2020-07-22 22:07:50 · 180 阅读 · 0 评论 -
块级盒子水平居中
让块级盒子居中必须:盒子必须指定了宽度(width)左右外边距设置为auto示例代码如下:.div { width:300px; margin: 0 auto;}插入图片和背景图片的区别:插入图片是我们用到的最多的,比如商品展示类,它移动的位置只能靠盒子模型的padding、margin值来改变。背景图片我们一般用于小图标或者大背景图片,它只能通过 background-position属性来改变。 <style type="text/css"> .pic{原创 2020-07-21 22:17:42 · 306 阅读 · 0 评论 -
盒子模型
1. 盒子模型标准的盒子模型:盒子模型有元素的内容、边框(border)、内边距(padding)以及外边距(margin)组成。盒子里面的文字和图片等元素是内容区域盒子的厚度称为盒子的边框盒子内容与边框的距离称为内边距盒子与盒子之间的距离称为外边距2. 盒子边框语法border: border-width || border-style || border-color属性作用border-width定义边框粗细,单位是pxborder-style原创 2020-07-20 21:33:26 · 191 阅读 · 0 评论 -
CSS三大特性(层叠性、继承性、优先级)
1. CSS层叠性概念所谓的层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候有一个属性就会将另一个属性层叠掉。原则样式冲突遵循的原则是就近原则。将执行离结构最近的样式。样式不冲突,就不会层叠。2. 继承性概念子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。即子承父业。注意:恰当地使用继承可以简化代码,降低CSS 样式的复杂性。子元素可以继承父原创 2020-07-19 21:39:25 · 380 阅读 · 0 评论 -
标签显示模式
1. 标签显示模式什么是标签显示模式? 标签以什么方式进行显示,比如div自己占一行,比如span一行可以放很多个。作用网页的标签非常多,在不同地方使用不同类型的标签,可以更好的完成我们的网页需求。标签的分类HTML标签一般分为块标签和行内标签两种类型,也称块元素和行内元素。2. 块级元素块级元素特点 (1)块级元素独占一行 (2)宽度、高度、边距都是可控的 (3)宽度默认是浏览器的100% (4)是一个容器及盒子,里面可以放行内或者块级元素注意 (1)只要文字才原创 2020-07-18 15:44:16 · 364 阅读 · 0 评论 -
复合器选择器
后代选择器 <style type="text/css"> .nav a { color:red; } </style></head><body> <div class="nav"> <a href="#">我是链接</a> <a href="#">我是链接</a> <a href="#">我是链接</a> </div>原创 2020-07-17 21:29:11 · 164 阅读 · 1 评论 -
了解CSS精灵技术
1. 什么是CSS精灵技术CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然后通过定位到不同位置而得到我们需要的某个小图.使用CSS精灵,需要使用CSS的:background-imagebackground-repeatbackground-position属性进行背景定位,其中最关键的是使用background-position 属性精确地定位。2. 为什么需要精灵技术图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要原创 2020-05-14 22:26:34 · 553 阅读 · 0 评论 -
实践练习03——制作nav部分(快捷导航)
制作快捷导航部分,这部分呢主要就是左右两部分,一个左边的全部商品分类区域,一个右边热门分类区域首先我们看见在在nav的底线处是有一条红线作为分割线下的,这里我们就直接给nav的底部边框一个颜色和高度就可以了。.nav { height: 45px; border-bottom: 2px solid #b1191a;}将左边的盒子简称为1号盒子,右边的就叫2号盒子吧。nav部分整体时左右结构的,首先先给出HTML骨架:<!-- nav start --> <div cla原创 2020-05-08 21:43:20 · 591 阅读 · 0 评论 -
实践练习02——制作header部分(图标、搜索框、热词、购物车)
header部分包含了图标、搜索框、热词、购物车等。如上图所示,如此便可给出HTML的框架如下:<!-- header制作 --> <div class="header w"> <!-- logo --> <div class="logo"> </div> <!-- search --> <d...原创 2020-05-06 21:19:20 · 900 阅读 · 0 评论 -
实践练习01——制作顶部快捷导航
模仿京东商城网页实现顶部快捷导航原创 2020-05-06 19:15:32 · 418 阅读 · 1 评论 -
字体图标的使用
字体图标图片是有诸多优点的,但是缺点也很明显,比如图片不但增加了总文件的大小,也增加了很多额外的"http请求",这些都会大大降低网页的性能的。更重要的是图片不能很好的进行”缩放“,因为图片的放大和缩小会存在失真的问题。在移动端响应式开发下,很多情况下我们是希望图标可以缩放的,所以此时,一个重要的技术便被我get到了,它就是字体图标(iconfont)。1. 字体图标的优点(1) 可以做和...原创 2020-04-27 22:17:56 · 309 阅读 · 0 评论