目录实现过程（完整源码在最后）：1 老样子，定义基本样式：2.定义基本标签：3.定义每个按钮的基本样式：4. 鼠标经过按钮样式改变：5.设置环绕按钮的4根线上面那条的样式：5.以此类推，设置环绕按钮的其它3根样式：6.给第一，第三个按钮设置其它颜色：完整代码：话不多，先看效果：实现过程（完整源码在最后）：1 老样子，定义基本样式： *{
......
16
0
0
2023-09-09
位置是在设计之初就会考虑的因素。人们在阅读和浏览事物时，会遵循一些特定的规律，在用户界面设计上遵循这些规律，能帮助用户更容易、更快捷地看到并理解眼前的事物。其中有两条规律和位置设计元素有关： ①当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上、左下，而右下最差。因此，左上部和上中部被称为“最佳 视域 ”。 ②第二条规律
......
92
0
0
2023-06-27
[TOC]0x00 前言简述本章节，主要介绍HTML布局与区块的元素介绍, 比如头部，中部，尾部以及行内区块与行外区块等，具体讲解如下述所示。网页布局, 对改善网站的外观非常重要,请慎重设计您的网页布局。在HTML中虽然我们可以使用table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的(表格不是布局工具)。网站布局, 大多数网站会把内
......
141
0
0
2023-05-05
使用 CSS 让你的 HTML 项目更具风格。当你编写文档时，无论是为开源项目还是技术写作项目，你都应该有两个目标：文档应该写得好，同时要易于阅读。前者通过清晰的写作技巧和技术编辑来解决。第二个目标可以通过对 HTML 文档进行一些简单的更改来解决。超文本标记语言（HTML）是互联网的支柱。自 1994 年“万维网”问世以来，所有网络浏览器都使用 HTML
......
140
0
0
2023-05-01
css的组成部分：选择器和声明css的注释：
/*这是注释*/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
&l
......
165
0
0
2023-04-16
CSS布局(一)看面试题，看到两个没听说过的布局圣杯布局、双飞翼布局。这就来学习一波CSS布局。单列布局只需要让header，footer充满整个屏幕，header的内容区、foooter的内容区，content设置一样的宽度，然后都设置 margin: 0 auto实现居中即可。<style>
html,
body {
m
......
169
0
0
2023-04-13
CSS1.css选择某一个 (CSS :first-child 选择器,CSS选择器——伪类选择器)q:请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255, 0, 0)”。<html>
<head>
<meta charset=utf-8>
......
190
0
0
2023-04-09
「学习笔记」CSS基础CSS构造块「1. HTML的局限性」HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。操作html属性不方便HTML里面添加样式带来的是无尽的臃肿和繁琐「2. CSS网页的美容师」让我们的网页更加丰富多彩，布局更加灵活自如。CSS最大的贡献：让HTML从样式中脱离，实现了HT
......
177
0
0
2023-04-06
CSS高级技巧CSS 属性书写顺序(重点):布局定位属性：display / position / float / clear / visibility / overflow自身属性：width / height / margin / padding / border / background文本属性：color / font / text-decorati
......
202
0
0
2023-04-06
0 前言#Flex布局是当下前端页面比较流行的布局之一，使垂直居中、水平居中变得尤为便捷。在日常开发中，经常可以用到，但是每次开发都要百度看一下它的一些属性细节，今天特地再进行一次系统的总结，这样以后自己就不用百度啦~~ 好的，下面开始~~~1 flex布局基本概念#我们要了解两个基本概念，分别为容器属性和项目属性。下面直接来看代码和图吧，用实战来举例子：
......
220
0
0
2023-03-18
回炉重造，css常规布局系统整理——实战开发后复盘小结#写在前面： 在了解css布局之前，我们先了解两个小概念，我认为这将对你有所帮助！ 块级元素：display:bloak；占据一行，下一个元素自动换行，如div等； 行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等； 行内块：displa
......
128
0
0
2023-03-18
rem 适配布局rem 单位rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。rem 作用于非根元素字体大小时，相对于根元素字体大小；rem 作用于根元素字体大小时，相对于其初始字体的大小。比如，根元素（html）设置 font-size = 12px;非根元素设置 width: 2rem;则换成 px 表示就是 24p
......
157
0
0
2023-03-13
Flex 布局介绍Flex 是 Flexible Box 的缩写， 用来为盒状模型提供最大的灵活性，也被称为”伸缩布局”，”弹性布局”，”伸缩盒布局”，”弹性盒布局”。任何容器都可以指定为 Flex 布局（包括行内元素） 设为 Flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效，Flex 布局可以实现垂直居中采用
......
182
0
0
2023-03-11
响应式布局原理使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。设备尺寸区间手机<768px平板[768px, 992px)桌面显示器[992px, 1200px)大桌面显示器(电脑)>=1200px响应式布局容器响应式布局需要一个父级作为布局容器，让子级元素实现变化效果原理：在不同屏幕下，通过媒体查询来改变布局容器的大小，再
......
169
0
0
2023-03-11
目录使用渐变实现网格利用渐变实现交叉虚线十字借助伪元素及 box-shadow 实现剩余符合最后最近，有网友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局：他用了 60 多个标签，而他的同学，只用了 6 个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑 DOM 的消耗
......
182
0
0
2023-02-28