给导航设置圆角的代码：

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第二篇的更多相关文章

  1. css第二篇：样式的特殊性、重要性、继承和层叠

    特殊性:   假设有几个不同的规则改变的都是同一个元素的值,那么哪一个规则将会胜出呢?这就得靠特殊值啦,什么是特殊值呢?特殊值的大小呢?如下图: 值越大代表越牛,如1,0,0,0永远大于0,X,X,X ...

  2. html+css第二篇

    <img src="图片地址" alt="图片名"/> 图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用: a标签: 链接/下载/锚点 ...

  3. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  4. [转]Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...

  5. 第二篇.Bootstrap起步

    第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...

  6. Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇——开发工具库篇,**主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容 ...

  7. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）

    “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...

  8. webIDE 第二篇博文

    这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的 ...

  9. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

随机推荐

  1. Envoy 源码分析－－network L4 filter manager

    目录 Envoy 源码分析--network L4 filter manager FilterManagerImpl addWriteFilter addReadFilter addFilter in ...

  2. W10激活

    1.首先,我们先查看一下Win10正式专业版系统的激活状态: 点击桌面左下角的“Windows”按钮,从打开的扩展面板中依次点击“设置”-“更新和安全”,并切换到“激活”选项卡,在此就可以查看到当前系 ...

  3. python中对文件和文件夹的操作

    一.说明 python中主要通过os模块和shutil模块两个模块对文件进行相关操作,移动.复制.删除.重命名.比较大的文件通过命令操作可以节省时间,提高效率. 二.实例对文件夹中文件的拷贝 from ...

  4. MySQL常用语法命令及函数

    #创建数据库# create database 数据库名; #查看数据库# show databases; #选择数据库# use 数据库名; #删除数据库# drop database 数据库名; ...

  5. hive的排序，分組练习

    hive的排序,分組练习 数据: 添加表和插入数据(数据在Linux本地中) create table if not exists tab1( IP string, SOURCE string, TY ...

  6. 从零开始学Python 三（网络爬虫）

    本章由网络爬虫的编写来学习python.首先写几行代码抓取百度首页,提提精神,代码如下: import urllib.request file=urllib.request.urlopen(" ...

  7. C语言按位运算符

    C语言按位运算符 二进制反码或按位取反:~ 一元运算符~是逐位将1变为0,0变为1 Eg:  ~(1001 1010) Result:(0110 0101) 按位与:& 二元运算符&是 ...

  8. 数据库 ACID

    ACID是指一个事务本质上有四个特点: Atomicity:原子性 Consistency:一致性 Isolation:隔离性 Durablilty:耐久性 原子性 原子性是指事务是一个不可分割的工作 ...

  9. JVM常用配置参数说明

    堆设置 -Xms256M:初始堆大小256M,默认为物理内存的1/64 -Xmx1024M:最大堆大小1024M,默认为物理内存的1/4,等于与-XX:MaxHeapSize=64M -Xmn64M: ...

  10. socket架构

    套接字基本概念 Socket是应用层与Tcp/ip协议族通信的中间软件抽象层,它是一组接口.在设计模式中,socket其实就是一个门面模式,它把复杂的tcp/ip协议族隐藏在socket接口后面,对用 ...