CSS--overflow和hover

一、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的更多相关文章

在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素
.col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!
CSS——overflow的参数以及使用
学习网站:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
教你玩转CSS Overflow
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...
CSS 3D旋转 hover 后设置transform 是相对于正常位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
两种纯CSS方式实现hover图片pop-out弹出效果
实现原理主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...
CSS之创意hover效果
一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...
css:overflow属性妙用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
jQuery .css color 重写 :hover样式没了
$("#quickSqlDiv a").css({"color":"red"}); $("#course a").css ...
CSS Overflow:hidden
终于知道为什么要设置OverFlow:Hidden了, 看代码: <div id="wrapper"> <figure class="img-wrapp ...

随机推荐

解决SecureCRT小键盘乱码
SecureCRT软件菜单,Options -> Session Options ->Terminal -> Emulation,右侧面板中"Terminal"选 ...
PHP使用Sublime Text3技巧
1 下载安装 2 安装Package Control 3 安装插件 4 快捷键 5 项目管理 6 设置代理 PHP开发时,笔者用过EditPlus3.Nodpad++.Vi.Vim和Netbeans, ...
Daily Scrum (2015/11/5)
这天晚上我们对爬虫进行了一些测试,发现仍然存在一些不小的BUG.现在我们的爬虫已经能完成基本的功能,焉域政同学也正在把他之前写的分类功能继续完善.在BUG的测试中,我们发现如果要求爬虫爬取特定的文件类 ...
第二阶段Sprint6
昨天:设置统一保存路径为内存卡,实现可以选择播放已有的视频今天:将“录制”及“保存”整合到一起,修复出现的Bug,使之能够正常运行. 遇到的问题:感觉调的摄像头录制的画面不好,这怎么办啊?
Task 6.3 冲刺Two之站立会议2
今天主要将聊天的主界面加以改善,添加了用户登陆后的提示,实现了好友的增删和查询以及自己的账号的个人信息,也可以使用户实现对自己的头像以及个性签名.个人信息等的管理.
HDU 4126 Genghis Khan the Conqueror 最小生成树+树形dp
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4126 Genghis Khan the Conqueror Time Limit: 10000/50 ...
牛客网国庆集训派对Day5 题目 2018年
链接:https://www.nowcoder.com/acm/contest/205/L来源:牛客网参考博客:https://blog.csdn.net/HTallperson/article/de ...
Hadoop HA 深度解析
社区hadoop2.2.0 release版本开始支持NameNode的HA,本文将详细描述NameNode HA内部的设计与实现. 为什么要Namenode HA? 1. NameNode High ...
MongoDB中的数据导出为excel CSV 文件
1.打开命令行,进入我们所安装的mongodb路径下的bin文件夹 2.我们采用bin文件夹下的mongoexport方法进行导出, mongoexport -d myDB -c user -f _i ...
mongodb授权认证介绍
mongodb存储所有的用户信息在admin 数据库的集合system.users中,保存用户名.密码和数据库信息.mongodb默认不启用授权认证,只要能连接到该服务器,就可连接到mongod.若要 ...

CSS--overflow和hover

一、Overflow

二、Hover

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

随机推荐

热门专题

二、Hover　　