![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 90
css
新手前端王老四
一个正在前端路上跌跌撞撞的新手小白。
展开
-
CSS导航条
之前一直用div嵌套,感觉有点绕了,于是换成li来做导航。html部分:<div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> ...原创 2019-10-31 12:00:16 · 330 阅读 · 0 评论 -
animation、transition和transform动画属性详解
关于上篇博文介绍回流和重绘,我们知道了应该尽量减少回流,或是重绘代替回流来达到优化的效果。优化中又不可避免地涉及到了animation动画属性造成页面加载延迟等相关的问题,于是专门写了这么一篇博文来介绍css3中的动画属性。css中的与动画相关的属性一共有三: animation、transition和transform属性。其中animation属性和transition属性能够实现动画效...原创 2019-10-30 14:35:58 · 1403 阅读 · 0 评论 -
关于CSS 定位及z-index、overflow、vertical-align和cursor相关属性的使用
1、css定位:CSS 有三种基本的定位机制:普通流、float浮动和position定位。类型内容普通流只要不设置定位方式都默认为普通流。float浮动设置float属性position定位设置position属性接下来重点说说position定位,这是在页面设计中用得比较多的定位方式。position定位:有四种不同的定位方法。值属...原创 2019-10-28 17:32:21 · 377 阅读 · 0 评论 -
关于公司官网pc端的问题
昨天写了公司官网的主页,有了UI图,接下来就是自己去实现。当时嘴贱,提了一手自适应,后面想到代码量太大,于是呼连忙拒绝,声称下次再加。程序猿的人生可怜可悲,我只是一个实习生,在公司却拿来当web前端用,公司规模较小,只有我一个人搞web,重担自然落在我一人身上。想想上月发了350大洋的工资,属实寒心,话不多说,这可能就是命,也不吐糟了。这次的官网没有做自适应,下面来介绍其中的某些部分怎么做的...原创 2019-10-25 09:59:16 · 482 阅读 · 2 评论 -
css实现盒子上移和盒子阴影效果
emmm,今天浏览网站,看见了一个还不错的效果。鼠标经过盒子,盒子向上移,而且有阴影,看起来效果不错。话不多说,直接做。首先,我给div盒子加上了margin属性,这样盒子上移就不会出现挡住其它内容和动不了的情况。margin: 40px 0 0 40px;然后使用鼠标经过:hover属性来进行控制。我新建三个盒子,并设置浮动。 <div class="aaa">...原创 2019-09-06 13:57:51 · 4782 阅读 · 0 评论 -
css实现下拉列表
为什么要用下拉列表,因为有动态效果而且可看可不看的,我认为使用下拉列表对我们的页面有美化作用。怎么实现?首先思路就是使用display属性来进行控制,这是网页设计非常重要的属性之一。关于display属性,我们应该要知道它具体的属性值和作用。因为属性值较多,我列举常用的几个属性:属性值作用none将元素隐藏block将元素变为块级元素inline默认,元...原创 2019-09-06 14:22:27 · 6886 阅读 · 1 评论 -
鼠标经过时底部出现线条
前两天周末,有事就没能更新博客。今天我们就来说说当鼠标放置在盒子上时,底部出现一个由中间延长到两边的线条。话不多说,直接开始。首先,我来对这个功能进行分析,出现和隐藏那就需要用到display属性,关于display属性,大家可以看看我之前写的相关博客:https://blog.csdn.net/weixin_45369499/article/details/100578170,里面有相关介绍...原创 2019-09-09 09:22:44 · 926 阅读 · 0 评论 -
css实现各种三角形
话不多说,直接开干。怎么用css实现三角形?首先我们了解div盒子的boder属性及颜色透明的属性值transparent,然后就可以开始实现各种三角形了。正三角、倒三角、左三角、右三角、空心三角及直角三角。实现:创建div盒子,将宽高设为0,boder-with设置边框宽度(值要设置几十像素),再boder-style设置线条类型(使用solid,线条为实线),然后boder-color设置...原创 2019-09-24 17:34:20 · 630 阅读 · 0 评论