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

随机推荐

Oracle中的SQL分页查询原理和方法详解
Oracle中的SQL分页查询原理和方法详解分析得不错! http://blog.csdn.net/anxpp/article/details/51534006
android实战开发02
正如我之前提到的,我想的是网页来进行测试发布是有较大难度的,但是我高兴的看到我的好友limary已经熬出头了,之后我会关注他的进度的,感谢他给我的鼓励和启发.现在我要讲讲我的天才运算器V2.0版. 在 ...
Jsp----注册登陆
一.需求分析目前99%的网站都会有用户的登陆注册界面(用户就是一切嘛).其需求可想而知. 二.设计过程及所查寻资料通过寻找上课老师所给予的课件,搜寻相关内容:目前以获取相关有java web关于w ...
Date 类的使用
package com.Date.Math; import java.text.ParseException; import java.text.SimpleDateFormat; import ja ...
POJ 1239 Increasing Sequences 动态规划
题目链接: http://poj.org/problem?id=1239 Increasing Sequences Time Limit: 1000MSMemory Limit: 10000K 问题描 ...
java equals()方法的注意事项
1.在写代码的时候,我们有时候需要判断两个相同类的对象的值是否全部相等,很多人想到的就是equals()方法,但是equals方法真的是可以比较吗?其实equals方法比较的并不是两个对象的值,它只是 ...
Results the mutual for the first time（alpha阶段总结）
由于前天听大家的成果展时,做得笔记不够完善,有一两个组找不到信息,如果没有评到的组望谅解. 分数分配: 由于组内某些原因,我们现重新分组: 试用版: 总结前阶段的工作: 在前一段时间,我们第一个spr ...
软件工程实践2018第六次作业——现场UML作图
团队信息学号姓名博客链接 124 王彬(组长) 点击这里 206 赵畅点击这里 215 胡展瑞点击这里 320 李恒达点击这里 131 佘岳昕点击这里 431 王源点击这里 206 陈 ...
简单的树（summary）
实验任务可怜的 Bibi 丢了好几台手机以后,看谁都像是小偷,他已经在小本本上记下了他认为的各个地点的小偷数量. 现在我们将Bibi的家附近的地形抽象成一棵有根树.每个地点都是树上的一个节点,节点 ...
HDU 1027 打印沙漏
https://pintia.cn/problem-sets/994805260223102976/problems/994805294251491328 本题要求你写个程序把给定的符号打印成沙漏的形 ...

CSS--overflow和hover

一、Overflow

二、Hover

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

随机推荐

热门专题

二、Hover　　