奥运五环把奥运五环做成一个浮动，总是位于屏幕中央的效果。难点定位的练习 position ：fixed位于body中间的时候 left：50%；top:50%;css内部样式表的使用 style="text/css"方法使用border-radius: 50%再加上z-index设置层叠关系首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。设计须知div的作用:div是一个块级元素。它可以将html分割成独立的、不...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>Select Demo</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> BODY { BACKGROUND: #cfdfef; FONT: 12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif } #uboxst...
情人节到了，给大家来一朵高端的玫瑰花。在网上看到的一个canvas实现的玫瑰花，效果很好，但是代码被压缩过，也没有注释，看的云里雾里的。今天我教大脚用CSS来实现一朵玫瑰花。先看效果 首先我们画出一个花瓣1、画出一个长方形div，背景色设置成渐变色。2、给四个角使用圆角，底部50%，顶部35% 然后使用css的3D属性3D属性的详细请自行百度，这里不做详细介绍。从Y轴方向上俯视玫瑰花，就是多个花瓣围绕圆心组成的同心圆。如下图所...
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="author" content="monicaqin"> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name...
<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>慕课七夕主题</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style type="text/css">* {padding: 0;margin: 0;}ul,li {list-style-type: none;}#content {width: 100%;height: 100%;/* top: 20%;left: 20%; */overflow: hidden;position: absolute;}.content-wrap {position: rela...
一、css介绍1、css是什么？Cascading Style Sheets缩写，层叠样式表。样式定义如何显示HTML元素，样式通常又会存在于样式表中。2、为什么需要css？使HTML页面变得美观；将HTML页面的内容与样式分离；提高web开发的工作效率。3、css的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使页面布局更加灵活减少网页的代码量，增加网页浏览器速度，节省网络带宽运用独立页面的css,有利于网页被搜索引擎收录二、css语法css语法分...
CSS代码编写的过程中，代码数量非常庞大，许多属性会被反复使用，这样来来回回地敲打同样的属性名称会占用不少的时间。作为一名优秀的web前端人员，应当了解记忆各种属性的简写方式，用以提高自身的工作效率，缩减代码数量，增强可读性。作为一名刚接触不久的初学者，在网上搜集资料，整理了常用属性的简写模式，供大家参考。1、颜色color简写在颜色值采用16进制，且每两位的值相同，可以简写一半。1 color:#113366;简写为1 color:...
CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明: transform 从字面来看transform的释义为改变，使…变形；转换 。这里我们就可以理解为变形。那都能怎么变呢？none 表示不进行变换；rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。skew 扭曲 tra...
转载请注明： TheViper http://www.cnblogs.com/TheViper 效果要求:1.尽可能兼容更多浏览器，这里兼容到ie7,ie6不支持max-*就不考虑了。2.浏览器尺寸变化时，图片总是等比例拉伸或缩放。3.包裹图片的div也是响应式的，并且每个div的尺寸是一样的。4.图片始终保持水平垂直居中。5.图片的行列数不变，这里一直都是3*3.下面来搞定一个个要求。满足要求1意味着这里要尽量不使用高级浏览器才有的属性，比如高级浏览器居中常用的什么disp...
<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" content="ie=edge"><title>Document</title><style>* {margin: 0; padding: 0;}.clearfix{zoom:1;/*为IE6，7的兼容性设置*/}.clearfix:after {content: ‘.‘;display: block;height: 0;clear: both;visibility: hidden;}ul li {list-style: none;float: left;margin: 50...
简介目前处于学习阶段，现在虽然在Java没有什么建树，但我相信持之以恒的坚持做一件事，最终会达到自己的初期目标的。好啦，不多说，今天是Web入门的第一门，让我们一起学习前端入门之html&css吧HTML学习入门1. HTML的简介什么是HTML：HyperText Markup Language 超文本标记语言。HTML的作用：Java Web 使用Java开发网页 做网页HTML是最基础网页语言HTML的代码都是由标签所组成的2. HTML的基本格式(重点)<html><head>存放在head里面...
<!<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1,maximun-scale=1,user-scalable=no"><!--清除浮动方法一： .divcss5{border:1px solid #F00;background:#FF0;width:400px;}产生浮动.divcss5{border:1px solid #F00;background:#FF0;width:400px;height:102px;}清除浮动，给父级加高...
著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks,Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它期待的功能包括跨浏览器渐变与阴影，类似 Photoshop 的层融合效果，更一致的声明简化语法以及对条件判断的本地支持。这些期待中一部分已经包含在未来的 CSS...
最小宽度：复制代码代码如下:.min_width{ min-width:300px; /*sets max-width for IE */ _width:expression(document.body.clientWidth < 300 ? "300px" : "auto");}最大宽度复制代码代码如下:.max_width{ max-width:600px; /*sets max-width for IE */ _width:expression(document.body.clientWidth > 600 ? "600px" : "auto");}最小高度复制代码代码如下:.min_height{ min-height:200px; /* sets min-height for IE */ _height:e...
其实就是事先在网页里加入两个div框，控制显隐实现的功能。以下为实现代码（非本人原创，网上找的，我对CSS不感冒）：<!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><title>DIV CSS遮罩层</title><script language="javascript" type="text/javascript">function showDiv() {document.getElement...