AI智能
改变未来

利用CSS和HTML制作京东图片列表

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>图片</title><link rel=\"stylesheet\" href=\"../CSS/默认样式去除.css/reset.css\"><style>/* 设置body的背景颜色 */body {background-color: blanchedalmond;}/* 设置父元素ul(容器)的高度宽度 */.img-list {width: 190px;height: 470px;background-color: #f4f4f4;overflow: hidden;/* 设置容器的位置 */margin-top: 100px;margin-left: auto;margin-right: auto;}/* 设置图片的位置 */.img-list li:not(:first-child) {margin-top: 9px;}/* 设置图片大小 */.img-list img {/* 只需要设置宽为100% */width: 100%;}</style></head><body><ul class=\"img-list\"><li><a href=\"java\" target=\"blank\"><img src=\"../exercise/图片文件夹/01.png\" alt=\"\"></a></li><li><a href=\"java\" target=\"blank\"><img src=\"../exercise/图片文件夹/02.jpg\" alt=\"\"></a></li><li><a href=\"java\" target=\"blank\"><img src=\"../exercise/图片文件夹/03.jpg\" alt=\"\"></a></li></ul></body></html>

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 利用CSS和HTML制作京东图片列表