前端基础-CSS-07

前端CSS基础系列
前端基础-CSS-01
前端基础-CSS-02
前端基础-CSS-03
前端基础-CSS-04
前端基础-CSS-05
前端基础-CSS-06
前端基础-CSS-07

文章目录

      • 9.1. 元素的显示与隐藏
          • 9.1.1. display 显示
          • 9.1.2. visibility 可见性
          • 9.1.3. overflow 溢出
      • 9.2. 鼠标样式
      • 9.3. 轮廓线
      • 9.4. 防止拖拽文本域
      • 9.5. 垂直对齐
      • 9.6. 溢出的文字省略号显示
      • 9.7. CSS精灵技术
      • 9.8. 滑动门技术
      • 9.9. margin负值之美
      • 9.10. CSS三角形之美

9.1. 元素的显示与隐藏

9.1.1. display 显示
  • 目的:让一个元素在页面中消失或者显示出来

  • 代码示例:

    
    
    <body>
        <div class="damao">div>
        <div class="ermao">div>
    body>
    
  • 示例效果:
    前端基础-CSS-07_第1张图片

9.1.2. visibility 可见性
  • 代码示例:

    
    
    <body>
        <div class="damao">div>
        <div class="ermao">div>
    body>
    
9.1.3. overflow 溢出
  • 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

  • 属性值

    属性值 描述
    visible 不剪切内容也不添加滚动条
    hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
    scroll 不管超出内容否,总是显示滚动条
    auto 超出自动显示滚动条,不超出不显示滚动条
  • 代码示例:

    
    
    <body>
        <div>
            清澈的河流
            壮观的瀑布
            珍稀的植物
            绝美的风景
            ....
            这一切就在
            清澈的河流
            壮观的瀑布
            珍稀的植物
            绝美的风景
            ....
            这一切就在
            清澈的河流
            壮观的瀑布
            珍稀的植物
            绝美的风景
            ....
        div>
    body>
    
  • 示例效果:

    前端基础-CSS-07_第2张图片前端基础-CSS-07_第3张图片
    前端基础-CSS-07_第4张图片前端基础-CSS-07_第5张图片

  • 总结

    属性 区别 用途
    display 隐藏对象,不保留位置 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
    visibility 隐藏对象,保留位置 使用较少
    overflow 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

9.2. 鼠标样式

  • 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>
    

9.3. 轮廓线

  • outline用于取消轮廓线

  • 语法:

    /* outline: none 取消轮廓线 */
    
    

9.4. 防止拖拽文本域

  • resize用于防止拖拽文本域

  • 代码示例:

    
    

9.5. 垂直对齐

  • vertical-align 垂直对齐(只对行内元素和行内块元素有效)

    vertical-align : baseline |top |middle |bottom 
    
  • 设置图片、文字和表单对齐

    
    
    <body>
        <div>
            <img src="images/logo.png" alt="" class="one"> nishousha 
        div>
        <div>
            <img src="images/logo.png" alt="" class="two"> nishousha 
        div>
        
        <div>
            <img src="images/logo.png" alt="" class="three"> nishousha 
        div>
    body>
    

    前端基础-CSS-07_第6张图片

  • 去除图片底侧空白缝隙

    • 原因:图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐,就是图片底侧会有一个空白缝隙

    • 解决办法:

      1. 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐
      2. 给img 添加 display:block; 转换为块级元素就不会存在问题了

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

  • white-space

    /* 默认处理方式 */
    white-space:normal;
    /* 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行 */
    white-space:nowrap;
    
  • text-overflow 文字溢出

    /* 不显示省略标记(...),而是简单的裁切 */ 
    text-overflow : clip;
    /* 当对象内文本溢出时显示省略标记(...) */
    text-overflow:ellipsis ; 
    
  • 代码示例:

    
    
    <body>
        <div>
            hi~laizixinxinxdeiguisvuigrdfhrf
        div>
    body>
    
  • 示例效果:
    请添加图片描述

9.7. CSS精灵技术

  • CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图
    前端基础-CSS-07_第7张图片

  • 总结:

    css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术

    1. 精确测量,每个小背景图片的大小和位置
    2. 给盒子指定小背景图片时,背景定位基本都是负值
  • 代码示例:

    <style>
        .icon1 {
            width: 23px;
            height: 23px;
            background: url(images/index.png) no-repeat 0 -107px;
            /* background-position: 0 -107px; */
        }
        .icon2 {
            width: 23px;
            height: 23px;
            background: url(images/index.png) no-repeat -157px -107px;;
    		}
    style>
    
    <body>
        <div class="icon1">div>
        <div class="icon2">div>
    body>
    
  • 示例效果:
    前端基础-CSS-07_第8张图片

  • 补充说明
    前端基础-CSS-07_第9张图片

9.8. 滑动门技术

  • 核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏

  • 经典布局

    <li>
      <a href="#">
        <span>导航栏内容span>
      a>
    li>
    
  • 滑动门实现的核心
    前端基础-CSS-07_第10张图片

  • 代码示例:微信导航栏

    DOCTYPE html>
    <html lang="en">
    <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 li 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 li a span {
    			display: inline-block;
    			height: 33px;
    			background: url(images/to.png) no-repeat right;
    			padding-right: 15px;
    		}
    		/*鼠标经过了a 链接首先换背景图片 然后 链接里面的span 也要换*/
    		.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>
    		ul>
    	div>
    body>
    html>
    
  • 示例效果:
    前端基础-CSS-07_第11张图片

9.9. margin负值之美

  • 代码示例:

    <style>
        div {
            /*浮动的盒子是紧贴在一起的*/
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
          	/* 设置负值让两个盒子的重叠部分不会压在一起 */
            margin-left: -1px;
            margin-top: -1px;
        }
    style>
    
  • 代码示例:突出显示

    /*鼠标经过div 的意思  p:hover */
    div:hover {
        /*我要让当前鼠标经过的这个div 升到最高处来就好了*/
        /*定位的盒子是最高层的  */
        border: 1px solid #f40;
        /*我们只要保证当前的这个盒子 是定位 就会压住 标准流和浮动盒子*/
        position: relative;
        /*我们只能用相对定位  它是占位置的*/
    }
    

9.10. CSS三角形之美

  • 代码示例:

    
    
  • 示例效果:
    前端基础-CSS-07_第12张图片

你可能感兴趣的:(前端基础,css,前端,css3)