2.（高级）CSS编码技巧之：相信自己的眼睛

最新推荐文章于 2023-03-16 10:55:15 发布
最新推荐文章于 2023-03-16 10:55:15 发布
阅读量249 收藏
点赞数
分类专栏： （CSS高级篇）CSS看书总结及特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/majun0007/article/details/55049343
版权

    有时候人的眼睛会产生视觉错觉，就算精确的尺寸或定位看起来却不精确，对于网页，用户体验极其重要，应以视觉为准，而不是尺寸，因为使用的是用户，一切应以用户体验为准。

举例如下：

 

    此处设置相同内边距，但看起来内边距并不相同。

解决方法：

    减小顶部和底部的内边距，效果如下：

 

声明：以上方法参考《CSS揭秘》


majun0007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css-quickstart.rar_css_site:www.pudn.com
09-24
web开发离不开css层叠样式表。此书言简意赅介绍了css技术。最常用的、最简洁的实例。希望对各位有所帮助！
2.css
qq_42743223的博客
02-12 2069
课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很.
我是如何从零开始 Web 前端自学之路的？
N____N的博客
05-29 720
从 2013 年专科毕业开始，一路跌跌撞撞走了很多弯路，做过餐厅服务员，进过工厂干过流水线，做过客服，干过电话销售可以说经历相当的“丰富”。 最后的机缘巧合下，走上了前端开发之路，作为一个非计算机专业且低学历的人来说，自学编程其实不是件容易的事情，不过庆幸的是自己坚持下来了。 目前工作还算不错，收入在目前所在的城市不算高，不算低，生活也还过得去，继续加油努力，也希望自己在今后更上一层。 从 2016 年下半年开始，我真正接触前端，到现在 2 年多的时间。开始之初，我没有任何的语言基础，完全从零的小白开
工作中使用到的单词（软件开发）_2023_0316备份
sun0322
03-16 9541
目录■Java学习汇总■常用链接■2020/03/15 （最初整理 242个单词）2020 6/28 整理2020 6/29 整理2020 7/6 整理■2020 7/23 整理■2020/10/07 以降整理■2020/11/02 以降整理■2020/12/04 以降整理■2020/12/14以降整理■2021/01/01以降整理■2021/02/22以降整理■匿名内部类，lambda表达式，JDK7新特性，等等java相关■2021/03/18以降整理Linux系统性能 相关■其他各种单词，知识（l
你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整...
11-08 1609
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于box-shadow的用法。 最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。 本文...
CSS高级技巧:圆角矩形
09-27
所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍.CSS2 还没有办法创造出曲线边框, 明显的, 仅仅方框是没办法...
CSS高级技巧:网页布局
09-27
上一篇CSS教程 文章：CSS高级技巧:文字环绕图片布局CSS至关重要的作用, CSS的设计初衷.CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现...
CSS高级技巧:图片替换
09-27
上一篇CSS教程 文章：CSS高级技巧:CSS Sprites图像替换技术有相当的用处, 特别是注重视觉的设计, 而且在一定程度上也不会影响非可视化浏览器的用户群(屏幕阅读器).本节用到的图片只有一个:经典FIR在文字外包上一组...
10.（高级）CSS形状之：梯形标签
热门推荐
MJ的博客
02-14 1万+
一、等腰梯形   方法： #o{     width: 100px;     height: 25px;     padding: .5em 1em .35em;     position: relative;     color: #fff; } #o::before{     content: "";     position: absolute;     top:
7.（高级）CSS形状之：平行四边形
MJ的博客
02-14 2901
一、平行四边形   方法一：2个HTML HTML     Click me CSS .button{transform:skew(-45deg);} .button div{transform:skew(45deg);} 方法二：伪元素 HTML Click me CSS .button::before{     content:’’;     positio
9.（高级）CSS形状之：切角效果
MJ的博客
02-14 1959
一、单切角   方法： background: #58a; background: linear-gradient(-45deg,transparent 15px,#58a 0); 二、双切角   方法： background: #58a; /*right设置切角放置在右下角*/ background: linear-gradient(-45deg,transparent 15
5.（高级）CS效果之：边框border
MJ的博客
02-13 1820
一、实现半透明边框 方法： border:10px solid hsla(0,0%,100%,.5); background:#fff; background-clip:padding-box;   二、实现多重边框 方法一：box-shadow background:yellowgreen; box-shadow:0 0 0 10px #655,0 0 0 15
8.（高级）CSS形状之：菱形图片
MJ的博客
02-14 1730
一、正方形菱形   方法： HTML      CSS #picture{     width: 400px;     transform: rotate(45deg);     overflow: hidden;     height: 400px; } #picture img{     max-width: 100%;     transform: rot
11.（高级）CSS用户体验之：扩大点击区域
MJ的博客
02-15 1693
方法：     border:10px solid transparent; /*导致按钮变大，通过background-clip修改*/          background-clip:padding-box;       border-shadow:0 0 0 1px rgba(0,0,0,.3) inset;   声明：以上方法参考《CSS揭秘》
1.（高级）CSS编码技巧之：减少重复代码
MJ的博客
02-13 1195
一、使尺寸具有关联性 举例如下： button{     padding:6px 16px;     border:1px solid #446d88;     background:#58a linear-gradient(#77a0bb,#58a);     border-radius:4px;     box-shadow: 0 1px 5px gray;     color
14（高级）CSS动画之：旋转星球
MJ的博客
02-15 1163
方法： #earth{     width: 800px;     height: 800px;     clear: both;     background:url("earth.png") center center no-repeat;     background-color:#ffbb33 ;     border-radius: 50%;     position:
13.（高级）CSS用户体验之：滚动提示
MJ的博客
02-15 836
方法： ul{     overflow: auto;     width: 10em;     height: 8em;     padding: .3em .5em;     border: 1px solid silver; /*用于挡住顶部滚动提示，并使用background-attachment: local，固定在顶部*/     background: linear-
6.（高级）CSS形状之：自适应椭圆
MJ的博客
02-14 458
一、椭圆   border-radius: 50%/50%; 分析： border-radius: width/height; 二、半椭圆   border-radius: 100% 0 0 100%/50%; 分析：   三、1/4椭圆   border-radius: 100% 0 0 0; 分析：   声明：以上方法参考《CSS揭秘》
selector = Selector(html_date) dds = selector.css('.board-wrapper dd') for dd in dds: title = dd.css('a::attr(title)').get() star = dd.css('.star::text').get().strip() releasetime = dd.css('.releasetime::text').get() score = dd.css('.score i::text').getall() score = ''.join(score) print(title,star,releasetime,score,sep='|')
最新发布
05-25
其中，`css()` 方法用于选取元素，`::attr()` 伪类用于获取元素属性，`get()` 方法用于获取元素的文本内容，`getall()` 方法用于获取多个元素的文本内容。`strip()` 方法用于去除字符串两端的空格，`join()` 方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值