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 Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- 在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 ...
随机推荐
- Grunt 5分钟上手：合并+压缩前端代码
Grunt 的各种优点这里就不扯了,对于 新手来说 合并(concat) + 压缩(uglify) 前端代码的需求量应该是最大的,这里以这俩种功能为主做一个5分钟的入门吧! 工作环境 $ node - ...
- asp.net登录验证FormsAuthenticationTicket和FormsAuthentication类
登录部分使用的类 FormsAuthentication 为 Web 应用程序管理 Forms 身份验证服务. 配置启用身份验证,WEB.config配置: <system.web> ...
- 团队GIT实战总结
项目要求 组长博客 遇到的困难及解决办法 组员1(组长):王彬 遇到的困难 在团队任务分工的时候没有充分照顾到所有人,导致队员们的工作量不均. 现场编程时间不够 解决办法 在此对组员们表示抱歉,由于 ...
- jquery前端第一讲
1.bootstrap里面的文件是什么意思: bootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.mi ...
- 深入理解JAVA集合系列二：ConcurrentHashMap源码解读
HashMap和Hashtable的区别 在正式开始这篇文章的主题之前,我们先来比较下HashMap和Hashtable之间的差异点: 1.Hashtable是线程安全的,它对外提供的所有方法都是都使 ...
- [2017BUAA软工]第3次个人作业
软工第3次个人作业--案例分析 一. 调研,评测 1.软件的bug(至少两个,不少于40字) 测试软件: 必应词典移动端 测试平台:iPhone 6 bug1 对于翻译功能中的图片翻译功能,必应词典是 ...
- [转]string和stringstream用法总结
转自:http://blog.csdn.net/xw20084898/article/details/21939811 作者:xw20084898 一.string string 是 C++ 提供的字 ...
- 面试问题总结二（技术能力-PHP）----Ⅰ
1.你都做过什么项目? 答:第一份实习工作接触的项目是CRM 销售管理系统,一款用JSP语言开发的进销存管理系统.第一份正式工作是一款主打高质量图片社交社区网站项目,“美啦周末”(后改型为”聊会儿”) ...
- 内网内使用https 和 使用http 建立连接的速度对比
文字版 使用https httpstat https://10.24.101.14/cwbase/web/Login.aspx --insecure Connected to HTTP/ OK Ser ...
- 清华集训2015-Day 2
校内测试做到了,于是就把解题报告发出来. 简单回路 一个 \(n\times m\) 的方格纸,有 \(k\) 个障碍点.\(q\) 次询问,每次询问 \((x,y)\) ,问有多少条简单回路经过 \ ...