随笔分类 - css 常遇问题
摘要:如何通过 CSS 实现高度 height 随着宽度 width 变化而变化, 保持长宽比例不变, 且宽度是根据父元素宽度变化的 使用 :before 伪元素, 能获取到实际高度 (推荐) html: <div class="content"> </div> css: .content{ backgr
阅读全文
摘要:默认滚动条样式如下: 那如何修改呢?如下代码: <div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容
阅读全文
摘要:1. 案例 案例(1) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要:1. css 样式 /* page 1 animation */ #page-1 h1{ transform: translateY(-1200px); animation: heading var(--animate-speed) forwards ease-in; } #page-1 p { t
阅读全文
摘要: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
阅读全文
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要:1. html 结构 <h1 class="a">欢迎来到铄洋在线</h1> <h1 class="b">欢迎来到铄洋在线</h1> <h1 class="c">欢迎来到铄洋在线</h1> <h1 class="d">欢迎来到铄洋在线</h1> 2. css 样式 h1 { font-family:
阅读全文
摘要:1. html 结构 <div class="container"> <div class="box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam aspernatur il
阅读全文
摘要:1. html 结构 <label class="is-required" for="name">姓名</label> <input type="text"> <header> <h1>欢迎来到米修在线</h1> <p>Lorem ipsum dolor sit amet consectetur a
阅读全文
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要:1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要:1. css 样式 如果满足 media="screen and (max-width: 768px)" 这个条件的话 <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css"> #what
阅读全文
摘要: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
阅读全文
摘要: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>
阅读全文
摘要:在 html 里插入 满足这个条件 <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css"> 执行 moblie 里的样式 css 样式 /* nacbar */ #navbar h1{ f
阅读全文
摘要:1. 页面 html 结构 <header> <h1>欢迎来到米修在线</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi doloremque ad dolore, nam ex et. Accusamus
阅读全文