CSS 案例学习

1.样式 display:inline-block;可改变a标签，合其可定义宽高

2.a:hover表示鼠标经过

3.background:url(110.png) bottom 表示：给链接一个图片并底端对齐代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

a{

    display: inline-block;

    width:67px;

    height:32px;

    background: url("110.png");

}

a:hover{

    background: url(110.png) bottom;

}

</style>

    <title></title>

</head>

<body>

<a href="#"></a>

</body>

</html>

4.text-align:center 水平剧中

5.一行文字行高与父元素等高时文字垂直居中

6.text-decoration:none去掉下划线

eg:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

    a{

        display: inline-block;

        width: 120px;

        height: 58px;

        text-align: center;

        text-decoration: none;

        color: white;

        line-height: 50px;

    }

    a.one{

    background: url(images/bg1.png);

    }

    a.two{

    background: url(images/bg2.png);

    }

    a.three{

    background: url(images/bg3.png);

    }

    a.four{

    background: url(images/bg4.png);

    }

    a:hover{

    background: url(images/bg6.png)

    }

}

</style>

    <title></title>

</head>

<body>

<a href="#" class="one">五彩导行</a>

<a href="#" class="two">五彩导行</a>

<a href="#" class="three">五彩导行</a>

<a href="#" class="four">五彩导行</a>

</body>

</html>

效果：

7.padding 学习

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

    .nav{

        height: 40px;

        background: #eee;

        border-top: 3px solid orange;

        border-bottom: 1px solid #aaa

    }

    .nav-con{

        width:1000px;

        height: 40px;

        margin: 0 auto;

        line-height: 40px;

    }

    a{

        display: inline-block;

        height: 40px;

        color:#aaa;

        font:12px/40px 微软雅黑;

        text-decoration: none;

        padding: 0 12px;

    }

    a:hover{

        background: #999;

    }

</style>

    <title></title>

</head>

<body>

<div class="nav">

    <div class="nav-con">

        <a href="#">设为首页</a>

        <a href="#">手机新浪网</a>

        <a href="#">移动客户端</a>

    </div>

</div>

</body>

</html>

效果：

8.列表

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

    <title></title>

    <style type="text/css">

        .news{

            width: 238px;

            height: 166px;

            border:1px solid #d9e0ee;

            border-top: 3px solid #ff8400;

            margin: 0 auto;

        }

        .news-title{

            height: 35px;

            border-bottom: 1px solid #d9e000;

            line-height: 35px;

            padding-left: 12px;

        }

        ul{

            margin-top: 12px;

        }

        ul,li{

            list-style: none;

            margin: 0;

            padding: 0;

        }

        li{

            padding-left: 12px;

            background: url("li_bg.jpg") no-repeat

            9px 7px;

            font: 14px 微软雅黑;

        }

    </style>

</head>

<body>

    <div class="news">

        <div class="news-title">行业动态</div>

        <ul>

            <li>气质不错</li>

            <li>气质不错</li>

            <li>气质不错</li>

            <li>气质不错</li>

            <li>气质不错</li>

        </ul>

    </div>

</body>

</html>

效果:

9.浮动

作用：1.文字环绕图片

　　2.导航

3布局

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        body,ul,li{

            margin: 0;

            padding: 0;

        }

        ul,li{

            list-style: none;

        }

        .nav{

            width: 800px;

            height: 40px;

            background: pink;

            margin: 20px auto;

        }

        .nav ul li{

            float: left;

        }

        .nav ul li a{

            display: inline-block;

            height: 40px;

            font: 14px/40px 微软雅黑;

            padding: 0 20px ;

            text-decoration: none;

        }

        .nav ul li a:hover{

            background: #aaa;

        }

    </style>

</head>

<body>

<div class="nav">

    <ul>

        <li><a href="#">百度</a></li>

        <li><a href="#">百度</a></li>

        <li><a href="#">百度</a></li>

    </ul>

</div>

</body>

</html>

效果：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        body,ul,li{

            margin: 0;

            padding: 0;

        }

        li{

            list-style: none;

        }

        .nav{

            height: 55px;

            background: url("img/head_bg.jpg");

            margin-top: 30px;

            border-top: 1px solid #666;

        }

        .nav .nav-con{

            width: 1000px;

            margin: 0 auto;

            height: 55px;

        }

        .nav-con ul li{

            float: left;

            background: url("img/li_bg.png") no-repeat right;

            height: 55px;

            padding:0 30px;

        }

        a{

            display:inline-block;

            height: 55px;

            font: 14px/55px 微软雅黑;

            text-decoration: none;

            color: gray;

        }

        a:hover{

            color: green;

        }

    </style>

