使用CSS实现一些案列（三）

已于 2024-04-14 13:22:26 修改
阅读量109 收藏
点赞数 3
文章标签： 前端 css
于 2024-04-10 15:46:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70687916/article/details/137599269
版权

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01</title>
    <style>
        .box{
            width: 800px;
            height: 25px;
            margin: auto;
            position: relative;
        }
        .box-son{
            width: 25px;
            height: 25px;
            background-image: url(d.png);
            background-repeat: no-repeat;
            background-position: 0px -50px;
            position:absolute;
            left: 780px;
            top: 5px;
        }
    </style>
</head>
<body>
    <div class="box" >
        <input type="text" name="text" id="text" style="width: 100%; height: 100%;" >
        <div class="box-son"></div>
    </div>
</body>
</html>

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02</title>
    <style>
        .box{
            width: 800px;
            height: 300px;
            margin: auto;
            border: 1px solid black;
            position: relative;
        }
        .box-son{
            width: 600px;
            height: 200px;
            margin: auto;
            border: 1px dashed rgb(99, 99, 99);
            position:absolute;
            left: 100px;
            top: 25px;
        }
        .box-sons{
            width: 250px;
            height: 25px;
            background-image: url(img/d.png);
            background-repeat: no-repeat;
            background-position: 0px -50px;
            position:absolute;
            left: 300px;
            top: 100px;
        }
        .box-son > input{
            color: transparent; 
            opacity: 0;
        }
    </style>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
    <div class="box">
        <div class="box-son">
            <input type="file" id="file" name="file" style=" height: 100%;  width: 100%; ">
            <div class="box-sons" ></div>
        </div>
        <input type="file" id="file" name="file"  style="position: absolute; left: 370px;top: 250px;color: transparent;">
    </div>
    </form>
</body>
</html>

3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03</title>
    <style>
        .box{
            width: 800px;
            height: 30px;
            border: 2px solid orange;
            border-radius: 10px;
            margin: auto;
           
        }
        .box > input{
            border: none;
            outline: none;
            width: 90%;
            height: 90%;
        }
    </style>
</head>
<body>
    <div class="box">
        <select name="goods" id="goods">
            <option value=" 宝贝">宝贝</option>
            <option value="汽车">汽车</option>
        </select>
        <input type="text" id="text" name="text" placeholder="手机壳">
    </div>
</body>
</html>

