前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2024年10月25日

七小时带你入门HTML+CSS网页设计，编写网页代码的思路(三)

上一篇文章中我分享了一段图文标签，这篇文章主要给大家详细解释一下这些代码的作用和意义，以及编写网页代码的格式与思路。

下面我贴上html代码：

<!--HTML-->
<div>
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。</p>
<p><img src="https://tpt360.com/tuimg/yan.png"></p>
</div>

作者:whsf66 , 分类:前端教程 , 浏览:15 , 评论:0

2024年10月25日

HTML学习笔记(1)（html自学笔记）

1、HTML5设计哲学，它并不是规范优先的设计，它是“妥协式”的规范。

2、HTML5对元素大小写不再严格区分，开发者可以随意使用大小写字符来定义HTML元素。

3、对于一份基本的HTML5文档而言，它总有如下结构：

<!DOCTYPE html>

<html>

作者:whsf66 , 分类:前端教程 , 浏览:14 , 评论:0

2024年10月25日

前端CSS的box-sizing属性讲解与应用场景

box-sizing是什么？

box-sizing是定义元素宽度与高度范围的属性，简单点说：当我们在开发自适应布局的时候，经常会出现DIV的边框而导致DIV自动换行。

从上图可知，当我们设置两个DIV 分别为宽度200的时候，在加上边框各自2px无法满足同一水平线对其，因此只能换行处理。

当我们将父边框body属性设置404，即包含各自DIV的两个边框1px像素时候，能满足水平对其。

现在问题来了，由于某些原因，我们就一定要求父边框400像素同时水平对其两个DIV。

作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0

2024年10月25日

HTML入门练习案例（html入门基础）

（1）熟练使用p标签加粗样式标签给文本分段
（2）熟练使用换行标签h标签加粗给标签写标题
（3）使用图像标签加图像
（4）使用锚点链接可以点击链接快速定位到页面中的某个位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- h1标签的使用 -->
<h1 id="top">猫猫种类</h1>
 <!--换行标签<br/>的使用  -->
猫猫分为<br/>
<!-- 锚点链接的<a herf="#"></a>使用 -->
<a href="#miao">妙猫猫，</a><br/>
<a href="#cry">流泪猫猫，</a><br/>
<a href="#ben">本拉豆猫猫，</a><br/>
<a href="#wei">委屈猫猫</a><br/>
<h4 id="miao"><h3>妙猫猫</h3></h4>
<p>秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙
    秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙</p>
<h4 id="cry"><h3>流泪猫猫</h3></h4>
没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没<p>人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫</p>
<img src="images/流泪猫猫.gif"width="300"/>
<h4 id="ben"><h3>本拉豆猫猫</h3></h4>
<p>哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！
   </p>
   <!-- 图像标签<img src="图像地址"/>的使用 -->
   <img src="images/本拉豆猫.jpg"width="300"/>
<h4 id="wei"><h3>委屈猫猫</h3></h4>
<p>我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？</p>
<a href="#top">返回顶部</a><br>
<a href="images/菠萝头简介.html"target="_blank">引申猫猫：菠萝头的简介和照片</a>
</body>
</html>
![本拉豆猫图片插入图 ](https://img-blog.csdnimg.cn/20201014210646633.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY3NDc5,size_16,color_FFFFFF,t_70#pic_center)

![流泪猫猫](https://img-blog.csdnimg.cn/2020101421073586.gif#pic_center)




1234567891011121314151617181920212223242526272829303132333435363738394041

作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0

2024年10月25日

Vue+CSS3制作双螺旋DNA动画:代码详解和基础知识复习

1 效果：

2 知识点：

=======

2.1 html的基础知识。

2.2 css3的基础知识。

2.3 vue的基础知识。

2.4 代码讲解非常清楚，小白看了都会。

3 html骨架：

========

3.1 代码：


	

		作者:whsf66 , 分类:前端教程 , 浏览:12 , 评论:0	






	
2024年10月25日

	
「转行测试开发-HTML」(五)---div和span、图像标签还有相对路径

	
刚刚发现，HTML第四章节没有说删除线的标签，趁着马上要12点的时候，赶快将删除线标签补上。
删除线标签使用 <del>和<s>, 不用多说，一般用的多的就是<del>
先上效果:
然后看下代码:
<!DOCTYPE html>

	

		作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0	






	
2024年10月24日

	
17 个实用的图像特效库（图片特效有哪些）

	
1.imagehover
地址：https://github.com/ciar4n/imagehover.css
imagehover.css- 纯CSS3鼠标滑过图片效果动画库，44种鼠标滑过效果

2. ImageTiltEffect
地址：https://github.com/codrops/ImageTiltEffect

	

		作者:whsf66 , 分类:前端教程 , 浏览:15 , 评论:0	






	
2024年10月24日

	
轻松搞定CSS动画特效（使用css做动画效果是如何实现的）

	
CSS动画特效
当我们在浏览一个网站的时候，总是发现一些有意思的特效，如鼠标放在文字上会跳动等等。对于CSS动画特效较差的同学和一些后端同学来实现这些功能，可能有些吃力了。
animate.css
animate.css是一个CSS动画库，他有我们常见的CSS动画。
animate.css使用方法
1.通过npm下载或者到animate.css官网或git上下载animate.css文件
2.将其引入到html页面中

	

		作者:whsf66 , 分类:前端教程 , 浏览:14 , 评论:0	






	
2024年10月24日

	
30种CSS3动画特效按钮（css3动画(简单动画的实现,如旋转等)）

	
不论是设计还前端开发，设计和制作个特效按钮，对于他们来说，是习以为常的事情，下面是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3 transition和transform属性来制作按钮边框，文本动画以及流光动画效果，各种效果都非常有创意。
演示地址：http://www.htmleaf.com/Demo/201510282718.html
使用方法

	

		作者:whsf66 , 分类:前端教程 , 浏览:12 , 评论:0	






	
2024年10月24日

	
强大的网页元素渐变特效插件库（渐变html）

	
granim.js 是一个开源 JavaScript 库，专门用于创建流畅和交互式的渐变动画。这些动画可以作为网页的背景，也可以给其他元素添加渐变动画，如按钮或滑块的视觉反馈。还可以为文字加上渐变效果，为用户带来视觉上的吸引力。

	

		作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0	





  	<<
    	<
    	788
    	789
    	790
    	791
    	792
    	793
    	794
    	795
    	796
    	797
    	>
    	>>
  

		

		






控制面板



您好，欢迎到访网站！
  查看权限










网站分类












最新留言