> 文档中心 > 学成在线项目

学成在线项目


HTML代码

                学成<a href="https://www.csdndoc.com/tag/%e5%9c%a8%e7%ba%bf" title="View all posts in 在线" target="_blank" style="color:#0ec3f3;font-size: 18px;font-weight: 600;">在线</a>            

学成在线项目

学成在线项目 张三  您好!

CSS样式

* {    margin: 0;    padding: 0;    /* 内减模式 */    box-sizing: border-box;}li {    list-style: none;}a {    text-decoration: none;}/* 清除浮动 */.clearfix::before,.clearfix::after {    content: '';    display: table;}/* 真正清除浮动的标签 */.clearfix::after {    clear: both;}body {    background-color: #f3f5f7;}/* 版心 */.wrapper {    margin: 0 auto;    width: 1200px;    }/* 头部 */.header {    /* margin-top: 30px;    margin-bottom: 30px; */    margin: 30px auto;    height: 42px;}h1 {    float: left;}/* 导航 */.nav {    margin-left: 79px;    float: left;    height: 42px;}.nav li {    float: left;    margin-right: 26px;}.nav li a {    display: block;    padding: 0 9px;    height: 42px;    line-height: 42px;    font-size: 18px;    color: #050505;}.nav li a:hover {    border-bottom: 2px solid #00a4ff;    color: #00a4ff;}/* 搜索 */.search {    float: left;    margin-left: 59px;    width: 412px;    height: 40px;    border: 1px solid #00a4ff;}.search input {    float: left;    padding-left: 20px;    border: 0;    width: 360px;    height: 38px;}/* 控制 placeholder 的样式 */.search input::placeholder {    font-style: 14px;    color: #bfbfbf;}.search button {    float: left;    border: 0;    width: 50px;    height: 40px;    background-image: url('../images/btn.png');}/* 用户 */.user {    line-height: 42px;    float: right;    margin-right: 35px;    height: 42px;}.user img {    /* 调节图片垂直对齐方式,middle: 居中 */    vertical-align: middle;}/* 轮播图banner */.banner {    height: 420px;    background-color: #1c036c;}.banner .wrapper {    height: 420px;    background-image: url('../images/banner2.png');}.banner .left {    float: left;    padding: 0 20px;    width: 190px;    height: 420px;    background-color: rgba(0,0,0,0.3);    /* 行高属于控制文字的属性,能继承 */    line-height: 44px;}.banner .right {    float: right;    margin-top: 50px;    width: 228px;    height: 300px;    background-color: #fff;}.banner .left span {    float: right;}.banner .left a {    font-size: 14px;    color: #fff;}.banner .left a:hover {    color: #00a4ff;}.banner .right h2 {    height: 48px;    background-color: #9bceea;    text-align: center;    line-height: 48px;    font-size: 18px;    color: #fff;}.banner .right .content {    padding: 0 18px;}.banner .right .content dl {    padding: 12px 0;    border-bottom: 2px solid #e5e5e5;}.banner .right .content dt {    font-size: 16px;    color: #4e4e4e;}.banner .right .content dd {    font-size: 14px;    color: #4e4e4e;}.banner .right .more {    display: block;    /* margin: 4px 14px 0; */    margin: 4px auto 0;    width: 200px;    height: 40px;    border: 1px solid #00a4ff;    font-size: 16px;    font-weight: 700;    color: #00a4ff;    text-align: center;    line-height: 40px;}/* 精品推荐 */.goods {    padding-left: 34px;    padding-right: 26px;    /* 阴影 */    box-shadow: 0 2px 3px 0 rgba(118, 118, 118, 0.2);    margin-top: 8px;    height: 60px;    background-color: #fff;    line-height: 60px;}.goods h2 {    float: left;    font-size: 16px;    color: #00a4ff;    font-weight: 400;}.goods ul {    float: left;    margin-left: 30px;}.goods ul li {    float: left;}.goods .hobby {    float: right;    font-size: 14px;    color: #00a4ff;}.goods ul a {    border-left: 1px solid #bfbfbf;    padding: 0 30px;    font-size: 16px;    color: #050505;}/* 精品推荐课程 */.box {    margin-top: 35px;}.box .title{    height: 40px;}.box .title h2{    float: left;    font-size: 20px;    color: #494949;    font-weight: 400;}.box .title a {    float: right;    margin-right: 30px;    font-size: 12px;    color: #a5a5a5;}.box .content li {    float: left;    margin-right: 15px;    margin-bottom: 15px;    width: 228px;    height: 270px;    background-color: #fff;    }.box .content li:nth-child(5n) {    margin-right: 0;}.box .content li h3 {    padding: 20px;    font-size: 14px;    color: #050505;    font-weight: normal;}.box .content li p {    padding: 0 20px;    font-size: 12px;    color: #999;}.box .content li span {    color: #ff7c2d;}/* 版权 */.footer {    margin-top: 40px;    padding-top: 30px;    height: 212px;    background-color: #fff;}.footer .left {    float: left;}.footer .right {    float: right;}.footer .left p {    margin: 20px 0 10px;    font-size: 12px;    color: #666;}.footer .left a {    display: inline-block;    width: 120px;    height: 36px;    border: 1px solid #00a4ff;    text-align: center;    line-height: 36px;    font-size: 16px;    color: #00a4ff;}.footer .right dl {    float: left;    margin-left: 120px;}.footer .right dd {    margin-top: 5px;    font-size: 13px;}