慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

慕慕小欢

<!doctype html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style type="text/css"> //画上半实心圆 div.semi_circle{ height:50px; width:100px; background:green; border-radius:50px 50px 0 0;/*半径至少设置为宽度的一半*/ } //画实心全圆 div.circle{ height:100px width:100px background:green; border-radius:50px;/*半径设置为高度或宽度的一半*/ } <style> </head> <body> <div class="semi_circle"></div> <div class="circle"></div> </body> </html>

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2018-03-22
接下来看啥

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。

查看全部

0 采集收起来源：CSS3外轮廓属性
2015-03-10
接下来看啥

3.640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置
2015-03-10
接下来看啥

CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。脚本下载地址： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>

查看全部

0 采集收起来源：Responsive设计——meta标签
2018-03-22
接下来看啥

在Responsive布局中，可以毫无保留的丢弃：第一，尽量少用无关紧要的div；第二，不要使用内联元素（inline）；第三，尽量少用JS或flash；第四，丢弃没用的绝对定位和浮动样式；第五，摒弃任何冗余结构和不使用100%设置。哪些东东能帮助Responsive确定更好的布局呢？第一，使用HTML5 Doctype和相关指南；第二，重置好你的样式（reset.css）；第三，一个简单的有语义的核心布局；第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。

查看全部

0 采集收起来源：Responsive布局技巧
2015-03-10
幸福的小笨猪

text-shadow: x 水平的偏移距离 y 垂直的偏移距离 b 阴影的模糊程度，除过0其他值必须带上单位px，否则该样式不起作用 color 阴影颜色

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2015-03-10
霞_霞

@-webkit-keyframes和-webkit-animation注意加前缀。 @-webkit-keyframes changecolor{ 0%{ background: red; } 20%{ background:blue; } 40%{ background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{ background: #ccc; } } div { width: 300px; height: 200px; background: red; color:#fff; margin: 20px auto; } div:hover { -webkit-animation:changecolor 5s ease-out .2s; animation: changecolor 5s ease-out .2s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-03-10
接下来看啥

图片实现水平居中： display:flex; justify-content:center; 图片实现垂直居中： display:flex; align-items: center;

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-03-10
接下来看啥

1. W3C标准盒模型外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） 2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

查看全部

0 采集收起来源：CSS3 盒子模型
2015-03-16
霞_霞

transition 过渡参数： trasition-property:检索或设置对象中的参与过渡的属性（all,none,指定要进行过渡的CSS属性） transition-duration:设置对象过渡的持续时间 transition-timing-function:检索或设置对象中过渡的动画类型: (linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内) transition-delay:检索或设置对象延迟过渡的时间

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2018-03-22
势仔仔

HTML代码里设置readonly="readonly"如： <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> CSS代码里设置:read-only 如： textarea:read-only{ border: 1px solid #ccc;height: 50px; }

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
书墨谈谈

有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2015-03-09
书墨谈谈

odd奇数 even偶数

查看全部

0 采集收起来源：CSS3 last-of-type选择器
2015-03-09
candywxt

mark

查看全部

0 采集收起来源：制作3D旋转视频展示区
2015-03-09
candywxt

media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>

查看全部

0 采集收起来源：Responsive设计——meta标签
2018-03-22

首页上一页 1072 1073 1074 1075 1076 1077 1078 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果