《CSS3艺术:网页设计案例实战》配套资源

  • 更新时间:
  • 2374人关注
  • 点击下载

给大家带来的是《CSS3艺术:网页设计案例实战》配套资源,介绍了关于CSS3、网页设计、web前端方面的内容,本书是由人民邮电出版社出版,已被668人关注,由热心网友周弘厚提供,目前本书在web前端类综合评分为:8.1分。

配套书籍介绍

编辑推荐

丰富案例.190个前端开发实例,在实战中了解CSS3艺术设计技巧
全彩印刷.关键代码+知识重难点一目了然,学习不单调不枯燥
扫码视频.作者细致拆解实例结构,引导读者快速上手
丰富资源.演示文件+常用色卡+海量更新资源,全方位提高读者实战技能

内容简介

本书以 CSS3 版本为平台,使用大量生动、美观的实例,系统地剖析了 CSS 与视觉效果相关的重要语法。全书分为13章,第1章回顾基础知识,第2章~第10章介绍了 CSS3 的伪元素,边框,背景, 阴影,剪切、滤镜和色彩混合,变量与计数器,变换、缓动、动画等在视觉展现方面的内容,第 11 章~第13 章探讨了 CSS3 在造型创意、动画创意和文字特效创意方面的设计思路。

作者简介

张偶,拥有Web开发近20年工作经验,现为互联网公司web开发主管。曾入选 SegmentFault 社区年度榜排名前3位,亦是 CodePe社区较受欢迎的国内开发者之一。近年来实践 PBL(project-based learning)学习方法,潜心研究 CSS 艺术设计,积累了大量心得体会。

目录

