2024年10月24日
方法一
#wrap{ position:absolute; width:300px; height:200px; top:50%; left:50%; transform:translate(-50%,-50%) ; background:#009688; } 若是下面的代码，其结果就是错误的
#wrap{
width:300px;
height:200px;
margin-top:50%;
margin-left:50%;
transform:translate(-50%,-50%) ;
background:#009688;
}
2024年10月24日
注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个 <div> 元素来创建多列布局：
<html>
<head>
<style>
#header {
background-color:#1aaa11;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
color:#faaaff;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#166611;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>天华信息教育</h1>
</div>
<div id="nav" >
第一组<br>
第二组<br>
第三组<br>
</div>
<div id="section">
<h2>这是标题</h2>
<p>
这是内容
</p>
<p>
这是内容
</p>
</div>
<div id="footer">
天华信息教育
</div>
</body>
</html>
2024年10月24日
最近几年，前端经历了飞速发展，每隔几个月，就有新的技术框架产生，如果你有1年多没有接触过它，那么再上手的时候，你一定会对它感到陌生，似乎一不留神，自己就已经被无情抛弃了。
面对着js框架的飞速发展，得益于babel技术，浏览器可以很快地使用新的框架技术，vue，angular，react似乎也已经统治了好久好久。
而作为前端三剑客的css呢?似乎css3已经是很久很久的事情了，久到了我们不知道它是否还在更新，css是否还有新的技术产生。
2024年10月24日
今天在开发一个web应用时，需要在页面上增加一个空行，但我又不希望增加多余的代码，比如使用 来增加内容，也不希望使用<br />这样多余的html无素，因此我直接使用了
<div>上面增加样式来控制显示的效果。
<style>
.p_5 {padding:5px}
.m_5 {margin:5px}
2024年10月24日
在现代前端开发中，div元素和CSS的灵活使用是构建复杂而高效的Web应用的基础。
前端开发不仅仅是掌握基本的布局和样式，更要懂得如何优化性能、提高可维护性和增强用户体验。本文将分享一些高级的技术和最佳实践。
一、结构化布局与语义化
1. 从div到语义化标签
2024年10月24日
我们在网页制作中，会有许多的术语
例如：CSS、HTML、DHTML、XHTML等等。
下面开始使用DIV+CSS进行网页布局设计。
所有的设计第一步就是构思，构思好了，还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
下面，我们需要根据构思图来规划一下页面的布局，图片大致分为以下几个部分：
2024年10月24日
一、HTML 块元素
二、HTML 内联元素
2024年10月24日
CSS中最常见的块元素，便是 div，每一个都将独立为一行。而最常见的内联元素，便是 span了，每一个都默认从左到右排列连接起来。
有时候我们需要 div 的结构，但是是需要 span 的效果，如何将这个特点一起利用起来呢？
想把上图的京东·技术与数据中台，和logo为一行，初始代码如下，初始效果如上：
2024年10月24日
这个纯CSS实现的Loading特效是一个非常简单而实用的选择，它由三个圆圈横向排列，并不断闪烁。这种动画效果很适合用于页面加载过程中，为用户提供一个愉悦的等待体验。
在这个特效的设计中，使用了CSS的animation属性来实现圆圈的闪烁效果。这个特效的实现并没有用到任何JavaScript，这意味着它可以帮助提升网站的性能，同时也减少了代码的复杂性。
2024年10月24日
无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下：