实现背景图布局
实现 布局 背景图
2023-09-27 14:24:29 时间
上面的内容如何实现呢?
先添加一个背景图。
height: 500px;
background: url("/Index/Index/image/about/sim.png");
背景图,需要设置高度,并保证图片路径正确。
然后就是正常的排列
.bottom-vision-title {
text-align: center;
font-size: 30px;
font-weight: bold;
padding-top: 100px;
}
.bottom-vision-one-title {
text-align: center;
font-size: 18px;
font-weight: bold;
padding-top: 49px;
}
.bottom-vision-one-content {
text-align: center;
font-size: 18px;
font-weight: 400;
padding-top: 18px;
}
.bottom-vision-two-title {
text-align: center;
font-size: 18px;
font-weight: bold;
padding-top: 39px;
}
.bottom-vision-two-content {
text-align: center;
font-size: 18px;
font-weight: 400;
padding-top: 18px;
}
最有趣的是下面的tag,正方形
.tag {
display: flex;
width: 550px;
margin:0 auto;
padding-top:59px;
justify-content: space-between;
//border: 1px solid red;
.tag-item {
width: 65px;
height: 18px;
//border: 1px solid red;
display: flex;
.tag-item-check {
margin-top:5px;
width: 8px;
height: 8px;
background-color: #FFFFFF;
}
.tag-item-content {
margin-left:21px;
font-size: 18px;
font-weight: 400;
}
}
}
Tips:需要计算宽高,需要用border来辅助布局。div可以实现方框的效果,很有趣。通过Flex布局,子元素宽度是个技术活,不能太宽,否则无法space-between排列。
下面是html内容。
<div class="bottom-vision">
<div class="bottom-vision-title">
我们的使命愿景
</div>
<div class="bottom-vision-one-title">
xx的使命
</div>
<div class="bottom-vision-one-content">
科技成就未来
</div>
<div class="bottom-vision-two-title">
xx的愿景
</div>
<div class="bottom-vision-two-content">
成为苏北地区最大的互联网研发企业
</div>
<div class="tag">
<div class="tag-item">
<div class="tag-item-check">
</div>
<div class="tag-item-content">
诠释
</div>
</div>
<div class="tag-item">
<div class="tag-item-check">
</div>
<div class="tag-item-content">
整合
</div>
</div>
<div class="tag-item">
<div class="tag-item-check">
</div>
<div class="tag-item-content">
实践
</div>
</div>
<div class="tag-item">
<div class="tag-item-check">
</div>
<div class="tag-item-content">
创新
</div>
</div>
</div>
</div>
相关文章
- 基于netcore实现mongodb和ElasticSearch之间的数据实时同步的工具(Mongo2Es)
- ListView 九宫格布局实现
- 原生JS实现钟表效果
- 支付行业,如何通过日志大数据实现深度分析及风控
- AndroidStudio制作登录和注册功能的实现,界面的布局介绍
- 【详解】线程池及其自定义线程池的实现
- Swift开发:NSLayoutConstraint纯代码实现自动布局-初级篇
- Swift - 使用网格(UICollectionView)的自定义布局实现复杂页面
- RecycleView实现多布局可展开列表
- Html跨域js封装,前端页面跨域js,postMessage实现跨域
- Django实现adminx自定义布局管理编辑界面
- Python基础入门-实现猜数字小游戏
- vue实战入门基础篇八:从零开始仿门户网站实例-全局检索实现
- 不使用Element UI库借助jQuery的库也可以实现‘搜索下拉框’的功能噢
- 纯js实现瀑布流布局及ajax动态新增数据
- 云时代,CIO如何玩转云灾备,实现“数据零丢失”?
- 浅析现代CSS解决方案:数学函数min、max、clamp、calc及使用vw配合clamp实现响应式布局
- 快速排序,归并排序,堆排序的数组和单链表实现
- 8种常见数据结构及其Javascript实现
- python3.7实现base64加密和解密
- Unity 屏幕特效 之 基础知识简介,屏幕灰度特效实现
- Unity 基础 之 使用 Display 简单的实现 多屏幕显示的效果
- Flutter 通过 GridView 实现网格布局
- CSS实现9宫格布局的4种方法:flex、float、grid、table布局
- css实现左侧固定宽度,右侧宽度自适应(转载)
- Vue开发实例(12)之实现动态左侧菜单导航
- 【Unity Shader】屏幕后处理2.0:实现Sobel边缘检测