上一节中，我们学习了利用hbuilder工具，对我们的日常网页开发进行快速开发。我们可以使用像数学一样的技巧，快速生成有规律的代码。在实际企业开发中，只要能满足业务需求，一般来说都会采用快速开发的方式进行的，这样才能使得一个企业好好生存下去，因为一个企业需要很多资金的注入。
CSS clear both清除产生浮动 ，使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，就用clear样式属性即可实现。
继 精读《请停止 css-in-js 的行为》 这篇文章之后，我们又读了一篇抵制 css-in-js 的文章，虽然大部分观点都有道理，但部分存在可商榷之处，让我们分析一下这篇文章，了解 css 还做了哪些努力，以及 css-in-js 会如何发展。
==CSS 是一门语言，用于控制网页表现。==我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成：
以前做网站经常使用表格也就是Table来布局搭建网站，因为表格搭建起来方便，固定性好，虽说代码看着不友好，但也比较方便，如今的搜索引擎更新迭代，优化人工智能的时代，越来越先进，当然对网站的框架也有了更多的认识，不在像之前那样盲目了。
前几期我们讲解了HTML+CSS的基本知识点，也带着大家分析过一些案例。从简单的页面结构到页面布局的实现，再到页面的优化。我们学习到的东西挺多的，但是在实战开发中如何去应用它仍然有很多不理解的地方，所以今天这篇文章就以项目的首页制作来带着大家把之前学习过的知识点运用起来。 本文内容概要： 1 页面的开发流程 2 页面效果展示 3 项目首页的基本布局 4 课后总结 5 课后作业 1 页面的开发流程 ——>PSD图的分析 ——>基本的前期准备 ——>页面的基本布局（一级布局与二级布局） ——>针对公共模块进
无论如何，不要跳过本节。阅读本章将增进你的技能，为你的网页减肥，并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的，但是却能极大的提高网站的性能，以及设计、制作和更新网站的便利性。 在本节，你将学到如何撰写合乎逻辑的、紧凑的标记，使得你有能力将带宽流量降低50%左右，在减少服务器负担和压力的同时，减少网站的加载时间。通过去除那些表现元素，并改掉那些没有任何好处的坏习惯，我们就可以达到上述的目的。 这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的
对 Chrome 扩展功能熟悉的小伙伴，可能都有用过 Chrome 的 3D 展示页面层级关系这个功能。
虽然现在 Css Module 与 Css-in-js 更流行，但使用它们会导致过分依赖 滥用 class 做唯一定位，违背了 Css 选择器的初衷。
作者｜jaychen 原文｜https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552192&idx=1&sn=5342d6ea6d77
html翻译一下：hype text mark language 超文本标记语言
指标签和标签之间有 包含 关系（父子、爷孙都是包含），例如： <html> 标签包含了 <body> 标签。
很久都没有更新了，今天再更新一些使用的小技巧，今天给大家带来的内容是如何快速的将一行 div 元素设置到屏幕底部，今天的主要内容有
CSS 样式 具有 继承性 , 字标签 自动 继承 父标签 的 CSS 样式 , 如下标签结构中 ,
在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员：
亲爱的观众老爷们大家好～我发现我写文章都是因为工作碰到问题才写，什么探索最前沿的最讨厌了（其实是力有所不及）！言归正传，最近碰到的问题是这个：准备开发一个平台，随手写导航栏组件之时，发现层级错乱，无论如何调z-index都无法达到预想的效果，大致代码如下：
overflow: auto;/* 使用浮动时候结合使用,可以使得容器的宽高自动体现出来 */
随着现在WEB（网页）的越来越火爆，WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。 其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的，包括段落、表格、图片、标题等等，但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地，机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档，但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义，因为太多已有的内容
在DOM结构相对比较复杂,层级嵌套比较深的组件内,需要根据相对应的模块业务处理一些逻辑,该逻辑属于当前组件
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题目
Tailwind CSS 是一个受欢迎的“实用优先”的 CSS 框架，声称可以帮助你更快、更轻松地创建自定义设计。然而，并不是每个人都对 Tailwind CSS 感到满意。事实上，有很多原因让你应该避免使用它，而坚持使用纯 CSS 或其他框架。以下是你应该讨厌 Tailwind CSS 的主要原因：
看了上面的概念好像太“官方”，解释就是 DOM 是对 HTML 文档结构化的表述，后端服务器返回给浏览器渲染引擎的 HTML 文件字节流是无法直接被浏览器渲染引擎理解的，要转化为渲染器引擎可以理解的内部结构，这个结构就是 DOM。W3C 那个概念我好像还没有把它全部翻译完，“允许程序和脚本动态地访问和更新文档的内容、结构和样式”。这里其实就是DOM的作用了
网络爬虫又称网络蜘蛛、网络机器人，它是一种按照一定的规则自动浏览、检索网页信息的程序或者脚本。网络爬虫能够自动请求网页，并将所需要的数据抓取下来。通过对抓取的数据进行处理，从而提取出有价值的信息。
percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置，只需要按该圆形进度条插件提供的标准HTML结构来编写代码，就可以生成一个漂亮的百分比圆形进度条。
在前端开发的过程中，一个最繁琐的工作就是写 HTML、CSS 代码。数量繁多的标签、属性、尖括号、标签闭合等，让前端们甚是苦恼。于是，我向大家推荐 Emmet，它提供了一套非常简单的语法规则，书写起来非常爽快，然后只需要敲一个快捷键就立刻生成对应的 HTML 或 CSS 代码，极大提高了代码书写效率。
在阅读这篇文章之前，必须要同步一个观念就是：重视语义化是一个顶尖程序员的必备素养，因此很多时候你会听到别人吐槽命名太难，其实是因为他的习惯非常好，更希望找到完全契合场景的命名，这本身就是一件费脑子的事情。如果这个观点我们无法达成一致，那么本文的所有说法可能对你来说就显得比较可笑。
HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。
通常的回答是 static、relative、absolute 和 fixed 。当然，还有一个稍微生僻的 sticky 。其实，除此之外， CSS 属性通常还可以设置下面几个值：
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。
左侧固定，右侧自适应或者右侧固定在，左侧自适应是一样的。这种布局很常见，而且面试过程中也经常会问到，这里我总结的方法一共有5种。要实现这种布局，也算比较简单。我们先给出html结构：
display: contents 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 contents 这个取值基本不会用到。但是它早在 2016 年就已经得到了 Firefox 的支持。
第一部分：HTML书写规范： 1.1 HTML整体结构： 1.1.1：HTML基础设施： 文档以"<!DOCTYPE...>"首行顶格开始，推荐使用"<!DOCTYPE htlm>"； 文档必须申明编码charset，与文件本身编码保持一致，推荐<meta charset="UTF-8">； 根据页面内容和需求适当填写keywords和description；<meta name="keywords" content=""><meta name="decription" content=""> 页面titl
看目录结构清晰明了，由于“ CSS 文件分离 != CSS 作用域隔离”这样的机制，如果我们不通过一些工具或规范来解决 CSS 的作用域污染问题，会产生非预期的页面样式渲染结果。
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！ 一、👨🎓网站题目 🧑个人网页设计、🙋♂️个人简历制作、👨💼简单静态HTML个人网页作品、👨🏭个人介绍网站模板 、等网站的设计与制作。 二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS
div层、span层等html标签层重叠顺序样式z-index，平时CSS使用较少，但也会难免会碰到CSS z-index使用。
那些被遗忘的选择器 在IE6~8“统治”网络世界的时代，CSS2版本曾经推出过几种选择器，而这几种选择器由于对IE6支持程度较差，使得前端开发工程师不得不将其舍弃。而今，IE6已逝，赶紧把这些方便快捷的选择器用在日常的开发当中吧！ 伪类选择器 :first-child 子代选择器 .wrap > p 毗邻选择器 .con + p 伪类选择器 :first-child 说到:first-child，很多人会联想到:last-child，但是请务必注意：:first-child和:last-child并非“师出
通常，我们编写的HTML、CSS、JavaScript等文件，经过浏览器运行之后就会显示出页面，那他们是如何转化为页面的？这背后的原理是什么？这个过程就是浏览器的渲染进程来操作实现的。浏览器的渲染进程的主要任务就是「将静态资源转化为可视化界面：」
HTML5学堂：无论是PC还是移动端，系统自带alert样式总是让人感觉很丑陋，今天就教大家如何修改alert弹窗样式。 只能自定一个弹窗样式 首先必须明白的一点是，alert()只是一个方法，而这个方法内部是native code，这是我们无法修改的部分，而最终暴露的只有这个alert()方法名字而已，你甚至拿不到alert的属性，因此要真正意义上的做到修改alert样式是不可行的。 有了以上这个条件基础，我们能做的只有重写alert()方法，替换掉系统自带的alert()方法。 一行代码替换alert(
做网站开发的伙伴应该很清楚，一个网站从设计到开发完成，经过的步骤，除了需求功能这些不说以外，其余的就是展现给用户的视觉上的效果了。一般由美工或者说设计师设计出页面的效果图，然后再把这个设计稿通过网页的
swiper插件用于做各种动画如轮播图，滑动菜单等等，通过swiper可以快速的得到我们想要的动画效果 官网地址：https://www.swiper.com.cn/
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师，技
大概在06年的时候，我刚接触Div+Css的网站布局，那个时候大家对于标准的热情非常高涨，蓝色论坛里经常为了Table还是Div+Css而争论的热火朝天。现在，大家已经形成了共识，Table用来布局是不行的，但是网页里完全不用Table，也是不好的。
id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选 择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感 到很迷茫，不知道什么时候用id,什么时候用class,甚至随便使用。1
8 = html + css +javascript(jQuery和vue就是js封装的函数而已)
利用transform: rotate，使其沿着 X/Y/Z 轴进行 3D 旋转，从而形成帽子的大致形状。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
