inline-block3个额外像素宽度问题
先看下例子:
+
-
,在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;
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=" 980px;margin: 0 auto;">
<div style=" 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div>
<div style=" 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");
16px;
height: 16px;
display: inline-block;
}
</style>
</head>
<body>
<div style=" 200px;position: relative">
<input style=" 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是一个开源的图标库,可以下载到本地,作为第三方图标插件库.
后台管理的布局
一般后台管理的页面布局有两种:
- 上,左侧菜单不动,内容随着长度增长,整个页面出现滚动条
- 上,左侧菜单不动,内容框不动,内容框右侧出现滚动条
两者的区别仅仅在于内容框中有无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;
200px;
background-color: darkgrey;
}
.page_body .body_content{
position: absolute;
top:48px;
left: 205px;
/*bottom: 0;*/
/* 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;
200px;
background-color: darkgrey;
}
.page_body .body_content{
position: absolute;
top:48px;
left: 205px;
/* 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>