4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04</title>
    <style>
        .box{
            width: 800px;
            height: 600px;
            border: 1px solid black;
            margin: auto;
            position: relative;
        }
        .box-son{
            width: 60px;
            height: 400px;
            border: 1px solid rgb(122, 122, 122);
            border-radius: 10px;
            background-color: aliceblue;
            position: absolute;
            left: -60px;
            top: 50px;
        }
       .box-son  span {
            color: #787676;
            text-align: center;
            font-size: 13px;
            display: block;   
        }
        table{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-son">
            <table>
             <tr><td> <span>联系客服</span></td> </tr>
             <tr><td><span>购物车</span></td> </tr>
             <tr><td><span>官方客服</span></td> </tr>
             <tr><td> <span>反馈</span></td> </tr>
             <tr><td><span>举报</span></td> </tr>
             <tr><td> <span>回顶部</span></td> </tr>
            </table>
        </div>
    </div>
</body>
</html>

5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05</title>
    <style>
        .box{
            width: 845px;
            height: 450px;
            margin: auto;
            border: 1px solid orange;
            border-radius: 10px;
            background-image: url(img/sprite1.png);
            background-repeat: no-repeat;
            background-position: 0px 0px;
        }
        .box-son{
            width: 60px;
            height: 50px;
            position: absolute;
            left: 275px;
            top: 220px;
            color:transparent;
            border: 3px solid rgb(135, 134, 134);
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .box > input:nth-child(1){
            position: absolute;
            left: 700px;
            top: 420px;
        }
        .box > input:nth-child(2){
            position: absolute;
            left: 720px;
            top: 420px;
        }
    </style>
</head>
<body>
    <div class="box">
  
        <input type="radio" name="1" value="手办" checked="checked">
        <input type="radio" name="1" value="日用品">
        <div class="box-son">
        </div>
    </div>
</body>
</html>

6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06</title>
    <style>
        .box{
            width: 680px;
            height: 350px;
            margin: auto;
        }
        .goods{
            width: 420px;
            height: 200px;
            border-radius: 10px;
            background-color: #FEF6F1;
            border: 1px solid transparent;
            float: left;
            margin: 10px;
        }
        .title{
            font-size: 16px; 
            font-weight: bold;
        }
        .text{
            font-size: 13px;
        }
        .img{
            width: 80px;
        }
        .price{
            color: orange; 
            font-size: 16px;
        }
        .goods1{
            width: 200px;
            height: 200px;
            border-radius: 10px;
            border: 1px solid transparent;
            float: left;
            margin: 10px;
        }
        .title::before{
            content: " ";
            margin-left: 10px;
        }
        .title::after{
            content: ">";
            color: #999;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="goods"> 
            <table>
               <tr><td colspan="4"><p class="title">淘工厂&#8226;良心工厂货</p></td></tr>
             <tr><td rowspan="3"><img class="img" src="./img/胶带.png" alt="胶带" >
                 <td><p class="text">纳米魔力双面胶</p></td>
                 <td rowspan="3"><img class="img" src="./img/防风罩.png" alt=""></td>
                <td><p class="text">75pvc排气风口防风罩110不...</p></td>
             </td></tr>
             <tr>
                <td></td>
                <td> <span class="price">和风行（机械...</span></td>
             </tr>
             <tr><td>
                <span class="price">￥6.05</span>
                 </td>
                <td> <span class="price">￥13.5</span></td>
                </tr>
            </table>
        </div>
        <div class="goods1" style="background-color: #FEF1F4;" >
            <table>
            <tr><td><p class="title">拍卖捡漏</p></td></tr>
            <tr><td ><img class="img" src="./img/茅台.png" alt=""></td>
                <td><img class="img" src="./img/表.png" alt=""></td>
            </tr>
            <tr><td><span class="price">￥1起</span></td>
                <td><span class="price">￥200起</span></td>
            </tr>
        </table>
        </div>
        <div class="goods1" style="background-color: #F1F2FE;" >
            <table>
                <tr><td><p class="title">潮牌数码</p></td></tr>
                <tr><td ><img class="img" src="./img/电一.png" alt=""></td>
                    <td><img class="img" src="./img/电脑.png" alt=""></td>
                </tr>
                <tr><td><span class="price">￥29.8</span></td>
                    <td><span class="price">￥8699</span></td>
                </tr>
            </table>
        </div>
        <div class="goods1" style="background-color: #F1FAFE;" >
            <table>
                <tr><td><p class="title">春夏出行</p></td></tr>
                <tr><td ><img class="img" src="./img/电驴.png" alt=""></td>
                    <td><img class="img" src="./img/摩托.png" alt=""></td>
                </tr>
                <tr><td><span class="price">￥8299</span></td>
                    <td><span class="price">￥400</span></td>
                </tr>
            </table>
        </div>
        <div class="goods1" style="background-color: #FEF6F1;" >
            <table>
                <tr><td><p class="title">零食秒杀</p></td></tr>
                <tr><td ><img class="img" src="./img/点7.png" alt=""></td>
                    <td><img class="img" src="./img/点心.png" alt=""></td>
                </tr>
                <tr><td><span class="price">￥3</span></td>
                    <td><span class="price">￥2.1</span></td>
                </tr>
            </table>
        </div>

    </div>
</body>
</html>

7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07</title>
    <style>
        .box{
            width: 350px;
            height: 500px;
            margin: auto;
            border: 1px solid rgb(252, 69, 69);
            position: relative;
        }
        .box-son{
            width: 100px;
            height: 50px;
            border: 1px solid rgb(252, 69, 69);
            border-radius: 50px;
            background-color: red;
            margin: auto;
            position: absolute;
            left: 145px;
            top: 50px;;
        }
        .box-son1{
            width: 100px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(252, 69, 69);
            border: 1px solid rgb(248, 101, 101);
            border-radius: 10px;
        }
        .box > table{
           position: absolute;
           left: 80px;
           top: 150px;
           width: 250px;
           height: 300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-son">
            <p style="color: white; font-size: 15px; text-align: center;">精选热点</p>
        </div>
        <table>
            <tr>
                <td> 
                    <div class="box-son1">电视柜</div>
                </td>
                <td> 
                    <div class="box-son1">脸部卸妆油</div>
                </td>
            </tr>
            <tr>
                <td> 
                    <div class="box-son1">苏泊尔无烟锅</div>
                </td>
                <td> 
                    <div class="box-son1">电动牙刷</div>
                </td>
            </tr>
            <tr>
                <td> 
                    <div class="box-son1">衣服烘干机</div>
                </td>
                <td> 
                    <div class="box-son1">燃气壁挂炉</div>
                </td>
            </tr>
            <tr>
                <td> 
                    <div class="box-son1">鱼竿</div>
                </td>
                <td> 
                    <div class="box-son1">防尘鞋架</div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08</title>
    <style>
        .box{
            width: 600px;
            height: 660px;
            background-color: #eceaea;
            border: 5px solid transparent;
            margin: auto;
        }
        .box-son{
            width: 580px;
            height: 150px;
            background-color: white;
            border: 3px solid transparent;
            margin: 10px;
          
        }
        .box--son{
            width: 180px;
            height: 130px;
            border-radius: 5px;
            margin: 5px;
            float: left;
        }
        .img{
            width: 60px;
            height: 60px;
            border-radius: 100%;
            margin: auto;
            display: block;
        }
        .box--son1{
            width: 110px;
            height: 130px;
            border: 1px solid rgb(250, 8, 8);
            border-radius: 5px;
            margin: 5px;
            float: left;
            background-color: #FEF0F0;

        }
        .box--son2{
            width: 440px;
            height: 130px;
            margin: 5px;
            float: left;
        }
        .prise{
            font-size: 18px;
            font-weight: bold;
            color: red;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box-son">
            <div class="box--son" >
                <img class="img" src="./img/22.jpg">
                <p style="text-align: center;">hi,<span style="color: rgb(188, 0, 0); font-size: 18px;">花开富贵</span></p>
                <p style="text-align: center;">退出</p>
            </div>
            <div class="box--son" style="background-color: #FEDE8B; ">
                <p style="font-size: 20px; ">plus会员</p>
                <p style="color: #B38E18; ">专享立减</p>
                <p style="color: #c79f1b; ">立即开通&gt;</p>
            </div>
            <div class="box--son" style="background-color: #D0DEFE;">
                <p style="font-size: 20px; ">企业会员</p>
                <p style="color: #0a3cb3; ">新客补贴3000元</p>
                <p style="color: #623ae7; ">立即开通&gt;</p>
            </div>
        </div>
        <div class="box-son">
            <div class="box--son1">
                <p style="font-size: 20px; text-align: center; margin: 1px;">京东秒杀</p>
                <img class="img" style="height: 30px;" src="./img/闹钟.png">
                <p style="text-align: center;">20:00场</p>
                <p style="text-align: center;">00:21:41</p>
            </div>
            <div class="box--son2">
                <table style="width: 100%;">
                    <tr>
                        <td><img style="height: 80px;" src="img/辣条png.png"></td>
                        <td><img style="height: 80px;" src="img/华为.png"></td>
                        <td><img style="height: 80px;" src="img/剃须刀.png"></td>
                    </tr>
                    <tr>
                        <td class="prise">￥25.5</td>
                        <td class="prise">￥884</td>
                        <td class="prise">￥1999</td>
                    </tr>
                </table>

            </div>
        </div>
        <div class="box-son">
            <div class="box--son1">
                <p style="font-size: 20px; text-align: center; margin: 1px;">便宜包邮</p>
                <img class="img" style="height: 50px;" src="./img/电.png">
                <p style="text-align: center;">一元也包邮</p>
            </div>
            <div class="box--son2">
                <table style="width: 100%;">
                    <tr>
                        <td><img style="height: 80px;" src="img/7.png"></td>
                        <td><img style="height: 80px;" src="img/8.png"></td>
                        <td><img style="height: 80px;" src="img/0.png"></td>
                    </tr>
                    <tr>
                        <td class="prise">￥2.98</td>
                        <td class="prise">￥15.9</td>
                        <td class="prise">￥2.85</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="box-son">
            <table style="width: 100%;">
                <tr>
                    <td><img style="width: 30px;" src="./img/111.png"></td>
                    <td><img style="width: 30px;" src="./img/222.png"></td>
                    <td><img style="width: 30px;" src="./img/333.png"></td>
                    <td><img style="width: 30px;" src="./img/444.png"></td>
                    <td><img style="width: 30px;" src="./img/555.png"></td>
                </tr>
                <tr>
                    <td>礼品卡</td>
                    <td>加油卡</td>
                    <td>话费</td>
                    <td>游戏</td>
                    <td>酒店</td>
                </tr>
                <tr>
                    <td><img style="width: 30px;" src="./img/666.png"></td>
                    <td><img style="width: 30px;" src="./img/777.png"></td>
                    <td><img style="width: 30px;" src="./img/888.png"></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>云建站</td>
                    <td>五金城</td>
                    <td>plus会员</td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

旋转太极图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极</title>
    <style>
        @keyframes myRote {
            from{
                transform: rotate(360deg);
            }
            to{
                transform: rotate(0deg);
            }
        }
        body{
            background-color: #999;
        }
        .box{
            width: 0px;
            height: 300px;
            border-left: 150px solid white;
            border-right: 150px solid black;
            border-radius: 50%;
            position: relative;
            animation: myRote 4s linear infinite;
            box-shadow: 0px -5px 5px #ff0000,
                         0px 5px 5px rgb(0, 255, 0) ;

        }
        .box::before{
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 50px solid white;
            position: absolute;
            left: -75px;
            top: 150px;
            background-color: black;
        }
        .box::after{
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 50px solid black;
            position: absolute;
            left: -75px;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

发光按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发光按钮</title>
    <style>
        .box{
            width: 100px;
            height: 50px;
            background-color: greenyellow;
            border: 3px solid rgb(97, 177, 121);
            margin: auto;
            border-radius: 50px;
        }
        .box:hover{
            box-shadow: 0px -5px 5px #ff0000,
                        0px 5px 5px #ff0000,
                        5px 0px 5px #ff0000,
                        -5px 0px 5px #ff0000;
        }
    </style>
</head>
<body>
    <div class="box" style="font-size: 13px; color: rgb(73, 156, 184); text-align: center;">这个按钮会发光</div>
</body>
</html>

m0_70687916
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
DIV+CSS案列源代码03
09-08
【标题】"DIV+CSS案列源代码03"揭示了如何使用这两种技术来构建一个中国音乐网的网站。在网页设计中，`DIV`（层）和`CSS`（层叠样式表）是核心元素，它们共同负责网页布局和样式的设定。`DIV`是一个HTML标签，用于...
CSS-200个小案例（一）
qq_55154022的博客
12-15 3213
最近我在youtube上跟着大神学习200个CSS小案例，作者Online Tutorials 编码的内容很实用，案例中涉及定位、变换、动画等概念，适合进一步学习和巩固CSS知识，能帮助我们实现页面的特效。
css 背景效果_软件技术：我写CSS的常用套路(附demo的效果实现与源码）
weixin_39577908的博客
11-20 627
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟(delay)这一属性。举个栗子，...
CSS 基础教程：从入门到精通
u011464172的专栏
06-17 918
本文介绍了 CSS 的基础知识，包括选择器、布局和样式属性。希望能够帮助你入门 CSS，并开始创建具有视觉效果的网页。记住，CSS 是一个强大的工具，需要不断练习和探索才能掌握。
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 2万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
推荐开源项目：Grunt-UnCSS - 打造极致精简的CSS体验
最新发布
gitblog_00937的博客
09-05 340
推荐开源项目：Grunt-UnCSS - 打造极致精简的CSS体验 grunt-uncss:scissors: A grunt task for removing unused CSS from your projects.项目地址:https://gitcode.com/gh_mirrors/gr/grunt-uncss 项目介绍 在前端开发的世界里，CSS的优化显得尤为重要，尤其在追求高性能...
DIV+CSS案列源代码06
09-08
- **导航栏**：使用CSS实现固定顶部的导航栏，以及鼠标悬停时的下拉菜单效果。 - **产品展示**：通过CSS实现网格布局展示水果图片，鼠标悬停时显示详细信息和添加到购物车按钮。 - **购物车**：使用CSS和JavaScript...
CSS3过渡效果飞机案列
05-24
在这个“CSS3过渡效果飞机案例”中，我们将深入探讨如何使用CSS3的`transition`、`transform`和`translate`属性来创建一个引人入胜的效果，同时不依赖于JavaScript动画。 首先，`transition`属性是CSS3中的一个核心...
DIV+CSS案列源代码04
09-08
2. **导航菜单**：创建一个清晰易用的导航栏，可能包括下拉菜单，利用CSS实现鼠标悬停效果和过渡动画。 3. **内容区块**：通过CSS布局，如网格系统，组织美食介绍、食谱和评论等内容。 4. **色彩搭配**：选用与美食...
华为S7706双机虚拟化CSS配置指导（案列）
10-15
三、CSS配置步骤 1. 配置集群系统的MAD域值：在每个交换机上执行命令mad domain domain-id，配置集群系统MAD域值。 2. 配置集群ID和集群优先级：在每个交换机上执行命令set css id 和set css priority ，配置集群...
50个div+css经典案例
11-16
10个div+css经典案例,宠物网、电子产品类、个人网站、欢乐餐厅、科技公司、家居、咖啡店、旅游网站、冒险岛、美食、时代财富科技、中国音乐网。。。。提供给div+css的学习者，浏览器兼容性好！！！！
前端——CSS案例篇
wmy030921的博客
06-20 220
前端——CSS案例篇
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
u013179804的博客
04-19 7512
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
精选30个优秀的CSS技术和实例
u011927449的博客
01-17 227
收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例，您将在这里发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。 　　单击...
20个非常重要的CSS技巧（建议收藏）
关注我！带你一路 "狂飙" 到底！
08-07 1841
今天分享20 个重要的 CSS 技巧，无论你是新手还是老鸟，它都可以提升你的CSS知识技能！这种方法可确保你的导航菜单适应不同的屏幕尺寸并且可供所有用户访问。CSS 框阴影提供了一种简单的方法来增加元素的深度和视觉吸引力。Flexbox 为容器内的元素提供了强大的对齐和分布能力。这允许你使用 CSS 创建自定义设计的复选框和单选按钮。CSS 渐变允许在元素的背景中实现平滑的颜色过渡。CSS 网格简化了适应不同屏幕尺寸的图库的创建。使用 CSS 网格创建复杂的基于网格的布局。
css实例 css中id/class 详解样式表（外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解）[第一天]
PBitW的博客
08-03 9308
css实例 css中的id css中的class 样式表 外部样式表 内部样式表 内联样式 7种基础选择器 5种组合选择器 后代选择和子代选择注意 多重样式优先级 选择器错误理解
CSS实操代码（中级教程）
2202_75375955的博客
07-10 989
实战项目电影解说网页介绍
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值