inline-block3个额外像素宽度问题

先看下例子:

Title

.sp{
/*border: 1px solid lightcoral;*/
display: inline-block;
height: 25px;
width: 25px;
text-align: center;
line-height: 25px;
/*float: left;*/
}
.inp{
border: 0;
border-right: 1px solid red;
border-left: 1px solid red;
height: 25px;
/*float: left;*/

    }

</style>

/* Copyright 2014 Evernote Corporation. All rights reserved. */
.en-markup-crop-options {
top: 18px !important;
left: 50% !important;
margin-left: -100px !important;
width: 200px !important;
border: 2px rgba(255,255,255,.38) solid !important;
border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
margin-left: 0px !important;
}

+
-

,在html中可以看到有3个像素的便宜,可以使用float:left让这3个像素消失.

看下代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.sp{
display: inline-block;
height: 25px;
width: 25px;
text-align: center;
line-height: 25px;
/*需要在此使用float*/
float: left;
}
.inp{
border: 0;
border-right: 1px solid red;
border-left: 1px solid red;
height: 25px;
/*需要在此使用float*/
float: left; } </style>
</head>
<body>
<div style="border: 1px solid red;display: inline-block">
<div class="sp">+</div>
<input class="inp" type="text" />
<div class="sp">-</div>
</div>
</body>
</html>

改造标签

a标签添加图片时,为了防止图片打不开时,无文字提示,我们可以添加alt属性,提示用户,如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
border: 0;
}
</style>
</head>
<body>
<div>
<div class="item">
<a href="http://www.etiantian.org">
<img src="2.jp" alt="图片">
</a>
</div>
</div>
</body>
</html>

img标签边框

img标签在使用图片时,在chrome、firefox中无边框,但在IE中显示时会有边框,解决方式为将border设置为0:border:0

设置form表单中的默认值

直接看代码:

<!DOCTYPE html
<html lang="en"
<head>
<meta charset="UTF-8"
<title>上周补充</title>
</head>
<body>
<input value="123" />
<textarea>1234</textarea>
<select>
<option>上海</option>
<option selected="selected"北京</option>
<option>广州</option>
</select>
男:<input type="radio" name="gender"/>
女:<input type="radio" name="gender"/>
未知:<input type="radio" name="gender" checked="checked"/> <hr> 女1<input type="checkbox" name="favar"/>
女2<input type="checkbox" name="favar" checked="checked"/>
女3<input type="checkbox" name="favar"/>
女4<input type="checkbox" name="favar" checked="checked"/> </body>
</html>

简单总结下:

  • input:value设置
  • textarea:直接嵌入默认内容即可
  • select: selected="selected"
  • raido/checkbox: checked="checked"

CSS最牛存在形式:!important

CSS一般有以下三种存在形式:

  • 标签中使用
  • head中的<style> 标签
  • 外部css文件形式

这里要补充一个最牛,也是优先级最高的形式:!import.看下面的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none !important;
}
.c1{
color: red !important;
}
.c2{
color: green;
}
</style>
</head>
<body> <div class="c1 c2">asdfasdfasdfasdf</div>
</body>
</html>

显示页面时,页面显示为红色,并不是绿色,如果class="c1 c2 c3"时,优先c3中的样式设置.

CSS选择器之属性选择器

再补充一个css的选择器,属性选择器,关键字为:中括号,在定义class的时候名称后面增加中括号,比如:

.c1[alex='a']{
background-color:red !important;
}

看下例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1[alex='a']{
color: red;
}
</style>
</head>
<body>
<div>
<div class="c1" alex="a">1</div>
<div class="c1" alex="b">2</div>
<div class="c1">3</div>
<div class="c1" alex="a">4</div>
</div>
</body>
</html>

设置width百分比需要注意的地方

如果设置width为百分比形式的话,外部一层div需要定义一个整体的width像素,否则:窗口缩小时,会没有x轴的滚动条

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="pg-body" style="width: 980px;margin: 0 auto;">
<div style="width: 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div>
<div style="width: 80%;float: left;background-color: #2459a2">
sdfsdfasdfasdfsdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdf
</div>
</div>
</body>
</html>

CSS碎碎念补充

  • padding部分不可写
  • span标签为内联标签,本身设置高度宽度是没有意义的,如果需要设置,请使用inline-block,将span标签设置为具有块级标签的属性.

登录框样式