</head>

<body>

<div class="nav">

    <div class="nav-con">

        <ul>

            <li><a href="#" >智能手机</a></li>

            <li><a href="#">平板电脑</a></li>

            <li><a href="#" >百度</a></li>

            <li><a href="#" >么么么哒</a></li>

        </ul>

    </div>

</div>

</body>

</html>

效果：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        .header,.main,.footer{

            width: 500px;

        }

        .header,.footer{

            height: 100px;

            background: #000;

            margin: 10px 0;

        }

        .main{

            height: 300px;

            background: #eee;

        }

        .content{

            width: 300px;

            height: 300px;

            background: orange;

            float: left;

        }

        .sidebar{

            width: 190px;

            height:300px;

            background: green;

            float: right;

        }

    </style>

</head>

<body>

<div class="header"></div>

<div class="main">

    <div class="content"></div>

    <div class="sidebar"></div>

</div>

<div class="footer"></div>

</body>

</html>

效果：

10 .清除浮动

1).clear：both 浮动最后加一个标签样式加这个清除浮动

2).overflow:hidden 在父盒子里用当浮动出合子时不可使用

3).clearfix:after{content:"";display:block;height:0;line-height:0;visibility:hidden;clear:both} .clearfix{zoom:1;} 兼容IE 伪元素清除（常用）最后把这个样式给要清除的父元素

CSS 案例学习的更多相关文章

css案例学习之table tr th td ul li实现日历
效果代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
css案例学习之ul li dl dt dd实现二级菜单
效果代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
css案例学习之按钮超链接
效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...
css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
css案例学习之float浮动
代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
css案例学习之父子块的margin
两边还会有些距离,这是body默认的. 代码: <head> <title>父子块的margin</title> <style type="text ...

随机推荐

angular-file-upload插件的使用简单介绍
参考博客: https://www.cnblogs.com/jarson-7426/p/5191156.html angular-file-upload 最近一段时间用了一下angular-file- ...
力扣算法题—147Insertion_Sort_List
Sort a linked list using insertion sort. A graphical example of insertion sort. The partial sorted l ...
web跨域
之前对于跨域相关的知识一致都很零碎,正好现在的代码中用到了跨域相关的,现在来对这些知识做一个汇总整理,方便自己查看,说不定也可能对你有所帮助. 本篇主要内容如下: 浏览器同源策略 http 请求跨域 ...
MYSQL索引的深入学习
通常大型网站单日就可能会产生几十万甚至几百万的数据,对于没有索引的表,单表查询可能几十万数据就是瓶颈. 一个简单的对比测试以我去年测试的数据作为一个简单示例,20多条数据源随机生成200万条数据,平 ...
Go 语言变量、常量
变量第一种,指定变量类型,声明后若不赋值,使用默认值. var v_name v_type v_name = value 第二种,根据值自行判定变量类型. var v_name = value 第三 ...
PHP通过KMP算法实现strpos
起因昨天看了阮一峰老师的一篇博客<字符串匹配的KMP算法>,讲的非常棒.这篇文章也是解决了: 有一个字符串"BBC ABCDAB ABCDABCDABDE",里面是否 ...
tac - 反转显示文件
总览 (SYNOPSIS) ../src/tac [OPTION]... [FILE]... 描述 (DESCRIPTION) 把每个文件 FILE 显示在标准输出, 后面的行放在前面. ...
【TJOI2018】教科书般的亵渎
题面题目描述小豆喜欢玩游戏,现在他在玩一个游戏遇到这样的场面,每个怪的血量为\(a_i\),且每个怪物血量均不相同,小豆手里有无限张"亵渎".亵渎的效果是对所有的怪造成11点伤 ...
利用Python批量重命名一系列文件名杂乱的文件
假设目录下面有这样一系列命令杂乱的文件: OPENFOAM -TRAINING- PART- #1.pdf OPENFOAM - TRAINING- PART- #2.pdf OPENFOAM- TR ...
spring boot 与微服务之间的关系
Spring Boot 和微服务没关系, Java 微服务治理框架普遍用的是 Spring Cloud. Spring Boot 产生的背景,是开发人员对 Spring 框架越来越复杂的配置吐槽越来越 ...

CSS 案例学习

CSS 案例学习的更多相关文章

随机推荐

热门专题