学习总结——网页设计最佳方式

系统管理员 2021-09-20 15:34 277阅读 0赞

什么是网页的最佳设计方式，每个学前端可能都会这样问自己吧，时代在进步，技术在发展，没有什么是最佳的最好的，只有相对来说比较好的。我曾经读《重构——改善既有代码》时作者在书中写到：我不能告诉你你什么时候需要重构代码，我只能以我这么多年的经验给你说一些不好代码的表现，那些代码的“坏味道”。说实话，没有人知道什么才是最佳的、怎么做才是最正确的，我也不知到怎样才算是最佳网页设计，但是通过这么多天的学习我可以告诉你一些我对前端网页设计的一些感受，一些我在用的技巧。

**1.尽量让子元素撑起父元素，可以利用子元素的padding，margin等属性，width，height**

在我写网页的时候发现，设置父元素的某些属性是没有必要的，写了还不如不写好。

**2.尽量多使用相对单位，少使用固定单位（px），常用相对单位有：百分比、em、rem、vh、vw、vmin**

如果不想让你的网页一放大或缩小浏览器窗口就布局全乱，请尽量这么做，浏览器是根据屏幕刷新的，你确定不了用户屏幕的大小或分辨率，有可能是手机、平板或者一些其他低分辨率的设备上。所以屏幕既然不固定，那你为什么要把元素属性固定呢？

**3.尽量用最少的CSS属性实现效果，有些属性没必要设置尽量省略。通常子元素比父元素设置的多**

**4.父元素常用来设置布局，整体属性，子元素设置本身的效果呈现**

**5.选择器尽量精确些，不要选择到其他部分，有时候会引来意想不到的问题**

**6.尽量少用后代选择器，用子代选择器会更好些**

这个牵扯到 [CSS解析的原理][CSS]，记住子代选择器比后代选择器可以完成的功能相同但范围更小就行，效率更高。

**7.html网页结构的共享部分要使用http请求的方式获取数据源，相对路径容易出问题**

**8.尽量使用flex布局**

flex是响应式网页设计的支撑技术，也是现在网页设计的潮流，使用flex一时爽，一直flex一直爽~~~哈哈哈~

**9.不要频繁请求http，优化的地方：小图标尽量用精灵图（sprite），合并CSS文件，合并JS文件等等**

**10.网页不要使用太多太大的图片**

新手刚入坑不久，多多包涵，不妥之处请指出。

[CSS]: https://blog.csdn.net/weixin_43217942/article/details/100077471

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关学习网页设计html个人总结

![42e25e913ef7445dae08f6028f9f9b3e.bmp][] 学习网页设计html个人总结篇一　　我在网上进行的逻辑教学工作已经完成了，闲暇

亦凉/ 2024年03月17日 15:23/ 0 赞/ 83 阅读

相关学习 Linux 的最佳方式

啊，Linux——难以捉摸的、由企鹅驱动的操作系统，似乎潜伏在阴影中，对那些努力掌握其神秘方式的凡人咯咯地笑。不要害怕，勇敢的科技冒险家！今天，我们将一头扎进异想天开的 Lin

╰半橙微兮°/ 2023年09月26日 21:10/ 0 赞/ 75 阅读

相关机器学习编码方式总结

编码方式用于对值是离散型的特征的处理。这里讲一下onehot独热编码和labelencoding编码。先说一下独热编码实现方式1：pd.get\_dummies(

Dear 丶/ 2023年06月09日 12:30/ 0 赞/ 1 阅读

相关常见图片格式总结--网页设计必备

在学习PS切图时，需要将切出来的图转换为不同格式(不同格式的图片优缺点不同)，为了适应不同的需求；在这里记录下常见图片格式的不同，便于以后使用我们常见的图片格式有：j

旧城等待，/ 2022年11月28日 00:52/ 0 赞/ 301 阅读

相关搜索引擎优化网页设计：最佳实践

作为一名网页设计师，网页的设计是我们一个最直观的辨认。我们现在的生活依赖于网络，依赖于这个快速让我们互知和沟通的工具。它早已不仅仅是一个静态的页面，而是一个有思想有文化无国界

ゝ一世哀愁。/ 2022年08月27日 14:56/ 0 赞/ 252 阅读

相关 2015年网页设计最佳颜色搭配的9种选择

[![Center][]][Center 1] [2015年网页设计最佳颜色搭配的9种选择][Center 1] 还在为你的网站选用哪种色调发愁，难易选择吗？

ゝ一世哀愁。/ 2022年08月07日 05:51/ 0 赞/ 153 阅读

相关设计模式学习总结

背景后台开发到一定级别，必不能少的就是用到设计模式。有一定工作经验的开发人员，在工作中可能就会发现，很多地方的代码就在使用设计模式，而我们有时在不知不觉中就会使用到设计

忘是亡心i/ 2022年05月12日 10:58/ 0 赞/ 159 阅读

相关响应式网页设计学习笔记

一、why 随着移动技术的迅速普及，越来越多的人通过不同设备来浏览网页，为了便于不同设备的用户访问，网页经常需要针对不同设备进行不同的设计，不但费时费力，而且不同界面容易造成

水深无声/ 2022年02月26日 10:44/ 0 赞/ 282 阅读

相关学习总结——网页设计最佳方式

什么是网页的最佳设计方式，每个学前端可能都会这样问自己吧，时代在进步，技术在发展，没有什么是最佳的最好的，只有相对来说比较好的。我曾经读《重构——改善既有代码》时作者在书中写到

系统管理员/ 2021年09月20日 15:34/ 0 赞/ 278 阅读

相关网页图片等比例缩小实现方案总结以及最佳实践

开发遇到的问题我们平时开发，后台通过在线编辑器，编辑帖子，上传图片，比如ckeditor配置上传图片，是可以设置图片大小的； ![在这里插入图片描述][water

古城微笑少年丶/ 2021年07月16日 18:16/ 0 赞/ 426 阅读