1.ul li横排

/* ul li以横排显示 *//* 所有class为menu的div中的ul样式 */div.menu ul{
       list-style:none; /* 去掉ul前面的符号 */    margin: 0px; /* 与外界元素的距离为0 */    padding: 0px; /* 与内部元素的距离为0 */    width: auto; /* 宽度根据元素内容调整 */}/* 所有class为menu的div中的ul中的li样式 */div.menu ul li{
       float:left; /* 向左漂移，将竖排变为横排 */}/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */div.menu ul li a, div.menu ul li a:visited{
       background-color: #465c71; /* 背景色 */    border: 1px #4e667d solid; /* 边框 */    color: #dde4ec; /* 文字颜色 */    display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */    line-height: 1.35em; /* 行高 */    padding: 4px 20px; /* 内部填充的距离 */    text-decoration: none; /* 不显示超链接下划线 */    white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。 */}/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */div.menu ul li a:hover{
       background-color: #bfcbd6; /* 背景色 */    color: #465c71; /* 文字颜色 */    text-decoration: none; /* 不显示超链接下划线 */}/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */div.menu ul li a:active{
       background-color: #465c71; /* 背景色 */    color: #cfdbe6; /* 文字颜色 */    text-decoration: none; /* 不显示超链接下划线 */}

前台html

     
        
      
            
       
主页
            
       
工作日志
            
       
设备运行记录
            
       
其他
        
      
    
     

w3c上的例子

     
      
Link one
      
Link two
      
Link three
      
Link four
     
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。

 

 

2.选择第一个子元素

有时候我们需要用CSS选择非第一个子元素，例如下面这样的HTML，希望让两个span之间间隔一定的距离，但又不希望简单的给每个span设置margin-right（会导致最后一个span也有margin-right，可能影响之后元素的排版）。

这时如果能排除第一个元素，并给其他元素设置margin-left属性，就能实现比较好的效果了。可以利用not和first-child，通过下面的CSS实现。

div > span :not(:first-child) {
           margin-left:10px    }

还可以利用兄弟元素选择器+，像这样：

div > span + span {
           margin-left:10px    }

如果HTML是这样的，应该怎么做呢？

其实也很简单，用通配符就可以了：

div > * :not(:first-child) {
           margin-left:10px    }

 

3.子元素在父元素中上下居中

.denglu-chenggong {
       display: inline-block;    vertical-align: middle;    width: 80%;    padding: 30px 0px;    border-radius: 5px;    background: #FFFFFF;}.denglu-bg {
       text-align: center;    height: 100%;}.denglu-bg:before {
       content: '';    display: inline-block;    height: 100%;    vertical-align: middle;}.denglu-cgtu {
       width: 50px;    margin: 10px auto;}.denglu-cgtu img {
       width: 50px;}

3.带放大镜的搜索文本框

 

效果如上图，就是在搜索框中加上一个小的放大镜图标

     
                
                      
                          
       
                        
                                
        
                    
       
                                    
                          搜索                
     

　　

.sskuang {
       width: 100%;    display: block;    border: none;    height: 30px;    border-radius: 2px;    background: url(../images/ssan.png) 10px no-repeat;    -webkit-background-size: 16px 18px;    font-size: 0.7em;    color: #5E5E5E;    padding-left: 35px;}

小图标如下：

 

4.一组输入框的样式

/**************所有下拉框的样式 没有宽度 高度****************/input, select, button, textarea {
   -webkit-appearance: none;}select {
       text-align:center;    border:none;     border-bottom: 1px solid #e5e5e5;    -webkit-box-sizing:border-box;    box-sizing:border-box;     background-color:#FFFFFF;    color:#333;    border-radius:0px;    height: 2.5em;    font-size:1.8em;    margin:0;    margin-top:-5px;    padding:0;}input[type=checkbox] {
       -webkit-appearance:checkbox;    -webkit-transform: scale(1.5,1.5);    display:inline-block;     font-size:1em;     width:1.0em;     height:1.0em;     line-height:1.0em;     padding:0;     margin:0.5em; }input[type=radio] {
       -webkit-appearance:radio;    -webkit-transform: scale(1.5,1.5);    display:inline-block;     font-size:1em;     width:1.0em;     height:1.0em;     line-height:1.0em;     padding:0;     margin:0.5em; }

 5.虚线效果如下

代码如下：

     
                
      
 {
   {trans('base.Rrecommend')}}
                
      
                           @foreach($recommends as $recommend)                        
       
                                                            
         pic)[0] ?>                                                                
{
   {"zh_cn" == $lang ? $recommend->name_cn : $recommend->name}}
                                                    
                    @endforeach                
      
            
     

.recommend_tit:after{
    border-top:5px dashed #ff6e30; content: " "; width: 730px; height: 3px; display: inline-block; margin-left: 2px;}