精华内容
下载资源
问答
  • CSS实现背景图片不规则的导航菜单

    千次阅读 2013-05-20 20:12:01
    一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示: (图一) 当鼠标移上去的时候背景...

    一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示:

    图一

    当鼠标移上去的时候背景变成红色箭头,也许,咋一看,觉得这个效果并没有什么特别的地方,但是仔细看看我画上去的绿色框框部分,就会发现每一块都是接在一起的不会断开的;如果说按照普通方法来做,那么实现的可能是下图所示的效果:

    (图二)

    即是块与块之间是断开的。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <!-- wbg解决ie6下的背景 勿动!!!-->
        <!--[if IE 6]>
          <script src="js/ie_png.js" mce_src="js/ie_png.js">
          </script>
          <script type="text/javascript">   
              DD_belatedPNG.fix('.previous,img'); 
         </script>
    <![endif]--> 
    <style type="text/css">
    body{
            font-size:12px;
            font-family:Arial, Helvetica, sans-serif;
    }
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {    
        margin:0;   
         padding:0;  
        list-style:none;
    } 
    body img{
      border:none;
    }
    a{
     color:#000;
     border:0;
     text-decoration:none;
    }
    a:hover{
      color:#f00;
      text-decoration:none;
    }
    #warp{
        margin:20px auto;
        width: 960px;
    }
    body{
            background:url(img/bj.jpg) no-repeat center top #090909;
    }
    .nav{
            background:url(img/nav_bj.png) right no-repeat;
            _background:url(img/nav_bj.gif) right no-repeat;
            height:47px;
            width:638px;
    }
    .nav ul li{
                float:left;
                margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
                display:inline;
                width:104px;
    }
    .nav ul li a{
                    display:block;
                    color:#FFFFFF;
                    padding:7px 0px;
                    _padding:5px 0px 6px;
                    width:104px;
                    float:left;
                    text-align:center;
                    font-family:Microsoft YaHei !important;
    }
    .nav ul li a span{
                        display:block;
    }
    .nav ul li a:hover{
                            background:url(img/a_hover.png) no-repeat;
                            _background:url(img/a_hover.gif) no-repeat;
                            color:#fff;
    }
    .nav ul .home a:hover{
                            background:url(img/home_hover.png) 7px center no-repeat;
                            _background:url(img/home_hover.gif) 7px center no-repeat;
    }
    </style> 
    <title></title>
    </head>
    <body>
        <div id="warp">
            <div class="nav">
                <ul>
                    <li class="home"><a href=""><span>Home</span>首页</a></li>
                    <li><a href=""><span>About</span>关于九弘</a></li>
                    <li><a href=""><span>Serve</span>服务项目</a></li>
                    <li><a href=""><span>Case</span>活动案例</a></li>
                    <li><a href=""><span>Information</span>公司动态</a></li>
                    <li><a href=""><span>Partners</span>合作伙伴</a></li>
                    <li><a href=""><span>Contact</span>联系方式</a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>

    在这个效果的实现过程中最关键的地方就是把“li”的margin值左右两边设为负数,然后把“li”和”a“的宽度设成一样,这样”a“的宽度就是固定的了,而”li“左右两边因为有margin,所以会缩小。

    源码下载地址:http://files.cnblogs.com/bokin/nav.rar


    <script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    展开全文
  • 但是使用新的CSS运动路径模块,我们可以仅使用CSS来创建奇特的路径动画! 我创建了一些有趣的小动画,这些动画与这些属性一起运行-我们将逐步介绍本文涉及的一些技术。 简单路径动画 要创建路径动画,我们...
    screenshot of spiral motion path animation

    我们通常会为开发人员使用大型旧JS库(例如GSAP )提供沿路径动画的元素。 但是使用新的CSS运动路径模块,我们可以仅使用CSS来创建奇特的路径动画!

    我创建了一些有趣的小动画,这些动画与这些属性一起运行-我们将逐步介绍本文涉及的一些技术。

    演示地址

    演示地址

    简单路径动画

    要创建路径动画,我们需要使用offset-path以及要沿其进行动画处理的路径的值(语法类似于SVG路径),并对offset-distance属性进行动画处理:

    .obj{
      offset-path:path("M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0");
      animation: move 2000ms ;
    }
    
    @keyframes move{
      100%{
        offset-distance: 100% ;
      }
    }

    这是一个简单的例子:

    演示地址

    我们还可以分别使用offset-rotateoffset-position更改动画对象的旋转行为和位置,这可能会带来一些很酷的效果。 在此演示中,您可以看到与默认值相比的offset-rotate效果:第二个对象不相对于路径旋转,而是保持固定。

    演示地址

    SVG的运动路径

    我还对能够显示元素正在移动的实际路径感兴趣。 在上面的演示中,我通过在HTML中包含具有相同路径坐标的SVG并使用绝对定位来做到这一点。 规范允许将URL传递给path()函数(类似于clip-path ),这意味着我们可以简单地包含SVG路径ID,并避免在CSS中复制路径。 (当我们包含具有许多坐标的复杂路径时,我们CSS文件会变得非常混乱!)但是,似乎在任何地方都还不支持,因此我们必须使用路径坐标。

    这也意味着我们无法控制动画的响应速度,因为我们无法缩放SVG并具有路径匹配。 如果我们尝试更改SVG宽度,则路径将保持其原始大小。 (我很确定是这种情况,因为我无法使其表现为其他方式–如果您有解决方案,请告诉我!)

    “画”路

    我们不仅可以沿路径移动元素,还可以使其看起来像在绘制路径。 我们已经可以使用CSS中的stroke-dashoffsetstroke-dasharray属性“绘制” SVG路径-技巧是将stroke-dasharray值设置为路径的长度,然后将偏移值设置为0:

    .path{
      stroke-dasharray: 520 ;
      stroke-dashoffset: 520 ;
      animation: draw 1000ms ;
    }
    
    @keyframes draw{
      100%{
        stroke-dashoffset: 0 ;
      }
    }

    来自CSS Tricks的这篇文章详细介绍了它。)

    如果我们使用与offset-path动画具有相同的持续时间和计时功能(递减)的“绘图”动画,则它们将同时发生,并且路径将看起来好像是由动画元素绘制的。

    在本文开头的两个演示中的第二个中,沿笔画动画的每个循环,沿路径移动对象的动画都会循环两次。 使用stroke-dashoffset可以先画线然后再画线(从正偏移值到负偏移值),因此似乎先被绘制然后被擦除:

    .path{
      stroke-dasharray: 520 ;
      stroke-dashoffset: 520 ;
      animation: draw 1000ms ;
    }
    
    @keyframes draw{
      0%{
        stroke-dashoffset: 520 ;
      }
      50%{
        stroke-dashoffset: 0 ;
      }
      100%{
        stroke-dashoffset: -520 ;
      }
    }

    带有box-shadow动画更加流畅

    这些动画还有一个小技巧:构建第一个示例时,我注意到动画非常快,因此在某些时候看起来有些跳动。 为了使动画更自然,我在对象移动时添加了一个盒子阴影–这创建了一种运动模糊效果,并且感觉更平滑:

    @keyframes move{
      10%{
        opacity: 1 ;
        offset-distance: 0% ;
      }
      30%{
        box-shadow: -0.5rem 0 0.3rem salmon ;
      }
      70%{
        box-shadow: -0.5rem 0 0.3rem salmon ;
      }
      90%{
        opacity: 1 ;
        offset-distance: 100% ;
        box-shadow: none ;
      }
      100%{
        opacity: 0 ;
        offset-distance: 100% ;
      }
    }

    浏览器支持

    在撰写本文时, offset-path仅在Chrome中受支持-尽管可以在Firefox中使用layout.css.motion-path.enabled标志启用它,并且在下一版Firefox中将其设置为标准支持。

    更新!

    从Firefox版本72开始,您不再需要翻转该标志,默认情况下已启用😄

    资源资源

    丹·威尔逊(Dan Wilson )创建了一些有用的Codepen演示 ,以演示运动路径的不同属性。 他还刚刚发表了一篇文章 。 (感谢亚当·库恩为我指出方向!)

    翻译自: https://css-irl.info/fun-with-css-motion-path/

    展开全文
  • CSS样式覆盖规则心得

    千次阅读 2017-10-27 19:35:25
    在练习一个网页实战的时候,遇到个很奇怪的问题,经过网上查阅资料才知道 原来是了解css样式覆盖规则 导致犯了一个低级又容易发现的错误 一下是解决过程简介: 有两个文件 ①index.html(正确模板) ②indextest...
    在练习一个网页实战的时候,遇到个很奇怪的问题,经过网上查阅资料才知道 原来是不了解css样式覆盖规则 导致犯了一个低级又不容易发现的错误 
    

    一下是解决过程简介:

    有两个文件 ①index.html(正确模板)            ②indextest.html(自己练习)

    首先 正确模板如下图所示:


    源码:index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>blog homepage</title>
    <link href="css/reset.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">


    </head>
    <body>
        <div id="page">
            <aside id="sidebar">
                <nav><a class="logo" href="#top" id="nav-logo"><span>A portfolio of</span>Joefrey Mahusay</a>
                  <ul>
                    <li class="active" id="nav-1"><a href="#home">HOME</a></li>
                    <li id="nav-2"><a href="#work">WORK</a></li>
                    <li id="nav-3"><a href="#about">ABOUT</a></li>
                    <li id="nav-4"><a href="#contact">CONTACT</a></li>
                  </ul>
                  <div class="bg_bottom"></div>
                </nav>
            </aside>

    style.css:

    body{
        background:url(../images/bg.gif) repeat-y center;
        color:#8f8f8f;
        
    }

    reset.css:

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
    menu, nav, section, summary, time, mark, audio, video {
      margin:0;
      padding:0;
      border:0;
      outline:0;
      font-size:100%;
      vertical-align:baseline;
      background:transparent;
    }

    错误文件如下图所示:indextest.html


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>blog homepage</title>

    <link href="css/style.css" rel="stylesheet" media="screen">

    <link href="css/reset.css" rel="stylesheet" media="screen">

    </head>
    <body>
        <div id="page">
            <aside id="sidebar">
                <nav><a class="logo" href="#top" id="nav-logo"><span>A portfolio of</span>Joefrey Mahusay</a>
                  <ul>
                    <li class="active" id="nav-1"><a href="#home">HOME</a></li>
                    <li id="nav-2"><a href="#work">WORK</a></li>
                    <li id="nav-3"><a href="#about">ABOUT</a></li>
                    <li id="nav-4"><a href="#contact">CONTACT</a></li>
                  </ul>
                  <div class="bg_bottom"></div>
                </nav>
            </aside>

    以上截图 相信懂的人一眼就看出来了吧 没错 就是因为css文件引入顺序颠倒了一下 所以导致body元素background属性被覆盖 所以indextest.html才会不现实背景图片

    根本原因是 根据css样式覆盖原则 在样式权值相同的情况下 后导入的css文件会把先倒入的css文件中的相同元素的相同属性覆盖 所以浏览器才判定被覆盖的无效 样式就不能正确显示了 。。


    以上为本人学习过程中的一点小小积累 各位看官大神如有高见 欢迎指点大笑

    展开全文
  • html/css画一个不规则表格

    千次阅读 2019-01-26 14:07:25
    <!... < ...> ...css/table.css .../*这个是单元格,给他要边框*/ text-align : left ; text-indent : 2em ; //左边空两格 } .a1 { text-align : right ; } 最终得到的样式:

    HTML文本:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />	
    		<title></title>
    		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    		<link rel="stylesheet" href="css/table.css" />
    	</head>
    	<body>
    		<div class="d1"> /*cellspacing="0"边框宽度*/
    			<table class="t1" border="1"  bordercolor="#e2e2e2" cellspacing="0" cellpadding="1" width="1000">
    				<tr height="80">
    					<td colspan="4"><img class="h1" src="img/2.png" >
    					<img class="h2" src="img/b.jpg"/></td>
    				
    				</tr>
    				<tr height="40">
    					<td width="15%" align="center">订单编号</td>
    					<td width="35%"><p class="p1">S19000086</p></td>
    					<td width="15%" align="center">下单时间</td>
    					<td width="35%"><p class="p1">2019-1-12</p></td>
    				</tr>
    				<tr height="40">
    					<td width="15%" align="center">客户名称</td>
    					<td width="35%" ><p class="p1">罗茜</p></td>
    					<td width="15%" align="center">供应商</td>
    					<td width="35%" ><p class="p1">罗茜</p></td>
    				</tr>
    				<tr height="40">
    					<td width="15%" align="center">发票类型</td>
    					<td width="35%"><p class="p1"></p></td>
    					<td width="15%" align="center">支付方式</td>
    					<td width="35%"><p class="p1">在线支付</p></td>
    				</tr>
    				<tr height="40">
    					<td width="15%" align="center">下单人</td>
    					<td width="35%"><p class="p1">罗茜</p></td>
    					<td width="15%" align="center">收货人</td>
    					<td width="35%"><p class="p1">鲁迅</p></td>
    				</tr>
    				<tr height="40">
    					<td width="15%" align="center">收货地址</td>
    					<td colspan="3"><p class="p1">哪位uID反悔任金佛苹果控</p></td>
    				</tr>
    		<div>
    		</div>
    		<table border="1" bordercolor="#e2e2e2" cellspacing="0" cellpadding="1" width="1000">
    		<tr height="40" bgcolor="#e2e2e2"><th width="75">序号</th>
    			<th width="155">零件号</th>
    			<th width="140">商品名称</th>
    			<th width="95">品牌</th>
    			<th width="155">原厂零件号</th>
    			<th width="155">原价</th>
    			<th width="120">成交价</th>
    			<th width="85">数量</th>
    			<th width="95">小计</th>
    		</tr>
    		<tr height="150"><td>1</td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr height="100">
    			<td>2</td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		
    		</tr>
    	</table>
    	</div>
    	<div class="d3">
    		<table class="t3" border="1"  bordercolor="#e2e2e2" cellspacing="0" cellpadding="1" width="1000" >
    			<tr class="tr3" height="40px">
    				<td class="td1" width="50%"><p class="p31">人民币:</p></td>
    				<td class="td1 a1" width="35%">共计【】件商品:</td>
    				<td class="td1 a1" width="15%">83894.00&nbsp;&nbsp;</td>
    				
    			</tr>
    			<tr class="tr3" height="40px">
    				<td class="td1" rowspan="2" width="50%"><p class="p31">原价总额:</p></td>
    				<td class="td1 a1" width="35%">运费:</td>
    				<td class="td1 a1" width="15%">25.00&nbsp;&nbsp;</td>
    				
    			</tr>
    			<tr class="tr3" height="40px">
    				<td class="td1 a1" width="35%">总额:</td>
    				<td class="td1 a1" width="15%">u39248&nbsp;&nbsp;</td>
    			</tr>
    		</table>
    	</div>
    	</body>
    </html>
    

    CSS文本:

    .p1{
    	text-align: left;
    	text-indent: 2em;//左边空两格
    }
    .h1{
    	float: left;
    	width: 120px;
    	height: 80px;
    	/*display: block;*/
    }
    .h2{
    	float: right;//右对齐
    	width: 120px;
    	height: 80px;
    	/*display: block;*/
    }
    .t3{
    	border-top: #F0F8FF;//设置上边框为白色
    	 /*border-collapse:collapse;*/
    }
    .td1{
    	/*text-align:justify;
    	text-align-last:justify;*/
         line-height:0;
         height:40px;
    	border:none;/*这个是单元格,不给他要边框*/
    	text-align: left;
    	text-indent: 2em;//左边空两格
    }
    .a1{
    	text-align: right;
    }
    

    最终得到的样式:
    在这里插入图片描述

    展开全文
  • css样式继承规则详解

    2018-06-25 19:00:00
    css样式继承规则详解 一、总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则)。   1、继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性...
  • 本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原则(priority rules)”! ...
  • css嵌套规则

    千次阅读 2018-09-18 14:55:19
    3.常用块级元素:address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ul , li 4.常用内敛元素:a , b , br , em , font , img , input , label...
  • css3实现图片自动切换

    万次阅读 2017-05-25 20:44:41
    实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容。 大致思路是这样的: 1、将图片设置为li的背景图片; 2、规定一个@keyframes的规则使得图片按照这个规则进行切换; 3、设置每张图片出现的时间; ...
  • css规则整理

    千次阅读 2011-12-13 23:16:10
    DIV+CSS规则整理 一、善用css缩写规则   /*注意上、右、下、左的书写顺序*/   1. 关于边距(4边): 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px (省略的左等于右) 1px 2px (省略的上等于下) 1px ...
  • css基本语法 ,css样式命名规则

    千次阅读 2007-12-31 03:02:00
    导读: CSS为casading style sheets(层叠样式表)缩写,一种对web文档添加样式的简单机制.属表现层的布局语言. 基本语法规范,分析个例子先 p{COLOR:#FF0;BACKGROUND:#FFF} 其中"p"我们称为选择器selectors,指明我们要...
  • CSS 结构和规则

    千次阅读 2005-11-24 14:02:00
    一个样式表由样式规则组成, 以告诉浏览器怎样去呈现一个文档. 有很多将样式规则加入到你的HTML文档中的方法, 但最简单的启动方法是使用HTML的STYLE组件. 这个元素放置于文档的HEAD部分, 包含网页的样式规则.要注意到...
  • CSS(Cascading Style Sheets...1.CSS样式规则与选择器CSS样式表单是由一条一条的样式规则(style rule)所组成,而样式规则包含选择器(selector)与声明(declaration)两个部分:选择器{属性:值[;属性:值[; …]]
  • 使用JavaScript动态添加CSS样式规则

    万次阅读 2014-09-05 21:20:23
    动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。
  • 纯div ul li css 实现的table表格效果。带滚动条 IE8,IE9效果图: FF效果: IE6效果有点问题: CSS样式: body { font-family: "宋体"; font-size: 9pt; background-color: #ffffff; ...
  • 尽管HTML5 Canvas和SVG可能是用于构建图表的更优雅的解决方案,但是在本教程中,我们将学习如何仅使用普通CSS来构建自己的甜甜圈图。 要了解我们将要创建的内容,请看下面的嵌入式CodePen演示: HTML标记 我们从...
  • 由于项目中编写文档结构、编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发规范,根据XHTMl和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单的开发规范. 一、CSS文件及样式命名 1、CSS...
  • 关于jQuery配合CSS3实现背景图片滑动实例
  • 用ul、li标签 创建css横向导航菜单?

    万次阅读 2013-07-08 01:06:24
    创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以,为了避免所有的...
  • 对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找到要源,其它我们可以用以下方法来清除。 1、在CSS中写入代码。找到相关性的CSS,在。.li和.ul下写入list-...
  • div+css命名规则

    千次阅读 2009-08-29 00:36:00
    常用代码结构:div:主要用于布局,分割页面的结构ul/ol:用于无序/有序列表span:没有特殊的意义,可以用作排版的辅助,例如:li>span>(4.23)span>隐居豆腐店li> 然后在css中定义span为右浮动,实现了日期和标题分...
  • css选择器权重及其计算规则

    千次阅读 2019-04-23 08:38:40
    css选择器 文章目录css选择器选择器类型css选择器权重值权重计算方法案例 选择器类型 ID #id class .class 标签 p 通用 * 属性 [type=“text”] 伪类 :hover 伪...
  • CSS三大特性—— 继承、 优先级和层叠。 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较;...标签选择器(如:body,div,p,ul,li)  2.类选择器(如:class="head",class="hea
  • css background-position 图片整合技术

    千次阅读 2016-01-25 16:00:36
    当网页中存在多个小图片 比如logo ,菜单图片...图片整合技术(CSSSprites):将导航背景图片图片按钮背景图片等有规则的合并为一张背景图,即多张图片合为一整张图,然后用background-position来实现背景图的定位技术。
  • 虽然我们一直建议大家不用Dreamweaver可视化编辑的方式进行CSS网页布局,但依然很多... CSS文件的链接方式 ·附加链接:外部CSS文件 ·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中 CSS规则定义有
  • 我们往往称常见的东西为“生僻”,就像是常见的文字我们叫“生僻字”,因此常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。但是,实际上,我们都...
  • div+css - CSS标准 - background-image背景图片 [background-image背景图片 - 文档] http://www.w3.org/TR/CSS21/colors.html#propdef-background-image [div+css - 关键词] div css
  • 一、 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图。就是将导航的背景图,按钮的背景图等有规则的合并成一张背景图,即多张图合并为一张整图...
  • CSS Specificity--CSS特性、权重、优先级---CSS specificity规则、算法及实例分析
  • 1、一些常用的css 命名 页头:header 登录条:loginbar 标志:logo 侧栏:sidebar 广告:banner 导航:nav 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 滚动:scroll 页面主体:main ...
  • CSS规范 - 命名规则

    千次阅读 2015-07-06 21:08:00
    ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。 NEC特殊字符:"-"连字符 "-"在本规范中并表示连字符的含义。 她只表示两种含义:分类前缀分隔符、扩展分隔符,详见以下具体规则。 分类的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,917
精华内容 15,166
关键字:

cssli不规则图片