慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

慕仙8654537

四角改为圆角： border-radius:10px; 阴影属性创建立体效果： box-shadow:2px 6px 0px #B0483F; 伪元素制作导航列表项分割线： .nav li:before{content:"|";position:absolute;left:0px;} 使用伪元素删除第一项导航分割线： .nav li:first-child:before{display:none;}

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2018-03-22
慕仙8654537

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 1.用逗号隔开每组 background 的缩写值； 2.如果有 size 值，需要紧跟 position 并且用 "/" 隔开； 3.如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 4.background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
慕用7077196

3D旋转视频展示区

查看全部

0 采集收起来源：制作3D旋转视频展示区
2015-07-30
迷失的小菜鸟

前缀浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera

查看全部

1 采集收起来源：什么是CSS3？
2015-07-30
慕用7077196

Responsive设计——不同设备的分辨率设置 CSS3 Meida Queries在标准设备上的运用： 1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 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) { /* 样式写在这 */ } 现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下： @media (max-width: 480px) { ... } @media (max-width: 768px) { ... } @media (min-width: 768px) and (max-width: 980px) { ... } @media (min-width: 1200px) { .. }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置
2015-07-30
慕用7077196

Responsive设计——meta标签最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。个meta标签被称为可视区域meta标签，其使用方法如下。 <meta name=”viewport” content=”” /> 在content属性中主要包括以下属性值，用来处理可视区域。在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下： <meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> 另外一点，由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看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
慕用7077196

在Responsive布局中，可以毫无保留的丢弃：第一，尽量少用无关紧要的div；第二，不要使用内联元素（inline）；第三，尽量少用JS或flash；第四，丢弃没用的绝对定位和浮动样式；第五，摒弃任何冗余结构和不使用100%设置。有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？第一，使用HTML5 Doctype和相关指南；第二，重置好你的样式（reset.css）；第三，一个简单的有语义的核心布局；第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本

查看全部

0 采集收起来源：Responsive布局技巧
2015-07-30
慕用7077196

设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。主要断点:min-width:320px 480px 640px 768px 896px 1024px

查看全部

0 采集收起来源：Responsive设计（二）
2015-07-30
慕用7077196

not关键词: 使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如： @media not print and (max-width: 1200px){样式代码} 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。 only关键词: only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如 <linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" /> 在Media Query中如果没有明确指定Media Type，那么其默认为all，如： <linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" /> 另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。 <linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" /> 上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。还有一个与众不同的时，Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀

查看全部

0 采集收起来源：Media Queries使用方法
2018-03-22
qq_伊米_1

.task { width: 300px; height: 140px; border: 1px solid #999; background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top/75% 55%, url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom/50% 40%; }

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2015-07-30
慕用7077196

display：flex 指定元素为伸缩布局 flex-direction:row（布局成一行）/column（布局成一列） align-items:flex-start/center/flex-end(设定垂直的,居上/居中/局下) justify-content:flex-start/center/flex-end(水平的居左/居中/居右)

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-07-30
gspsuccess

慢慢来吧，后面应该会讲到这一块的内容。

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2015-07-30
qq_伊米_1

text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-07-30
gspsuccess

有搞头，还是参考了一下别人的，查阅了一些资料

查看全部

0 采集收起来源：切换背景图像综合练习题
2015-07-30
慕用7077196

Flexbox布局功能主要具有以下几点：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。 .flexcontainer{ display: -webkit-flex; -webkit-flex-direction: column; } flex-direction: column（独占一行） | row（默认一行显示）; justify-content: flex-start | flex-end | center; flex-direction值为row用这个 align-items: flex-start | flex-end |center; flex-direction值为column用这个如果flex-direction值为row，即设置了justify-content：center，又设置了align-items: center，效果为水平垂直都居中

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-07-30

首页上一页 841 842 843 844 845 846 847 下一页尾页

0/150

提交

取消

开始学习

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

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