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; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */ } /* 所有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
<div class="menu"> <ul> <li><a href="javascript:void(0);">主页</a></li> <li><a href="javascript:void(0);">工作日志</a></li> <li><a href="javascript:void(0);">设备运行记录</a></li> <li><a href="javascript:void(0);">其他</a></li> </ul> </div>
w3c上的例子
<html> <head> <style type="text/css"> ul {float:left; width:100%; padding:0; margin:0; list-style-type:none;} a{ float:left; width:7em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white;} a:hover {background-color:#ff3300} li {display:inline} </style> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <p> 在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。 </p> </body> </html>
2.选择第一个子元素
有时候我们需要用CSS选择非第一个子元素，例如下面这样的HTML，希望让两个span之间间隔一定的距离，但又不希望简单的给每个span设置margin-right（会导致最后一个span也有margin-right，可能影响之后元素的排版）。
<div> <span></span> <span></span> <span></span> <span></span> </div>
这时如果能排除第一个元素，并给其他元素设置margin-left属性，就能实现比较好的效果了。可以利用not和first-child，通过下面的CSS实现。
div > span :not(:first-child) { margin-left:10px }
还可以利用兄弟元素选择器+，像这样：
div > span + span { margin-left:10px }
如果HTML是这样的，应该怎么做呢？
<div> <span></span> <p></p> <span></span> <span></span> </div>
其实也很简单，用通配符就可以了：
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.带放大镜的搜索文本框
效果如上图，就是在搜索框中加上一个小的放大镜图标
<div class="header"> <span id="hide-pop" class="headleft" style="15%"><span class="back"><b class="icon-back"></b></span></span> <span class="tbbiaoti" style="65%;overflow: hidden;"> <div class="search" id="searchdiv"> <!--placeholder="搜索您喜欢的店铺/商品"--> <p><input id="searchinput" type="text" class="sskuang"></p> </div> </span> <span id="search_button" class="headright" style="20%"> <span class="quxiao qxzd">搜索</span> </span> </div>
.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.虚线效果如下
代码如下：
<div class="recommend contact_right" style="margin-left: 260px;"> <h2 class="recommend_tit yin_font1"> {{trans('base.Rrecommend')}}</h2> <ul> @foreach($recommends as $recommend) <li> <a href="{{url('/product/detail/'.$recommend->id)}}"> <?php $pic = explode(',', $recommend->pic)[0] ?> <img src="{{asset('img/type-'.$pic.'/180-180"')}}"/> <p>{{"zh_cn" == $lang ? $recommend->name_cn : $recommend->name}}</p> </a> </li> @endforeach </ul> </div>
.recommend_tit:after{ border-top:5px dashed #ff6e30; content: " "; width: 730px; height: 3px; display: inline-block; margin-left: 2px;}