<style> *{padding: 0; margin: 0;} .menu {} li { list-style-type: none; } .menu li {float: left; width: 100px; padding: 10px; margin: 5px; background-color: #ccc; cursor: pointer;} .menu li ul {display: none;} .menu li:hover ul{display: block;} .menu li ul li {clear: both; padding: 10px 0; margin: 0;}</style><ul class="menu"><li>菜单一<ul><li><a href="###">11111</a></li><li><a href="###">22222</a><...
背景颜色（background-color） CSS可以用纯色来作为背景，也可以将背景设置为透明,background相当于xhtml中的bgcolor。它的两个值： transparent（默认值，透明） color(指定的颜色，和文本颜色的设置方法相同)示例： body {background-color: black;} h1 {background-color: #00ff00;} h2 {background-color: transparent;} p {background-color: rgb(0,0,255);}背景图片（background-image） 用一张图片作...
很多人喜欢在body中加样式来控制全局字体的样式，像字体、大小、颜色等。这些写可以减少代码，其实并不然，像表单里面元素就无法继承body的字体属性，先看下效果截图:下面是BODY样式写法：<style type="text/css"><!--body { font-family: Arial, Helvetica, sans-serif; font-size:12px;}--></style>上面效果截图中表单里文本框的字面和表格字体并不是一样的效果，为什么会这样呢？是因为所有的表单元素都不继承body的字体属...
css产出sourcemap有什么用呢，可能大家要问这个问题了。请移步这里https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN在chrome中我们通过sourcemap可以直接调试less源文件文件，这是一个非常强大的功能。 下面由我为大家道来 1.在chrome中开启dev工具，开启容许CSS source maps设置2.webstorm中只要创建了less扩展名的文件，就会有提示只要你同意就会创建一个firewatchers任务，但是这个默认的...
CSS3 渐变使您能够是你的背景颜色在两个或多个颜色之间平滑过渡。早些时候，你必须使用图像实现这些效果。 然而, 通过使用CSS3渐变可以减少下载时间和带宽的使用. 此外，缩放的元素在缩放时看起来更好，因为渐变是由浏览器生成的。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。（来源于百度）数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。属性ChromeFirefoxSafariOperaIElinear-gradient26.0 10.0 -web...
构建一个 div ， class 随便命名 css 部分class 名字 {position: relative; // 相对定位是重点}class名字:before,class名字:after{position: absolute; content: " "; top: 10px; left: -16px; display: block; width: 0; height: 0; border: 8px solid rgba(255, 87, 51, 0.1); border-color: transparent rgba(255, 87, 51, 0.1) transparent transparent; z-index: 111;}class名字...
上一篇讲过css动画transform transition的语法，这一节展示自己做的几个小例子加深印象1. 线条动画效果代码：最外层div包含2个小的div : a和b. a有左右边框(高度变化)， b有上下边框（宽度变化）, 默认不显示，鼠标移上去时，a的高度和b的宽度发生变化，交叉效果<style> *{margin:0;padding:0;} .main{ width: 300px; height: 300px; background: #333; position: relative;} .a,.b{opacity: 0; position: absolute;top: 0;botto...
CSS的selector极其强大，大致分为通配符、元素、群组、关系、id及class、伪类、属性、伪对象这八种，下面将进行详细介绍：一、通配选择符 选中HTML文档中的所有标签，语法： *{ 代码块； }<!DOCTYPE html><html lang="en"><head><title></title><style>*{color:red;}</style></head><body><h1>这是h1标签</h1><h3>这是h2标签</h3><p>这是p标签</p></body></html>演示结果: 这是h1标签 这是h2标签 这是p...
Google Pagespeed，自动压缩优化JS/CSS/Image浏览：257 发布日期：2015/07/05 分类：技术分享 关键字： Nginx Appache Pagespeed 自动压缩优化JS/CSS/Image 这个周末，把服务器的Nginx升级了下，并加入了Google Pagespeed模块 效果很明显： 页面加载的多个JS、CSS会自动合并压缩处理 发现新版本的Pagespeed能很好的发现处理用户加载的第三方JS库，如jQuery 发现新版本的lazyload_images处理的很好注意：CSS代码里含有背景图片这类的...
接着是对图形移动、旋转、倾斜、放缩的处理。 -moz-transform:translateX(x deg) translateY(x deg);/*图形会沿着XY轴移动*/ -moz-transform:rotate(x deg);/*图形绕着原点旋转当然也可以改成XY轴*/ -moz-transform:skew(x deg);/*图形倾斜*/ -moz-transform-origin:0% 0%;/*改变坐标原点在图形中的位置*/ -moz-transform:scale();/*对图形放缩大于1是放大，小于1大于0是缩小，小于0会有反转的效果然后放...
<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/css">body { background: #ededed; width: 900px; margin: 30px auto; color: #999;}p { margin: 0 0 2em;}h1 { margin: 0;}a { color: #339; text-decoration: none;}a:hover { text-decoration: underline;}div { padding: 20px 0; border-bottom: solid 1px #ccc;}.button { display: inline-block; zoom: 1; *display: inline; vertical...
接触前端web开发已经一个月了，当然这里面还是有知识盲点。首先我会先总结一下我自己经常出错的地方，其次再介绍一下html5的部分用法。1、回顾知识点在使用css的时候首先要在head头文件里面加入link语句，具体如下：<head><link rel="stylesheet" type="text/css" href="链接样式表文件.css"/></head>其次我们会在css中建立一个通用css和index.css在通用css中一般会有一下几个语句：*{padding: 0;margin: 0;box-sizing: border-box...
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画三角形</title> <style> #trip{ width:0px; height:0px; border-top:50px solid white; border-right:50px solid white; border-bottom:50px solid green; border-left:50px solid white; } </style></head><body> <div id="trip"> </div></body></html> 效果如图显示: 原文：https://www.cnblogs.com/itfz/p/9901543...
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test</title><script src="jquery.1.11.0.min.js"></script><script type="text/javascript">$(function () {settime_show();$(‘#btn‘).click(function () {});});function settime_show() {setTimeout(show, 2000);}function show() {$(‘.bg‘).show();$(‘.show‘).fadeIn(‘slow‘)//$(‘.show‘).show(‘slow‘); setTimeout(hide, 4000);//$(‘.show...
效果看下图： 左右的波浪边框用CSS搞定这个效果。利用CSS radial-gradient() 函数CSS 语法：background: radial-gradient(shape size at position, start-color, ..., last-color);直接上代码如下：<div class="coupon"></div>css部分：.coupon {position: relative;width: 400px;height: 160px;margin: 100px auto;text-align: -webkit-auto;background-image: radial-gradient(circle at 1px 8px,transparent 6px,#ff9e6d 6px,#f...