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手风琴效果主体代码如下: ...

随机推荐

HTTPS加密越来越流行，为何要加密？
继谷歌之后,国内最大的搜索引擎百度在2015年5月实现了全站HTTPS加密.搜狗搜索.360搜索.bing搜索.淘宝.天猫.知乎等也都实现了全站HTTPS加密,互联网即将迎来全网HTTPS加密时代. ...
Java源码阅读（不断补充）
java.util.LinkedList LinkedList是实现了List接口的双链表实现,拥有list的所有方法并且允许所有元素(包括null). 双向链表也叫双链表,是链表的一种,它的每个数据 ...
【Leetcode】292. Nim游戏
题目链接:https://leetcode-cn.com/problems/nim-game/description/ 您和您的朋友,两个人一起玩 Nim游戏:桌子上有一堆石头,每次你们轮流拿掉 1 ...
分布式理论(二)——Base 理论
前言在前文分布式理论(一) -- CAP 定理中,我们说,CAP 不可能同时满足,而分区容错是对于分布式系统而言,是必须的.最后,我们说,如果系统能够同时实现 CAP 是再好不过的了,所以出现了 ...
thinkphp 网址后台典型页面
知识点: 1.select a提交后返回选中项选中项 value是id 但是要显示name b遍历和列举两种形式 <select name="class_id" clas ...
mongdb查询操作
1.db.table.find() 查询所有信息 db.table.findOne()查询第一个信息2.db.table.find({条件},{要显示列}) db.table.find({},{_id ...
最短路（hdu2544）Dijkstra算法二
最短路 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
CSS canvas 捕捉视频video元素截图
video元素介绍: http://www.runoob.com/html/html5-video.html https://developer.mozilla.org/zh-CN/docs/Web/ ...
Stylus基本使用
介绍在学习一个 Vue.js 项目的过程中,注意到源码中样式的部分并没有用熟悉的 .css 样式文件,而是发现了代码长得和 CSS 相像的 .styl 文件.这个 .styl 以前没见过啊,你是谁? ...
iOS设备上出现的click，live，on点击失去效果
iOS设备上出现的点击事件失效,但是在Android上可以正常使用, 1.iOS设备对标签点击限制,不认为是可点击的标签,需要给要绑定点击事件的标签加上一个样式,cursor:pointer:这样就可 ...

css常见效果

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

随机推荐

热门专题