慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

小m_

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

查看全部

0 采集收起来源：Responsive布局技巧
2016-05-08
小m_

设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。

查看全部

0 采集收起来源：Responsive设计（二）
2016-05-08
小m_

断点解决图片自适应的例子: <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" /> 对应的CSS代码： @media (min-device-width:600px){ img[data-src-600px]{ content: attr(data-src-600px,url); } } @media (min-device-width:800px){ img[data-src-800px] { content:attr(data-src-800px,url); } } 注意：这仅仅是解决响应式图片自适应的一种思路，但这种方案仅仅适配的断点较少。并不太实用.

查看全部

0 采集收起来源：Responsive设计（一）
2018-03-22
小m_

响应式设计弹性图片实现方法： img {max-width:100%;}

查看全部

0 采集收起来源：Responsive设计（一）
2016-05-08
小m_

响应式设计需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。

查看全部

0 采集收起来源：Responsive设计（一）
2016-05-08
小m_

media queries 媒体类型的引用方法有多种，常见的有：link标签、@import和CSS3新增的@media. 举例： link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> @import方法 @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media方法 @media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。（1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} } （2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>

查看全部

0 采集收起来源：media queries——媒体类型（二）
2018-03-22
Amy1234567

三角形： h1:after{ content:""; width:0; height:0; overflow:hidden; border-left:50px solid transparent; border-right:50px solid transparent; border-top:red 45px solid; }

查看全部

0 采集收起来源：CSS生成内容
2018-03-22
Amy1234567

弹性盒子(左右用box-flex 中间用width)： .content{ display:-webkit-box; } .left{ -webkit-box-flex:3; } .right{ -webkit-box-flex:4 } .mid{ width:500px; } <div class="content"> <div class="left"></div> <div class="mid"></div> <div class="right"></div> </div>

查看全部

0 采集收起来源：CSS3外轮廓属性
2018-03-22
Amy1234567

自由缩放属性resize 取值both //x和y方向同时改变 horizontal x方向 vertical 垂直

查看全部

0 采集收起来源：自由缩放属性resize
2016-05-08
何弃疗兄

四个半径值分别是左上角、右上角、右下角和左下角，顺时针

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-05-08
Amy1234567

@media screen and (max-width:980px)and (min-width:480px){}

查看全部

0 采集收起来源：Media Queries使用方法
2016-05-08
慕粉3166269

background-image:linear-gradient(to left渐变方向,颜色，颜色；可以多个颜色)； 0deg = to top =从下到上渐变 90deg = to right =从左到右渐变 180deg = to bottom =从上到下渐变 270deg = to left =从右到左渐变 to top left =右下角到左上角 to top right=左下角到右上角

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-05-08
weibo_大超_这不可能o口o_0

语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-05-08
UFO2015

:disabled选择器 “:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2016-05-08
UFO2015

:enabled选择器在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 div { margin: 30px; } input[type="text"]:enabled{ border: 1px solid #0f0; box-shadow: 0 0 5px #f36; background: #0f0; } input[type="text"]:disabled{ box-shadow: none; background: #f00; }

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22

首页上一页 535 536 537 538 539 540 541 下一页尾页

0/150

提交

取消

开始学习

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

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