HTML/CSS 男人的衣柜

最新推荐文章于 2023-10-06 10:55:50 发布
最新推荐文章于 2023-10-06 10:55:50 发布
阅读量157 收藏
点赞数
分类专栏： 代码 文章标签： css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47021982/article/details/111621784
版权

HTML/CSS 男人的衣柜


代码1： 
<!DOCTYPE html>
<thml>
    <head>
        <meta name="keywords" content="zidingyi">
        <meta name="description" content="zidingyi">
        <meta charset="UTF-8">
        <title>man clothes</title>
        <style>
            body {
                background-color: rgb(244, 244, 244);
            }
            .main {
                width: 288px;
                height: 404px;
                background-color: #fff;
                /* border: 1px solid red; */
                text-align: center;
                box-sizing: border-box;
            }
            .main .shirt-pho a img {
                width: 206px;
                height: 187px;
                padding: 46px 0;
            }
            .main .shirt-text {
                width: 228px;
                height: 44px;
                margin: 0 auto;
            }
            .main .shirt-text a {
                text-decoration: none;
                color:rgb(72, 67, 60);
                font-size: 16px;
            }
            .main .shirt-text a:hover {
                color: red;
            }
            .main .price {
                font-size: 20px;
                padding: 28px 0;
                color: rgb(225, 61, 64);
                font-weight: 700;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="shirt-pho">
                <a href="#">
                    <img src="img/manT-shirt pic.png" alt="">
                </a>
            </div>
            <div class="shirt-text">
                <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
            </div>
            <div class="price">￥188.0</div>
        </div>
    </body>
</thml>

显示1：
在这里插入图片描述


代码2：

<!DOCTYPE html>
<thml>
    <head>
        <meta name="keywords" content="zidingyi">
        <meta name="description" content="zidingyi">
        <meta charset="UTF-8">
        <title>man clothes</title>
        <style>
            
            body {
                background-color: rgb(244, 244, 244);
            }
            .all {
                display: inline-block;
                width: 1465px;
                /* height: 834px; */
                background-color:#eee;
                font-size: 0;
            }
            .main {
                width: 288px;
                height: 404px;
                background-color: #fff;
                /* border: 1px solid red; */
                text-align: center;
                box-sizing: border-box;
                display: inline-block;
                /* font-size: 0; */
                margin: 2px 0;
                margin-right: 5px;
            }
            .main .shirt-pho a img {
                width: 206px;
                height: 187px;
                padding: 46px 0;
            }
            .main .shirt-text {
                width: 228px;
                height: 44px;
                margin: 0 auto;
            }
            .main .shirt-text a {
                text-decoration: none;
                color:rgb(72, 67, 60);
                font-size: 16px;
            }
            .main .shirt-text a:hover {
                color: red;
            }
            .main .price {
                font-size: 20px;
                padding: 28px 0;
                color: rgb(225, 61, 64);
                font-weight: 700;
            }
        </style>
    </head>
    <body>
        <div class="all">
            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 
            
            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 

            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 

            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 

            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 

            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 

            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 

            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 

            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 

            <div class="main">
                <div class="shirt-pho">
                    <a href="#">
                        <img src="img/manT-shirt pic.png" alt="">
                    </a>
                </div>
                <div class="shirt-text">
                    <a href="#">BOOSGARTH男装短袖t恤男士佳佳宽松翻领polo衫青年休闲</a>
                </div>
                <div class="price">￥188.0</div>
            </div> 
        </div>
    </body>
</thml>

显示2：
在这里插入图片描述

木森林哥哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自学HTML/CSS第四天
08-11
自学HTML/CSS第四天
奇思妙想自动衣柜JAVA代码_奇思妙想 - SegmentFault 思否
weixin_39949954的博客
02-27 158
1 简介这篇文章主要讲述Redis的主从复制功能。会依次从环境搭建、功能测试和原理分析几个方面进行介绍。2 准备工作服务器架构图如下启动主服务器101，使用info replication命令查看状态，可以看到role为master(也就是角色为主主服务器)，connected_salaves的值为0(从服务器数量为0)接下来用修改配置文件的方式将102机器加入的主从复制当中然后再用命令的方式同样...
[附源码]计算机毕业设计Python智能衣橱APP(程序+源码+LW文档)
纯清Python毕设程序设计
12-25 181
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程项目运行环境配置：Pychram社区版+py项目技术：django + python+ Vue 等等组成，B/S模式 +pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版本理论上也可以。2.pycharm环境：pycharm都可以。推荐pycharm社区版;3.mysql环境：建议是用5.7版本均可。
CSS3 3D立体柜子实现
weixin_30886233的博客
09-22 536
1.[图片]20140811233657.jpg 2.[图片]120140811233846.jpg ​3. [代码][CSS]代码 body { background-color: #efefef; } #Main { width: 100%; text-align:center; height: 3...
css html 抽屉,CSS3 书柜和抽屉
weixin_35203943的博客
06-28 442
CSS语言：CSSSCSS确定* {box-sizing: border-box;}html {background: -webkit-linear-gradient(top, #919191 0%, #f2f2f2 75%);background: linear-gradient(to bottom, #919191 0%, #f2f2f2 75%);}.cabinet {background-...
HTML圆和圆角柜形的制作,中式家具系列之柜类——圆角柜
weixin_31783001的博客
07-02 290
原标题：中式家具系列之柜类——圆角柜“圆角柜”、“方角柜”是按柜顶转角为圆、方来命名的。雅韵红木从结构来看，柜角之所以有圆有方，是由有柜帽和无柜帽来决定的。凡是木轴门，门边上下两头伸出门轴，必须纳入臼窝，方能旋转启闭。上面的一个臼窝，只有造在喷出的柜帽上最为合适。柜帽的转角，多削去硬棱，成为柔和的圆角，因而叫“圆角柜”(“面条柜”)。 至于柜门用合页来安装的，可以将柜足作为门框来钉合页，根本不需要...
葫芦娃外文静态网页设计代码包（HTML/CSS）
最新发布
01-10
本资源以葫芦娃动画片为主题，搜集整理了相关葫芦娃动画片的评论、图片以及文本等资源并根据个人童年回忆进行了小部分修改，基于HTML和CSS前端语言设计编码了葫芦娃外文静态网页。代码中包含音/视频的超链接、外部...
HTML/CSS的大屏数据可视化集合案例源码.zip
05-22
基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合，76套数据可视化源码，25套数据可视化源码。数据都是前端数据，可以自由发挥。 可以弄成前端html动态数据，也可以弄成...
[HTML/CSS/Javascript]WWTJS
10-30
[HTML/CSS/Javascript]WWTJS
HTML／CSS代码开发规范文档
12-19
HTML／CSS代码开发规范文档
css-your-wardrobe:使用CSS定义满满格子的壁橱
05-20
css你的衣柜 使用CSS定义壁橱中满是格子的房间。
绘制立体图html+css
12-23
绘制立体图，html+css学习使用
css3 HTML5 Canvas炫酷3D线条延伸动画特效.zip
07-11
js代码 [removed] ;(function() { 'use strict'; var c = document.getElementById('c'); var ctx = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var cx = w / 2; var cy = h / 2; var fl = 1000; function prj(obj) { var cz = obj.z fl; if(cz === 0) return; var scl = fl / cz; obj.p.x = cx obj.x * scl; obj.p.y = cy obj.y * scl; obj.s = scl; } var P = function(x, y, z) { this.x = x; this.y = y; this.z = z; this.s = 1; this.cl = 0; this.p = { x: 0, y: 0 }; }; P.prototype = { constructor: P, update: function() { this.z -= 30; }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = 'hsla(' this.cl ', 100%, 50%, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; var M = function(x, y, z) { this.list = []; this.max = 100; this.x = x; this.y = y; this.z = z; this.s = 1; this.p = { x: 0, y: 0 }; this.ax = Math.random() * (Math.PI * 2); this.ay = Math.random() * (Math.PI * 2); this.rx = Math.random() * 100; this.ry = Math.random() * 100; this.cl = Math.random() * 360; this.cls = Math.random(); }; M.prototype = { constructor: M, update: function() { this.cl = this.cls; this.ax = Math.random() * 0.1 - 0.02; this.ay = Math.random() * 0.1 - 0.02; this.x = Math.cos(this.ax) * 100; this.y = Math.sin(this.ay) * 100; this.z = 10; if(this.z > fl) this.z = fl; if(this.list.length < this.max) { if(Math.random() * 100 < 50) { var pp = new P(this.x, this.y, this.z); pp.cl = this.cl; this.list.push(pp); } } else { var pp = this.list.shift(); pp.x = this.x; pp.y = this.y; pp.z = this.z; pp.cl = this.cl; this.list.push(pp); } }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.fillStyle = 'green'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; function update(mv, list) { for(var i = 0; i < list.length; i ) { var p = list[i]; p.update(); prj(p); p.render(ctx); } for(var i = list.length-1; i >= 0; i--) { var p = list[i]; if(p.z <= -fl) continue; if(i === list.length - 1) { ctx.lineWidth = Math.random(); ctx.strokeStyle = 'hsl(' mv.cl ', 100%, 50%)'; ctx.beginPath(); ctx.moveTo(p.p.x, p.p.y); } else { ctx.lineTo(p.p.x, p.p.y); } } ctx.stroke(); } var ms = []; for(var i = 0; i < 10; i ) { ms.push(new M( Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200)); } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); for(var i = 0; i < ms.length; i ) { var m = ms[i]; m.update(); prj(m); update(m, m.list); } }); })(); [removed] 这是一款基于HTML5 Canvas绘制的炫酷3D线条延伸动画特效，多彩颜色变幻，非常漂亮！
Hemma:使用柜子和一些javascript控制灯光等
04-19
iPhone优化的TellStick控件 使用html / ajax前端和javascript后端进行实际工作 客户端 index.html hemma.js css / hemma.css 血气清单 flat.html 服务器端 hemma.conf（来自客户端的设置）。 JSON格式 hemma-google.conf（Google用户/密码和日历地址）。 基于行 hemmaServer.js（对TellstickService.php的持续替换） 去做 使refreshTime可配置 可配置的照明设备列表 如果网络超时，则退回到事件的数据库列表 / api用于报告单个设备的状态 / api获取最后的garagestate / api获取完整的garagestate历史记录
使用css制作3D盒子，目的是把盒子并列制作成3D货架
qq3892997的博客
10-06 861
3D盒子并列制作成3D货架
CSS3立方体柜子实现
pengyaou的博客
08-12 649
演示地址：http://www.pengyaou.com/LegendsZ/Images/FileImage/3D.html 原文出处：http://www.pengyaou.com/LegendsZ/File/2014/08/11/20140811234617481.html 需要在Chrome或者Safari浏览器下查看演示，尚不支持IE。 ...
用html5做立体盒子,简单实用的立体盒子收纳小柜子制作教程
weixin_42361495的博客
06-07 506
简单实用的立体盒子收纳小柜子制作教程我们的办公桌或是家里的桌子上面总是有一些零碎的小东西，尤其是女生，有一些小耳钉小戒指之类的首饰都是不占地方，但是不好好收拾的话就容易丢掉了，纸艺网里面的很多的折纸盒子就可以满足大家的这些需要啦，下面的这个立体收纳盒是不是一个折纸盒子的升级版呢？来看看教程吧。主要材料：彩纸、纸板、所需工具：剪刀、胶水、制作步骤：第1步：准备好制作折纸盒子的材料和工具第2步：先来看...
css3制作3D立体模型
qq_42158442的博客
10-19 1207
 代码跟注释都在里面了！想知道是什么效果不妨自己试试！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; @-webkit-keyframes domove{
HTML圆和圆角柜形的制作,圆角柜——简约不简单
weixin_42526101的博客
07-02 180
原标题：圆角柜——简约不简单圆角柜上窄下宽，具有度的设计造型，让柜子的结构更加坚固。因此，国外常称它为“A字柜”，南方多称它为“大小头”。圆角柜，在造型设计上，留有一定空间，虚实变化，极富生气，自然的张力，产生向上移动之感。圆虽外观毫无装饰，但整体稳定、优雅。传达出中庸、含蓄的“文化特性”，体现了儒家“中和”、“温柔”及“敦厚”的审美思想。 在明清家具中，雅韵红木认为圆角柜可以说达到了简约的极致，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值