HTML+CSS
辰辰北
这个作者很懒,什么都没留下…
展开
-
JS中jq实现手风琴图片展示
4张图片在一个盒子中展示,鼠标移入哪一张图片,该图片便展开显示,其他图片折叠;鼠标移出后四张图片平分黑子宽度// 手风琴// ul宽度640,鼠标移出的效果是每张图片width=160// 鼠标移入li,该liwidth=520,其他liwidth=(640-520)/3=40$('ul>li').hover(function(){ // 鼠标移入 // $(this).css('width',520).siblings().css('width',40) // 向将其他liw原创 2022-01-19 22:15:47 · 784 阅读 · 0 评论 -
JS中使用jq方法实现二级菜单的切换和隐藏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2022-01-19 20:51:54 · 1588 阅读 · 0 评论 -
JS中使用jQuery实现高亮展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2022-01-19 09:58:09 · 275 阅读 · 0 评论 -
点击小图标,展示大图标和对应title
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2022-01-19 09:35:26 · 98 阅读 · 0 评论 -
通过CSS完成禁用和点击无效的操作
img元素不对指针做出反应.list>li>.show>img{ /* img元素不对指针做出反应 */ pointer-events: none;}通过 /* 禁用 */ cursor: not-allowed;原创 2022-01-16 10:58:23 · 940 阅读 · 0 评论 -
JS中的鼠标穿透事件
img元素不对指针做出反应.list>li>.show>img{ /* img元素不对指针做出反应 */ pointer-events: none;}通过 /* 禁用 */ cursor: not-allowed;原创 2022-01-16 10:57:25 · 779 阅读 · 0 评论 -
前端HTML+CSS学习第三天
1.项目自身提供字体(注意版权)@font-face{/* 指定字体名字,可自己定义 /font-family: ‘myFont’;src: url(’./字体/ZCOOLXiaoWei-Regular.ttf’) format(“truetype”);}主体中:font-family:myFont2.图标字体(注意版权)在行内元素中若fas无法显示,可替换为,反之亦然3. / 使用伪元素在每一行前方添加一个图标 /li::before{/ f56b来自在Zeal中搜索fas对应图原创 2020-07-06 09:38:26 · 120 阅读 · 0 评论 -
前端HTML+CSS学习第二天
1.Ctrl+Shift+K 删除整行2.高度塌陷:子元素浮动后,从文档流中脱离,无法撑起父元素,导致父元素高度塌陷,父元素高度丢失后,会影响影响页面中其他元素的整体布局解决办法:启动BFCBFC特点:1.开启BFC的元素不会被父元素覆盖;2.开启BFC的元素,其子元素不会与其父元素重叠,这样在设置子元素的margin时也不会影响父元素的margin,只会在父元素的内部移动;3.开启BFC的元素可以包含浮动元素;BFC开启方式:1.设置元素浮动: float:left(副作用大。不推荐使用原创 2020-07-04 10:08:16 · 69 阅读 · 0 评论 -
前端HTML+CSS学习第一天
记录前端学习中的新知识点1.需求:h2中上边框宽度和文字保持一致解:div>h2>a{/* 为了边框和文字宽度一样,h2转换为行内块元素 /display: inline-block;height: 42px;line-height: 42px;/ 字体加粗 /font-weight:bold;font-size: 20px;color: black;/ 去除下划线 /text-decoration: none;border-top: 1px red solid;/原创 2020-07-03 08:34:17 · 95 阅读 · 0 评论