课程在线测试DEMO

伪君子呀

已于 2024-09-02 16:27:49 修改

阅读量266

点赞数 8

分类专栏： HTML+CSS 文章标签： html5 css

于 2024-09-02 16:10:22 首次发布

本文链接：https://blog.csdn.net/weixin_45540438/article/details/141822468

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;

}