随笔分类 -  css 常遇问题

摘要:如何通过 CSS 实现高度 height 随着宽度 width 变化而变化, 保持长宽比例不变, 且宽度是根据父元素宽度变化的 使用 :before 伪元素, 能获取到实际高度 (推荐) html: <div class="content"> </div> css: .content{ backgr 阅读全文
posted @ 2022-09-29 17:55 会前端的洋 阅读(1801) 评论(0) 推荐(0) 编辑
摘要:默认滚动条样式如下: 那如何修改呢?如下代码: <div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容 阅读全文
posted @ 2022-07-20 17:50 会前端的洋 阅读(2525) 评论(0) 推荐(0) 编辑
摘要:1. 案例 案例(1) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-03-27 14:27 会前端的洋 阅读(155) 评论(0) 推荐(0) 编辑
摘要:1. css 样式 /* page 1 animation */ #page-1 h1{ transform: translateY(-1200px); animation: heading var(--animate-speed) forwards ease-in; } #page-1 p { t 阅读全文
posted @ 2022-03-26 17:11 会前端的洋 阅读(26) 评论(0) 推荐(0) 编辑
摘要:1. html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c 阅读全文
posted @ 2022-03-26 11:43 会前端的洋 阅读(28) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-03-26 11:28 会前端的洋 阅读(102) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-03-26 11:02 会前端的洋 阅读(38) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-03-26 10:10 会前端的洋 阅读(22) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-03-26 09:59 会前端的洋 阅读(36) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-03-26 09:51 会前端的洋 阅读(48) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <h1 class="a">欢迎来到铄洋在线</h1> <h1 class="b">欢迎来到铄洋在线</h1> <h1 class="c">欢迎来到铄洋在线</h1> <h1 class="d">欢迎来到铄洋在线</h1> 2. css 样式 h1 { font-family: 阅读全文
posted @ 2022-03-26 09:07 会前端的洋 阅读(130) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <div class="container"> <div class="box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam aspernatur il 阅读全文
posted @ 2022-03-26 09:00 会前端的洋 阅读(152) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <label class="is-required" for="name">姓名</label> <input type="text"> <header> <h1>欢迎来到米修在线</h1> <p>Lorem ipsum dolor sit amet consectetur a 阅读全文
posted @ 2022-03-26 08:54 会前端的洋 阅读(35) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-03-25 20:03 会前端的洋 阅读(37) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-03-25 19:51 会前端的洋 阅读(124) 评论(0) 推荐(0) 编辑
摘要:1. css 样式 如果满足 media="screen and (max-width: 768px)" 这个条件的话 <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css"> #what 阅读全文
posted @ 2022-03-25 19:26 会前端的洋 阅读(61) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <div id="container"> <div class="item item-1"> <h3>Item 1</h3> </div> <div class="item item-2"> <h3>Item 2</h3> </div> <div class="item ite 阅读全文
posted @ 2022-03-25 14:23 会前端的洋 阅读(509) 评论(0) 推荐(0) 编辑
摘要:1. html 结构 <div id="container"> <div class="item"> <h3>Item 1</h3> </div> <div class="item"> <h3>Item 2</h3> </div> <div class="item"> <h3>Item 3</h3> 阅读全文
posted @ 2022-03-25 13:31 会前端的洋 阅读(60) 评论(0) 推荐(0) 编辑
摘要:在 html 里插入 满足这个条件 <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css"> 执行 moblie 里的样式 css 样式 /* nacbar */ #navbar h1{ f 阅读全文
posted @ 2022-03-25 11:56 会前端的洋 阅读(35) 评论(0) 推荐(0) 编辑
摘要:1. 页面 html 结构 <header> <h1>欢迎来到米修在线</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi doloremque ad dolore, nam ex et. Accusamus 阅读全文
posted @ 2022-03-25 11:17 会前端的洋 阅读(704) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示