.font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover { color: blue } .transform * { } .transform em:hover { } .transform span:hover { } .background { width: 200px; height: 50px } .background:hover { background

.col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小,内外边距等可参看 标注图(点击查看) 页面宽度固定(定宽) 任务注意事项 只需要完成HTML,CSS代码编写,不需要写JavaScript 设计稿中的图片.文案均可自行设定 在Chrome中完美实现符合标注中的各项说明 有能力的同学可以尝试跨浏览器的兼容性 有能力的同学可以在实现一遍后尝试用less

实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 figure 元素时,背景元素产生变大效果,前景元素产生变大并向上移动效果,从而从视觉上实现弹出效果. 背景元素 figure::before 前景元素 figure img 1. 使用 overflow: hidden 方式 主体元素的 html 结构由一个 figure 元素包裹的 img 元素构成

在进行DivCSS布局时,需要对文本进行控制,向大家介绍一下,CSS中控制换行的四种属性.一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果.语法: white-space : normal | pre | nowrap 取值: normal: 默认值.默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行 pre: 换行和其他空白字符都将受到保护.这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mod

做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下,用的是max-width.min-width子元素的宽度设置为不同的百分比,模拟栅格的12列.把100划分12份,用浮动宽度超出会自动换行,下面是段代码,以后会认真学习bootstrap. <style type="text/css"> #container1{min-wid

之前以为可以使用Linux自带的工具模拟控制网络时延,所以上网找了一些资料.后来发现,找到的资料目前只支持在一个网卡上模拟发送报文的时延,而不能设置有差别的网络时延,或者说当要模拟的向A发送的时延与要模拟的向B发送的时延不一致时,Linux的tc功能就无能为力了.记录一下在网上查到的有用的资料: TC带宽管理规则排版最好的链接:http://www.tuicool.com/articles/7zYzey TC命令的man手册:http://wenku.baidu.com/link?url=o0C

css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appendChild css3旋转: transform:rotate(30deg); css3改变旋转中心点: transform-origin:0 0; 获取当前时间, 把时间数字转换为度数 <!DOCTYPE html>  <html lang="en">  <

css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-space: nowrap; font-weight:normal; margin-left:-20px; }

首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见的作法是用图片的方式来处理,还有就是用vml来画对角线,能不能用html+css方式来实现呢?答案是肯定的,下面我们来摸拟一个表格对角线. 原理: 用边框线来摸拟斜线,我们知道,如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线.知道了这个原理,我们就可以用b

首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见的作法是用图片的方式来处理,还有就是用vml来画对角线,能不能用html+css方式来实现呢?答案是肯定的,下面我们来摸拟一个表格对角线. 原理: 用边框线来摸拟斜线,我们知道,如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线.知道了这个原理,我们就可以用b

网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="window.print()">打印</a> 主要页面代码:查询nation表 <body> <table border="1" cellspacing="0" cellpadding="0"> <

CSS文本控制 文本基础设置 字体设置 font-family可定义多个字体,系统会以从左至右的顺序进行查找,如左侧字体不存在,就往右侧找. 为什么要这么做呢?如果你只用了一种字体,而恰好人家电脑上没装,那么对不起了,他的显示肯定是有问题的. <style> div { /* 多设置几种字体属性 font-family 文字家族,就是字体的意思 */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } </sty

one more time one more chance. 一歩重头学前端, css入门. 学习一些 CSS 文本控制的属性,防止做傻事.请大家对照下面列表检验下: 会的.不会的.似懂非懂的.笔者是一个也不会. white-space text-overflow: ellipsis; word-break, word-wrap text-align: justify text-decoration text-transform text-indent letter-spacing word-s

模拟京东案例准备: 截图(效果图PSD文件) 搭建项目环境     (结构样式行为分离)   HTML 核心文件     index.html CSS       控制样式 base.css(基础样式)       global.css(全局样式) Image      放图片的文件夹 JS     音频视频..... 站点 站点 == 项目 == 项目文件夹 == (根目录) 引入图标 下载 京东: "http://www.jd.com/favicon.ico" www.jd.com

1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; }

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>幻灯片效果</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ padding: 50px 10%; } .slider .main,.slide

我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1.我们希望这段帧动画只循环播放所指定的次数. 2.我们希望帧动画结束的瞬间执行某种操作.这个在游戏中大量存在. 3.我们想自如的控制播放的速度. 4.我们想尽可能让这个帧动画的实现方式兼容大部分浏览器,在移动和pc端都能运行良好. 有了以上四点要求,那就不是gif图片所能完成的了.下面,我们先探讨有

html: @*输入框*@ <div> <input type="text" style="width: 85%; height: 34px;" onkeyup="InputChange(this)" id="txtInput"> </div> @*模拟下拉框*@ <div class="divselect" id="dpSelect">

$("#quickSqlDiv a").css({"color":"red"}); $("#course a").css({"color":"#000"}); 使用之后原本的 a标签hover不起作用了 div#navsecond div ul li a:hover { text-decoration: underline; color: #ff0000 !important; back

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{margin: 0; padding: 0;font-family:arial;} .messdiv{position: relative;width: 150px;