css技巧,css方法
CSS3技巧之形状(切角效果)
上一小节给大家分享了平行四边形的实现方法,此时我们来说一下切角效果的实现方法。
实现切角效果需要掌握的几个点包括: css渐变、background-size、条纹背景
直角切角
先实现一个简单的,比如让一个矩形,右下角切掉。实现该功能可以使用强大的渐变功能,有了渐变基础,应该不难理解。
注:background: #58a不是必须的,加上它是为了将其作为回退机制。
实现两个切角,左右下角各一个。一层渐变肯定不行,需要两层。按想法一步步实现,首先可能会这样写,想学习更多案例效果的小伙伴可以加我Q群:142991222,一起探索更多前端干货。
可以看到,效果并没有实现,原因是两层渐变都会填满整个元素,因此它们会相互覆盖。需要让它们缩小一点,使用background-size让每层渐变分别只占据整个元素的一半。
依然没有达到效果,这是因为没有添加background-repeat属性,因而每层渐变图案各自平铺了两次。
好了,现在实现了。如果要四个角的话,就要四层渐变了。
就这样一个切角效果就实现了,后还会补充更多多边形效果,大家多多支持,多多鼓励!
10个非常实用的CSS技巧
CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧。
当我们选中网页上的文字时,通常的效果是蓝底白字,其实,底色和字体颜色是可以改变的。
我们可以使用伪元素来实现这种效果:
首字下沉,是否似曾相识呢?哦,是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果,其他文字围绕在它周围。
看上去还是这么回事。
通过锚点,我们可以滚动到网页特定的位置,原始的锚点跳转是没有过渡效果的。注意滚动条:
通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。
caret-color 属性可以让我们自定义 input 框闪烁的光标,是不是很神奇鸭
给透明背景图片加背景,感觉很厉害的样子。两行 CSS 样式九搞定咯:
我们可以修改滚动条的样式,滚动条变得更加炫酷。
如果你不想让用户选中页面上的文字,就可以用这个特性了。
很多情况下都需要应用到IE盒子模型的特性,让元素的宽度、高度包含border和padding。
css常见技巧-雪碧图、背景、居中、透明度
CSS sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。
作用:
作用:background-size设置 背景图像的大小尺寸 。
一、margin和width实现水平居中
优点: 实现方法简单易懂,浏览器兼容性强;
缺点: 扩展性差,只能针对已知宽度的div,无法自适应未知项情况。
)
二、inline-block实现水平居中方法
做点: 简单易懂,扩展性强;
缺点: 需要额外处理inline-block的浏览器兼容性。
1)、opacity作用于元素以及元素内的 所有内容的透明度 ,子元素会继承父元素的 opacity 属性。
2)、rgba()只作用于元素的颜色或其背景色,后代元素不会继承透明性,只是针对自己本身有效,无法使内部的所有元素透明。
CSS技巧分享:如何用css制作横排二级下拉菜单
工具/材料
notepad++
浏览器
01
打开Notepad++,先输入个页面框架
!DOCTYPE html
html xmlns=""
hade
/hade
body
/body
02
框架好了,那么就该定义页面的title,关键词keyword,和描述description
meta charset="UTF-8" content="text/html" http-equiv="content-type"
title纯css二级导航下拉菜单/title
meta name="keyword" content="搜狗略懂"
meta name="description" content="描述"
这些内容只能在head/head中完成。
03
定义页面使用的css样式,也是需要在head里定义的。
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
navul比nav ul限定更严格,必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
--
/style
04
添加一个DIV标签,在页面中划分出一个块来,用来显示。
div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述
05
然后使用无序标签ul+样式li 来实现模块。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗问问/a/li
lia href="#"搜狗输入法/a/li
lia href="#"搜狗浏览器/a/li
lia href="#"搜狐/a/li
/ul
/div
06
放上全部的代码吧,可以参考一下啊,
!DOCTYPE html
html xmlns="" //允许你通过一个网址来识别你的标记
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="keyword" content="利用css实现下拉菜单"
meta name="description" content="搜狗略懂、css分享"
titlecss实现下拉导航栏菜单/title
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
navul比nav ul限定更严格,必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
--
/style
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗问问/a/li
lia href="#"搜狗输入法/a/li
lia href="#"搜狗浏览器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
07
如果要添加更多的菜单,只需要后边继续添加ul/li即可
特别提示
写代码过程中一定要记得换行,开头留空,否则过后找东西,连你自己都不知道写的是什么。何谈从哪里找起?
CSS入门知识-图片水平对齐技巧
CSS入门知识-图片水平对齐技巧
在CSS中,图片怎么水平对齐,有哪些技巧呢?我们一起来学习一下吧!
一、图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住,text-align一般只用在两个地方:文本水平对齐和图片水平对齐。也就是说,text-align只对文本和img标签有效,对其他标签无效。
语法:
text-align:属性值;
说明:
text-align属性取值如下表:
表1 text-align属性
!DOCTYPE html
html xmlns=""
head
title图片水平对齐/title
style type="text/css"
p
{
width:300px;
height:80px;
border:1px solid gray;
}
.p_img1{text-align:left;}
.p_img2{text-align:center;}
.p_img3{text-align:right;}
img{width:60px;height:60px;}
/style
/head
body
p class="p_img1"
img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/
/p
p class="p_img2"
img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/
/p
p class="p_img3"
img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/
/p
/body
/html
在浏览器预览效果如下:
分析:
很多人都以为设置图片水平对齐是在img标签设置,其实这是错误的。大家记住,图片是要在父元素中进行水平对齐的。在这个例子中,img元素的父元素是p,img元素是相对于p元素进行水平对齐的。因此要想对图片进行水平对齐,就要在父元素(p元素)中设置text-align属性。
;