<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>
</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%;
display
: flex;
align
-items
: center;
}
.top
-left
-side {
flex
: 0 0 30%;
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;
padding
-bottom
: 30px; /* 为边框+内容预留空间 */
}
.content {
position
: absolute;
bottom
: 0;
width
: 100%;
border
-top
: 1px solid #000;
padding
-top
: 10px;
min
-height
: 20px; /* 确保
元素有最小高度 */
}
</style>
content边框不显示出来
本文介绍了SVG起源的Pointer-events属性，该属性可以让HTML元素忽略点击事件，并允许事件穿透至底层元素。文章还提及了该属性在Firefox3.6+、Safari4及Google Chrome等浏览器中的支持情况。
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
