CSS.work-CSDN博客

本文链接：https://blog.csdn.net/2201_75456772/article/details/137506620


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_1</title>
    <style>
        .baidu {
            display: flex;
            border: 1px solid blue;
            border-radius: 5px;
            width: 800px;
        }
 
        .input {
            width: 630px;
            border: none;
            padding: 10px;
            font-size: 16px;
        }
 
        .btn {
            background-color: blue;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
 
        .input:focus {
            outline: none;
        }
 
        .btn:hover {
            background-color: darkblue;
        }
 
        .img:hover {
            opacity: 0.5;
        }
 
    </style>
</head>
<body>
 
<div class="baidu">
    <input type="text" class="input">
    <img src="img.4/01.png" class="img" style="height: 40px; cursor: pointer">
    <button class="btn">百度一下</button>
</div>
 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_2</title>
    <style>
        .main {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 2px dashed #bdbdbd;
            border-radius: 8px;
            width: 1000px;
        }
 
        .span {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            cursor: pointer;
            position: relative;
        }   
 
        .cross {
            position: relative;
            width: 150px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .cross:before {
            content: '';
            position: absolute;
            background-color: #ccc;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
        }
 
        .cross:after {
            content: '';
            position: absolute;
            background-color: #ccc;
            top: 0;
            left: 50%;
            width: 1px;
            height: 100%;
        }
 
        .btn {
            background-color: blue;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            position: relative;
            top: 70px;
        }
 
        .btn:hover {
            background-color: #0000bb;
        }
    </style>
</head>
 
<body>
<div class="main">
    <input type="file" id="file-upload" class="input" hidden>
    <span for="file-upload" class="span">
        <div class="cross"></div>
    </span>
    <button class="btn">选择文件</button>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_3</title>
    <style>
        
 
        .drop-btn {
            background-color: #ffffff;
            color: #919191;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
 
        .content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
        }
 
        .content a {
            color: #7c7c7c;
            padding: 12px 16px;
            display: block;
        }
        .search {
            width: 800px;
            display: flex;
            align-items: center;
            border: 2px solid orange;
            border-radius: 4px;
            background-color: #fff;
        }
 
        .dropdown:hover .content {
            display: block;
        }
 
        .input {
            flex-grow: 1;
            border: none;
            padding: 10px;
        }
 
        .btn {
            background-color: orange;
            color: #fff;
            border: none;
            border-radius: 0 4px 4px 0;
            padding: 10px 20px;
            cursor: pointer;
        }
 
        .input:focus {
            outline: none;
        }
 
        .btn:hover {
            background-color: darkorange;
        }
 
    </style>
</head>
<body>
 
<div class="search">
    
    <div class="dropdown">

        <button class="drop-btn">宝贝</button>

        <div class="content">

            <a href="#" style="text-decoration:none">图片</a>

            <a href="#" style="text-decoration:none">视频</a>

        </div>
    </div>
    <input type="text" class="input" placeholder="手机壳">

    <button class="btn">搜索</button>
</div>
 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_4</title>
    <style>
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 85px;
            background-color: #f6f8f9;
            color: black;
            border-right: 2px solid gray;
            border-radius: 10px;
            text-align: center;
        }
 
        .menu {
            padding: 10px;
            display: block;
        }
 
        .icon {
            width: 40px;
            display: flex;
            position: relative;
            left: 10px;
        }
    </style>
</head>
 
<body>
<div class="fixed">
    <div class="menu"><img src="img.4/4.png" class="icon">联系客服</div>
    <div class="menu"><img src="img.4/4.png" class="icon">购物车</div>
    <div class="menu"><img src="img.4/4.png" class="icon">官方客服</div>
    <div class="menu"><img src="img.4/4.png" class="icon">反馈</div>
    <div class="menu"><img src="img.4/4.png" class="icon">举报</div>
    <div class="menu"><img src="img.4/4.png" class="icon">回顶部</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_5</title>
    <style>
        .image-slider {
            position: relative;
            width: 300px;
            height: 500px;
            margin: 50px auto;
            border-radius: 10px;
            overflow: hidden;
        }
 
        .image-container img {
            width: 300px;
            height: 500px;
            display: block;
        }
 
        .indicators {
            position: absolute;
            bottom: 15px;
            left: 40%;
            display: flex;
        }
 
        .indicator {
            height: 10px;
            width: 10px;
            background: #ddd;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
 
        .indicator.active {
            background: orange;
        }
 
    </style>
</head>
<body>
<div class="image-slider">
    <div class="image-container">
        <img src="img.4/5.1.png" alt="image"/>
    </div>
    <div class="indicators">
        <span class="indicator active"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_6</title>
    <style>
        .element {
            border-radius: 10px;
            padding: 20px;
        }
 
        .product-list {
            padding: 0;
            margin: 0;
            display: flex;
            gap: 100px;
        }
 
        .product {
            display: flex;
            width: 300px;
        }
 
        .image {
            width: 110px;
            height: 110px;
            margin-bottom: 8px;
            background: url("img.4/6.0.png");
        }
 
        .name {
            display: flex;
            position: relative;
            left: 30px;
            top: 15px;
            font-size: 20px;
        }
 
        .price {
            display: flex;
            position: relative;
            left: -60px;
            top: 80px;
            font-size: 20px;
            position: relative;
            color: #FF6200;
            font-size: 25px;
        }
 
        h3 {
            padding: 0;
            margin: 0;
        }
 
    </style>
</head>
<body>
 
<div style="display: flex">
    <div class="element" style="background-color: #FDEEE9;">
        <h3>淘工厂 · 良心工厂货</h3>
        <ul class="product-list">
            <li class="product">
                <div class="image"></div>
                <div class="name">商品名称1</div>
                <div class="price"><b>¥ 6.05</b></div>
            </li>
            <li class="product">
                <div class="image"></div>
                <div class="name">商品名称2</div>
                <div class="price"><b>¥ 13.5</b></div>
                
            </li>
        </ul>
    </div>
</div>
 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_7</title>
    <style>
 
        .poster {
            width: 450px;
            height: 600px;
            margin: 0 auto;
            background-image: url('./img/2.png');
        }
 
        .header-cell {
            width: 150px;
            background-color: #dc1d1d;
            color: #FFF;
            text-align: center;
            font-size: 20px;
            padding: 10px;
            border: 0px;
            border-radius: 30px;
            position: relative;
            top: -20px;
        }
 
        td {
            width: 200px;
            text-align: center;
        }
 
        .link {
            width: 100px;
            height: 30px;
            display: inline-block;
            padding: 10px 20px;
            background-color: #FFF;
            border: 1px solid #ff7d7d;
            color: #ff4a4a;
            border-radius: 4px;
            text-decoration: none;
        }
 
        .link:hover {
            background: #bdbdbd;
        }
 
    .content {
        position: relative;
        top: -50px;
    }
 
    .content-left {
        position: relative;
        left: 30px;
    }
 
        .content-right {
            position: relative;
            left: -30px;
        }
    </style>
</head>
<body>
 
<table class="poster">
    <tr>
        <td colspan="2"><button class="header-cell">精选热点</button></td>
    </tr>
    <tr class="content">
        <td class="content-left"><a href="#link1" class="link">热点商品1</a></td>
        <td class="content-right"><a href="#link2" class="link">热点商品2</a></td>
    </tr>
    <tr class="content">
        <td class="content-left"><a href="#link3" class="link">热点商品3</a></td>
        <td class="content-right"><a href="#link4" class="link">热点商品4</a></td>
    </tr>
    <tr class="content">
        <td class="content-left"><a href="#link5" class="link">热点商品5</a></td>
        <td class="content-right"><a href="#link6" class="link">热点商品6</a></td>
    </tr>
    <tr class="content">
        <td class="content-left"><a href="#link7" class="link">热点商品7</a></td>
        <td class="content-right"><a href="#link8" class="link">热点商品8</a></td>
    </tr>
</table>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number_8</title>
    <style>
      
        #background {
            width: 650px;
            height: 830px;
            background-color: #f1f1f1;
        }
 
        .element {
            width: 630px;
            height: 180px;
            margin: 10px;
            background-color: white;
            border-radius: 6px;
            position: relative;
            top: 10px;
        }
 
        .acount {
            width: 200px;
            height: 180px;
            display: inline-block;
        }
        
        a {
            text-decoration: none;
        }
 
 
        #img {
            width: 70px;
            height: 70px;
            border-radius: 100%;
            align-items: center;
        }
 
        .plus {
            width: 200px;
            height: 160px;
            display: inline-block;
            background-color: #fede8b;
            border-radius: 8px;
            border: 1px solid gold;
            position: relative;
            top: -10px;
        }
 
        .vip {
            width: 200px;
            height: 160px;
            display: inline-block;
            background-color: #cddcfe;
            border-radius: 8px;
            border: 1px solid #79c9ff;
            position: relative;
            top: -10px;
        }
 
        .kill {
            width: 150px;
            height: 160px;
            display: inline-block;
            background-color: #fef0f0;
            border-radius: 8px;
            border: 1px solid #ffe0e0;
            position: relative;
            left: 10px;
        }
        
        .shop {
            width: 110px;
            height: 110px;
            display: inline-block;
            position: relative;
            top: 10px;
            padding: 0px 20px;
        }
 
        .price {
            font-size: 20px;
            color: #f92a45;
        }
 
        .icon {
            width: 80px;
            height: 80px;
            display: inline-block;
        }
 
        #end {
            height: 240px;
        }
    </style>
