CSS3——box-sizing\background-size\box-shadow

本文详细介绍了 CSS3 中 box-sizing、background-size 和 background-origin 属性的使用方法,并提供了 box-shadow 的示例代码。通过这些属性,可以更好地控制网页元素的布局、背景图片的尺寸和位置。

语法:
box-sizing: content-box|border-box|inherit;
属性说明:
content-box:在已设定的宽度和高度之外绘制元素的内边距和边框。
border-box: 在已设定的宽度和高度之内绘制元素的内边距和边框。
浏览器支持:
IE8+、火狐、谷歌。
代码演示:

    /*css:改变元素的box-sizing属性值查看变化*/
    .op {
        width: 100px;
        height: 100px;
        background: red;
        margin-top: 20px;
        padding: 20px;
        border: 6px solid #000; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    /*html*/
    <div class="op"></div>

这里写图片描述
用处:
两行宽度50%布局:如果不用这个属性,设置border后右边的div会下来错位,设置这个属性,宽度还是50%而不是50%+*px,两行可以并列显示。
input框:加了padding 和border之后,实际的宽度还是最初设置的宽高。

CSS3 background-size 属性

语法:
background-size: length|percentage|cover|contain;
属性说明:

描述
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 “auto”。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 “auto”。

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

CSS3 background-size 属性:规定背景图片的尺寸。

在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

<!-- 调整背景图片的大小:background-size:63px 100px; -->
 div {background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }
<!--  对背景图片进行拉伸,使其完成填充内容区域:background-size:40% 100%; -->
 div {background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat; }

CSS3 background-origin 属性:规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域
这里写图片描述

<!-- 在 content-box 中定位背景图片:background-origin:content-box; -->
div {background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; }

box-shadow

语法:
box-shadow: h-shadow v-shadow blur spread color inset;
属性说明:

描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。

代码及效果图:
代码:多重边框
这里写图片描述

<div class="container"> <div class="top"> <div class="top-left"> <div class="top-left-side"> </div> <div class="top-left-content"> <div class="logo"> <img src="/plugin_assets/polls/images/icon-company.png" alt="公司图标"> <div class="logo-text"> <div class="company-name">武汉光庭信息技术股份有限...</div> <div class="platform-name">数字化学习平台</div> </div> </div> <div class="nav"> <div class="nav-item"> <img src="/plugin_assets/polls/images/icon-home.png" alt="首页"> <span>首页</span> </div> <div class="nav-item"> <img src="/plugin_assets/polls/images/icon_study.png" alt="学习中心"> <span>学习中心</span> </div> <div class="nav-item"> <img src="/plugin_assets/polls/images/icon_shop.png" alt="知识商城"> <span>知识商城</span> </div> <div class="nav-item"> <img src="/plugin_assets/polls/images/icon_profile.png" alt="个人中心"> <span>个人中心</span> </div> </div> </div> </div> <div class="top-right"> <div class="search"> <label> <input type="text" placeholder="请输入想要的内容"> </label> <a class="search-icon">🔍︎</a> </div> </div> </div> <div class="bottom"> <div class="content"> <div class="left-content"> <!--————————————————————————carousel——————————————————————--> <div class="carousel-container"> <div class="carousel-inner"> <img src="/plugin_assets/polls/images/slide2.png" alt="培训信息"> <div class="carousel-text">新员工入职培训</div> </div> </div> <!--————————————————————————banner——————————————————————--> <div class="banner-container"> <div class="banner-item"> <img src="/plugin_assets/polls/images/book.png" alt="首页"> <span>培训列表</span> </div> <div class="banner-item"> <img src="/plugin_assets/polls/images/pen.png" alt="学习中心"> <span>考试列表</span> </div> <div class="banner-item"> <img src="/plugin_assets/polls/images/remark.png" alt="知识商城"> <span>课程列表</span> </div> <div class="banner-item"> <img src="/plugin_assets/polls/images/champion.png" alt="个人中心"> <span>学习排行</span> </div> </div> <!--————————————————————————task——————————————————————--> <div class="task-container"> <div class="task-title"> <span class="task-title-span">学习任务</span> <div class="task-tabs-container"> <div class="task-tabs active" data-tab="tab1"> <span>培训</span> </div> <div class="task-tabs" data-tab="tab2"> <span>考试</span> </div> </div> <div class="task-all-tab">全部</div> </div> <div class="task-content"> </div> </div> <!--————————————————————————training——————————————————————--> <div class="training-container"> <div class="training-title"> </div> <div class="training-content"> </div> </div> <!--————————————————————————courses——————————————————————--> <div class="courses-container"> <div class="courses-title"> </div> <div class="courses-content"> </div> </div> <!--————————————————————————exam——————————————————————--> <div class="exam-container"> <div class="exam-title"> </div> <div class="exam-content"> </div> </div> </div> <div class="right-side"> </div> </div> </div> </div> <style> * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } .container { display: flex; flex-direction: column; height: 100vh; } .top { height: 10vh; background-color: #f0f0f0; /*border-bottom: 1px solid #ccc;*/ display: flex; box-sizing: border-box; background-color: hsla(0, 0%, 100%, 0.6); } .top-left { flex: 0 0 66.5%; display: flex; align-items: center; } .top-left-side { flex: 1; display: flex; align-items: center; } .top-left-content { flex: 0 0 70%; display: flex; align-items: center; gap: 20px; } .top-right { display: flex; align-items: center; justify-content: flex-start; } .logo { display: flex; align-items: center; } .logo img { width: 38px; height: 38px; margin-right: 16px; } .logo-text { display: flex; flex-direction: column; overflow: hidden; } .company-name { font-size: 18px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .platform-name { font-size: 14px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .nav { display: flex; gap: 25px; justify-content: flex-start; } .nav-item { display: flex; flex-direction: row; align-items: center; white-space: nowrap; gap: 3px; font-size: 16px; color: #a9a9a9; text-decoration: none; transition: color 0.3s; } .nav-item img { width: 20px; height: 20px; flex-shrink: 0; display: block; } .nav-item:hover { color: #007bff; } .search { flex: 0 0 285px; position: relative; max-width: 400px; display: inline-block; } .search input { width: 100%; height: 30px; padding-left: 35px; font-size: 14px; border: 1px solid #759fcf; border-radius: 4px; box-sizing: border-box; } .search-icon { position: absolute; left: 0; top: 0; height: 100%; width: 30px; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #888; font-size: 16px; background: transparent; border: none; } /*********************bottom****************************/ .bottom { flex: 1; background-color: rgba(242, 242, 242, 0.3); position: relative; } .content { position: absolute; top: 17px; bottom: 0; width: 100%; /*border-top: 1px solid #ccc;*/ min-height: calc(100% - 30px); } .left-content { position: absolute; left: 18.3%; top: 0; height: 100%; /*width: 47%;*/ width: 870px; padding: 0; box-sizing: border-box; /*border-right: 1px solid #ccc;*/ /*border-left: 1px solid #ccc;*/ } .carousel-container { /*height: 37%;*/ height: 314px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 19px; padding: 30px; } .carousel-inner { width: 100%; height: 100%; padding: 0; background-color: rgba(179, 179, 179, 0.3); position: relative; display: inline-block; } .carousel-text { position: absolute; top: 87%; left: 32%; transform: translate(-50%, -50%); color: white; font-size: 24px; font-weight: bold; text-shadow: 1px 1px 2px black; z-index: 999; } .carousel-inner img { max-width: 60%; height: 100%; margin-left: 21%; box-shadow: -25px 0 20px rgba(255, 255, 255, 0.5), 25px 0 20px rgba(255, 255, 255, 0.5); } .banner-container { display: flex; gap: 100px; justify-content: flex-start; height: 94px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 19px; padding-left:4% ; } .banner-item { display: flex; flex-direction: row; align-items: center; white-space: nowrap; gap: 3px; font-size: 16px; color: #a9a9a9; text-decoration: none; cursor: pointer; } .banner-item:hover { color: #a9a9a9; } .banner-item img { width: 55px; height: 55px; flex-shrink: 0; display: block; } .task-container { /*height: 20%;*/ height: 270px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 19px; } .task-title { height: 20%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding-left: 20px; padding-right: 25px; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 15px; } .task-title-span{ font-size: 18px; flex: 0 0 auto; } .task-tabs-container { display: flex; gap: 2px; flex: 1 1 auto; font-size: 14px; color: #a9a9a9; margin-left: 5%; } .task-tabs { margin-right: 4.5%; } .task-tabs > span { position: relative; padding-bottom: 40%; cursor: pointer; color: #a9a9a9; } .task-tabs > span:hover { cursor: pointer; } .task-tabs.active span { color: #007bff; position: relative; padding-bottom: 40%; } .task-tabs.active span::after { content: &#39;&#39;; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 2px; background-color: #007bff; border-radius: 2px; } .task-all-tab { flex: 0 0 auto; color: #3798fb; font-size: 16px; cursor: pointer; transition: color 0.3s ease; } .task-all-tab:hover { color: #007bff; } .task-content { height: 80%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .training-container { height: 20%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 19px; } .training-title { height: 20%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .training-content { height: 80%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .courses-container { /*height: 20%;*/ height: 170px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 19px; } .courses-title { height: 20%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .courses-content { height: 80%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .exam-container { /*height: 20%;*/ height: 170px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 50px; } .exam-title { height: 20%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .exam-content { height: 80%; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .right-side { position: absolute; right: 0; top: 0; width: 33.8%; height: 100%; padding: 20px; background-color: rgba(255, 255, 255, 0.6); box-sizing: border-box; border-left: 1px solid #ccc; } </style> 1 点击 培训 tab 切换到 task-content 内部的其中的一个tab-content 2 同理点击 考试tab 切换到 task-content 内部的其中的一个tab-content 其他tab 边灰色 蓝色下划线消失
最新发布
09-18
<think>好的,用户现在的问题是关于如何通过点击“培训”和“考试”标签来切换到对应的内容区域,并且在切换时更新样式,使当前选中的标签显示蓝色字体和下划线,其他标签恢复灰色。我需要仔细分析用户提供的HTML结构和现有的CSS代码,找出需要修改或添加的部分。 首先,用户提供的HTML结构中,`.task-tabs-container`包含两个`.task-tabs`元素,每个都有一个`data-tab`属性,分别是`tab1`和`tab2`。`.task-content`是需要切换内容的容器。当前,用户已经为激活的标签设置了样式,但可能没有处理动态切换的逻辑。 接下来,我需要考虑如何通过JavaScript来实现点击事件的绑定。当用户点击某个标签时,应该执行以下操作: 1. 移除所有`.task-tabs`的`active`类。 2. 为当前点击的标签添加`active`类。 3. 根据`data-tab`属性显示对应的`.tab-content`,同时隐藏其他内容。 在CSS方面,用户已经为`.task-tabs.active span`设置了蓝色字体和下划线,但需要确保`.tab-content`的显示和隐藏由CSS控制,例如通过`display: none`和`display: block`。或者,也可以通过JavaScript动态添加/移除类来控制显示状态。 检查用户现有的CSS代码,发现`.task-content`是一个单独的元素,没有看到`.tab-content`的定义。因此,可能需要在HTML中添加两个`.tab-content`元素,分别对应`tab1`和`tab2`,并使用`data-tab`属性进行关联。 此外,用户提到点击标签后切换到对应的内容,这意味着需要为每个标签对应的内容区域设置唯一的ID或类名,并通过JavaScript控制其可见性。例如,当点击`data-tab="tab1"`时,显示ID为`tab1-content`的元素,同时隐藏其他内容。 还需要处理样式的动态变化,确保只有当前选中的标签有蓝色字体和下划线。现有的CSS已经为`.active`类设置了正确的样式,但需要确保JavaScript正确添加和移除这个类。 最后,测试代码的兼容性和潜在问题,比如事件绑定是否正确,是否处理了重复点击的情况,以及样式是否覆盖正确。可能还需要调整CSS选择器的优先级,确保动态添加的类能够覆盖默认样式。</think>```javascript // JavaScript实现选项卡切换 document.querySelectorAll(&#39;.task-tabs&#39;).forEach(tab => { tab.addEventListener(&#39;click&#39;, () => { // 移除所有激活状态 document.querySelectorAll(&#39;.task-tabs&#39;).forEach(t => t.classList.remove(&#39;active&#39;)); // 为当前选项卡添加激活状态 tab.classList.add(&#39;active&#39;); // 隐藏所有内容面板 document.querySelectorAll(&#39;.tab-content&#39;).forEach(content => { content.style.display = &#39;none&#39;; }); // 显示对应内容面板 const targetTab = tab.getAttribute(&#39;data-tab&#39;); document.getElementById(`${targetTab}-content`).style.display = &#39;block&#39;; }); }); ``` ```html <!-- 修改HTML结构添加内容容器 --> <div class="task-content"> <!-- 培训内容 --> <div id="tab1-content" class="tab-content" style="display: block;"> <p>这是培训内容区域</p> </div> <!-- 考试内容 --> <div id="tab2-content" class="tab-content" style="display: none;"> <p>这是考试内容区域</p> </div> </div> ``` ```css /* 补充CSS样式 */ .task-tabs { padding: 8px 12px; cursor: pointer; transition: color 0.3s; } .tab-content { padding: 20px; border-top: 1px solid #eee; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值