Title

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

先看下例子:

Title

,在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>