CSS之第五天绽放

这些都是新内容,觉得好陌生,要多练才行

1、background-origin 背景原点,必需保证背景是background-repeat为no-repeat。

如:html:<div class=”img”></div>

css:  .img{width=”300px”;

height=”250”;

padding=”50px”;

background:url(...)no-repeat;

border:50px dashed #ccc;

background-origion:content-box;

background-position:center center;

}

2、background-clip 背景的显示区域

如:html:<div class=”img”></div>

Css:将上面background-origin;替换成background-clip:padding-box;即可。

3、background-size背景尺寸>

如:html:<div class=”d1”></div>

Css:  .d1{background:url(...) no-repeat;

background-size:80px 60px;

}

4、background:背景色 背景图片 背景平铺方式 背景定位

如body{background:#EDEDED url(...) no-repeat 50% 30px;}

5、多重背景

如:html:<div class=”img”></div>

css:  .img{width:720px;

height:461px;

background:url(...) no-repeat center center/30% 30%,url(...);

}

6、list-style-type 项目符号

如: ul{list-style-type:*}

*可以是实心圆disc、空心圆circle、实心方块、不显示none、阿拉伯数字decimal、小写罗马数字lower-roman、大写罗马数字upper-roman。

7.list-style-image 自定义项目符号

如:ul{list-style-image:url(...)}

8、transform 变形样式

如:html:<div class="circle-box"></div>

CSS:

2D平移translate():

.circle-box {

width: 100p x;

height: 100px;

border-radius: 10px;

background-color: #808080;

/* 移动x,y */

/*transform: translate(100%, 100%);*/

/* 移动x */

/*transform: translateX(200%);*/

/* 移动Y */

transform: translateY(200%);

}

2D旋转 rotate():

.circle-box {

width: 100px;

height: 100px;

border-radius: 10px;

background-color: #808080;

transform-origin: 0 0;

transform: rotate(15deg);

}

2D缩放 scale():

.circle-box {

width: 100px;

height: 100px;

background: #000000;

transition: all .3s ease-in;

}

.circle-box:hover {

transform: scale(1.1, 1.1);

}

斜切扭曲 skew():

.circle-box {

width: 100px;

height: 100px;

background: #000000;

transition: all .3s ease-in;

}

.circle-box:hover {

transform: skew(10deg, 10deg);

}

3D位移translate3d():

.circle-box{

width: 80px;

height: 46px;

background-color: #e4ff00;

position:absolute;left: 473px;top:232px;

transition:all .3s ease-in;

}

.circle-box:hover{

transform:translate3d(67px,89px,156px);

}

9、过渡动画transition:

如:html:<div class="circle-box"></div>

CSS:

.circle-box {

width: 100px;

height: 100px;

background: #000000;

/*transition-property: width,height;

transition-duration: .3s;

transition-timing-function: ease-in;

transition-delay: 1s;*/

transition: all .3s ease-in 1s;

}

.circle-box:hover {

width: 200px;

height: 200px;

}

时间: 2024-10-07 06:39:09

CSS之第五天绽放的相关文章

HTML与CSS入门——第五章 使用文本块和列表

知识点: 1.在页面上对齐文本的方法 2.三种HTML列表的使用方法 3.在列表中放置列表的方法 5.1 在页面上对齐文本: 父元素内子元素文本的居中:在控制父元素的text-align:center 子元素相对于父元素的居中:在控制子元素的margin:0 auto; PS:div指的是division(分组). 5.2 三种HTML列表: <ol>...<li>:有序列表,整列表有缩进,每个列表项前有数字或者字母 <ul>...<li>:无序列表,与有序

DIV+CSS实操五:经管系网页内容模块内容添加(二)

继续接着DIV+CSS实操系列的博文添加代码:DIV+CSS实操一:经管系网页总体模块布局,DIV+CSS实操二: 经管系网页添加导航栏和友情链接栏,DIV+CSS实操三:经管系网页内容模块添加标题栏和版权信息模块和 DIV+CSS实操四:经管系网页内容模块内容添加(一).我们还是添加内容版块的内容,这一次是中间部分和右半部 分.由于中间的图片无缝滚动需要JS实现,我们后续加上. HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

读《精通css》--第五章对链接应用样式

一. 基于层叠对链接选择器进行排序: L :link     V :visited    H :hover    F :focus    A a:active 锚链接选择器:L.V.只适用于锚点. 动态选择器:H.F.A.兼容性问题考虑. 选择器的次序之所以重要是由CSS的层叠引起的,当两个选择器具有相同的特殊性时,后定义的会覆盖前面的. 二. 创建应用了样式的链接下划线: 1.简单的:加粗.加下划线.自定义下划线的样式(变成虚线) 2.奇特的:添加背景图片. 三. 使用属性选择器对外部链接应用

css颜色的五种表示方法

一.最简单.最古老的颜色类型在CSS颜色的关键词,如red blue等. 二.十六进制值,如#0000. 三.RGB: rgb(255,0,0),这是给定的三个参数表示的红色,绿色和蓝色通道的颜色值每个通道不是由两个十六进制数字表示的,而是由0到255之间的十进制数表示的. 四.HSL:该hsl( )函数接受色相.饱和度以及明度值 色调:颜色的底色调.这个值在0到360之间,表示色轮周围的角度. 饱和度:饱和度是多少?这需要一个价值从0-100%,其中0是没有颜色(它将显示为灰色),100%是全

深入理解脚本化CSS系列第五篇——动态样式

前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式 动态样式包括两种情况:一种是通过<link>元素插入外部样式表,另一种是通过<style>元素插入内部样式.下面将详细介绍这两种情况 外部样式 /*style.css里面的内容*/ .

CSS学习(五)

导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的.在我们的例子中我们将建立一个标准的HTML列表导航栏. 导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有意义: <ul> <li><a href="default.asp">Home</a></li> <l

CSS笔记(五)字体

CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母). 参考:http://www.w3school.com.cn/css/css_font.asp CSS字体系列 5种通用字体系列: ① Serif 字体 ② Sans-serif 字体 ③ Monospace 字体 ④ Cursive 字体 ⑤ Fantasy 字体 指定字体系类 p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题

[css]我要用css画幅画(五)

接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-4.html和相关的css中可以找到 demo: http://bee0060.github.io/Css-Paint/pages/sun-house-5.html 完整html如下: 1 <!DOCTYPE html> 2 <html lang="