淘宝商品信息css+html

目标制作:

步骤：

1，设置总体的div和插入图片

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>s商品</title><style>/* 共有标签去掉内外间距 */*{margin: 0;padding: 0;}a{/* 去掉a标签的样式 */text-decoration: none;}/* 去掉ul，ol的样式 */ul,ol{list-style: none;}.goods{width: 255px;height: 390px;border: 1px solid red;}/* 设置图片的大小 */.goods>.dd>img{width: 250px;height: 255px;}</style></head><body><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是一个图片"><div></div></div></div></body>
</html>

2, 设置图标

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>s商品</title><style>/* 共有标签去掉内外间距 */*{margin: 0;padding: 0;}a{/* 去掉a标签的样式 */text-decoration: none;}/* 去掉ul，ol的样式 */ul,ol{list-style: none;}.goods{width: 255px;height: 390px;border: 1px solid red;}/* 设置图片的大小 */.goods>.dd>img{width: 250px;height: 255px;}.dd{width: 255px;height: 255px;}.intro{width: 255px;height: 25px;background-color: orange;/* 绝对定位，子级绝对点位，父级一定是相对定位 */position: absolute;left: 0;right: 0;bottom: -2px;/* 本身不出来，当hover的时候才出来 */}</style></head><body><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是一个图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div><div></div></div></div></body>
</html>

