手机商品分享样式(纯html+css)

效果图:

html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" href="tag.css">

</head>

<body>

<div class="tag">

<div class="title">

<div class="position title1">

<div>

<img class="imgShop" src="1.png" >

</div>

</div>

<div class="position title2">

<div class="fs12">

<b>永玲麟</b>

</div>

<div class="fs10">

为你挑选了一个好物

</div>

</div>

</div>

<div class="bodyImg">

<div>

<img class="imgDetails" src="1.png" >

</div>

<div class="Price">

<span class="symbol">¥</span><span class="price">19.90 - 999.00</span>

</div>

<div class="footDiv">

<div class="position introduce">

<b>阿杜佛爱神的箭佛山大佛山的山东法撒旦法士大夫沙发斯蒂芬阿斯蒂芬</b>

</div>

<div class="position poImg">

<img class="imgCode" src="二维码.png" >

</div>

</div>

</div>

</div>

</body>

</html>

css:

body{

margin: 0;

padding: 0;

}

.tag{

border-radius: 8px;

height: 505px;

width: 300px;

}

.title{

padding-top: 28px;

margin: 0 0 0 14px;

position: relative;

height: 52px;

}

.imgShop{

width: 40px;

height: 40px;

border-radius: 40px;

}

.fs12{

font-size: 14px;

}

.fs10{

font-size: 10px;

color: #CACACA;

margin-top: 6px;

}

.position{

position: absolute;

}

.title2{

left: 50px;

}

.bodyImg{

margin-left: 13px;

border-radius: 8px;

height: 400px;

width: 275px;

box-shadow: 0px 0px 5px #E1E1E1;

}

.bodyImg>div>img{

width: 275px;

height: 275px;

border-top-left-radius: 6px;

border-top-right-radius: 6px;

}

.Price{

margin-left: 10px;

}

.symbol{

font-size: 16px;

color: #F64945;

}

.price{

font-size: 24px;

color: #F64945;

}

.footDiv{

position: relative;

}

.imgCode{

width: 55px;

height: 55px;

}

.poImg{

left: 207px;

top: 24px;

}

.introduce{

margin: 45px 0 0 14px;

width: 150px;

font-size: 13px;

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

原文地址:https://www.cnblogs.com/guomouren/p/12706540.html

时间: 04-15

手机商品分享样式(纯html+css)的相关文章

分享一个纯css制作的动画化,在网页(手机)加载等的时候可以引用!

CSS代码如下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.5s

京东手机商品详情页技术解密

京东手机商品详情页技术解密 作者:陈保安,2011年加入京东,目前主要负责手机京东核心业务(搜索.商品.购物车.结算.收银台.我的京东)的后端研发工作.带领团队在一线奋战多年,积累了非常丰富的大促备战经验,也见证了核心系统从一分钟几千单到几十万单的质的蜕变. 京东手机单品页在每次大促时承载所有流量的入口,它被天然赋予的一个标签就是抗压,对系统的稳定性.性能方面要求极其苛刻,另外单品页本身业务复杂度较高,单品页有几十种垂直流程业务,并且展示上都要求个性化的单品页,加上依赖有50+的基础服务,稍有抖

android应用开发_通过手机QQ分享到空间出现分享错误的无奈原因

因为这个原因是在是让人无力吐槽和非我方技术原因,所以絮叨絮叨. 我们的应用自定义了一些分享按钮,以前测试都是通过的.但今天运营提交了一个bug:通过手机QQ分享我们的app到空间分享失败,多次重试也不行. 开始以为是参数错误,参照最新的api,没错.图片大小?微信分享时就遇上了这种奇葩的问题.分析后跟图片没关系.这时我注意到,我手上的两台测试机,一个可以分享成功,一个不行.并且我还注意到一个问题,两者都能调起QQ也能调起QQ空间的 分享弹窗,但是弹窗不一样!一个是在QQ联系人列表上直接弹得弹窗,

分布式爬虫系统设计、实现与实战:爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储

[TOC] 1 概述 在不用爬虫框架的情况,经过多方学习,尝试实现了一个分布式爬虫系统,并且可以将数据保存到不同地方,类似MySQL.HBase等. 基于面向接口的编码思想来开发,因此这个系统具有一定的扩展性,有兴趣的朋友直接看一下代码,就能理解其设计思想,虽然代码目前来说很多地方还是比较紧耦合,但只要花些时间和精力,很多都是可抽取出来并且可配置化的. 因为时间的关系,我只写了京东和苏宁易购两个网站的爬虫,但是完全可以实现不同网站爬虫的随机调度,基于其代码结构,再写国美.天猫等的商品爬取,难度不

好程序员web前端教程分享异步加载CSS的一些方法

好程序员web前端教程分享异步加载CSS的一些方法,在我们写页面的时候,我们做最主要的任务就是提高页面的性能和弹性加载速度,以不会延迟页面的呈现的形式来加载CSS.这是因为在默认情况下, - 浏览器会同步加载外部的CSS - 在下载和解析CSS时会影响所有页面呈现 这两种情况都会导致潜在的延迟. 当然,这也是在开始渲染页面之前,应该至少加载网站的CSS的一部分,并且为了立即将该初始CSS添加到浏览器,我们建议内联css.对于整体数量较少的网站,仅此一项就足够了,但如果CSS很大(例如,大于15到

前端笔记六,级联样式单与CSS选择器(一)

在HTML文档<head>中使用<link/>元素来引入外部样式单 格式:<link type=“text/css” rel=“stylesheet href=“css样式的URL”> CSS的格式:Selector { property:value } 使用内部CSS样式定义的语法格式,在<head>中: <style type=“text/css”> 样式单文件定义 </style> 使用style属性更改元素外观,语法与CSS一

给所有浏览器的元素设置了一个共同的样式:Normalize.css

使用Normalize.css重置默认样式 CSS重置有助于根据所有设置的样式建立一个基准样式.样式重置有效重写了浏览器某些元素(在浏览器里有很大的不同)默认的样式. 尽管CSS resets在过去的几年里很受欢迎,但是,很多网站至今也没有使用,这些网站CSS的可扩展性因css resets会有很大的困难. 大多数人推荐使用normalize.css重置默认样式,而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset.Normalize.css给所有浏览器的元素设

纯HTML+CSS带说明的黄色导航菜单

HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航 在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件可以看到效果: <!DOCTYPE html > <html > <head> <title>HoverTree带说明的CSS菜单-hovertree.com</title><base target="_blank" /&g

移动共享开发(四)分享样式

友盟默认分享样式只需要添加几行代码即可实现,在不添加平台的情况下,分享列表中默认带有: 新浪微博.腾讯微博.人人网.豆瓣. 需要添加微信等其他平台参照对应的文档部分进行添加即可. 实现默认分享样式 添加集成代码 // 首先在您的Activity中添加如下成员变量 final UMSocialService mController = UMServiceFactory.getUMSocialService("com.umeng.share"); // 设置分享内容 mController

Div+Css(2):纯Div+Css制作的漂亮点击按钮和关闭按钮

纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片. 值得注意三点: 1.其中,主要使用了rotate.它能让文字旋转角度 2.还有radius,做圆角专用,很好用的属性.给想我这样的人省去了作图的时间. 3.W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值." 1 &