css系列（6）css的运用（二）

本节继续介绍css在html页面重的应用实例。

(1)div的border-style属性:

none:   无样式

hidden: 除了同表格的边框发生冲突的时候,其它同none

dotted: 点划线

dashed: 虚线

solid:  实线

double: 双线,两条线加上中间的空白等于border-width的取值

groove: 槽状

ridge:  脊状,和groove相反

inset:  凹陷

outset: 凸出,和inset相反

<html>

<head>

  <title>示例6.1</title>

  <style>

  div{

    width: 200px;

    height: 200px;

    float:left

  }

  #div_01{

    border-style: outset;

    border-bottom-color: red;

    border-width: 50px;

  }

  #div_02{

    border-style: inset;

    border-bottom-color: red;

    border-width: 50px;

  }

  #div_03{

    border-style: dotted;

    border-width: 5px;

  }

  #div_04{

    border-style: solid;

    border-color: red;

    border-width: 5px;

  }

  </style>

</head>

<body style="margin:0px;">

    <div id="div_01"></div>

    <div id="div_02"></div>

    <div id="div_03"></div>

    <div id="div_04"></div>

</body>

</html>

(2)用ul和li制作的导航栏:

<!DOCTYPE html>

<html>

<head>

    <title>示例6.2</title>

    <!--type属性干嘛的-->

    <style type="text/css">

        * {

            margin:0px;

        }

        div {

            background-color:yellow;

            height:35px;

            width:800px;

            margin:0px auto;

        }

        ul li {

            float:left;

            list-style:none;

            width:150px;

            line-height:30px;

        }

        A:hover {

            font-size:x-large;

            background-color:pink;

        }

    </style>

</head>

<body>

    <div>

        <ul>

            <li><a href="#">公司简介</a></li>

            <li><a href="#">企业文化</a></li>

            <li><a href="#">产品介绍</a></li>

            <li><a href="#">交易大厅</a></li>

            <li><a href="#">联系我们</a></li>

        </ul>

    </div>

</body>

</html>

(3)列表与div的混合:

<!DOCTYPE html>

<html>

<head>

  <title>示例6.3</title>

  <style type="text/css">

  * {

    font-size:12px;

    margin:0px;

    }

  .divIndex {

    height:390px;

    width:300px;

    margin:0px auto;

    padding:0px;

    }

  .div1 {

    height:35px;

    width:300px;

    background-color:#248AD4;

    color:white;

    text-indent:30px;

    line-height:35px;

    }

  .t1 {

    font-weight:bolder;

    text-indent:10px;

    line-height:25px;

    }

  .t2 {

    color:#236EB2;

    border-bottom:1px dashed #cccccc;

    line-height:25px;

    }

  .t3 {

    color:red;

    text-align:right;

    font-weight:bolder;

    border-bottom:1px dashed #cccccc;

    }

  .t4 {

    color:blue;

    font-weight:bolder;

    text-align:right;

    border-bottom:1px dashed #cccccc;

    }

  </style>

</head>

<body>

    <div class="divIndex">

    <table id="td1" cellpadding="0px" cellspacing="0px">

      <tr>

        <td>

        <div class="div1">程序设计学习进程信息</div>

        </td>

      </tr>

      <tr>

        <td>

        <table cellpadding="0px"  cellspacing="0px" width="300px">

          <tr>

            <td class="t1">基础班</td>

            <td></td>

          </tr>

          <tr>

            <td class="t2">北京-2014年6月14号</td>

            <td class="t3">预约报名中</td>

          </tr>

           <tr>

            <td class="t2">北京-2014年5月5号</td>

            <td class="t4">爆满已开班</td>

          </tr>

           <tr>

            <td class="t2">广州-2014年6月21号</td>

            <td class="t3">预约报名中</td>

          </tr>

           <tr>

            <td class="t2">北京-2014年5月20号</td>

            <td class="t4">爆满已开班</td>

          </tr>

           <tr>

            <td class="t1">进阶班</td>

            <td></td>

          </tr>

           <tr>

            <td class="t2">北京-2014年6月4号</td>

            <td class="t3">预约报名中</td>

          </tr>

           <tr>

            <td class="t2">北京-2014年4月26号</td>

            <td class="t4">爆满已开班</td>

          </tr>

          <tr>

            <td class="t2">广州-2014年6月22号</td>

            <td class="t3">预约报名中</td>

          </tr>

          <tr>

            <td class="t2">广州-2014年5月13号</td>

            <td class="t4">爆满已开班</td>

          </tr>

          <tr>

            <td class="t1">高级班</td>

            <td></td>

          </tr>

          <tr>

            <td class="t2">北京-2014年6月14号</td>

            <td class="t3">远程班预约报名中</td>

          </tr>

           <tr>

            <td class="t2">北京-2014年6月4号</td>

            <td class="t3">远程班预约报名中</td>

          </tr>

        </table>

        </td>

      </tr>

    </table>

    </div>

