自定义属性
Posted wqddmghsdfh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义属性相关的知识，希望对你有一定的参考价值。
1. html 结构
<!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>CSS Variables</title> </head> <body> <header> <h1>欢迎来到铄洋在线</h1> </header> <div class="container"> <div class="box box-1"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cupiditate fugiat! Quas, ea reiciendis fuga sequi voluptatum dolorem! Fuga vel laborum dolore officia quaerat maxime? Ipsum libero fugiat exercitationem culpa!</p> </div> <div class="box box-2"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cupiditate fugiat! Quas, ea reiciendis fuga sequi voluptatum dolorem! Fuga vel laborum dolore officia quaerat maxime? Ipsum libero fugiat exercitationem culpa!</p> </div> </div> </body> </html>
2. css 样式
:root --lignt--color: #f4f4f4; --primary--color: steelblue; --secondary--color: skyblue; --max--width: 1100px; --box-1-width: 1; --box-2-width: 2; * padding: 0; margin: 0; body font-family: Arial, Helvetica, sans-serif; line-height: 1.4; background-color: var(--lignt--color); header background-color: var(--primary--color); color: #fff; border-bottom: 5px var(--secondary--color) solid; text-align: center; .container display: flex; margin: 0 auto; max-width: var(--max--width); .box --box-1-width: 3; --box-2-width: 1; background-color: var(--primary--color); border-bottom: 5px var(--secondary--color) solid; color: #ffffff; padding: 1rem; margin: 1rem; .box-1 flex: var(--box-1-width); .box-2 flex: var(--box-2-width);
3. 重点
: root
这里面专门写自定义属性的
--lignt--color: #f4f4f4;
以上是关于自定义属性的主要内容，如果未能解决你的问题，请参考以下文章