关键词：
前言
学习了网页前端中的HTML和CSS也许你的页面已经有了一定的改善。在现有的技术你的页面有了一定的雏形一些简单的效果可以展示出来，但我们为了让用户有更好的使用体验所以我们需要增加一些小技巧来让页面更加高级！
一、一个完整网页的布局方法
- 标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 - 浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局 - 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
二、增加页面布局高级感
1.定位
定位是指：将盒子定在某一位置，按照定位的方式来移动盒子。
定位的特殊性：
- 行内元素添加绝对或者固定定位，可以设置高度和宽度
- 块级元素添加绝对或者固定定位，它的高度与宽度就是按内容的大（加了定位的块级元素就不会有标准流的特性）
定位的类型：
- 相对定位——选择器position：relative；
特点：
1.目标移动的时候是相对自己原来的位置移动的
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱离标准流） - 绝对定位——选择器position：absolute；
特点：
1.如果没有父元素或者祖先元素没有定位（就是当祖先元素是标准流的话），那子元素的绝对定位是相对于浏览器进行移动。
2.a.如果有父元素、祖父元素且有定位（相对、绝对、固定定位），则相对于最近一级的有定位的父元素为参考点移动位置。
b.如果有父元素、祖元素但是父元素没有定位，而祖元素有定位，那就以祖元素为参考点移动位置。
3.绝对定位不再占有原先的位置（脱离标准流）绝对定位不占位置（下面的元素会填补） - 固定定位——选择器position：fixed；right： ；top： ；
特点：
1.以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系，不随滚动条滚动。
2.固定定位不再占有原先的位置。
3.一般使用情况：固定在版心的右侧位置
小算法：
a.让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。
b.让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。 - 父子盒子使用定位方法：子绝父相
这个方法的含义：子盒子用绝对定位，父盒子用相对定位。
代码如下（示例）：
.img
position: relative;
width: 250px;
height: 152px;
line-height: 152px;
margin-top: 30px;
display: block;
.showBox .category
position: absolute;
display: inline-block;
width: 38px;
height: 22px;
text-align: center;
line-height: 22px;
background: url('./images/label.png') no-repeat;
color: #fff;
position: absolute;
right: 8px;
top: -10px;
（效果图）
这个就是父盒子——position:revative;
这个就是子盒子——position：absolute；
2.元素的显示与隐藏
display属性
.box img
width: 500px;
display: none;
/* display 不再占有原来的位置 */
.box:hover img
display: block;
visibility属性
.box
width: 800px;
height: 800px;
background-color: pink;
text-align: center;
.box img
visibility: hidden;
/* 虽然看不到了但是还是占有位置 */
.box span
display: block;
width: 300px;
margin: 0 auto;
overflow属性
占据原来的位置
overflow: hidden;
/* 元素隐藏，但是仍占有原来的位置 */
overflow：visible；
/*不减切内容也不添加滚动发条 */
overflow：scroll；
/* 不管超出内容否总是显示滚动条 */
overflow：auto；
/* 超出自动显示滚动条，不超出不显示滚动条 */
opacity属性
占据原来的位置（它的属性相当于是给元素添加透明度当opacity：0就是透明了
.box p
width: 200px;
opacity: 0.5;
3.巧用精灵图、字体图标、CSS三角
精灵图核心原理：
将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
CSS三角页面常见应用
可以呈现出如下图的效果
价格商标显示效果
代码如下：
.box
position: relative;
width: 200px;
height: 400px;
background-color: pink;
.box span
position: absolute;
left: 190px;
top: -10px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
代码如下：
.box1
width: 0;
height: 0;
/* border-top: 100px solid #000;
border-bottom: 0px solid pink;
border-left: 0px solid blue;
border-right: 50px solid yellow;对其进行简写 */
border-color: transparent red transparent transparent;
border-style: solid;
/* 上边框要长一些 右边的边框稍小一些 其余边框为0 */
border-width: 100px 50px 0 0;
4.CSS用户页面布局样式
当鼠标点击在不同界面展现出不同的现象：
｛cursor：default｝－－小白 默认形状
｛cursor：pointer｝－－小手形状
｛cursor：move｝－－移动
｛cursor：text｝－插入文本时的样子
｛cursor：not-allowed｝－－禁止符号
当在文本框搜索栏中取消边框轮廓线：
<style>中表单元素
inputoutline:none;
textarearesize:none;
5.图片与文字之间的距离
在style中使用vertical-align：middle/bottom/top；
在网页中的图片与文字之间的对齐原理
不设置任何属性时是这种效果：
文字与图片并没有对齐
<style>
img
vertical-align: middle;
/* 使用场景：图片和文字垂直居中 */
</style>
<body>
<img src="1.jpg" alt="">hello world!
</body>
这样图片和文字就垂直居中了，这个方法还可以让图片在一个文本框内没有缝隙。
6.常见布局技巧
1.在网页中页常会出现这种图标，那他们是如何实现的呢？
*
margin: 0;
padding: 0;
.box
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
.pic
float: left;
width: 120px;
height: 60px;
margin-left: 5px;
.pic img
width: 100%;
注意：就不需要给文字添加浮动效果了，只需要给图片添加浮动效果。
2.ul li中的盒子相邻会有交叉的边所以我们需要用margin来解决。
ul li
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
3.当鼠标点击盒子时四条边能够显现出来
这种常被使用在商品显示场景
ul li
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
ul li:hover
position: relative;
border: 1px solid blue;
总结
以上就是对网页设计方面的小心思可以让你的网页页面在小细节中让用户体验更加！
web前端性能优化——如何提高页面加载速度(代码片段)
文章目录相关思维导图等下载地址前言：在同样的网络环境下，两个同样能满足你的需求的网站，一个“Duang”的一下就加载出来了，一个纠结了半天才出来，你会选择哪个？研究表明：用户最满意的... 查看详情
如何添加打印按钮或链接到你的网页(代码片段)
...件也扩展到其他媒体，例如在打印网页时。你可能想知道为什么要在网页上添加打印功能;毕竟，大多数人已经知道或可以轻松地知道如何使用浏览器的菜单打印网页。但是在某些情况下，在页面上添加打印按钮或链接不仅会使... 查看详情
前端的开始(代码片段)
HTML(HyperTextMackeupLanguage):,超文本标记语言,是结构,制作网页CSS:是衣服,用来美化网页JS:是动作,让网页动起来的.HTML:超文本标记语言html除了语义什么都没有结构: 声明部分,告诉浏览器,页面制作是使用的哪个标准.(文档第一行)<... 查看详情
小白入门之前端网页技术vue进阶(代码片段)
文章目录安装element-ui安装修改main.js修改Item.vue基础知识布局layout容器container图标icon按钮button表格table当前行scope表单form输入框input扩展:JavaScriptAPIspliceObject.assigncopyObject项目案例：商品后台管理系统界面原型安装element-ui安装... 查看详情
css入门(代码片段)
...，这是通过CSS实现的。那么什么是CSS呢？如果说，HTML是网页的"素颜"，那么CSS就 查看详情
输入url开始建立你的前端知识体系(代码片段)
大厂技术 高级前端 Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群前置内容浏览器主要进程浏览器是多进程的，主要分为：浏览器主进程：只有一个，主要控制页面的创建、销毁、... 查看详情
前端初识(代码片段)
...道的页面都可以称之为前端，比如电脑界面，手机界面，网页什么是后端幕后操作者，不直接与用户打交道学习历程html：内容，网页的骨架CSS：外观，添加样式JavaScript：动作，网页的动态效果bootstrapjQueryvue浏览器窗口输入网站... 查看详情
如何使页面交互更流畅(代码片段)
流畅性本篇是基于FDCon2019上《让你的网页更丝滑by刘博文》的复盘文。该课题也是博主感兴趣的领域,后续会结合React的Schedule与该文进行进一步整合,个人博客被动交互:animation主动交互:鼠标、键盘被动交互当前市面上的设备频率... 查看详情
选择你的阶梯：高级个人贡献者与经理
...间存在一个普遍的误解……。他们认为成为一名高级IC是同样的工作，只是薪水更高。通常，开发人员并不完全了解作为高级IC运营的工作和挑战。当然，您可能仍需要编写一些代码并实现功 查看详情
node学习1(代码片段)
...操作数据库；优化后端业务的性能；前端的主要工作绘制网页的页面（HTML）写CSS样式美化页面、写JS做网页交互（更多的是网页的特效）借助于XHR（?.get$.post）请求后端的接口；实现前后端分离开发使用前端的（框架）去完成界... 查看详情
前端工程化，你做了多少？(代码片段)
...石期时代最初的前端页面都是一些静态页面，人们看到的网页就像报纸一样。青铜时代后端为主的时代，往往页面都是后端利用一些模版引擎来完成页面；对于有大量页面的项目，前端在写页面需要构造一定的环境，比如jsp，php... 查看详情
手把手教你做一个网页(代码片段)
...入式的要学习一点前端吗？那么前端是什么？是网页是网站吗？是也不全是。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基... 查看详情
手把手教你做一个网页(代码片段)
...入式的要学习一点前端吗？那么前端是什么？是网页是网站吗？是也不全是。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基... 查看详情
正则表达式是如何让你的网页卡住的(代码片段)
概述正则表达式在我们日程的工作项目中，应该是一个经常用到的技能。在做一些字符的匹配和处理的过程中，发挥了很大的作用。我们这篇文章主要是通过一个我在工作中遇到的性能问题，来探究下正则表达式是如何影响我们... 查看详情
移动前端工程师是做什么的
...，下载速度更快。3、目的：网站重构的目的不是为了让网页更符合Web标准，重构的本质是构建一个前端 查看详情
前端基础-css高级(代码片段)
一.精灵图1.为什么需要精灵图减少服务器接收和发送请求的次数，提高页面的加载速度2.精灵图（sprites）的使用原理核心：background-position小测试：拼出自己名字二.字体图标1.优点（了解）轻量级;灵活... 查看详情
web前端开发需要学习啥知识？
...始受到重视的时间不超过5年。互联网的发展速度迅猛，网页WEB1.0到WEB2.0，再到新生的HTML5、CSS3，到现在手机、3G网络等新科技的兴起，网页也由最原先的图文为主，到现在各种各样的基于衰前端技术实现的应用、交互和富媒体的... 查看详情
前后端交互(小白教学)(代码片段)
...我们的印象中什么是前后端交互呢?我们一个后端程序员为什么要去学习前端知识?前后端交互到底是靠什么而进行关联的呢?接下来我们带着这三个问题来阅读这边文章!!!1.前后端交互所谓前后端交互,即前后端交互为前端和后端的... 查看详情