您的位置：首页 > Web前端 > CSS

HTML、CSS之查遗补漏

2016-08-15 10:40 176 查看

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;*/ } /* 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是一个开源的图标库,可以下载到本地,作为第三方图标插件库.

下载地址

所有图标演示

后台管理的布局

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

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

上,左侧菜单不动,内容框不动,内容框右侧出现滚动条

两者的区别仅仅在于内容框中有无
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航