第 1 章 CSS 基础知识 n
1.1 CSS 简介 n
1.2 在页面中应用CSS n
1.2.1 内联样式 n
1.2.2 style 元素 n
1.2.3 link 标记 n
1.3 常用CSS 属性一览 n
1.4 选择器 n
1.4.1 标签选择器 n
1.4.2 类选择器 n
1.4.3 后代选择器 n
1.4.4 伪类选择器 n
1.5 单位 n
1.5.1 长度 n
1.5.2 颜色 n
1.6 盒模型 n
1.6.1 内边距、边框和外边距 n
1.6.2 box-sizing n
1.7 定位 n
1.7.1 相对定位 n
1.7.2 绝对定位 n
1.8 布局 n
1.8.1 flex 布局 n
1.8.2 grid 布局 n
1.9 重叠 n
1.9.1 元素之间的重叠关系 n
1.9.2 含有子元素的容器之间的重叠关系 n
1.9.3 主元素与子元素(伪元素)之间的重叠关系 n
1.10 继承和引用 n
1.10.1 继承 n
1.10.2 引用颜色 n
1.10.3 引用尺寸 n
n
第 2 章 伪元素 n
2.1 ::before 和::after 伪元素 n
2.2 content 属性 n
2.3 灵活使用伪元素 n
2.3.1 用伪元素拼接造型 n
2.3.2 用主元素和伪元素拼接造型 n
2.3.3 用伪元素表现造型的一部分 n
2.3.4 用主元素和伪元素表现造型的3 个部分 n
2.3.5 用伪元素表现成对的元素 n
2.4 项目应用 n
2.4.1 项目一:蒸锅 n
2.4.2 项目二:怪兽 n
第3 章 边框 n
3.1 边框属性 n
3.1.1 边框样式border-style n
3.1.2 边框宽度border-width n
3.1.3 边框颜色border-color n
3.1.4 分别设置每条边框 n
3.1.5 边框圆角border-radius n
3.1.6 轮廓线outline n
3.2 描边造型 n
3.2.1 同心正方形 n
3.2.2 同心圆 n
3.2.3 圆弧 n
3.3 几何造型 n
3.3.1 圆形 n
3.3.2 半圆形 n
3.3.3 扇形 n
3.3.4 三角形 n
3.3.5 组合的花形 n
3.4 项目应用 n
3.4.1 项目一:铅笔 n
3.4.2 项目二:宇宙飞船 n
第4 章 背景 n
4.1 背景属性 n
4.1.1 背景颜色background-color n
4.1.2 背景图片background-image n
4.1.3 背景位置backgroundposition
4.1.4 背景尺寸background-size n
4.1.5 背景平铺backgroundrepeat n
4.2 线性渐变linear-gradient() n
4.2.1 多个参数值 n
4.2.2 锐利的线性渐变 n
4.2.3 线性渐变的角度 n
4.2.4 有透明度的线性渐变 n
4.3 径向渐变radial-gradient() n
4.3.1 多个参数值 n
4.3.2 锐利的径向渐变 n
4.3.3 椭圆和正圆 n
4.3.4 有透明度的径向渐变 n
4.4 项目应用 n
4.4.1 项目一:熊猫 n
4.4.2 项目二:雷达扫描 n
第5 章 阴影 n
5.1 盒阴影box-shadow n
5.1.1 外部阴影 n
5.1.2 内部阴影 n
5.1.3 多重阴影 n
5.1.4 复制自身的阴影 n
5.2 形状阴影函数drop-shadow() n
5.3 项目应用 n
5.3.1 项目一:日历 n
5.3.2 项目二:飞机舷窗 n
第6 章 剪切、滤镜和色彩混合 n
6.1 剪切clip-path n
6.1.1 矩形剪切inset() n
6.1.2 圆形剪切circle() n
6.1.3 椭圆形剪切ellipse() n
6.1.4 多边形剪切polygon() n
6.2 滤镜filter n
6.2.1 透明度滤镜opacity() n
6.2.2 模糊滤镜blur() n
6.2.3 色相滤镜hue-rotate() n
6.2.4 亮度滤镜brightness() n
6.2.5 对比度滤镜contrast() n
6.2.6 多重滤镜 n
6.3 色彩混合 n
6.3.1 multiply 模式 n
6.3.2 scree模式 n
6.3.3 difference 模式 n
6.3.4 color-dodge 模式 n
6.4 项目应用 n
6.4.1 项目一:莲花 n
6.4.2 项目二:彭罗斯三角形 n
n
第7 章 变量与计数器 n
7.1 变量 n
7.1.1 声明和引用变量 n
7.1.2 表达式 n
7.1.3 批量描述一组元素的样式 n
7.2 计数器 n
7.2.1 计数器的声明、累加和读取 n
7.2.2 计数器初始值和步长 n
7.2.3 计数器的序列值 n
7.2.4 用计数器设计一个字母表 n
7.3 项目应用 n
7.3.1 项目一:监控眼 n
7.3.2 项目二:纸鹤 n
n
第8 章 变换 n
8.1 变换函数 n
8.1.1 平移函数translate() n
8.1.2 旋转函数rotate() n
8.1.3 缩放函数scale() n
8.1.4 扭曲函数skew() n
8.2 变换原点transform-origin
8.3 多重变换 n
8.4 项目应用 n
8.4.1 项目一:炫彩旋臂 n
8.4.2 项目二:两只鹦鹉 n
n
第9 章 缓动 n
9.1 缓动属性 n
9.1.1 持续时长transitionduration
9.1.2 延时启动时长transitiondelay n
9.1.3 参与缓动的属性transitionproperty n
9.1.4 时间函数transition-timingfunction
9.2 设置恢复效果 n
9.3 令一组元素缓动 n
9.4 对元素的不同状态进行交互设计 n
9.4.1 获得焦点:focus n
9.4.2 选择选项:checked n
9.4.3 页内跳转:target n
9.5 项目应用 n
9.5.1 项目一:彩虹 n
9.5.2 项目二:两颗爱心 n
第 10 章 动画 n
10.1 动画属性 n
10.1.1 语法结构 n
10.1.2 持续时长animationduration
10.1.3 延时启动时长animationdelay n
10.1.4 时间函数animation-timingfunction
10.1.5 播放次数animation-iterationcount n
10.1.6 变化方向animationdirection
10.1.7 填充模式animation-fillmode n
10.1.8 播放状态animation-playstate n
10.1.9 多个动画效果叠加 n
10.2 关键帧@keyframes n
10.2.1 from...to... 关键帧 n
10.2.2 百分比关键帧 n
10.2.3 循环效果 n
10.2.4 静止效果 n
10.2.5 关键帧的缺点 n
10.3 不同属性的动画效果 n
10.3.1 边框动画 n
10.3.2 背景动画 n
10.3.3 阴影动画 n
10.3.4 剪切动画 n
10.3.5 变换动画 n
10.4 项目应用 n
10.4.1 项目一:乒乓球对打 n
10.4.2 项目二:徘徊的果冻怪兽 n
第 11 章 CSS 造型创意 n
11.1 螺旋形状的盘式蚊香 n
11.2 倒圆锥形状的热气球 n
11.3 逼真金属质感的笔记本电脑 n
11.4 用典型特征塑造的卓别林形象 n
第 12 章 CSS 动画创意 n
12.1 层叠起伏的海浪 n
12.2 天体运转模型 n
12.3 充满秩序美的队列变色旋转动画 n
12.4 几何光学引起的咖啡馆墙壁错觉动画 n
第 13 章 文字特效创意 n
13.1 撕纸文字 n
13.2 牛奶文字 n
13.3 闪光的霓虹文字 n
13.4 立体的阶梯文字 n
附录 CSS 色彩名称对照表

