HTML+CSS,效果如下....初学者搞着玩,不好勿喷
导航部分美化
/* logo部分 */
.logo a {
display: block;
width: 195px;
height: 41px;
background-image: url(../images/6.jpg);
font-size: 0;
}
/* 导航部分 */
.nav {
margin-left: 102px
}
.nav ul {
display: flex;
}
.nav li {
margin-right: 24px;
}
.nav li a {
display: block;
padding: 6px 8px;
line-height: 27px;
font-size: 19px;
}
/* 默认选中样式 并集选择器*/
.nav li .active,
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}
/* 收索区域 */
.search {
display: flex;
padding-left: 19px;
margin-left: 64px;
padding-right: 12px;
width: 412px;
height: 40px;
background: #f3f5f7;
border-radius: 24px;
}
banner区域美化
.banner .wrapper {
display: flex;
justify-content: space-between;
height: 420px;
background-image: url(../images/dd.png);
/* 背景图片不重复 */
background-repeat: no-repeat;
}
.banner .left {
padding: 3px 20px;
width: 191px;
height: 420px;
/* 设置背景半透明状态 */
background-color: rgba(0, 0, 0, 0.42);
}
.banner .left a {
display: block;
height: 40px;
line-height: 46px;
font-size: 16px;
/* background: url(../images/5816d0fd6e4c3_610.jpg) no-repeat, center, right; */
color: #978383;
}
.banner .left a:hover {
color: #0092cb;
}
.banner .right {
width: 218px;
height: 305px;
background-color: pink;
margin-top: 60px;
border-radius: 10px;
}
.banner .right h3 {
line-height: 48px;
height: 48px;
margin-left: 12px;
color: #fff;
font-size: 16px;
font-weight: 400;
}
.banner .right .conter {
padding: 14px;
height: 257px;
background-color: #fff;
border-radius: 10px;
}
.banner .right .conter dl {
margin-bottom: 12px;
border-bottom: 1px solid #2a3641;
}
.banner .right .conter dt {
margin-bottom: 8px;
font-size: 16px;
line-height: 20px;
font-weight: 700;
}
.banner .right .conter dd {
font-size: 12px;
margin-bottom: 8px;
line-height: 16px;
}
.banner .right .conter span {
color: #00a4ff;
}
.banner .right .conter strong {
font-size: 16px;
font-weight: 400;
}
.banner .right a {
display: block;
font-size: 16px;
line-height: 32px;
height: 32px;
border-radius: 15px;
text-align: center;
color: #fff;
background-color: #00a4ff;
}
具体用法可以参照官网来