3，设置绝对，相对定位，左浮动和右浮动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商品</title><style>/* 共有标签去掉内外间距 */*{margin: 0;padding: 0;}/* 因为超链接a的字体是白色 */a{color: white;/* 去掉a标签的样式 */text-decoration: none;}/* 去掉ul，ol的样式 */ul,ol{list-style: none;}.goods{width: 255px;height: 390px;border: 1px solid red;}/* 设置图片的大小 */.goods>.dd>img{width: 255px;height: 255px;}   .dd{width: 255px;height: 255px;position: relative;}.intro{width: 255px;height: 25px;background-color: orange;/* 绝对定位，子级绝对点位，父级一定是相对定位 */position: absolute;left: 0;right: 0;bottom: -2px;/* 本身不出来，当hover的时候才出来 */display: none;}.goods>.dd:hover>.intro{display:block ;}.intro-left{width: 130px;height: 25px;float: left;line-height:25px ;text-align: center;}.intro-right{width: 125px;height: 25px;float: left;line-height:25px ;text-align: center;}.price{color: orange;font-size: 20px;}/* 伪元素 */.price::after{content:'包邮' ;color: orange;font-size: 14px;display: inline-block;margin-left: 6px;}.count{color: black;font-size: 14px;float: right;display: inline-block;margin-top:10px;margin-right:10px;}.title>a{color: #333;font-size: 12px;}.title>a:hover{color: orange;text-align: underline;}p.color{color: #999;}.title>img{/* 图标居中 */vertical-align:middle ;display: inline-block;margin-top:1px;}</style></head><body><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a></p></div></body>
</html>

4，设置hover效果和display的属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>s商品</title><style>/* 共有标签去掉内外间距 */*{margin: 0;padding: 0;}a{color: white;/* 去掉a标签的样式 */text-decoration: none;}/* 去掉ul，ol的样式 */ul,ol{list-style: none;}.goods{width: 255px;height: 390px;border: 1px solid red;}/* 设置图片的大小 */.goods>.dd>img{width: 250px;height: 255px;}.dd{width: 255px;height: 255px;position: relative;}.intro{width: 255px;height: 25px;background-color: orange;/* 绝对定位，子级绝对点位，父级一定是相对定位 */position: absolute;left: 0;right: 0;bottom: -2px;/* 本身不出来，当hover的时候才出来 */position: absolute;display: none;}.goods>.dd:hover>.intro{display:block ;}.intro-left{width: 130px;height: 25px;float: left;line-height:25px ;text-align: center;}.intro-right{width: 125px;height: 25px;float: left;line-height:25px ;text-align: center;}.intro-left>a{font-weight: bold;}.intro-right>a{font-weight: bold;}</style></head><body><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是一个图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div><div></div></div></div></body>
</html>

5，加文字

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>s商品</title><style>/* 共有标签去掉内外间距 */*{margin: 0;padding: 0;}a{color: white;/* 去掉a标签的样式 */text-decoration: none;}/* 去掉ul，ol的样式 */ul,ol{list-style: none;}.goods{width: 255px;height: 390px;border: 1px solid red;}/* 设置图片的大小 */.goods>.dd>img{width: 250px;height: 255px;}.dd{width: 255px;height: 255px;position: relative;}.intro{width: 255px;height: 25px;background-color: orange;/* 绝对定位，子级绝对点位，父级一定是相对定位 */position: absolute;left: 0;right: 0;bottom: -2px;/* 本身不出来，当hover的时候才出来 */position: absolute;display: none;}.goods>.dd:hover>.intro{display:block ;}.intro-left{width: 130px;height: 25px;float: left;line-height:25px ;text-align: center;}.intro-right{width: 125px;height: 25px;float: left;line-height:25px ;text-align: center;}.intro-left>a{font-weight: bold;}.intro-right>a{font-weight: bold;}.price{color: orange;font-size: 20px;}/* 伪元素 */.price::after{content:'包邮' ;color: orange;font-size: 14px;display: inline-block;margin-left: 6px;}.count{color: black;font-size: 14px;float: right;display: inline-block;margin-top:10px;margin-right:10px;}.title>a{color: #333;font-size: 12px;}.title>a:hover{color: orange;text-align: underline;}p.color{color: #999;}</style></head><body><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是一个图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div><div><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p></div></div></div></body>
</html>

6，处理剩下商品信息的内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商品</title><style>/* 共有标签去掉内外间距 */*{margin: 0;padding: 0;}/* 因为超链接a的字体是白色 */a{color: white;/* 去掉a标签的样式 */text-decoration: none;}/* 去掉ul，ol的样式 */ul,ol{list-style: none;}.goods{width: 257px;height: 390px;}/* 设置图片的大小 */.goods>.dd>img{width: 257px;height: 255px;} .dd{width: 257px;height: 255px;position: relative;}.intro{width: 257px;height: 25px;background-color: orange;/* 绝对定位，子级绝对点位，父级一定是相对定位 */position: absolute;left: 0;right: 0;bottom: -2px;/* 本身不出来，当hover的时候才出来 */display: none;}.goods>.dd:hover>.intro{display:block ;}.intro-left{width: 130px;height: 25px;float: left;line-height:25px ;text-align: center;}.intro-right{width: 125px;height: 25px;float: left;line-height:25px ;text-align: center;}.price{color: orange;font-size: 20px;}/* 伪元素 */.price::after{content:'包邮' ;color: orange;font-size: 14px;display: inline-block;margin-left: 6px;}.count{color: black;font-size: 14px;float: right;display: inline-block;margin-top:10px;margin-right:10px;}.title>a{color: #333;font-size: 12px;}.title>a:hover{color: orange;text-align: underline;}p.color{color: #999;}.title>img{/* 图标居中 */vertical-align:middle ;display: inline-block;margin-top:1px;}.n1{display: inline-block;margin-left:85px ;font-size: 12px;color: #333;}.n2{display: inline-block;margin-left: 3px;font-size: 12px;color: #333;}.cls2{float: right;display: inline-block;margin-right: 9px;}.cls1{display: inline-block;margin-left: 9px;}.windows{width: 255px;height: 135px;border: 1px solid #999999;}</style></head><body><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><div class="windows"><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a><span class="n1">江苏</span><span class="n2">无锡</span></p><div class="cls"><div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div><div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div></div></div></div></body>
</html>

7，商品在页面的布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商品</title><style>/* 共有标签去掉内外间距 */*{margin: 0;padding: 0;}/* 因为超链接a的字体是白色 */a{color: white;/* 去掉a标签的样式 */text-decoration: none;}/* 去掉ul，ol的样式 */ul,ol{list-style: none;}.goods{width: 257px;height: 390px;float: left;margin: 2px;floa}/* 设置图片的大小 */.goods>.dd>img{width: 257px;height: 255px;} .dd{width: 257px;height: 255px;position: relative;}.intro{width: 257px;height: 25px;background-color: orange;/* 绝对定位，子级绝对点位，父级一定是相对定位 */position: absolute;left: 0;right: 0;bottom: -2px;/* 本身不出来，当hover的时候才出来 */display: none;}.goods>.dd:hover>.intro{display:block ;}.intro-left{width: 130px;height: 25px;float: left;line-height:25px ;text-align: center;}.intro-right{width: 125px;height: 25px;float: left;line-height:25px ;text-align: center;}.price{color: orange;font-size: 20px;}/* 伪元素 */.price::after{content:'包邮' ;color: orange;font-size: 14px;display: inline-block;margin-left: 6px;}.count{color: black;font-size: 14px;float: right;display: inline-block;margin-top:10px;margin-right:10px;}.title>a{color: #333;font-size: 12px;}.title>a:hover{color: orange;text-align: underline;}p.color{color: #999;}.title>img{/* 图标居中 */vertical-align:middle ;display: inline-block;margin-top:1px;}.n1{display: inline-block;margin-left:85px ;font-size: 12px;color: #333;}.n2{display: inline-block;margin-left: 3px;font-size: 12px;color: #333;}.cls2{float: right;display: inline-block;margin-right: 9px;}.cls1{display: inline-block;margin-left: 9px;}.windows{width: 255px;height: 135px;border: 1px solid #999999;}.content{width: 1300px;height: 2000px;margin: auto;border: 1px solid red;}</style></head><body><div class="content"><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><div class="windows"><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a><span class="n1">江苏</span><span class="n2">无锡</span></p><div class="cls"><div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div><div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div></div></div></div><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><div class="windows"><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a><span class="n1">江苏</span><span class="n2">无锡</span></p><div class="cls"><div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div><div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div></div></div></div><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><div class="windows"><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a><span class="n1">江苏</span><span class="n2">无锡</span></p><div class="cls"><div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div><div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div></div></div></div><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><div class="windows"><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a><span class="n1">江苏</span><span class="n2">无锡</span></p><div class="cls"><div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div><div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div></div></div></div><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><div class="windows"><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a><span class="n1">江苏</span><span class="n2">无锡</span></p><div class="cls"><div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div><div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div></div></div></div><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><div class="windows"><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a><span class="n1">江苏</span><span class="n2">无锡</span></p><div class="cls"><div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div><div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div></div></div></div><div class="goods"><div class="dd"><img src="img/22.jpg_.webp.jpg" alt="这是图片"><div class="intro"><div class="intro-left"><a href="">找同款</a></div><div class="intro-right"><a href="">找相似</a></div></div></div><div class="windows"><p><span class="price">￥128.00</span><span class="count">10万人付款</span></p><p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩舒服到飞起的飞机Bra，高性价比，全网热销</a></p><p class="title"><img src="img/88888.png" alt="这是一个图片"><a href="">ubras内衣旗舰店</a><span class="n1">江苏</span><span class="n2">无锡</span></p><div class="cls"><div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div><div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div></div></div></div><!-- 清除浮动对兄弟节点的影响，浮动一般会影响平行级别的块元素或者文字 --><div style="clear:both"></div><p>介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，</p></div></body>
</html>

淘宝商品信息css+html相关推荐

Python 利用 cookie 模拟登录，爬取指定关键词的淘宝商品信息
Python 利用 cookie 模拟登录,爬取指定关键词的淘宝商品信息-Selenium 1. 本文目标由于淘宝网站的不断更新,以前的爬取方法都无法重现,必须需要登录淘宝网站才可以进行搜索商品.所 ...
利用Selenium爬取淘宝商品信息
文章来源:公众号-智能化IT系统. 一. Selenium和PhantomJS介绍 Selenium是一个用于Web应用程序测试的工具,Selenium直接运行在浏览器中,就像真正的用户在操作一样. ...
爬取淘宝商品信息selenium+pyquery+mongodb
''' 爬取淘宝商品信息,通过selenium获得渲染后的源码,pyquery解析,mongodb存储 '''from selenium import webdriver from selenium. ...
PHP实现采集淘宝商品信息
http://daigou.dayusheji.com/demo.php# http://lang.xp3.biz/index.php/60/s/ 一个采集淘宝商品信息的采集一个采集淘宝商品信息的采 ...
Python爬虫学习笔记(实例：淘宝商品信息定向爬虫)
淘宝商品信息定向爬虫先贴代码,后看解析: #淘宝商品信息定向爬虫 import requests import re#获得页面 def getHTMLText(url):try:#headers = ...
python爬取并分析淘宝商品信息
python爬取并分析淘宝商品信息背景介绍一.模拟登陆二.爬取商品信息 1. 定义相关参数 2. 分析并定义正则 3. 数据爬取三.简单数据分析 1.导入库 2.中文显示 3.读取数据 4.分 ...
2021-11-16爬取淘宝商品信息时如何获取cookie
爬取淘宝商品信息时如何获取cookie ###一.基本环境 1.win10系统 2.火狐浏览器 3.编程软件anaconda 4.淘宝的robots:https://www.taobao.com/ro ...
python爬取数据分析淘宝商品_python爬取并分析淘宝商品信息
python爬取并分析淘宝商品信息 Tip:本文仅供学习与交流,切勿用于非法用途!!! 背景介绍有个同学问我:"XXX,有没有办法搜集一下淘宝的商品信息啊,我想要做个统计".于是 ...
江湖小白之一起学Python （五）爬取淘宝商品信息
趁热需打铁,随着这几天的鸡血澎湃,我们来实现一下爬取淘宝商品信息,我记得几年前曾用python写了下抓取淘宝天猫,京东,拍拍的爬虫,专门采集商品信息,图片,评论及评论图片,我还用pyqt开发了个客户端 ...

淘宝商品信息css+html

目标制作:

步骤：

1，设置总体的div和插入图片

2, 设置图标

3，设置绝对，相对定位，左浮动和右浮动

4，设置hover效果和display的属性

5，加文字

6，处理剩下商品信息的内容

淘宝商品信息css+html相关推荐

最新文章

热门文章

淘宝商品信息css+html

目标制作:

步骤：

1，设置总体的div和插入图片

2, 设置图标

3，设置绝对，相对定位，左浮动和右浮动

4，设置hover效果和display的属性

5， 加文字

6，处理剩下商品信息的内容

淘宝商品信息css+html相关推荐

最新文章

热门文章

5，加文字