HTML、CSS之查遗补漏

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

下载地址

所有图标演示

后台管理的布局

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

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

两者的区别仅仅在于内容框中有无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>