问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用 CSS 编写特定样式的业务组件组合？

头像
帅气的草稿纸
    1913

    以下样式的业务组件组合用css编写完成？
    图片.png

    已经忙乎一两天了也画不出满意的效果

    javascript前端css
    阅读 1k
    avatarAI BotBETA

    由于我无法直接看到你的图片内容（/img/bVdc4Zm 只是一个占位符），我将基于一个常见的业务组件组合样式来提供一个基本的 CSS 示例。假设你有一个包含标题、描述、按钮和图片的组合：

    /* 假设你的HTML结构是这样的 */
.business-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px; /* 根据需要设置宽度 */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.business-component .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.business-component .description {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.business-component .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.business-component .button:hover {
    background-color: #0056b3;
}

.business-component .image {
    width: 100%; /* 或者其他适当的宽度 */
    height: auto;
    margin-top: 20px;
    border-radius: 5px;
}

/* 假设你的HTML代码类似于这样 */
<div class="business-component">
    <div class="title">业务组件标题</div>
    <div class="description">这里是业务组件的描述。</div>
    <button class="button">点击按钮</button>
    <img class="image" src="your-image-source.png" alt="业务组件图片">
</div>

    请注意，这个示例是基于对一般业务组件样式的猜测。你可能需要根据你的具体图片内容和设计需求来调整 CSS 样式。

    如果你有一个具体的图片，并且希望针对那个图片来定制样式，你可能需要添加更多的 CSS 规则来处理图片的尺寸、边距、对齐方式等。

    如果你有更具体的设计需求或HTML结构，请提供详细信息，以便我能给出更准确的答案。

    1 个回答
    得票最新
    头像
    sunset
      5812211

      image.png
      使用before after分别创建一个三角，白的覆盖在黑的上面

      .speech-bubble {
            margin: auto;
            width: 200px;
            height: 300px;
            background: white;
            border: 2px solid black;
            border-radius: 25px;
            position: relative;
        }

        .speech-bubble:before {
            content: "";
            position: absolute;
            top: 20px;
            left: -24px; 
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 12px 24px 12px 0; 
            border-color: transparent white transparent transparent;
        }

        .speech-bubble:after {
            content: "";
            position: absolute;
            top: 20px;
            left: -26px; 
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 14px 26px 14px 0; 
            border-color: transparent black transparent transparent;
            z-index: -1; 
        }
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题