</head>
<body>
<div id="background">
    <div class="element">
        <div class="acount">
            <table style="text-align: center; width: 180px; height: 150px">
                <tr>
                    <td><img src="img.4/8.1.png" id="img"></td>
                </tr>
                <tr>
                    <td>Hi, <span style="color: brown">xxx的号</span></td>
                </tr>
                <tr>
                    <td><a href="#">退出</a></td>
                </tr>
            </table>
        </div>
        <div class="plus">
            <table style="text-align: left; width: 180px; height: 150px">
                <tr>
                    <td style="color: #663323; font-size: 25px"><b>Plus会员</b></td>
                </tr>
                <tr>
                    <td style="color: #be9656; font-size: 22px">专享立减</td>
                </tr>
                <tr>
                    <td><a href="#" style="color: #663323; font-size: 18px">立即开通 ></a></td>
                </tr>
            </table>
        </div>
        <div class="vip">
            <table style="text-align: left; width: 180px; height: 150px">
                <tr>
                    <td style="color: #05417f; font-size: 25px"><b>企业会员</b></td>
                </tr>
                <tr>
                    <td style="color: #3d72ac; font-size: 22px">新客补贴3000元</td>
                </tr>
                <tr>
                    <td><a href="#" style="color: #05417f; font-size: 18px">立即开通 ></a></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="element">
        <div class="kill"><img src="img.4/8.2.png" style="width: 150px;"></div>
        <table style="display: inline-block">
            <tr>
                <td><a href="#"><img src="img.4/8.5.png" class="shop"></a></td>
                <td><a href="#"><img src="img.4/8.5.png" class="shop"></a></td>
                <td><a href="#"><img src="img.4/8.5.png" class="shop"></a></td>
            </tr>
            <tr style="position: relative; top: 20px; text-align: center">
                <td class="price"><b>￥25.5</b></td>
                <td class="price"><b>￥884</b></td>
                <td class="price"><b>￥1999</b></td>
            </tr>
        </table>
    </div>
    <div class="element">
        <div class="kill"><img src="img.4/8.4.png" style="width: 150px;"></div>
        <table style="display: inline-block">
            <tr>    
                <td><a href="#"><img src="img.4/8.5.png" class="shop"></a></td>
                <td><a href="#"><img src="img.4/8.5.png" class="shop"></a></td>
                <td><a href="#"><img src="img.4/8.5.png" class="shop"></a></td>
            </tr>
            <tr style="position: relative; top: 20px; text-align: center">
                <td class="price"><b>￥25.5</b></td>
                <td class="price"><b>￥884</b></td>
                <td class="price"><b>￥1999</b></td>
            </tr>
        </table>
    </div>
    <div class="element" id="end">
        <table style="width: 650px;">
            <tr style="text-align: center">
                <td><a href="#"><img src="img.4/8.3.png"></a></td>
                <td><a href="#"><img src="img.4/8.3.png"></a></td>
                <td><a href="#"><img src="img.4/8.3.png"></a></td>
                <td><a href="#"><img src="img.4/8.3.png"></a></td>
                <td><a href="#"><img src="img.4/8.3.png"></a></td>
            </tr>
            <tr style="text-align: center">
                <td><a href="#">礼品卡</a></td>
                <td><a href="#">加油卡</a></td>
                <td><a href="#">话费</a></td>
                <td><a href="#">游戏</a></td>
                <td><a href="#">酒店</a></td>
            </tr>
            <tr style="text-align: center">
                <td><a href="#"><img src="img.4/8.3.png"></a></td>
                <td><a href="#"><img src="img.4/8.3.png"></a></td>
                <td><a href="#"><img src="img.4/8.3.png"></a></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="text-align: center">
                <td><a href="#">云建站</a></td>
                <td><a href="#">五金城</a></td>
                <td><a href="#">plus会员</a></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>