zoukankan      html  css  js  c++  java
  • HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>Test</title>
     5     <meta charset="utf-8">
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7     <script type="text/javascript" src="jquery.js"></script>
     8     <script 1type="text/javascript">
     9    
    10     </script>
    11 </head>
    12 <body>
    13     <div id="navigator">
    14         <ul id="navList">
    15             <li><a href="#" class="menu">首页</a></li>
    16             <li><a href="#" class="menu">新随笔</a></li>
    17             <li><a href="#" class="menu">订阅</a></li>
    18             <li><a href="#" class="menu">管理</a></li>
    19         </ul>
    20     </div>
    21 </body>
    22 </html>
    23 
    24  

    CSS样式代码:

     1 a:link {
     2     color: black;
     3     text-decoration: none;  /*设置链接无需下划线*/
     4 }
     5 
     6 #navigator{
     7     background-color:#AEAEAE;
     8     position:absolute;
     9     left:50%;
    10     margin-left:-200px;
    11     /*bottom:0px;*/
    12     /*400px;*/
    13     height:80px;
    14 }
    15 #navList{
    16     min-height:80px;
    17     overflow:hidden;
    18 }
    19 #navList li{
    20     float:left;
    21     list-style:none;   /*设置无需无序元素前默认的黑点*/
    22 }
    23 
    24     #navList a{
    25         display:block;
    26         width:100px;
    27         height:80px;
    28         line-height:80px;
    29         font-size:16px;
    30         text-align:center;
    31         position:relative;
    32         -webkit-transition:all .4s;
    33     }
    34     #navList a:after,#navList a:before{ /*CSS中,E:after表示伪元素,多用于设置div之间的间隙*/
    35         position:absolute;
    36         display:block;
    37         bottom:2px;
    38         opacity:0;             /*隐藏文字两边的中括号*/
    39         -webkit-transition:all .4s;
    40     }
    41 
    42 #navList a:after{
    43     content:"]";
    44     right:20px;
    45 }
    46 #navList a:before{
    47     content:"[";
    48     left:20px;
    49 }
    50 #navList a:link,#navList a:visited,/*设置超链接已经被访问过时的样式*/#navList a:active{
    51     color:#eee;
    52 }
    53 
    54 #navList a:hover{
    55     color:#f62459;
    56     text-decoration:none;
    57 }
    58 #navList a:hover:after{
    59     right:0px;
    60     opacity:1;
    61 }
    62 #navList a:hover:before{
    63     left:0px;
    64     opacity:1;
    65 }

    显示效果如下:

    image

    当鼠标停留在导航栏的链接上时,文字两旁会显示红色中括号。

    CSS中伪元素说明

    image

    以上页面代码如下所示:

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 
      3 <html xmlns="http://www.w3.org/1999/xhtml">
      4 
      5 <head>
      6 
      7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      8 
      9 <title>单列定宽单列自适应结构</title>
     10 
     11 <style>
     12 
     13 /*设置页面中所有元素的内外补丁为0,便于便捷的页面布局*/
     14 
     15 *{
     16 
     17 margin:0;
     18 
     19 padding:0;
     20 
     21 }
     22 
     23 /*设置头部信息以及底部信息的高度为30px,并添加浅灰色背景*/
     24 
     25 #header,#footer{
     26 
     27 height:30px;
     28 
     29 background-color:#e8e8e8;
     30 
     31 }
     32 
     33 /*设置页面内容区域上下外补丁为10px*/
     34 
     35 #container{
     36 
     37 margin:10px 0;
     38 
     39 }
     40 
     41 /*设置主要内容区域的宽度为70%,背景色以及文本颜色,并居左显示*/
     42 
     43 .mainBox{
     44 
     45 float:left;/*将主要内容区域向左浮动*/
     46 
     47 width:70%;/*将mainBox的宽度修改为70%*/
     48 
     49 color:#ff0000;
     50 
     51 background-color:#333333;
     52 
     53 }
     54 
     55 /*设置侧边栏的宽度为200px,背景色以及文本颜色,并居右显示*/
     56 
     57 .sideBox{
     58 
     59 float:right;/*将侧边栏向右浮动*/
     60 
     61 width:200px;/*将sideBox的宽度修改为200px*/
     62 
     63 margin-left:-200px;/*添加负边距使sideBox向左浮动缩进,就是当浏览器窗口变小任然不改变sideBox的大小,这时sideBox就会插入到旁边的mainBox里,而如果没有设置,窗口变小时就会换行打乱下面的布局*/
     64 color:#ffffff;/*设置文本颜色*/
     65 background-color:#999999; /*设置背景颜色*/
     66 }
     67 /*清除内容区域的左右浮动,本段重点理解一下(after是什么意思)*/
     68 #container:after{
     69 display:block;
     70 visibility:hidden;
     71 font-size:0;
     72 line-height:0;
     73 clear:both;
     74 content:"";
     75 }
     76 /*添加地步信息的对上级标签元素的浮动的清除*/
     77 #footer{
     78 clear:both;
     79 }
     80 </style>
     81 </head>
     82 <body>
     83 <div id="header">头部信息</div>
     84 <div id="container">
     85 <div class="mainBox">
     86 <p>主要内容区域</p>
     87 <p>已经不再只是一行文字了</p>
     88 <p>要放很多很多东西到这个区域中来</p>
     89 <p>不断的重复啊重复着……</p>
     90 <p>不断的重复啊重复着……</p>
     91 <p>不断的重复啊重复着……</p>
     92 <p>不断的重复啊重复着……</p>
     93 <p>不断的重复啊重复着……</p>
     94 <p>不断的重复啊重复着……</p>
     95 <p>不断的重复啊重复着……</p>
     96 <p>不断的重复啊重复着……</p>
     97 <p>不断的重复啊重复着……</p>
     98 </div>
     99 <div class="sideBox">侧边栏</div>
    100 </div>
    101 <div id="footer">底部信息</div>
    102 </body>
    103 </html>

    这段代码多了红色部分;现将红色部分代码注释,显示页面如图所示:

    image

    可见当没有红色代码部分时,底部信息和主要内容部分紧紧贴在一起,之间没有空隙。

    #container:after{

    display:block;

    visibility:hidden;

    font-size:0;

    line-height:0;

    clear:both;

    content:"";

    }

    这段代码中的#container:after是针对一个伪元素进行CSS样式设置,HTML页面并没有这样一个div存在。

    after是在元素后面的意思,实质是在元素之后添加内容。
    这个伪元素允许在元素内容的最后面插入生成内容,需要和content属性一起使用,设置在对象后发生的内容。默认地,这个伪元素是inline行内元素,不过可以使用属性 display 改变这一点。

  • 相关阅读:
    HDU 1058 Humble Numbers
    HDU 1160 FatMouse's Speed
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1003 Max Sum
    HDU 1297 Children’s Queue
    UVA1584环状序列 Circular Sequence
    UVA442 矩阵链乘 Matrix Chain Multiplication
    DjangoModels修改后出现You are trying to add a non-nullable field 'download' to book without a default; we can't do that (the database needs something to populate existing rows). Please select a fix:
    opencv做的简单播放器
    c++文件流输入输出
  • 原文地址:https://www.cnblogs.com/ycc-020/p/6098587.html
Copyright © 2011-2022 走看看