css手机布局list |table css 好看

ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
li img {
width: 50px;
height: 50px;
margin-right: 10px;
}
li h3 {
font-size: 16px;
margin: 0;
}
li p {
font-size: 14px;
margin: 0;
}
@media only screen and (max-width: 480px) {
li {
flex-wrap: wrap;
padding: 10px 0;
}
li img {
margin-right: 0;
margin-bottom: 10px;
}
li h3 {
font-size: 14px;
margin-bottom: 5px;
}
li p {
font-size: 12px;
margin-bottom: 5px;
}
}

首先，大家使用 CSS 将 UL 元素的边距（margin）、内边距（padding）和列表样式（list-style）设置为了零。然后，大家将 LI 元素的 display 属性设置为 Flex，使列表项中元素在一行上水平布置。

接下来，大家使用 CSS 定义每个列表项中图片（img）、标题（h3）和正文（p）的样式。大家设置图片的大小和右边距，标题和正文的字体大小和边距样式。

最后，大家使用 CSS 的 Media Queries 技术来为不同的屏幕尺寸定义不同的样式。在这个例子中，大家为小于或等于 480 个像素的屏幕宽度定义了不同的样式。大家使用 flex-wrap 属性来换行列表项，将图片的右边距设置为零，设置标题和正文的字体大小和边距样式。

总之，CSS 手机布局 List 是创建响应式 Web 设计的一种重要技术，可以使大家的网站在各种设备上都表现良好。