一、Overflow

　　overflow 属性规定当内容溢出元素框时发生的事情。

　　当插入的一张图片大小超过了元素本身大小，就会将元素撑大　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>overflow</title>

</head>

<body>

    <div style="height: 200px;width: 300px">

        <img src="data:image/1.jpg">

    </div>

</body>

</html>

　　此时显示的是整张图片的大小　

　　

　　1.1 hidden 

　　隐藏超出部分　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>overflow</title>

</head>

<body>

    <div style="height: 200px;width: 300px; overflow: hidden">

        <img src="data:image/1.jpg">

    </div>

</body>

</html>

　　1.2 scroll

　　显示滚动条　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>overflow</title>

</head>

<body>

    <div style="height: 200px;width: 300px; overflow: scroll">

        <img src="data:image/1.jpg">

    </div>

</body>

</html>

　　

　　1.3 auto

　　自动判断，未超出没有滚动条，超出显示滚动条　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>overflow</title>

</head>

<body>

    <div style="height: 300px;width: 500px; overflow: auto">

        <img src="data:image/1.jpg">

    </div>

</body>

</html>

　　

　

二、Hover　　

　　当鼠标移动到当前标签上时，以下css属性才会生效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hover</title>

    <style>

        .pg_header{

            position: fixed;

            height: 48px;

            top: 0;

            left: 0;

            right: 0;

            background-color: #2459a2;

        }

        .pg_body{

            margin-top: 50px;

        }

        .w_header{

            width: 980px;

            margin: auto;

            line-height: 48px;

            //background-color: yellow;

        }

        .w{

            width: 100%;

            margin: auto;

            height: 5000px;

            background-color: #dddddd;

        }

        .w_header .logo{

            display: inline-block;

            width: 150px;

            background-color: orange;

            text-align: center;

        }

        .w_header .menu{

            display: inline-block;

            padding: 0 30px;

            color: white;

            font-size: 15px;

        }

        .w_header .menu:hover{

            color: red;

            background-color: royalblue;

        }

        .w_header .sign_in{

            display: inline-block;

            margin-left: 60px;

            font-size: 10px;

            color: white;

            padding: 0 15px;

        }

        .w_header .sign_in:hover{

            color: red;

        }

        .w_header .login{

            display: inline-block;

            font-size: 10px;

            color: white;

            padding: 0 10px;

        }

        .w_header .login:hover{

            color: red;

        }

        .w_header .search-txt{

            display: inline-block;

            width: 150px;

            text-align: center;

        }

        .w_header .txtSearch{

            height: 25px;

            width: 100px;

            line-height: 48px;

        }

        .w_body{

            width: 980px;

            margin: auto;

            height: 5000px;

            background-color: white;

        }

    </style>

</head>

<body style="margin: 0 auto">

    <div class="pg_header">

        <div class="w_header">

            <a class="logo">LOGO</a>

            <a class="menu">全部</a>

            <a class="menu">42区</a>

            <a class="menu">段子</a>

            <a class="menu">1024</a>

            <a class="sign_in">注册</a>

            <a class="login">登入</a>

            <div class="search-txt">

                <input class="txtSearch" type="text" name="words">

            </div>

        </div>

    </div>

    <div class="pg_body">

        <div class="w">

            <div class="w_body"></div>

        </div>

    </div>

</body>

</html>

　　

CSS--overflow和hover的更多相关文章

  1. 转：CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  2. 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素

    .col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

  3. CSS——overflow的参数以及使用

    学习网站:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

  4. 教你玩转CSS Overflow

    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...

  5. CSS 3D旋转 hover 后设置transform 是相对于正常位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 两种纯CSS方式实现hover图片pop-out弹出效果

    实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...

  7. CSS之创意hover效果

    一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...

  8. css:overflow属性妙用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jQuery .css color 重写 :hover样式没了

    $("#quickSqlDiv a").css({"color":"red"}); $("#course a").css ...

  10. CSS Overflow:hidden

    终于知道为什么要设置OverFlow:Hidden了, 看代码: <div id="wrapper"> <figure class="img-wrapp ...

随机推荐

  1. 第14讲：嵌入式SQL语言(基本技巧)

    一.交互式SQL的局限 & 嵌入式SQL的必要性 专业人员(如DBA)可以熟练地运用交互式SQL语言,但普通用户却不是那么容易上手,所以需要通过数据库应用程序来使用数据库.编写一个可以与数据库 ...

  2. DataRow对象的RowState和DataRowVersion属性特点

    DataRow对象有两个比较重要的属性,分别是行状态(RowState)和行版本(DataRowVersion),通过这两个属性能够有效的管理表中的行.下面简要的介绍一下行状态和行版本的特点和关系. ...

  3. 感谢Thunder团队

    不知不觉中,团队开发的beta版本都已经结束.开发的路上我们一起解决了很多难题,相互帮助走到了现在. 首先我想感谢组长王航.认真负责合理分配任务,使得我们每次发布都可以顺利并且按时完成.感谢胡佑蓉,李 ...

  4. 20172329 2018-2019《Java程序设计与数据结构》课程总结

    作者:lalalouye(20172329王文彬) 2018-2019年大二Java程序设计与数据结构课程总目录:第一周 第二周 第三周 第四周 第五周 第六周 第七周 第八周 第九周 实验一 实验二 ...

  5. 冲刺One之站立会议6 /2015-5-19

    2015-5-19 今天把服务器端的界面完善了一下,然后大家查了好多资料,实现了登陆界面实际连接的功能,开始加了一个它和服务器的的跳转,但是分析过后发现这是个没有必要的跳转.登录应该直接转到聊天室的主 ...

  6. Leetcode题库——15.三数之和

    @author: ZZQ @software: PyCharm @file: threeSum.py @time: 2018/10/6 19:47 说明:给定一个包含 n 个整数的数组 nums,判断 ...

  7. 用jar包运行带GUI的java游戏

    这是从某论坛下载的java游戏demo,由于年代久远,所以没有记下出处.重要的是,这是一个带GUI的java程序. 链接: https://pan.baidu.com/s/1LjQ2bQPXvW-ti ...

  8. 09_Java面向对象_第9天（类、封装）_讲义

    今日内容介绍 1.面向对象思想 2.类与对象的关系 3.局部变量和成员变量的关系 4.封装思想 5.private,this关键字 6.随机点名器 01面向对象和面向过程的思想 A: 面向过程与面向对 ...

  9. 词频统计的java实现方法——第一次改进

    需求概要 原需求 1.读取文件,文件内包可含英文字符,及常见标点,空格级换行符. 2.统计英文单词在本文件的出现次数 3.将统计结果排序 4.显示排序结果 新需求: 1.小文件输入. 为表明程序能跑 ...

  10. 2013成都网赛1010 hdu 4737 A Bit Fun

    题意:定义f(i, j) = ai|ai+1|ai+2| ... | aj (| 指或运算),求有多少对f(i,j)<m.1 <= n <= 100000, 1 <= m &l ...