CSS - 分享生活和学习中的点点滴滴

前端技术 2023/09/01 CSS

在设计导航栏时因为总的content宽度设定为70%,用了<ul><li>标签来排列导航内容复制代码代码如下: .meun ul{ width: 100%; height: 40px; font: bolder 18px/40px \"...

前端技术 2023/09/01 CSS

javascript和css文件中采用相对路径，其基准路径是完全不同的。 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件，则index.php即为宿主)所处位置为基准。 2.css引用...

前端技术 2023/09/01 CSS

CSS3 Shadows浏览器支持情况 text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, &g...

CSS3中的clip-path使用攻略

前端技术 2023/09/01 CSS

根据她的以往经验，这个网站的HTML和CSS是完全在她的能力范围以内，于是我帮助她完成了这个效果。显示nav被裁减的效果是一个不简单的任务，我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像，然后把它设置为一个after元素。问题是，至少要解决响应式问题，并且响应式并不...

前端技术 2023/09/01 CSS

1、【.clr{clear:both;}】，设置了clear属性的元素，其上边框会紧贴着浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置。复制代码代码如下:.divcss5{ width:400px;border:1px solid #F00;b...

CSS实现进度条和订单进度条

前端技术 2023/09/01 CSS

简单地效果图如下： CSS实现进度条： html结构： XML/HTML Code复制内容到剪贴板 <div id=\"progress\"> <span>70%</span> </div> ...

CSS3中box-shadow的用法介绍

前端技术 2023/09/01 CSS

一般我们通过box-shadow来设置盒阴影，但是有些属性我们一般没有用到，这篇文章将对box-shadow属性进行逐个分析。语法 CSS Code复制内容到剪贴板 E {box-shadow:inset x-offset y-offset blur-radius spr...

前端技术 2023/09/01 CSS

本文主要探讨点： 1.Position、Float属性的基本使用方法2.Position、Float属性对元素所造成的影响3.Position、Float属性交叉使用上面的影响4.Position、Float属性使用上的小技巧本文结构点： 1.HTML布局的基本要点（点我直接...

前端技术 2023/09/01 CSS

为了显示一个渐变而专门制作一个图片的做法是不灵活的，而且很快会成为一种不好的做法。但是遗憾的是，截至写这篇文章，可能还必须这样做，但是希望不会持续太久。多亏Firefox 和Safari/Chrome，我们现在可以使用最少的努力实现强大的渐变。在本文中，我们将展示CSS渐变的简...

前端技术 2023/09/01 CSS

几个常用 CSS 属性的简短写法精简 CSS 代码有很多种方法，但其中最常用的方法可能就是使用属性的简短形式。具有简短写法的 CSS 属性很多，但是常用的属性无外乎字体、列表、背景、边框、透明等几种，所以在此对这几种属性的简短写法做个归纳，备忘。font 属性 font 属...

关闭

我的博客