CSS 10-01 显示隐藏界面样式垂直对齐精灵技术滑动门笔记

最新推荐文章于 2022-05-10 17:39:05 发布

不停喝水

最新推荐文章于 2022-05-10 17:39:05 发布

阅读量289

点赞数 1

分类专栏： # 【CSS】 # 【HTML5】文章标签： html css html5 css3

本文链接：https://blog.csdn.net/weixin_48200589/article/details/106845499

版权

【HTML5】同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

【CSS】

25 篇文章 0 订阅

订阅专栏

1.元素显示与隐藏

案例:土豆网播放页面
鼠标经过的box的时候让上面的mask显示出来

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: relative;
        width: 448px;
        height: 252px;
        margin: 0 auto;
      }
      .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center
          center;
      }
      /* 这里是经过box,让里面的mask显示出来 */
      .box:hover .mask {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <a href="#"
        ><img src="images/tudou.jpg" alt="" />
        <div class="mask"></div
      ></a>
    </div>
  </body>
</html>

1.1display显示(重点)

使用较多

display:none 隐藏 ,不保留位置
display:block 显示/转换成块级元素

1.2 visibility可见性(了解)

使用较少

visibility:hidden 隐藏元素,保留位置(停职留薪)
visibility:visible 显示元素

1.3overflow溢出(重点)

1.清除浮动
2.保证盒子的内容不会超出该盒子范围
overflow:visible 默认不剪切内容也不添加滚动条
overflow:hidden 不显示超出对象尺寸的内容,超出部分隐藏掉
overflow:scroll 不管超出内容否,总是显示滚动条
overflow:auto 超出自动显示滚动条,不超出不显示滚动条

2.1 鼠标样式cursor

属性值	描述
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>

禁止: 只是一个鼠标样式并不是不能点了不能点要通过js来实现

2.2轮廓线

一般是去掉的,取消轮廓线比如输入框点击后的边框,会导致大小不一样

outline:none;或者0;

直接初始化

input {
outline:none
}

2.3 防止拖拽文本域resize

resize: none;

<textarea  style="resize: none;"></textarea>

注意:textarea最好是写在一行上,不然里面会有空行*

2.4 用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none

3. vertical-align 垂直对齐

有宽度的块级元素居中对齐，是margin: 0 auto;
让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性。

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

注意：

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

3.2 去除图片底侧空白缝隙

原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

就是图片底侧会有一个空白缝隙。
解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。让图片不要和基线对齐。
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。

4. 溢出的文字省略号显示

4.1 white-space

white-space:normal ；默认处理方式

white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

4.2 text-overflow 文字溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

注意：

一定要首先强制一行内显示，再次和overflow属性搭配使用

4.3 总结三步曲

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

5. CSS精灵技术（sprite) 重点

5.1 为什么需要精灵技术

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

5.3 精灵技术使用的核心总结

精确测量，每个小背景图片的大小和位置。
给盒子指定小背景图片时，背景定位基本都是负值。
先给测量宽高,然后bg url x y 负值就可以了

如果简写,一定要注意权重的问题!!!不然图片加载不出来或者定位不准!!!

5.4字体图标**

一.unicode方法
1.使用:把下载的fonts文件放到页面根目录下
2.css样式中style引入声明创建字体直接复制一大坨
修改路径
3.往html中放进去demo.html中的小图标
复制到<span>tubiao</span>
4.给

span {
font-family:iconfont;
font-size:100px;
color:pink;
}

二.第二种本地方法
1.link 引入iconfont.css 一定要加http:
2.复制下面的内容到html 并且修改icon-xx
3.修改字体样式:在style里面

.icon-xx {
font-size
color
}

三.服务器方法!!!
1.我的项目 2.新建 3.添加至项目 4.复制链接到style里面 5.然后在html里面给span任意盒子复制字体下面的6.在style里面写span { font-family:“iconfont”}

6. 滑动门

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

css样式

* {
      padding:0;
      margin:0;

    }
    body{
      background: url(images/wx.jpg) repeat-x;
    }
    .father {
      padding-top:20px;
    }
    li {
      padding-left: 16px;
      height: 33px;
      float: left;
      line-height: 33px;
      margin:0  10px;
      background: url(./images/to.png) no-repeat left ;
    }
    a {
      padding-right: 16px;
      height: 33px;
      display: inline-block;
      color:#fff;
      background: url(./images/to.png) no-repeat right ;
      text-decoration: none;
    }
    li:hover,
     li:hover a {
      background-image:url(./images/ao.png);
    }

总结：

a 设置背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。
之所以a包含span就是因为整个导航都是可以点击的。

7.1 margin负值之美

1). 负边距+定位：水平垂直居中

咱们前面讲过，一个绝对定位的盒子，利用父级盒子的 50%，然后往左(上) 走自己宽度的一半，可以实现盒子水平垂直居中。

2). 压住盒子相邻边框

给父盒子一个相对定位
margin:-1px
给子盒子 z-index:1 提高等级
这个时候大盒子会向左边出去一像素,就大盒子一个margin-left:1px;

加边框:hover
如果li没有定位添加相对定位就可以了
li 有定位就提高层级z-index

7.2 CSS三角形之美

 div {

 	width: 0; 

    height: 0;
    line-height:0；
    font-size: 0;
	border-width:10px;
	border-style:solid;
	border-color:transparent transparent transparent pink;

div {
	width:0;
	height:0;
	border:10px solid transpant;
	border-left-color:red;
 }

必须是块级元素

我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

不停喝水

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 10-01 显示隐藏界面样式垂直对齐精灵技术滑动门笔记

1.元素显示与隐藏1.1display显示(重点)使用较多display:none 隐藏 ,不保留位置display:block 显示/转换成块级元素1.2 visibility可见性(了解)使用较少visibility:hidden 隐藏元素,保留位置(停职留薪)visibility:visible 显示元素1.3overflow溢出(重点)1.清除浮动2.保证盒子的内容不会超出该盒子范围overflow:visible 默认不剪切内容也不添加滚动条overflow:hidde
复制链接

扫一扫