精选笔记1:jquery+CSS3实现淘宝移动网页菜单效果

1小时20分钟前回答

本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果。分享给大家供大家参考。具体如下:

这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移。难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错。相信肯定有更好的解决方法。

先来看看运行效果截图:

jquery+CSS3实现淘宝移动网页菜单效果

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-css3-taobao-phone-menu-codes/

具体代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现淘宝移动网页菜单</title>
<script src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body { background: #f5f5f5; }
ul, li,img { margin: 0; padding: 0; list-style: none; border:0;}
a { outline:none;}
.phone { width:350px; height:600px; border:#000 solid 1px; position:absolute;}
.plate { width: 281px; height: 281px; border-radius:50%; padding:6px; background:rgba(0,0,0,0.2); overflow: hidden; position: absolute; bottom:0; left:0;}
.link { width: 100%; height: 100%; position: absolute; }
.sector { width: 281px; height: 281px; overflow: hidden; background: url(images/bg.png); position: absolute; }
.sector li { position: absolute; width: 50%; height: 50%; overflow: hidden; }
.sector a { position: absolute; width: 100%; height: 100%; border-top-left-radius: 100%; line-height: 999px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); margin: -25px 0 0 45px; background: #ff4400; display:none; }
.sector li.r2 { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); margin: -26px 0 0 96px; }
.sector li.r3 { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); margin: 44px 0 0 166px; }
.sector li.r4 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); margin: 140px 0 0 140px; }
.sector li.r5 { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); margin: 166px 0 0 44px; }
.sector li.r6 { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); margin: 96px 0 0 -26px; }
.icon { position: absolute; }
.icon li { position: absolute; width: 44px; height: 37px; background: #ccc; overflow: hidden; line-height: 999px; background: url(images/icon.png); display: none; }
.icon li.r1 { margin: 37px 0 0 71px; background-position: 0 -37px; }
.icon li.r2 { margin: 37px 0 0 168px; background-position: -220px -37px;}
.icon li.r3 { margin: 122px 0 0 214px; background-position: -176px -37px;}
.icon li.r4 { margin: 204px 0 0 165px; background-position: -132px -37px; }
.icon li.r5 { margin: 208px 0 0 76px; background-position: -88px -37px; }
.icon li.r6 { margin: 120px 0 0 21px; background-position: -44px -37px;}
.home { width:138px; height:138px; overflow:hidden; line-height:999px; position:absolute; border-radius:50%; left:50%; top:50%; margin:-69px 0 0 -69px;}
.home.over a { display:block; background:#ff4400; width:125px; height:125px; border-radius:50%; margin:7px;}
.home.over a span { display:block; width:53px; height:46px; position:relative; margin:auto; top:40px;}
.menu { position:absolute; bottom:25px; left:25px;}
.menu a { display:block; width:60px; height:60px; border-radius:50%; background:#ff4400; border:#fff solid 5px; box-shadow: 0 0 0 3px rgba(200,200,200,0.3);}
.menu a span { background:url(images/icon.png) no-repeat -264px -46px; display:block; width:41px; height:31px; overflow:hidden; line-height:999px; margin:14px 0 0 9px;}
/*菜单动画*/
.plate {
 -webkit-transition:all 0.3s;
 transition:all 0.3s;
 -webkit-transform:translate(-100px,100px) scale(0,0) rotate(0);
 transform:translate(-100px,100px) scale(0,0) rotate(0);
}
.plate.open {
 -webkit-transform:translate(28px,-100px) scale(1,1) rotate(360deg);
 transform:translate(28px,-100px) scale(1,1) rotate(360deg);
}
.menu a {
 -webkit-transition:all 0.3s;
 transition:all 0.3s;
}
.menu a.open { background:rgba(200,200,200,0.5);}
</style>
</head>
<body>
<p>若动画不流畅请刷新一下页面</p>
<div class="phone">
 <div class="plate">
 <ul class="sector">
 <li class="r1"><a href="#">我的淘宝</a></li>
 <li class="r2"><a href="#">购物车</a></li>
 <li class="r3"><a href="#">搜索</a></li>
 <li class="r4"><a href="#">更多</a></li>
 <li class="r5"><a href="#">物流</a></li>
 <li class="r6"><a href="#">旺旺</a></li>
 </ul>
 <ul class="icon">
 <li class="r1">我的淘宝</li>
 <li class="r2">购物车</li>
 <li class="r3">搜索</li>
 <li class="r4">更多</li>
 <li class="r5">物流</li>
 <li class="r6">旺旺</li>
 </ul>
 <div class="home"><a href="#"><span>主页</span></a></div>
 <div class="link"><img src="images/link.png" width="100%" height="100%" usemap="#Map">
 <map name="Map" id="map">
  <area shape="poly" coords="140,67,139,1,72,21,25,68,85,107" href="#a">
  <area shape="poly" coords="196,105,256,74,213,23,141,5,142,73" href="#b">
  <area shape="poly" coords="196,106,257,75,277,132,260,208,198,174" href="#c">
  <area shape="poly" coords="195,173,258,211,214,259,144,279,141,205" href="#d">
  <area shape="poly" coords="141,203,136,279,68,256,21,208,86,174" href="#e">
  <area shape="poly" coords="84,169,18,206,2,131,22,72,83,108" href="#f">
  <area shape="circle" coords="141,140,63" href="#home">
 </map>
 </div>
 </div>
 <div class="menu">
 <a href="#taobao"><span>淘宝</span></a>
 </div>
</div>
<script>
$("#map area[shape='poly']").hover(function(){
 i = $(this).index();
 $(".sector a").eq(i).show();
 $(".icon li").eq(i).show();
},function(){
 $(".sector a").eq(i).hide();
 $(".icon li").eq(i).hide();
});
$("#map area[shape='circle']").hover(function(){
 $(".home").addClass("over");
},function(){
 $(".home").removeClass("over");
});
$(".menu a").click(function(){
 if($(this).attr("class") == "open"){
  $(this).removeClass("open");
  $(this).addClass("close");
  $(".plate").removeClass("open");
  $(".plate").addClass("close");
 }else{
  $(this).removeClass("close");
  $(this).addClass("open");
  $(".plate").removeClass("close");
  $(".plate").addClass("open");
 }
});
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

精选笔记2:jquery+CSS实现的水平布局多级网页菜单效果

16小时52分钟前回答

本文实例讲述了jquery+CSS实现的水平布局多级网页菜单效果。分享给大家供大家参考。具体如下:

这里演示的Jquery和CSS共同实现的网页常见的导航菜单,支持两级形式,蓝色风格,最多支持二级,三级可能要对代码进行改造了。本菜单属于中规中矩型,实用性比较强,适合的网站种类也是很多的,希望大家会喜欢。

运行效果截图如下:

jquery+CSS实现的水平布局多级网页菜单效果

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-css-scroll-nav-menu-style-codes/

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>蓝色带阴影超酷的css+js导航菜单代码</title>
<style>
body {margin:0px;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
#nav_wrap {width:960px;}
#nav{background:url(images/nav_bg1.gif) repeat-x bottom; height:49px; position:relative; width:950px; margin:20px auto;}
#nav .l{background:url(images/nav_l1.gif) no-repeat bottom; height:49px; width:28px; float:left}
#nav li {float:left; list-style:none;text-align:center;font-size:14px; }
#nav li .v a{width:108px;height:49px; line-height:49px; display:block; color:#FFF;float:left; font-family:Arial,Verdana,Tahoma,"宋体"; }
#nav li .v a:hover,#nav li .v .sele{background:url(images/nav_hover1.gif) no-repeat bottom;color:#fff;height:49px;line-height:49px; font-size:14px;}
#nav .kind_menu {height:30px;*height:29px;line-height:30px;vertical-align:middle; position:absolute;top:46px;*top:48px;left:70px;width:880px; text-align:left; display:none;color:#000;font-size:12px;}
#nav .kind_menu a {color:#000; float:left; text-align:center; width:90px; font-family:Arial,Verdana,Tahoma,"宋体";font-size:12px;}
#nav .kind_menu a:hover {color:#000;border-bottom:2px #222b8e solid;}
#nav .kind_menu span {font-size:10px; color:#000; line-height:30px; *line-height:26px; float:left }
</style>
<SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT>
</head>
<body >
<DIV id=nav_wrap>
<DIV id=nav>
<DIV class=l></DIV>
<UL class=c>
 <LI><SPAN class=v><A href="#" target="_blank">首页</A></SPAN>
 <DIV class=kind_menu >欢迎您访问码农之家,我们为您提供最优质的网络营销服务! </DIV></LI>
 <LI><SPAN class=v><A href="#">特惠套餐</A></SPAN>
 <DIV class=kind_menu >
 <A href="#">电信特惠套餐</A> <SPAN>|</SPAN>
 <A href="#">智能双线套餐</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">域名频道</A></SPAN>
 <DIV class=kind_menu>
 <A href="#">英文域名</A><SPAN>|</SPAN>
 <A href="#">中文域名</A><SPAN>|</SPAN>
 <A href="#">通用网址</A><SPAN>|</SPAN>
 <A href="#">域名交易</A><SPAN>|</SPAN>
 <A href="#">域名帮助</A><SPAN>|</SPAN>
 <A href="#">智能加速</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">脚本下载</A></SPAN>
 <DIV class=kind_menu >
 <A href="#">网络营销外包</A> <SPAN>|</SPAN>
 <A href="#">网页特效代码</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">网页特效</A></SPAN>
 <DIV class=kind_menu >
 <A href="#">网络外包</A> <SPAN>|</SPAN>
 <A href="#">网络营销</A> <SPAN>|</SPAN>
 <A href="#">特效代码</A> </DIV></LI>
 <LI><SPAN class=v><A href="http://www.baidu.com">百度一下</A></SPAN>
 <DIV class=kind_menu >
 <A href="#">网络外包</A> <SPAN>|</SPAN>
 <A href="#">营销外包</A> <SPAN>|</SPAN>
 <A href="#">网页特效</A> </DIV></LI>
 </UL>
</DIV><!--nav-->
</DIV><!--nav_wrap-->
<SCRIPT type=text/javascript>
 var site_url = window.location.href.toLowerCase();
 switch (true) {
  default :
   $("#nav li").attr("class","");
   $("#nav li").eq(0).attr("class","nav_lishw");
   $(".nav_lishw .v a").attr("class","sele");
   $(".nav_lishw .kind_menu").show();
 }
 $("#nav li").hover(
  function(){
   clearTimeout(setTimeout("0")-1);
   $("#nav .kind_menu").hide();
   $("#nav li .v .sele").attr("class","shutAhover");
   $(this).attr("id","nav_hover")
   $("#nav_hover .v a").attr("class","sele");
   $("#nav_hover .kind_menu").show();
  },
  function(){
   if($(this).attr("class") != "nav_lishw"){
    $("#nav_hover .v .sele").attr("class","");
    $("#nav_hover .kind_menu").hide();
   }
   $(this).attr("id","")
   $("#nav li .v .shutAhover").attr("class","sele");
   setTimeout(function(){
    $(".nav_lishw .kind_menu").show();
    $(".nav_lishw .v a").attr("class","sele");
   },50);
  }
 );
</SCRIPT>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

相关声明:

《CSS3艺术:网页设计案例实战》配套资源 下载资源由用户 马寄波 于 2021-04-30 10:52:41 分享至网盘,版权归人民邮电出版社所有。仅供想学习web前端的网友交流使用,专题参考:CSS3网页设计,web前端,

web前端相关资源

  • ASP.NET动态网页设计教程

    ASP.NET动态网页设计教程

    大小:57 MBASP.NET

    立即下载
  • 动态网页设计与制作:CSS+JavaScript

    动态网页设计与制作:CSS+JavaScript

    动态网页设计与制作:CSS+JavaScript 作者:吴以欣,陈小宁编著 出版时间:2009

    大小:19.55MB网页设计

    立即下载
  • HTML+CSS+DIV网页设计与布局

    HTML+CSS+DIV网页设计与布局

    本书主要内容包括认识网站开发、网页文字和图片、超链接、表格、多媒体、滚动字幕、列表、表单、框架、设置文本样式、设置网页背景样式、设置边框和边距样式、设置表格和列表样式、控

    大小:28.7 MB前端设计

    立即下载
  • 响应式网页设计:Bootstrap开发速成

    响应式网页设计:Bootstrap开发速成

    本书从认识响应式网页设计与Bootstrap开始,详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势,导入视觉设计与网页制作两个不同领域的专业知识,并提供120多个Bootstr

    大小:185 MB网页设计

    立即下载
  • 《PhotIompact 10中文版:数码图像编辑与网页设计实训教程》素材,习题,教案

    《PhotIompact 10中文版:数码图像编辑与网页设计实训教程》素材,习题,教案

    本书着重介绍PhotoImpact10在数码图像编辑和网页设计中的应用。本书以培养技能型人才为出发点,以实训为中心进行设计和编写,对理论知识部分有必要的叙述,每个单元都有单独的实训操作内容。本书内容主要包括数码图像知识与技术、软件基本操作、对象的编辑、图像的编辑、数码相片处理和网页制作等。 本书为中等职业学校电脑图形图像处理、网页设计课程的教材,也可以作为社会培训班的培训教材。 目录 第一部分 数码图像编辑 第1章 数码图像

    大小:233.5 MBPhotIompact

    立即下载

web前端配套笔记

10小时24分钟前回答

使用HTML+CSS+JS制作简单的网页菜单界面

写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实在太丑了,就使用这个简单方法美化一下好了。 1、HTML代码: span class="tags" span经济、金融类/span span行政、人资类/span span class="active"市场、销售类/span span电子工程IT类/span span class="active"工程类/span span生物医药类/span span物理、化学类/span span广告、传媒类/span span语言、翻译类/span/span 2、CSS代码(颜色、字体大小、间距自行调整): /* 标签样式 */.tags span { font: 12px/22px 'Microsoft Yahei',Arial,Lu……

24小时3分钟前回答

jquery修改网页背景颜色通过css方法实现

我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现。 效果图: show you code: !doctype html html head meta charset="utf-8" titlejquery test/title script src="jquery-1.11.1.min.js"/script /head body button value="white"white/button button value="red"red/button button value="green"green/button button value="yellow"yellow/button div class="show" /div script $("button").click( function() { var color = this.value; $("body").css("background-color",color); } ) /script /html 我们先根据元素名选择我们要操作的对象:button,然后使用click方法找到被点击的按钮,然后在触发的事件中获取该按钮的对应的颜色值,然后通过css()方法将该颜色值……