网页设计前端——商品列表

题目：仿商品列表，设置商品列表占浏览器的60%，鼠标悬停在边框上会变红

<!DOCTYPE html>
<html>
<head><title>商品列表</title><meta charset="utf-8"><style>/*统配设置整个文件为宋体，12号字*/*{font-family: '楷体';font-size:12px;}/*设置商品列表宽度占浏览器60%，居中*/#main {width:60%;height: 600px;margin: 0 auto;border:0px solid green;}/*设置图片宽高*/img {width: 140px;height: 200px;padding: 25px 25px 0px 25px;}/*设置图片边框*/.sfz_01_34 {width:200px;height: 400px;border: 2px solid green;border-radius:10px;/*设置圆角矩形*/margin-left: 5px;margin-bottom: 20px;/*边框上下距离*/margin-right: 5px;}.sfz_02_34{color: red;text-align: center;}.sfz_03_34{height: 60px;color:black;text-indent: 2em;}/*设置加入购物单*/.sfz_04_34{margin-left:5px;padding-top:10pxpadding-bottom:10px; text-align: center;font-size: 10px;border-radius:0px;color: white;width: 50%;line-height: 20px;background: red;float: left;}.sfz_05_34{margin-right: 5px;/*靠边框距离*/color: white;font-size: 10px;width: 40%;height: 20px;line-height: 20px;/*字在中间*/text-align: center;background: blue;float: right;}/*去掉列表序号去掉*/ul {list-style: none;overflow: hidden;}/*设置左浮动*/ul li {float: left;}/*设置默认状态是黑色字体*/a:link {color: black;}/*设置鼠标放上去后显示红色*/div:hover {border-color:red;}</style>
</head>
<body>
<div id="main"> <ul><li>  <div class="sfz_01_34"><img src="iphone11.png"><a href="#"></a><p class="sfz_02_34">¥5999.00</p><p class="sfz_03_34">iphone 11(A2223)128GB绿色移动联通电信4G手机双卡双待</p><p class="sfz_04_34">加入购物车</p><p class="sfz_05_34">立即购买</p></div></li><li><div class="sfz_01_34"><img src="iphone11pro.png"><p class="sfz_02_34">¥10899.00</p><p class="sfz_03_34">iphone 11proMax(A2220)256GB深空灰色移动联通电信4G手机双卡双待</p><p class="sfz_04_34">加入购物车</p><p class="sfz_05_34">立即购买</p></div></li><li><div class="sfz_01_34"><img src="iphonexr.png"><p class="sfz_02_34">¥4999.00</p><p class="sfz_03_34">iphone XR(A2108)128GB红色移动联通电信4G手机双卡双待</p><p class="sfz_04_34">加入购物车</p><p class="sfz_05_34">立即购买</p></div></li><li><div class="sfz_01_34"><img src="mate 30 pro.png"><p class="sfz_02_34">¥5799.00</p><p class="sfz_03_34">mate 30 pro.png128GB绿色移动联通电信4G手机双卡双待</p><p class="sfz_04_34">加入购物车</p><p class="sfz_05_34">立即购买</p></div></li><li><div class="sfz_01_34"><img src="p30 pro.png"><p class="sfz_02_34">¥4998.00</p><p class="sfz_03_34">p30 pro 超感光四摄10倍混合变焦麒麟980芯片屏内指纹8GB+128GB天空之镜全网通版4G手机</p><p class="sfz_04_34">加入购物车</p><p class="sfz_05_34">立即购买</p></div></li><li><div class="sfz_01_34"><img src="p30.png"><p class="sfz_02_34">¥3998.00</p><p class="sfz_03_34">p30 超感光麒麟980AL智能芯片全面屏屏内指纹版手机8G+128GB全网通4G手机</p><p class="sfz_04_34">加入购物车</p><p class="sfz_05_34">立即购买</p></div></li></ul>
</div>
</body>
</html>

截图：

网页设计前端——商品列表相关推荐

WEB网页设计前端(前台)开发的常用工具推荐
WEB网页设计前端(前台)开发的常用工具推荐最近我在搞网页设计,包括网站建设的前台界面设计和JS代码的编写,弄一个JS的时候把我给郁闷了,在寻找JS如何通过子节点操作父节点的时候找到了以下免费的网站 ...
简单网页设计前端（入门）
简单网页设计前端(入门) 按照下面的成品设计网页: 其中包括: 文本框密码框提示文字单选按钮复选按钮上传文件上传图片等... <!DOCTYPE html PUBLIC &quo ...
程序员也可以很浪漫，精选10个圣诞节特效网页设计-前端HTML+CSS等实现
最近离圣诞节不远了.整理了一些关于圣诞相关的前端特效网页设计和小游戏的代码送大家.直接上效果吧. html5基于svg绘制调皮圣诞老人: <![CDATA[ @import url('https ...
程序员也可以很浪漫--精选10个圣诞节特效网页设计-前端HTML+CSS等实现
最近离圣诞节不远了.整理了一些关于圣诞相关的前端特效网页设计和小游戏的代码送大家.直接上效果吧. 视频演示:点击查看完整视频演示 >>> html5基于svg绘制调皮圣诞老人: &l ...
html 分割线_零基础网页设计/前端/html,第四课：前三课总结，以及单标签img
大家好,我是你们的"浪花一朵".如果我之前写的网页设计的课程没有看过,可以关注我,翻看作者之前的课程哦! 一.1~3课总结 1.为了使网页的内容与网页的边缘没有间隙,我们一般会在标 ...
web网页设计前端 HTML
在线帮助文档离线帮助文档下载微信公众号:日常分享菌目录前述语法规范标签的关系注释 1. 文档类型声明标签 2. lang语言 charset字符集 3. 基本结构标签 4. 标题标签(双 ...
HTML+CSS期末网页设计前端作品（大三）
HTML+CSS网页设计前端作品（大三实训作业）
网页设计前端作品（大一）HTML+CSS

网页设计前端——商品列表

网页设计前端——商品列表相关推荐

最新文章

热门文章