• HTML+CSS制作导航条

    今天无意中看到一个网站的导航条,觉得效果还不错,而且制作也很简单,就自己试着用HTML+CSS做了个一模一样的,下面就把导航条的制作方法及步骤分享给大家!导航按钮效果图代码如下:<!DOCTYPE html><html> <head> <meta c 2024-12-13 09:05:56
  • CSS 带搜索导航栏

    本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。以下实例均是响应式的。可以先看下效果图:创建一个搜索栏HTML 代码<div class="topnav"> <a class="active" href="#home">主页</a> <a href= 2024-12-13 08:51:15
  • 前端面试题之如何理解css flexbox(弹性盒子)

    很多同学可能对弹性盒子并不是很熟悉,还对它有一些畏难情绪。但我以往教过的学生,只要会用了弹性盒,就对它爱不释手了。那今天就带大家来揭秘一下 看着有难度,但实际超白痴的flexbox。 首先大家要知道 弹性盒是 CSS3的一种 新的布局模式。两个关键词:css3和布局。看到css3 就应该马上想到兼 2024-12-13 08:36:02
  • CSS3中计算属性calc()的使用说明

    平时在制作页面的时候,总会碰到有的元素是100%的宽度。众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添 2024-12-12 10:20:23
  • Web前端人员应该知道的3种css前端动画效果的实现方式

    合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥。那么Web前端人员是否了解各种前端动画效果实现方式的异同,具体应用中又是如何实现的呢?下面就让我们一起来看一看吧~一、JavaScript 动画因为没有其 2024-12-12 09:35:34
  • CSS3常用的四个动画特效

    今天小编在这里给各位介绍一下CSS3常用的四个动画效果。css第一个动画效果:360°旋转 修改rotate的值 * {transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:Al 2024-12-12 09:19:49
  • 去T3出行面试前端问css:父元素里放二个子元素的布局方式有哪些

    先看下问题的截图:大家可以先想一想下面是我总结的方法:方法一:子元素浮动float:left;(考虑脱离文档流后后面元素不易控制,故不首选)方法二:子元素:display: inline-block; --->会有空隙原因:因为行内元素或者行内块元素换行后之间会有一个间隙只要换行会有5px的间 2024-12-12 08:04:19
  • HTML+CSS:三种css的引入方式,内链式、嵌入式、外部式

    上篇文章我们简单介绍了css的概念以及语法,本篇文章我们将为大家介绍下css的三种引入方式。(1)内链式引入内链式css样式表就是把css代码直接写在现有的HTML标签中,具体的使用方法如下面所示:<div style="color:red">设置文字的颜色为红色</div> 2024-12-11 10:46:31
  • 前端技术分享:Css定位(css包含块)

    在css众多属性中,定位position属性,必须有姓名,而且占据了比较重要的地位,比如:二级,三级导航效果,鼠标悬停的一些动态效果,悬停栏,侧边导航栏定位效果等等都是需要定位实现的。但是很多小伙伴,刚接触定位的时候,理解上会有一些困惑,使用上容易出bug,那我们今天就来聊一下定位position属 2024-12-11 10:35:03
  • CSS3 animation-delay 属性

    实例等待两秒,然后开始动画:animation-delay:2s;-webkit-animation-delay:2s; /* Safari 和 Chrome */在此页底部有更多的例子。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 2024-12-11 10:19:50