</body>

</html>

(4)伪选择器:

a标签的四个属性:

1.a:link{text-decoration:none ; color:#c00 ;}

2.a:visited {text-decoration:none ; color:#c30 ;}

3.a:hover {text-decoration:underline ; color:#f60 ;}

4.a:active {text-decoration:none ; color:#F90 ;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。写的时候尽量按照顺序。

<html>

<head>

    <title>伪选择器</title>

    <style type="text/css">

      p:hover {

        color: blue;

        cursor: pointer;

        font-size: 20px;

      }

      #p_firstline:first-line {

        font-size:25px;

      }

      #p_firstletter:first-letter {

        font-size:30px;

        color:red;

      }

      a:hover {

        text-decoration:none;

        color:red;

        font-size:25px;

      }

      a:active {

        color:purple;

        font-size:30px;

      }

    </style>

</head>

<body>

    <p id="p_firstline">

    通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。<br/>

    不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那

时候对标准的支持并不是企业的优先选择。</p>

    <p id="p_firstletter">比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是

好呢？

    </p>

    <a href="##">伪选择器</a><br />

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

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

    <a href="##">孙继锰</a><br />

</body>

</html>

(5)设置背景图片:

<html>

<head>

<style type="text/css">

  div.div1 {

    width:300px;

    height:200px;

    background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_background.gif);

    background-repeat: repeat-x;

  }

  div.div2{

    width:300px;

    height:200px;

    background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_background.gif);

    background-repeat: repeat-y;

  }

</style>

</head>

<body>

 <div class="div1"></div>

 <div class="div2"></div>

</body>

</html>

css系列（6）css的运用（二）的更多相关文章

css系列教程--css文件的创建
css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.cs ...
深入理解css系列：css定位
一.概述 1.默认文档流定位方式 (1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位: (2).HTML标签元素总体分为块状元素.内联元素.内联块状元素,可通过该标签对应的DOM ...
CSS系列(8) CSS后代选择器和子选择器详解
一.CSS后代选择器详解 1, 生动介绍基本概念一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...
我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体
一.CSS如何设置字体的类型.大小.颜色设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...
CSS系列：CSS常用样式
1. 通用样式 Base.css * { margin:; padding:; } body { width: 1000px; margin: 0 auto; font-size: 12px; fon ...
CSS系列：CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
CSS系列：CSS的继承与层叠特性
1. CSS的继承特性所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...
CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构在CSS中, ...
CSS系列：CSS中盒子之间的关系
1. 标准文档流标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则. 1.1 块级元素(block level) 块级元素不会排在同一行中,总是以一个块的形式表现出来 ...
CSS系列：CSS中盒子的浮动与定位
1. 盒子的浮动在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

随机推荐

HTML5 Canvas绘图详解 drawImage() 方法有图有真相！
步骤 1 2 3 4 5 简介是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...
RTT驱动实现步骤
设备驱动实现步骤: 1. 按照RT-Thread对象模型,扩展一对象有两种方式: 1)定义自己的私有数据结构,然后赋值到RT-Thread设备控制空的user_data指针上: 2)从struct r ...
python笔记2 生成器文件读写
生成器一边循环一边计算的机制,称为生成器(Generator). 把一个列表生成式的[]改成(),就创建了一个generator: 创建了一个generator后,通过for循环来迭代它. 著名的斐 ...
nc 查看端口是否联通
nc 47.9.16.1 3306 如果卡住,说明该IP的这个端口访问不通, 防火墙拦截了
【问题】CentOS6.5系统"libc.so.6: version 'GLIBC_2.15' not found"解决方法
出现"libc.so.6: version 'GLIBC_2.15' not found"问题,是由于glibc版本过低,升级glibc即可. 由于CentOS系统RPM源目前gl ...
【OC学习-13】什么是组合，它和继承是什么关系？
继承有两缺点:(1)当层级越来越多时,假如每一个层级都有实例变量,那么最下层的子类继承的实例变量会超级多,沉重.(2)当消息传递自子类往上时.层级越多,效率越低下. 所以就有了组合.说实话区分继承和组 ...
vim杂记
"clang-completelet g:clang_complete_copen=1let g:clang_periodic_quickfix=1let g:clang_snippets= ...
自定制serilazry字段
在获取序列化返回值时候想要有时候我们需要生成我们需要的关联字段 class CourseSerializers(ModelSerializer): # 对于外键,one to one , choice ...
Laravel 5.1 数组帮助函数(随发现更新)
array_add 向一个数组中添加指定键值,如果键值不存在则添加,如果键本身就存在那么就不添加: $test_array = ['name' => '大K', 'age' => 27] ...
es6 async与await实战
在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...

css系列（6）css的运用（二）

css系列（6）css的运用（二）的更多相关文章

随机推荐

热门专题