关键词:使用relative和absolute配合将图标固定.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
.login{
background-image: url("img/i_name.jpg");
width: 16px;
height: 16px;
display: inline-block; }
</style>
</head>
<body>
<div style="width: 200px;position: relative">
<input style="width: 180px;padding-right: 20px"/>
<span class="login" style="position: absolute;top: 3px;right: 0"></span> </div> </body>
</html>

页头固定

这个比较简单,直接用position的fixed就可以了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pg-header{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
background-color: #2459a2;
}
.pg-body{
height: 2000px;
margin-top: 48px;
}
</style>
</head>
<body>
<div class="pg-header">asdf</div>
<div class="pg-body">老男孩</div>
</body>
</html>

CSS中的hover、before、after以及清除浮动

hover我们都知道,是用来将鼠标文本背景变色的,before after配合content,可以添加内容.所以我们使用这个特性,将float中的clear:both写法变得更为简洁.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1:hover{
background-color: #2459a2;
}
.c2:before{
content: '666';
}
.c2:after {
content: '777';
}
.left{
float: left;
}
.item{
background-color: red;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
/*将文字隐藏,但浏览器还是解析的,与(display:none;浏览器不解析)不一样,*/
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="c1">ddd</div>
<div class="c2">888</div> <div style="background-color: red" class="clearfix">
<div class="left" style="height: 100px;background-color: green">1</div>
<div class="left">2</div>
</div>
</body>
</html>

造三角形图标

其实就是使用大边框的border,其中一个颜色为指定颜色,其他颜色设置为透明即可,透明的语法为border-right: 20px solid transparent;.

<!DOCTYPE html
<html lang="en"
<head>
<meta charset="UTF-8"
<title>Title</title>
<style>
.icon{
display: inline-block;
border-top: 20px solid red;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
} </style>
</head>
<body>
<div class="icon"></div> </body>
</html>

图标插件

font awesome是一个开源的图标库,可以下载到本地,作为第三方图标插件库.

下载地址

所有图标演示

后台管理的布局

一般后台管理的页面布局有两种:

  1. 上,左侧菜单不动,内容随着长度增长,整个页面出现滚动条
  2. 上,左侧菜单不动,内容框不动,内容框右侧出现滚动条

两者的区别仅仅在于内容框中有无bottom:0;overflow:auto.看下代码:

第一种layout:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理1</title>
<style>
body{
margin: 0;
}
.page_header{
height: 48px;
background-color: cornflowerblue;
}
.page_body .body_menu{
position: absolute;
top:48px;
left: 0;
bottom: 0;
width: 200px;
background-color: darkgrey; }
.page_body .body_content{
position: absolute;
top:48px;
left: 205px;
/*bottom: 0;*/
/*width: 200px;*/
right: 0;
background-color: darkgrey;
}
</style>
</head>
<body>
<div class="page_header"></div>
<div class="page_body">
<div class="body_menu"></div>
<div class="body_content">
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
</div>
</div> </body>
</html>

第二种layout:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理2</title>
<style>
body{
margin: 0;
}
.page_header{
height: 48px;
background-color: cornflowerblue;
}
.page_body .body_menu{
position: absolute;
top:48px;
left: 0;
bottom: 0;
width: 200px;
background-color: darkgrey; }
.page_body .body_content{
position: absolute;
top:48px;
left: 205px;
/*width: 200px;*/
right: 0;
background-color: darkgrey;
/*在内容右侧显示滚动条,其他菜单栏不动*/
bottom: 0;
overflow: auto;
}
</style>
</head>
<body>
<div class="page_header"></div>
<div class="page_body">
<div class="body_menu"></div>
<div class="body_content">
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>asdsadf<br/>
</div>
</div> </body>
</html>

HTML、CSS之查遗补漏的更多相关文章

  1. CSS查缺补漏篇

    前面的话:关于CSS,之前我已经做过一些基础的知识点介绍.CSS主要是用来给页面设置样式的,一般说来,在一个网站中,CSS应该独立封装在一个单独的.css外部文件中.样式的设置总体来说是不难的,但是需 ...

  2. 「查缺补漏」巩固你的Nginx知识体系

    Nginx篇 基本介绍 Nginx是一款轻量级的 Web服务器 / 反向代理服务器 / 电子邮件(IMAP/POP3)代理服务器,主要的优点是: 支持高并发连接,尤其是静态界面,官方测试Nginx能够 ...

  3. Android查缺补漏--Activity生命周期和启动模式

    一.生命周期 onCreate():启动Activity时,首次创建Activity时回调. onRestart():再次启动Activity时回调. onStart():首次启动Activity时在 ...

  4. Android查缺补漏--BroadcastReceiver的类型与使用

    Broadcast 是一种被用于应用内和应用之间传递信息的机制.一个广播可以对应多个接受者.一个完整的广播机制,需要具有以下三个要素: 发送广播的Broadcast 接受广播的BroadcastRec ...

  5. Android查缺补漏(View篇)--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0?

    在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...

  6. Android查缺补漏--ContentProvider的使用

    ContentProvider (内容提供者)是一种共享型组件,可以为系统内应用于与应用之间提供访问接口. ContentProvide要想正常工作需要三个关键点: ContentProvider:对 ...

  7. Android查缺补漏--Service和IntentService

    Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行.当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运行. Service 分为启动状态和绑定 ...

  8. Android查缺补漏(View篇)--自定义 View 的基本流程

    View是Android很重要的一部分,常用的View有Button.TextView.EditView.ListView.GridView.各种layout等等,开发者通过对这些View的各种组合以 ...

  9. Android查缺补漏(View篇)--自定义View利器Canvas和Paint详解

    上篇文章介绍了自定义View的创建流程,从宏观上给出了一个自定义View的创建步骤,本篇是上一篇文章的延续,介绍了自定义View中两个必不可少的工具Canvas和Paint,从细节上更进一步的讲解自定 ...

随机推荐

  1. Oracle中split功能的实现

    原始需求: 有这样的表:tb和pk两列 PK是将表的多个主键用“|”进行分隔,我想把它变成多行 如 fundamentals_asia1_af_out ID_BB_GLOBAL|BC_DT|BC_EQ ...

  2. window.frameElement

    地址:MDN web docs 比如有一个iframe的src是xxx.htmframeElement的作用就是在xxx.htm中获得这个引用它的iframe objet这样你就可以在xxx.htm改 ...

  3. 题解 [51nod1340]地铁环线

    题解 [51nod1340]地铁环线 题面 解析 本文参考这篇博客 一开始看到只有120行就打算写一写, 结果一刚就是三个星期摆摆摆 本来是当查分约束入门学的. step 1 首先来考虑下如果已知总长 ...

  4. 学到了林海峰,武沛齐讲的Day19 迭代细讲

    在家加1个月学了8day的课  出差6天看了8day的课..说明再忙也是可以挤挤多学习的. 广州出差最后两天没学习.一天做车,一天做公司的事...4天就过去了. 老师讲的包子和鸡蛋需求不好...讲的有 ...

  5. DIV半透明层

    想使用DIV半透明层时 只需加一个filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5    0.5为半透明系数 使用前 使用后 style=& ...

  6. SPOJ 2939 QTREE5 LCT

    维护信息的方式十分巧妙~ 维护每一棵 splay 中深度最浅,深度最深的点距离最近的白点. 这样非常方便维护,进行区间合并,进行子树维护 很多时候在维护东西的时候最大/最小/深度最小/深度最大会相对容 ...

  7. 【优化算法】变邻域搜索算法解决0-1背包问题(Knapsack Problem)代码实例 已

    01 前言 经过小编这几天冒着挂科的风险,日日修炼,终于赶在考试周中又给大家更新了一篇干货文章.关于用变邻域搜索解决0-1背包问题的代码.怎样,大家有没有很感动? 02 什么是0-1背包问题? 0-1 ...

  8. 搭建自己的博客(七):使用bootstrap框架美化导航栏

    前面发现自己写css代码以及很多功能太麻烦,故希望在自己的博客中引入bootstrap框架,bootstrap是一个非常强大的前端框架,简单易学容易上手.附上官网地址:bootstrap官网 我使用的 ...

  9. 齿轮 HYSBZ - 4602 (DFS实现)

    齿轮 HYSBZ - 4602 题意:很好理解就不啰嗦了. 致谢:感谢队友小明. 题解:嗯,一开始想到的是并查集,后来,就先看了另一道题,xj写dfs和暴力,就卡死了.于是来补这题了,前向星建图 题解 ...

  10. P1021 邮票面值设计——搜索+完全背包

    P1021 邮票面值设计 题目意思是你最多用n张邮票,你可以自己设定k种邮票的面值,每种邮票数量无穷,你最多能用这k种邮票在不超过n张的情况下,组合成的价值要求是从1开始连续的, 求最大能连续到多少: ...