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 ...

随机推荐

基于GitLab的前端Assets发布体系
以SVN+RMS为核心的发布系统,对前端开发的影响上来看,存在以下问题: 覆盖式的发布,容易导致线上问题. js一旦发布,就有可能被任意其他页面使用.被引用的越多,就越重要.一旦核心js出现故障,影响 ...
linux用户密码生成
linux账户保存在/etc/passwd,密码保存在/etc/shadow. 通过man 5 passwd,man 5 shadow可查看文件中各字段含义. encrypted password ...
linux命令 — lsof 查看进程打开那些文件或者查看文件给那个进程使用
lsof命令是什么? 可以列出被进程所打开的文件的信息.被打开的文件可以是 1.普通的文件,2.目录 3.网络文件系统的文件,4.字符设备文件 5.(函数)共享库 6.管道,命名管道 7.符号链 ...
bat遍历当前目录下的文件,批量重命名
@echo off setlocal enabledelayedexpansion for %%x in (*) do ( if not "%%x"=="demo.bat ...
如何获取继承中泛型T的类型
@SuppressWarnings("unchecked") public void testT() { clazz = (Class<T>)( (Parameteri ...
TP分页
①在Home下设置Publics文件夹或在thinkPHP下library的vender 把page.class.php 考贝进入 ②通过new 实例化方式调用 $page=new \Home\Pub ...
【BZOJ3444】最后的晚餐乱搞
[BZOJ3444]最后的晚餐 Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人在举行最后的离别晚餐时,饭店老板觉得十分纠结.因为有m名学生偷偷找他,要求和自己暗恋 ...
1878: [SDOI2009]HH的项链
1878: [SDOI2009]HH的项链 Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 4420 Solved: 2199[Submit][Statu ...
第一次打开Pycharm如何操作？
1.第一次打开pycharm的界面: 2.一些pycharm的选择: 3.上一步,红字4的位置,点击进去,对下面界面进行选择,也就是选择System Interpreter解释器,然后对Interpr ...
nosql_action
ps -aux 查当前端口占用 connecting to: test > show dbs local .078125GB testphp .203125GB > use testph ...

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

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

随机推荐

热门专题