1、HTML
2、CSS
- *{
- padding: 0;
- margin: 0;
- }
- .top{
- width: 80%;
- background: white;
- margin: auto;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20px 0px;
- }
- .top .left {
- display: flex;
- align-items: center;
- }
- .top .left .text img{
- width: 54px;
- margin-top: 30px;
- }
- .top .left .text h3{
- font-size: 1.5em;
- color: darkred; /* 设置颜色为红色 */
- }
- .top .right a{
- color: red;
- text-decoration: none;
- }
- .demo{
- display: flex;
- width: 100%;
- height: 30px;
- background-color: rgb(185, 30, 30);
- font-size: 16px;
- font-weight: 100;
- text-decoration: none;
- text-align: center;
- gap: 70px;
- text-align: center;
- align-items: center;
- }
- .demo span{
- color: aliceblue;
- font-size: 100%;
- font-weight: 120%;
- font-style: normal;
- }
- .demo span.sy{
- margin-left: 140px; /* 增加左边距 */
- }
- /* 字体相关的样式 color字体颜色 font-size:字体大小 font-weight 字体粗细
- font-style: italic字体qingxie
- text-decoration 字体是否有倾斜线 line-throuhg 中划线 overline 上划线 underline 下划线
- */
- .middlef-left {
- display: flex; /* 使用 Flexbox 布局 */
- align-items: flex-start; /* 向左对齐 */
- padding: 20px;
- margin-left: 120px;
- }
- .kjfs {
- display: flex; /* 使用 Flexbox */
- flex-direction: column; /* 垂直排列内容 */
- align-items: flex-start; /* 左对齐 */
- height:480px;
- width: 200px;
- margin-right: 20px; /* 设置 .kjfs 和 .tzgg 之间的空隙 */
- }
- .middlef-left h4 {
- text-decoration: underline; /* 添加下划线 */
- text-decoration-color: red; /* 设置下划线颜色为红色 */
- text-decoration-thickness: 3px; /* 设置下划线的厚度 */
- margin-bottom: 15px;
- }
- .kjfs div {
- margin-bottom: 10px; /* 图标与其他元素之间的间距 */
- }
- .kjfs .xyjj{
- flex-direction: column;
- background-color: rgb(129,194,222);
- height:100px;
- width: 200px;
- display: flex; /* 使用 Flexbox */
- justify-content: center; /* 水平居中 */
- align-items: center; /* 垂直居中 */
- text-decoration: none;
- }
- .kjfs .fdyfc{
- background-color: rgb(254,194,15);
- height:100px;
- width: 200px;
- display: flex; /* 使用 Flexbox */
- justify-content: center; /* 水平居中 */
- align-items: center; /* 垂直居中 */
- flex-direction: column;
- }
- .kjfs .fkyq{
- background-color: rgb(191,214,47);
- height:100px;
- width: 200px;
- display: flex;
- justify-content: center; /* 水平居中 */
- align-items: center; /* 垂直居中 */
- flex-direction: column;
- }
- .kjfs .zqly{
- background-color: rgb(47,163,220);
- height:100px;
- width: 200px;
- display: flex;
- justify-content: center; /* 水平居中 */
- align-items: center; /* 垂直居中 */
- flex-direction: column;
- }
- .kjfs span{
- color: white;
- font-size: 18px;
- font-weight: bold; /* 设置字体加粗 */
- }
- .tzgg{
- height:480px;
- width: 50%;
- display: flex; /* 使用 Flexbox */
- flex-direction: column; /* 垂直排列内容 */
- align-items: flex-start;
- }
- .tzgg .aa{
- display: flex; /* 使用 Flexbox */
- align-items: flex-start; /* 垂直对齐到顶部 */
- height:95px;
- width: 100%;
- border-bottom: 2px dashed gray;
- padding-bottom: 5px;
- margin-bottom: 10px;
- }
- .tzgg .bb{
- display: flex; /* 使用 Flexbox */
- align-items: flex-start; /* 垂直对齐到顶部 */
- height:95px;
- width: 100%;
- border-bottom: 2px dashed gray;
- padding-bottom: 5px;
- margin-bottom: 10px;
- }
- .tzgg .cc{
- display: flex; /* 使用 Flexbox */
- align-items: flex-start; /* 垂直对齐到顶部 */
- height:95px;
- width: 100%;
- border-bottom: 2px dashed gray;
- padding-bottom: 5px;
- margin-bottom: 10px;
- }
- .tzgg .dd{
- display: flex; /* 使用 Flexbox */
- align-items: flex-start; /* 垂直对齐到顶部 */
- height:95px;
- width: 100%;
- border-bottom: 2px dashed gray;
- padding-bottom: 5px;
- margin-bottom: 10px;
- }
- .tzgg .text-container {
- display: flex;
- flex-direction: column; /* 纵向排列 h5 和 h6 */
- margin-left: 10px; /* 调整图片和文本之间的间距 */
- }
- #a{
- color: rgb(196, 35, 35); /* 设置颜色为红色 */
- display: inline-block; /* 使用 inline-block 来允许设置 margin */
- margin-bottom: 10px; /* 设置与下一个 span 的间隙 */
- }
- b{
- color: gray; /* 设置颜色为灰色 */
- display: inline-block; /* 使用 inline-block 来允许设置 margin */
- }
- .tzgg{
- height:480px;
- flex-direction: column; /* 垂直排列内容 */
- align-items: flex-start;
- margin-right: 20px;
- }
- .bwcx {
- background-color: rgb(165,41,31); /* 底色为红色 */
- color: white; /* 字体颜色为白色 */
- font-size: 18px; /* 字体大小 */
- height: 40px;
- line-height: 40px;
- }
- .ylzc{
- background-color: rgb(238,238,238);
- padding-left: 10px;
- height: 35px;
- line-height: 35px;
- font-size: 16px;
- }
- .xg{
- background-color: rgb(245,245,245);
- padding-left: 10px;
- height: 35px;
- line-height: 35px;
- font-size: 16px;
- }
- .zh{
- background-color: rgb(238,238,238);
- padding-left: 10px;
- height: 35px;
- line-height: 35px;
- font-size: 16px;
- }
- .kyqt{
- background-color: rgb(245,245,245);
- padding-left: 10px;
- height: 35px;
- line-height: 35px;
- font-size: 16px;
- }
- .mm{
- background-color: rgb(238,238,238);
- padding-left: 10px;
- height: 35px;
- line-height: 35px;
- font-size: 16px;
- }
- /*背景相关样式
- background-image背景图片
- background-repeat背景图片是否平铺 no-repeat不平铺
- background-cover 所在容器铺满
- background-size 容器尺寸
- background-attachment: fixed; 不随浏览器的滚动而滚动
- //定位 position
- static relative absolute fixed
- static:静态模式|常态模式
- relative:代表相对模式，随着浏览器的滚动而滚动，参考物是自己原来的位置，保留自己原来的空间
- absolute:代表绝对模式,随着浏览器的滚动而滚动,参考物是浏览器，释放自己原来的空间
- fixed:代表固定模式，不随着浏览器的滚动而滚动，参考物是浏览器，释放自己原来的空间
- z-index:设置定位层级，值是整数，值越大越在上层;
- */
- .last{
- background-color: rgb(247,247,247);
- width: 100%;
- height: 400px;
- }
- .last h4 {
- text-decoration: underline; /* 添加下划线 */
- text-decoration-color: red; /* 下划线颜色为红色 */
- font-size: 18px; /* 字体大小 */
- margin: 0; /* 去掉默认的边距 */
- text-decoration-thickness: 3px; /* 设置下划线的厚度 */
- margin-left:140px ;
-
- }
- .last .aaaaa{
- display: flex; /* 使用 Flexbox */
- margin-top: 10px;
- position: relative; /* 设置父容器为相对定位 */
- }
- #p{
- color: rgb(196, 35, 35); /* 设置颜色为红色 */
- display: inline-block; /* 使用 inline-block 来允许设置 margin */
- margin-bottom: 10px; /* 设置与下一个 span 的间隙 */
- }
- #q{
- color: gray; /* 设置颜色为灰色 */
- display: inline-block; /* 使用 inline-block 来允许设置 margin */
- }
- .ap{
- margin-left: 140px;
- position: relative; /* 设定相对定位的父容器 */
- width: 310px; /* 设置与控件适合的宽度 */
- height: 200px; /* 设置与控件适合的高度 */
- background-color: white;
- }
- .bp{
- margin-left: 10px;
- position: relative; /* 设定相对定位的父容器 */
- width: 310px; /* 设置与控件适合的宽度 */
- height: 200px; /* 设置与控件适合的高度 */
- background-color: white;
- }
- .cp{
- margin-left: 10px;
- position: relative; /* 设定相对定位的父容器 */
- width: 310px; /* 设置与控件适合的宽度 */
- height: 200px; /* 设置与控件适合的高度 */
- background-color: white;
- }
- .dp{
- margin-left: 10px;
- position: relative; /* 设定相对定位的父容器 */
- width: 310px; /* 设置与控件适合的宽度 */
- height: 200px; /* 设置与控件适合的高度 */
- background-color: white;
- }
- .base-image {
- width: 310px; /* 基础图像的宽度 */
- height: 200px; /* 基础图像的高度 */
- }
- .overlay-image {
- position: absolute; /* 绝对定位的叠加图像 */
- top: 0; /* 位于父元素的顶部 */
- left: 0; /* 位于父元素的左侧 */
- width: 100px; /* 66图像的宽度 */
- height: 40px; /* 66图像的高度 */
- }
- .overlay-image:hover {
- opacity: 0; /* 鼠标悬停时使其透明 */
- }
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
