css常见效果

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.带放大镜的搜索文本框

aaarticlea/png;base64,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" alt="" />

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

<div class="header">

                <span id="hide-pop" class="headleft" style="width:15%"><span class="back"><b class="icon-back"></b></span></span>

                <span class="tbbiaoti" style="width: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="width: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:;

    margin-top:-5px;

    padding:;

}

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:;

    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:;

    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;}

css常见效果的更多相关文章

CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
常用的几个CSS前端效果
做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如bootstrap等,我们轻松的就就可以做出一些页面效果.但是掌握每一个常见效果的写法还是很重要的,下面整理出一些常见的CSS前端效果,让你更轻 ...
CSS常见布局问题整理
实现div的水平居中和垂直居中多元素水平居中实现栅格化布局 1. 实现div的水平居中和垂直居中实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来主要思路其实就是 ...
IE6中CSS常见BUG全集及解决方案——摘自网友
IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...
15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
Simptip – 使用 Sass 制作的 CSS Tooltip 效果
Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...
纯CSS手风琴效果
CSS手风琴效果主体代码如下: ...

随机推荐

精读JavaScript模式(一)
一.前言为什么读这本书? 其实做前端开发,一个需求给不同工作经验的人去做,只要完工时间不算苛刻,大家都是能实现的.功能实现虽然大致相同,但当我们回归代码去看实现方式,代码书写的美观程度,以及实现的方 ...
Unix/Linux系统管理技术手册学习笔记——shell
创建日期:2016/02/29 更新日期:2016/02/29 shell变量赋值时不能在等号两边留空白,否则shell会把变量名误认为是命令名双引号括起来的变量可以进行替换(用*和?这样的文件名匹 ...
ffplay源码分析2-数据结构
ffplay是FFmpeg工程自带的简单播放器,使用FFmpeg提供的解码器和SDL库进行视频播放.本文基于FFmpeg工程4.1版本进行分析,其中ffplay源码清单如下: https://gith ...
How to describe the wind sprial in computer system?
How to describe the wind sprial in computer system? 2017-02-21 刘崇军风螺旋线 If we want get the approval ...
zoj 2723 Semi-Prime（素筛打表+搜索优化）
题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2723 题目描述: Prime Number Definitio ...
模拟按下某快捷键：keybd_event使用方法
keybd_event是函数功能:该函数合成一次击键事件.系统可使用这种合成的击键事件来产生WM_KEYUP或WM_KEYDOWN消息. Windows提供了一个模拟键盘API函数Keybd_even ...
在VS2010中使用Git管理源代码
前文我们讲了使用TortoiseGit管理源代码,但是对于使用VS2010的朋友来说,源代码管理起来还是不怎么方便.要是直接在VS2010中能使用Git就好了,下面我们就来看看怎么在VS2010中使用 ...
[日常] Go语言圣经--示例: 并发的Clock服务习题
练习 8.1: 修改clock2来支持传入参数作为端口号,然后写一个clockwall的程序,这个程序可以同时与多个clock服务器通信,从多服务器中读取时间,并且在一个表格中一次显示所有服务传回的结 ...
CentOs 7.3下ELK日志分析系统搭建
系统环境为了安装时不出错,建议选择这两者选择一样的版本,本文全部选择5.3版本. System: Centos release 7.3 Java: openjdk version "1.8 ...
过滤器模式（Filter Pattern）
过滤器模式一.什么是过滤器模式过滤器模式(Filter Pattern),这种模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接起来.这种类型的设计模式属于结构型 ...

css常见效果

css常见效果的更多相关文章

随机推荐

热门专题