-
制作导航分隔线 使用渐变与伪元素制作 .nav li::after{ content:""; position:absolute; right:0px; top:20px; height:15px; width:1px; background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87); } /*删除第一项和最后一项导航分隔线*/ .nav li::last-child:after{ height:0px; width:0px; }查看全部
-
伪类选择器-not input:not([id="xxx"]/[type="submit"]){ }查看全部
-
制作导航分隔线 使用渐变与伪元素制作 .nav li::after{ content:""; position:absolute; right:0px; top:20px; height:15px; width:1px; background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87); } /*删除第一项和最后一项导航分隔线*/ .nav li::last-child:after{ height:0px; width:0px; }查看全部
-
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>before、after</title> <style> .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } .effect{ position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 255, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 50px rgba(255,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } </style> </head> <body> <div class="box effect"> <h3>Shadow Effect </h3> </div> </body> </html>查看全部
-
3d效果依赖于perspective perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 perspective: number|none; number:元素距离视图的距离，以像素计。 none:默认值。与 0 相同。不设置透视。 在翻转时需要三个样式 以及对应的transition配合 <li><a href="#" class="three-d"> Products <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span> </a></li> <li><a href="#"查看全部
-
在Web中插入内容 我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 (伪类和伪元素？ content配合CSS的伪类或者伪元素，一般可以做以下四件事情： 功能说明 none 不生成任何内容 attr 插入标签属性值 url 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） string 插入字符串 在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示： .clearfix:before, .clearfix:after { content:””; display:table; } .clearfix:after { clear:both; overflow:hidden; }查看全部
-
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 可以起到突出元素的作用 outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit 与border用法类似 但是多了个outline-offset定义轮廓边框便宜位置的数值 取正表轮廓边框向外偏移多少个像素 也可取负 表向内便宜多少个像素 inherit 继承父元素的outline效果查看全部
-
自由缩放属性resize 它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。 resize: none | both | horizontal | vertical | inherit none 用户不能拖动元素修改尺寸大小。 both 用户可以拖动元素，同时修改元素的宽度和高度 horizontal 用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 vertical 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 inherit 继承父元素的resize属性值查看全部
-
响应式设计的小例子 学习查看全部
-
可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈 <meta name=”viewport” content=”” /> 在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下： 另外一点，由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求查看全部
-
说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。 在Responsive布局中，可以毫无保留的丢弃： 第一， 尽量少用无关紧要的div； 第二，不要使用内联元素（inline）； 第三，尽量少用JS或flash； 第四，丢弃没用的绝对定位和浮动样式； 第五，摒弃任何冗余结构和不使用100%设置查看全部
-
媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种 link方法 <link rel="stylesheet" type="text/css" href="print.css" media="print" / @import方法 @import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入 @importurl(reset.css) screen; <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media引入媒体类型和@import有点类似也具有两方式。 （1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} } （2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>查看全部
-
布局 ---> display: flex; 方向 ---> flex-direction: row(横)||column(竖); column时。上下/左右 ---> align-items: flex-start(上)||center||flex-end;（下） row时。 上下/左右 ---> justify-content:同上 倒序 ---> row-reverse 水平垂直居中设置justify-content或者align-items为center，然后根据主轴的方向设置flex-direction为row或column。 也可以justify-content和align-items都为center 兼容加-webkit-前缀 若 （1）flex-direction:row 则用justify-content控制方向 （2）flex-direction:column 则用align-items控制方向 您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 即设置flex:值查看全部
-
p:nth-child(2n)是指p元素的父元素的第偶数个p元素，也就是p元素中的第偶数个 2n指的应该是下标把 不然不会第一个p就变查看全部
-
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 而边框的话可能会改变如果不设置box... column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> e.g:column-rule: 2px dotted green; 类似于分隔线 none：不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。 hidden：不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。 dotted：列之间的分隔线显示为圆角的矩形。圆角的半径等于分隔线宽度的一半。 dashed：列之间的分隔线显示为直角矩形组成的虚线。 solid：列之间的分隔线显示为一条笔直的直线。 double：列之间的分隔线显示为两条直线，两条直线之间有一些间隙。两条直线的宽度和间隙宽度的总和等于column-rule-width属性指定的宽度。 groove：列之间的分隔线显示为内陷浮雕效果。 ridge：列之间的分隔线显示为外凸浮雕效果。 inset：列之间的分隔线显示为内斜面效果。 outset：列之间的分隔线显示为外斜面效果。 column-rule-style属性的初始值为none。查看全部
举报
0/150
提交
取消