HTML 利用SCSS 制作一个简易页面

事业有程

于 2022-07-23 16:16:26 发布

阅读量582

点赞数

文章标签： html scss 前端

本文链接：https://blog.csdn.net/weixin_71439860/article/details/125949063

版权

本文通过SCSS展示了如何构建一个包含顶部导航栏和商品展示区域的简易页面。页面采用Flexbox布局，实现商品列表的水平分布和间距调整。SCSS变量用于颜色和尺寸的统一管理，代码简洁且易于维护。

摘要由CSDN通过智能技术生成

示例样式(scss)：

$color:red;

$bgcolor:#F4F5F9;

* {

margin: 0;

padding: 0;

}

.div1 {

height: 40px;

background-color: $color;

width: 100%;

ul {

width: 1230px;

margin: 0 auto;

list-style: none;

display: flex;

justify-content: space-between;

li {

a {

color: white;

line-height: 40px;

text-decoration: none;

&:hover {

color: pink;

}

}

}

}

}

.div2 {

ul {

width: 1230px;

margin: 0 auto;

display: flex;

justify-content: space-between;

margin-bottom: 20px;

li {

width: 395px;

height: 200px;

display: flex;

justify-content: space-between;

// border: 1px solid red;

background-color: $bgcolor;

box-shadow: 5px 5px 5px #ccc;

.left {

width: 200px;

}

.right {

width: 200px;

padding: 10px 20px;

h3 {

margin-bottom: 18px;

}

p {

margin-bottom: 18px;

font-size: 24px;

}

span {

display: bl