求帮忙改下css效果

qq_38741240 2017-12-15 11:06:25
不管图片是多大，查看详情的按钮永远在图片最后边的最下面，也就是右下角，这个按钮的最右边不能超过图片的最右边





<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>


<style>
.pic {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: flex;
-moz-box-orient: vertical;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.pic .imgs {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: flex;
-moz-box-orient: vertical;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
vertical-align: middle;
background-color: rgb(250, 250, 250);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

.price_info {
border: 0px solid black;
position: absolute;
box-sizing: border-box;
display: flex;
-moz-box-orient: horizontal;
flex-direction: row;
align-content: center;
flex-shrink: 0;
bottom: 40.48px;
right: 40.48px;
z-index: 2;
height: 94.4533px;
-moz-box-align: center;
align-items: center;
border-radius: 168.667px;
background-image: linear-gradient(to right, rgb(255, 102, 100), rgb(239, 51, 65));
padding: 20.24px 50.6px 20.24px 43.8533px;
}

.price_info .price {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: block;
-moz-box-orient: vertical;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
font-size: 47.2267px;
color: rgb(255, 255, 255);
}

.price_info .line {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: block;
-moz-box-orient: vertical;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
font-size: 40.48px;
color: rgb(255, 255, 255);
opacity: 0.6;
padding-left: 40.48px;
padding-right: 40.48px;
}

.price_info .detail {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: block;
-moz-box-orient: vertical;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
font-size: 40.48px;
color: rgb(255, 255, 255);
}


</style>

<body>
<div class="pic" >
<div class="imgs">
<img src="https://img.alicdn.com/bao/uploaded/i3/3161393975/TB1vZM1hY_I8KJjy1XaXXbsxpXa_!!0-item_pic.jpg_430x430q90.jpg" width="830" height="430">
</div>
<div class="price_info">
<!-- empty --><span
class="price">￥299.00</span>
<!-- empty --><span
class="line">|</span><span
class="detail">查看详情</span>
<!-- empty --></div>
</div>
</body>
</html>




...全文
462 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
cnaaa8 2018-01-04
  • 打赏
  • 举报
 回复
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .dscsa{ width:930px; height:500px; margin:auto; } .pic { border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -moz-box-orient: vertical; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; } .pic .imgs { border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -moz-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; vertical-align: middle; background-color: rgb(250, 250, 250); background-size: cover; background-repeat: no-repeat; background-position: center center; } .price_info { border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -moz-box-orient: horizontal; flex-direction: row; align-content: center; flex-shrink: 0; bottom: 40.48px; right: 40.48px; z-index: 2; height: 94.4533px; -moz-box-align: center; align-items: center; border-radius: 168.667px; background-image: linear-gradient(to right, rgb(255, 102, 100), rgb(239, 51, 65)); padding: 20.24px 50.6px 20.24px 43.8533px; } .price_info .price { border: 0px solid black; position: relative; box-sizing: border-box; display: block; -moz-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 47.2267px; color: rgb(255, 255, 255); } .price_info .line { border: 0px solid black; position: relative; box-sizing: border-box; display: block; -moz-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 40.48px; color: rgb(255, 255, 255); opacity: 0.6; padding-left: 40.48px; padding-right: 40.48px; } .price_info .detail { border: 0px solid black; position: relative; box-sizing: border-box; display: block; -moz-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 40.48px; color: rgb(255, 255, 255); } </style> <body> <div class="dscsa"> <div class="pic" > <div class="imgs"> <img src="https://img.alicdn.com/bao/uploaded/i3/3161393975/TB1vZM1hY_I8KJjy1XaXXbsxpXa_!!0-item_pic.jpg_430x430q90.jpg" width="830" height="430"> </div> <div class="price_info"> <!-- empty --><span class="price">￥299.00</span> <!-- empty --><span class="line">|</span><span class="detail">查看详情</span> <!-- empty --></div> </div></div> </body> </html>
霜月枫桥 2017-12-19
  • 打赏
  • 举报
 回复
改一下HTML代码的位置就行了，其他的不用动 
<body>
<div class="pic" >
    <div class="imgs">
        <img src="https://img.alicdn.com/bao/uploaded/i3/3161393975/TB1vZM1hY_I8KJjy1XaXXbsxpXa_!!0-item_pic.jpg_430x430q90.jpg" width="830" height="430">
    <div class="price_info">
    <!-- empty --><span
        class="price">￥299.00</span>
    <!-- empty --><span
        class="line">|</span><span
        class="detail">查看详情</span>
    <!-- empty --></div>
    </div>
    
</div>
</body>
pengxiaoshuang0 2017-12-17
  • 打赏
  • 举报
 回复
你没有指定网站具体放在什么位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .dscsa{ width:930px; height:500px; margin:auto; } .pic { border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -moz-box-orient: vertical; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; } .pic .imgs { border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -moz-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; vertical-align: middle; background-color: rgb(250, 250, 250); background-size: cover; background-repeat: no-repeat; background-position: center center; } .price_info { border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -moz-box-orient: horizontal; flex-direction: row; align-content: center; flex-shrink: 0; bottom: 40.48px; right: 40.48px; z-index: 2; height: 94.4533px; -moz-box-align: center; align-items: center; border-radius: 168.667px; background-image: linear-gradient(to right, rgb(255, 102, 100), rgb(239, 51, 65)); padding: 20.24px 50.6px 20.24px 43.8533px; } .price_info .price { border: 0px solid black; position: relative; box-sizing: border-box; display: block; -moz-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 47.2267px; color: rgb(255, 255, 255); } .price_info .line { border: 0px solid black; position: relative; box-sizing: border-box; display: block; -moz-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 40.48px; color: rgb(255, 255, 255); opacity: 0.6; padding-left: 40.48px; padding-right: 40.48px; } .price_info .detail { border: 0px solid black; position: relative; box-sizing: border-box; display: block; -moz-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 40.48px; color: rgb(255, 255, 255); } </style> <body> <div class="dscsa"> <div class="pic" > <div class="imgs"> <img src="https://img.alicdn.com/bao/uploaded/i3/3161393975/TB1vZM1hY_I8KJjy1XaXXbsxpXa_!!0-item_pic.jpg_430x430q90.jpg" width="830" height="430"> </div> <div class="price_info"> <!-- empty --><span class="price">￥299.00</span> <!-- empty --><span class="line">|</span><span class="detail">查看详情</span> <!-- empty --></div> </div></div> </body> </html>
就要来娱乐论坛动网7.1 SP1 1114修改版
本论坛为动网7.1 SP1 1114修改版本，采用世面大众化风格，经本人精心修改而成，其界面美观大方，稳定，快速，不论你建专题论坛还是娱乐论坛，都是一个极佳的选择！

此风格虽然已经有很多人有，但此风格却跟近期提供此风格或论坛的人有很多区别，第1，本论坛是在动网默认风格上修改而成，风格主体没有任何改变，还是跟动网风格一样，不同的是，替换了某些图片，修改了默认风格CSS样式（光样式就修改了我2个小时，也许是偶太笨了，嘿嘿，不过还是有点难度的），想恢复动网默认风格，只需替换他原来的图片和CSS样式即可，而很多朋友提供的都是一种新的风格，不是说他不好，而且借此强调，本人风格虽不是原创，但完全是自己修改而成！

第2，本风格在帖子列表处加入了鼠标移动表格变色效果，这个是很多朋友忽略的，本人加了上去，感觉效果不错！

第3，此分栏也是在一位朋友提供的分栏上改的，只是一点小的改动，就是去掉了首页调用（近2天将提供一款新调用，还有扫尾工作在本地测试,如果想要原首页调用，把 index.htm里的index.asp改成main.asp），左栏加了还算适合此风格的播放器，此播放器为后台添歌程序，大家无须到文件里手工添加！

新增插件和部分增强功能：

虚拟形象插件（自我感觉有了虚拟形象会为论坛添色不少，还是放上去了，建议大家在添加版块的时候把它设成半身显示，效果比较好）

滑块调整帖子字体大小

帖子美化（包括用户信息美化）

未注册用户提示注册和登陆（其实我觉得这个用处不大，但很多朋友需要就放上来了）

帖子列表前加入心情图标（全部替换成了亿唐小头像了，感觉不错，此头像已经限定了大小，如果想使用默认头像，可能会缩小的图标大小，必须得到后台风格自行修改，不会可以联系我）

分页显示URL绝对地址

论坛播放器（添加歌曲请将鼠标移到管理--音乐管理）即可

论坛精华帖（列表和帖子部分显示精华图标）

在线斑竹提示！

论坛简繁转换！

其他还有部分功能大家自己去看吧！

这个版本我没加很多插件，也没加现在很流行的用户信息部分层显示，不是技术达不到，而是我觉得加这个一是用处不大，插件多未必是好事，用户用不到不说，还很影响服务器安全性，用户信息4层显示虽然漂亮，但你要知道他每帖要多打开多少张图片，一版就有5-10帖，就要显示5-10次，速度快的空间倒无所谓，遇到速度慢的简直是受罪，所以我没添加，想要添加自行添加！

总体来说这个版本既照顾到了喜欢爱美的站长，又照顾到了追求速度的站长，至于稳定安全性，大家心里都有数，我没修改内核，动网该怎么安全怎么安全，该怎么稳定怎么稳定，本人建议大家关闭所有上传权限和修改数据库后缀，因为再好的程序，可以上传或被下载了数据库都会被攻破，希望每位新人和不知道的朋友都能注意到这点！

说实在的，本不打算提供出来的，因为我知道提供出来也没多少人响应，因为风格虽然自己改的，但相同风格已经泛滥成灾，插件不多，无法满足全插件的朋友（但即使这样我都不会加插件的），但是这个论坛从改的那天起就是为了提供给大家的，我不想就这么放弃掉了，不然心血白白浪费，发布完了，过几天就改PHP了，这个可以算是终结版吧，但如果大家有问题，只要我能帮忙的我一定尽力，希望大家能支持！管理员帐号：ID: admin PASSWORD:admin888音乐后台帐号：ID: admin PASSWORD:admin (修改密码请把JS.asp修改成js.mdb后到access中修改，没用md5加密）
PC版birthday+手机版birthday+3D多变化动态相册
文件中包含PC版birthday+手机版birthday+3D多变化动态相册，文件中包含了三个web设计的源码，自己可以进行更改为自己想要的效果（如简单的修改文字，背景音乐、图片等），如果是要给别人看的话可以挂载到自己的服务器上，把相应的链接给对方即可，这里的话，如果实在不想麻烦可以思想博主，请博主帮忙挂载一下（不做义工），如果是自己想租用一台服务器不知道从哪里下手也可以私信相应的博主，可以和相应博主探讨一下。
名师精讲CSS3
CSS3即层叠样式表（Cascading Style Sheet）， 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的...
SpringBootBlog：一个基于SpringBoot开发的个人博客。集成了：博客前台，后台管理
凯里博客 个人博客系统 Kyrie Blog是由SpringBoot1.5 + MyBatis + Thymeleaf等技术实现的个人网站，如果觉得项目不错，请帮忙Star支持一下。 适用对象 Spring Boot初学者。该博客系统综合运用了作者发表的《 Spring Boot入门》系列的文章引用的知识内容，初学者可以阅读文章以及结合该项目学习。 与作者一样，使用hexo但苦于没有后台管理工具（界面）管理文章的写作者。该博客系统模仿hexo生成的访问路径，并支持markdown文件导入功能。 懂者。初次接触博客系统的人。 技术栈 初步 核心框架：SpringBoot 持久层框架：MyBatis 模板框架：胸腺 分页插件：PageHelper 缓存框架：Ehcache 降价：Commonmark 前端 JS框架：Jquery CSS框架：Bootstrap 富文本编辑器：editor.md 文件上传：dropzone 弹框插件：sweetalert 第三方 七牛云（文件上传） 百度统计 预览效果 前端效果 初步效果 安装 下载原始代码，执行sql文件，然后修改application
woff文件字体解析 分析+源码-易语言
反爬 有时候你可能会遇到下面这种情况明明这个字以明文的形式呈现在眼前 但复制粘贴确是乱码 分析 打开网页源码 找到关键字 可以发现标题下面一行字以【】开头的编码shift + c 跟中元素后可以发现 这个字体编码指向【PingFangSC-Regular】这个css位置中跟入css里 发现其加载了 【63f94cca.eot】这个字体文件在来源中搜 【63f94cca】发现文件却是以woff结尾的文件 可能是谷歌浏览器对其做的兼容 要搞定字体解析 先要知道.WOFF 是啥 WOFF的映射关系 一个编码对应一个字体 搞清楚这个是啥情况后 就要解决woff文件解析的问题了当然是让万能的 Js来帮忙解析借助【百度字体解析平台】(该网站纯JS解析woff,不过不知道为啥好像不好使了) 分析过程省略... 扣下Js文件并改写 (AMD框架 改的比较傻) 再借助ChakraCore引擎支持高级语法 返回如下结果 {"keys":[],"values":[]} (文本太长 删了一些开头的) 如上图所示 有个密密麻麻的文本 如下 咱把这个文本格式叫做svg svg又是啥呢里边的path解析 可参考https://www.jianshu.com/p/c819ae16d29b 这篇文章 那么如何绘制呢接下来就要借助gdi来绘制了 绘制过程 省略.... 以上这个绘制还不够完善 但勉强能够使用的 效果
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章