小U商城分类css

最新推荐文章于 2023-02-22 19:22:14 发布

原创最新推荐文章于 2023-02-22 19:22:14 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css #css3

本文介绍了一种用于移动端的网页布局方案，详细展示了如何通过CSS设置页面的宽度、边距、背景颜色等属性，并实现了响应式设计。此外，还介绍了如何使用flex布局来组织元素，使其在不同屏幕尺寸下保持良好的视觉效果。

@charset "utf-8";

#page {

width: 3.75rem;

margin: 0 auto;

}

/* 头部 */

header {

height: 0.88rem;

background: #FF6040;

padding: 0.44rem 0.06rem 0 0.17rem;

box-sizing: border-box;

display: flex;

align-items: center;

justify-content: space-between;

}

#page header a {

margin-left: 1.3rem;

}

header>a {

font-size: 0.17rem;

color: #fff;

opacity: .8;

margin-left: 0.4rem;

}

header>.more {

width: 0.87rem;

height: 0.32rem;

background: rgba(255, 119, 51, 0.10);

border: 1px solid rgba(255, 255, 255, 0.25);

border-radius: 0.405rem;

display: flex;

align-items: center;

justify-content: space-evenly;

}

header>.more .line {

background: rgba(255, 255, 255, 0.25);

width: 1px;

height: 0.19rem;

}

header>.more span {

font-size: 0.17rem;

color: #fff;

opacity: .8;

}

#page .sou {

position: relative;

height: 0.5rem;

padding-top: 0.15rem;

box-sizing: border-box;

background-image: linear-gradient(180deg, #FF6040 0%, #FF8A80 100%);

box-shadow: 0 0.02rem 0.06rem 0 rgba(255, 149, 128, 0.50);

text-align: center;

}

#page .sou input {

width: 3.5rem;

height: 0.25rem;

background: #FFFFFF;

border: 1px solid #E6E6E6;

border-radius: 0.03rem;

text-indent: 0.29rem;

font-size: 0.14rem;

color: #999999;

line-height: 0.22rem;

}

#page .sou .fd {

position: absolute;

top: 0.16rem;

left: 0.2rem;

font-size: 0.16rem;

color: #999999;

font-weight: bold;

}

#page .left {

padding-top: 0.2rem;

width: 1rem;

background: #FFFFFF;

box-shadow: 0 0.05rem 0.1rem 0 rgba(51, 51, 51, 0.10);

}

#page .left ul a {

display: block;

height: 0.45rem;

font-size: 0.14rem;

color: #999999;

text-align: center;

line-height: 0.3rem;

}

#page .big .left ul li:hover a {

color: #FF6040;

font-size: 0.16rem;

}

#page .big {

display: flex;

flex-wrap: wrap;

}

#page .big .big1 {

background-color: #f1f1f1;

width: 2.75rem;

}

#page .right1 {

width: 2.32rem;

/* height: 2.18rem; */

background-color: white;

margin-left: 0.2rem;

margin-top: 0.18rem;

padding-bottom:0.1rem ;

}

#page .right1 img {

display: flex;

width: 0.64rem;

height: 0.64rem;

margin-bottom: 0.06rem;

}

#page .right1 h1 {

font-weight: bold;

padding-left: 0.1rem;

padding-top: 0.1rem;

}

#page .right1 ul li {

text-align: center;

margin-left: 0.1rem;

margin-top: 0.06rem;

}

#page .right1 li a {

font-size: 0.12rem;

color: #999999;

text-align: center;

line-height: 0.12rem;

margin-left: 0.06rem;

}

#page .right1 ul {

display: flex;

flex-wrap: wrap;

}

#page .box12 {

position: fixed;

bottom: 0;

display: flex;

float: left;

justify-content: space-around;

text-align: center;

width: 3.75rem;

height: 0.83rem;

flex-wrap: wrap;

background: #FFFFFF;

box-shadow: 0 -0.05rem 0.1rem 0 rgba(204, 204, 204, 0.20), 0 0 0 0 #CCCCCC;

}

#page .box12 p {

height: 50px;

margin-top: 0.05rem;

}

#page .box12 a {

font-size: 0.08rem;

color: #999999;

}

#page .box12 img {

margin-top: 0.1rem;

}

#page .box12 .d1 a {

font-size: 0.1rem;

color: #FF6040;

text-align: center;

line-height: 0.1rem;

}