CSS
关注
分享
扫一扫
#麻辣小龙虾#
路漫漫其修远兮，吾将上下而求索。
展开
-
CSS3动画效果demo
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>CSS3动画demo</title><meta name="author" content="" /><style> *{margin:0;padding:0;} .box{ position:absol原创 2017-03-27 16:17:36 · 668 阅读 · 0 评论 -
CSS两侧固定宽度高随父元素变化，中间宽度随窗口宽度变化而变化布局效果
效果如下：代码如下：原创 2018-04-07 12:37:08 · 1498 阅读 · 1 评论 -
熊猫TV全部分类页面布局实现效果
每天看直播，突然看了一下熊猫TV上的全部分类页面的布局，左边宽度固定不变，右边宽度随窗口宽度变化而变化。于是想了一下要怎么实现。原效果如下：实现原理：就是左边用fixed定位浏览器，然后右边的div定位padding-left = 左边的宽度，那么就可以实现左边固定，然后右边随窗口宽度变化而变化了。效果： <!DOCTYPE html><html lang...原创 2018-04-07 12:18:05 · 708 阅读 · 0 评论 -
大屏幕banner广告图水平居中的布局思路
在项目开发过程中，很多时候会涉及到1920以上的大图滚动广告，但是1920在小的屏幕上不会居中显示的，因为小屏幕宽度达不到1920px。就如我自己的笔记本一样，只有1366的分辨率，如图所示。但是我们又需要将大图片在各大屏幕上都可以水平居中显示，那应该怎么办呢？有人说可以通过js啊，这个是一种思路，现在还有一种更好的思路。 就是比较小的宽度（比如800px ）的父元素作为容器，设置mar...原创 2018-04-07 11:44:45 · 936 阅读 · 0 评论 -
防百度知道中心页面动画效果
最近在百度知道中心看到一个动画挺有意思的，就想了一下看怎么实现，百度原效果如下：码云地址：码云上的demohtml代码：html lang="en">head> meta charset="UTF-8"> title>baidutitle> link rel="stylesheet" href="css/baidu.css"> script sr原创 2018-01-06 14:16:04 · 332 阅读 · 1 评论 -
纯CSS实现3级导航菜单效果。
<div class="main"> <ul id="subMenu"> <li class="item01"> <span class="arrow-right"></span> <a href="#">导航1</a>原创 2017-12-15 15:41:15 · 778 阅读 · 0 评论 -
CSS 样式的 initial（默认）和 inherit（继承）以及 unset
经常会碰到，问一个 CSS 属性，例如position有多少取值。通常的回答是static、relative、absolute和fixed。当然，还有一个极少人了解的sticky。其实，除此之外， CSS 属性通常还可以设置下面几个值：initialinheritunsetrevert12345原创 2017-10-09 09:45:18 · 22615 阅读 · 2 评论 -
display:inline-block配合text-align:justify实现块级元素均匀布局
今天突然get到一个使用text-align:justify实现块级元素均匀布局。代码如下：<html> <head> <meta charset="utf-8"> <title>display:inline-block配合text-align:justify实现块级元素均匀布局</title> <style> *{ma原创 2017-08-30 17:09:52 · 1499 阅读 · 0 评论 -
table-layout属性fixed和auto的区别
定义： <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>table-layout属性fixed和auto的区别</title><meta name="author" content="" /><style>h1{font-size:16px;font-family:Arial原创 2017-08-23 11:05:55 · 14613 阅读 · 1 评论 -
CSS选择符间空格与不空格的区别。
无空格的结果：有空格的结果：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c原创 2017-08-14 10:37:57 · 1094 阅读 · 0 评论 -
css选中子元素中不是第一个元素的3种方法
第一种：使用伪类选择器:not原创 2017-07-26 23:43:17 · 61010 阅读 · 2 评论 -
CSS清除因为浮动布局导致父元素height值为0的三种方法
在使用css布局页面的时候往往会使用float布局元素，这时有可能会出现因为浮动，父元素出现高度为0的情况，如图所示 这时会根据项目需要对浮动的元素进行清除，以避免父元素出现为高度0的情况。常见的方法如下：第一种 、 在子元素里面多加一个div（或者其他带有clear:both样式的元素）原创 2017-07-26 22:59:46 · 2019 阅读 · 1 评论 -
纯CSS实现二级导航菜单效果
在项目开发过程中，二级导航菜单效果出现的频率是非常高的，但是一般情况下，很多人第一印象就是使用js，其实CSS也可以实现的，（PS ：一般能使用CSS解决的不要使用js，能用原生js的尽量不用jq（个人观点）。）效果如下： 代码如下： demo原创 2017-08-10 17:02:38 · 2648 阅读 · 1 评论 -
display：tabel-cell可以实现多列等高效果你知道吗？
定义：table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）兼容性：在项目过程中有时候会需要父元素高度随着子元素高度变化而变化，但是子元素中又不是高度全部都是固定的，高度是随着内容改变而自适应的，于是就出现了display:tabel-cell。用过table的都知道，table中的td属性高度是随着子元素的高度变化而变化，同一个tr里面的所有td高度都是一样的，这就是tabl原创 2017-07-30 16:41:22 · 930 阅读 · 0 评论 -
transform对fixed的影响
最近做项目遇到一个问题，就是为元素设置fixed属性之后发现元素竟然不是相对于窗口定位，纠结了很久，才发现原来是父元素设置了transform属性导致元素相对于父元素定位，fixed不相对窗口定位了。代码如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2018-12-23 16:44:10 · 2500 阅读 · 1 评论