CSS第二篇
给导航设置圆角的代码：
c3 里面的属性：border-radius：7px；
1补充盒子问题
（盒子边框紧邻变粗问题）将两个盒子边框重叠并且设置定位提高层级避免盒子重叠，鼠标放上去只显示一个盒子的边框。
<style type="text/css">
div{
width:200px;
heigh:200px:
border:1px solid red; margin-left=-1px;
} div:hover{
border-color:blue;
position:relative
}
</style> <body>
<div class="one"></div>
<div class="two"></div></body>
（盒子大小计算问题）在边框显示上做减法，不让边框显示超出图片大小 box-sizing：content-box（盒子默认计算方式）
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:pink;}
.box:hover{
border:5px solid green;
/*改变盒子计算方式*/
box-sizing:border-box;
}</style
2补充图片垂直居中问题，两种方式
<style type-"text/css">
.box{
width:300px;
height:300px:
border:1px solid red;
text-align:center;
line-herght:300px;(行高)} ing{vertical-align:middle;(借助div里的文字使得图片居中)} </style></head> <body>
<div class="box">
123<ing src="2.png"></div>
</body>
第一种方式
<style type-"text/css">
.box{
width:300px;
height:300px:
border:1px solid red;
text-align:center;
}
span{
height:100%;
display:inline-block;}(所以基线对齐) img{
vertical-align:middle;}
</style></head> <body>
<div class="box">
<img src="2.png">
<span></span></div>
</body>
第二种方式
同时还可以设置第三种方式
把span去掉在CSS里替换成
div:after{
content:"";
height:100%;
dispaly:inline-block;
vertical-align:middle;}
}
推荐方式 按照表格方式
img{
vertical-align:middle;}
推荐方式
.table{
width;300px;
height:300px:
border:1px solid red; display:table;} .td{display:table-cell;
text-align:center;
vertical-align:middle;}
<body>
<div class="table">
<div class="td">
<img src-"2.png">
</div></div>
</body>
CSS第二篇的更多相关文章
- css第二篇：样式的特殊性、重要性、继承和层叠
特殊性: 假设有几个不同的规则改变的都是同一个元素的值,那么哪一个规则将会胜出呢?这就得靠特殊值啦,什么是特殊值呢?特殊值的大小呢?如下图: 值越大代表越牛,如1,0,0,0永远大于0,X,X,X ...
- html+css第二篇
<img src="图片地址" alt="图片名"/> 图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用: a标签: 链接/下载/锚点 ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- [转]Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...
- 第二篇.Bootstrap起步
第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...
- Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇——开发工具库篇,**主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容 ...
- “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）
“MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...
- webIDE 第二篇博文
这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
随机推荐
- 前端JS基础知识
1. 原型 / 构造函数 / 实例 原型(prototype): 一个简单的对象,用于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个JavaScript ...
- 点云格式-pcd
每一个pcd文件包含一个文件头,它声明文件中存储的点云数据的特性(元数据).pcd文件头必须用ASCII码来编码.头文件属性字段都以一个新行(\n)分开.从0.7版本开始,pcd文件头包含下面的字段: ...
- [LeetCode] 26. Remove Duplicates from Sorted Array ☆(从有序数组中删除重复项)
[LeetCode] Remove Duplicates from Sorted Array 有序数组中去除重复项 描述 Given a sorted array nums, remove the d ...
- 微信小程序实战练习（仿五洲到家微信版）
github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径 ...
- 使用idea搭建maven项目，结果spring-mybatis.xml文件报红“Cannot resolve file 'jdbc.properties' less... (Ctrl+F1) Inspection info:Spring XML model validation”
错误如下图: 解决方案: 暂时只是使用右下角的highlightinglevel来屏蔽,拖动到最左边就行了
- webform的代码设计文件莫名出错的解决
不知道怎么回事,建立webform工程时,编译,出错,提示代码设计文件(自动生成的文件代码,不能修改)出错,提示有的对象正在使用,于是删除里面多余的对象标记,还是没用,又自动生成了. 解决办法: 1. ...
- easyui 面板title 加东西
- Tensorflow安装指南
1.关闭所有安全工具!!!!!(非常重要!否则很可能安装失败) 2.下载CUDA 地址https://developer.nvidia.com/accelerated-computing-toolki ...
- 关于：无法创建链接服务器 "ORCL" 的 OLE DB 访问接口 "OraOLEDB.Oracle" 的实例 （错误：7302）
本人接触和使用Oracle数据库才有一个季度的时间,问题比较白,大神请无视本文. 环境: 1.数据服务器,windows2008R2,Oracle11g 2.报表服务器,windows2008R2,S ...
- 关于SQLSERVER数据库连接池
页内导航 1.如何开启连接池? 2. 那连接池是和有什么有关呢? 3.如何使用相同的连接池访问不同的数据库? ‘关于数据库连接池大家都听说过或者用过,但真正的了解有多少呢? 数据连接池如何启用?有哪些 ...