文章编号:4531 /
更新时间:2025-01-22 11:46:20 / 浏览:
次
css 样式表:
css
/ 重置样式 /{margin: 0;padding: 0;box-sizing: border-box;
}/ 导航栏 /
header {background-color: 333;color: fff;
}header h1 {float: left;padding: 20px;
}header nav {float: right;padding: 20px;
}header nav ul {list-style-type: none;
}header nav li {display: inline-block;margin: 0 20px;
}header nav li a {color: fff;text-decoration: none;
}header nav li a:hover {color: ccc;
}/ 主体部分 /
main {margin-top: 20px;
}/ 搜索栏 /
.search-container {width: 100%;padding: 20px;
}.search-container input {width: 80%;height: 30px;padding: 5px;
}.search-container button {height: 30px;padding: 5px 10px;background-color: 333;color: fff;
}/ 商品分类 /
.category-container {padding: 20px;
}.category-container ul {list-style-type: none;
}.category-container li {display: inline-block;margin: 0 20px;
}.category-container li a {text-decoration: none;
}/ 商品列表 /
.product-list-container {padding: 20px;
}.product-list-container ul {list-style-type: none;
}.product-list-container li {display: inline-block;margin: 0 20px;
}.product-list-container li a {text-decoration: none;
}.product-list-container li img {width: 150px;
}.product-list-container li .product-info {padding: 10px;
}.product-list-container li .product-info h3{font-size: 1.2rem;
}.product-list-container li .product-info p {
font-size: 1rem;
}.product-list-container li .product-info button {background-color: 333;color: fff;padding: 5px 10px;
}/ 分页 /
.pagination-container {padding: 20px;
}.pagination-container a {text-decoration: none;padding: 5px 10px;background-color: 333;color: fff;
}/ 页脚 /
footer {background-color: 333;color: fff;
}footer .footer-content {padding: 20px;
}footer .about-us {float: left;width: 33%;
}footer .contact-us {float: left;width: 33%;
}footer .links {float: left;width: 33%;
}footer .copyright {clear: both;text-align: center;
}
相关标签:
使用HTML和CSS制作网页、
创建一个用户友好的淘宝在线商店界面、
使用、
HTML、
本文地址:https://www.qianwe.cn/article/529023b917025b14032d.html
上一篇:网站优化指南从零基础到专家级的完整攻略网...
下一篇:杭州网站建设专业定制与优化,让您的网站脱颖...