【css】content-box 的应用

最新推荐文章于 2025-07-14 14:22:40 发布

原创最新推荐文章于 2025-07-14 14:22:40 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

前端那些事同时被 2 个专栏收录

54 篇文章

订阅专栏

前端效果

40 篇文章

订阅专栏

本文介绍了一个具体的HTML和CSS实现方案，用于构建腾讯课堂网站上的搜索功能。包括了搜索框的布局、样式设置及按钮设计等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.搜索文本框拼接

html代码：

<div class="header-index-search ">
            	<div class="mod-search ">
            		<a  class="mod-search-dropdown ">
            			<span class="mod-search-dropdown-item mod-search-dropdown-item-selected ">课程<i class="icon-font i-v-bottom-small "></i>
            			</span>              			
            			</span>
            		</a>
            		<input type="text " class="mod-search_input " maxlength="38 " placeholder="腾讯课堂设计大师班 "/>
            	  <a  class="mod-search_btn-search ">
            	  	<i class="icon-font i-search-bold "></i>
            	  </a>
            	</div>
            </div>

css样式：

			/*box-sizing 属性--start*/
			.mod-search {
				box-sizing: content-box;
				width: 348px;
				height: 48px;
				position: relative;
				border: 1px solid #ccc;
				border-radius: 3px;
				/*background-color: #FFA500;*/
			}

			.mod-search-dropdown {
				border: 1px solid #ccc;
				display: block;
				position: absolute;
				top: -1px;
				left: -1px;
				cursor: pointer;
				color: #333;
				/*background-color: #FF1493;*/
			}
			
			.mod-search-dropdown-item {
				display: block;
				position: relative;
				width: 62px;
				height: 48px;
				line-height: 48px;
				text-indent: 10px;
			}															
			.mod-search_input {
				box-sizing: content-box;
				width: 225px;
				height: 30px;
				line-height: 30px;
				margin: 0 0 0 62px;
				padding: 10px 10px 10px 0;
				background: 0 0;
				text-indent: 12px;
				vertical-align: top;
				border: 0;
			}			
			.mod-search_btn-search {
				width: 50px;
				height: 50px;
				line-height: 50px;
				position: absolute;
				top: -1px;
				right: -1px;
				background-color: #23b8ff;
				border-radius: 0 3px 3px 0;
				text-align: center;
				color: #fff;
			}
/*box-sizing 属性--end*/