• 日期: 2028-06-05
  • 标签: 常规
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四大名著</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    .part3 {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      padding-top: 30px;
    }
    .p3con {
      width: 1200px;
      height: 450px;
      overflow: hidden;
      background: #81a849;
    }
    .p3con .p3conL {
      width: 900px;
      height: 450px;
      float: left;
      overflow: hidden;
    }
    .subBox0 ul {
      width: 100000px;
      margin: 0;
      padding: 0;
    }
    .subBox0 ul li {
      width: 900px;
      height: 450px;
      float: left;
      display: inline;
    }
    .subBox0 ul li img {
      width: 900px;
      height: 450px;
    }
    .p3con .p3conR {
      width: 230px;
      padding: 0 35px;
      height: 450px;
      float: right;
      overflow: hidden;
    }
    .p3con .p3conR img {
      display: block;
      margin: 0 auto;
      margin-top: 60px;
      width: 67px;
      height: 67px;
      overflow: hidden;
    }
    .p3con .p3conR .tit {
      text-align: center;
      font-size: 18px;
      color: #fff;
      margin: 25px auto;
    }
    .p3con .p3conR .sub {
      border-top: 1px solid #c0d4a4;
      border-bottom: 1px solid #c0d4a4;
      padding: 20px 18px;
      line-height: 20px;
      color: #fff;
      max-height: 142px;
      overflow: hidden;
    }
    .p3con .p3conR .updowm {
      width: 230px;
      font-size: 14px;
      color: #fff;
      margin-top: 20px;
    }
    .p3con .p3conR .updowm .up {
      background: url(../images/left.png) no-repeat left;
      padding-left: 10px;
      float: left;
      cursor: pointer;
    }
    .p3con .p3conR .updowm .down {
      padding-right: 10px;
      background: url(../images/right.png) no-repeat right;
      float: right;
      cursor: pointer;
    }
<pre><code>.part4 {
  width: 100%;
  min-width: 1200px;
  background: #fff;
  overflow: hidden;
}
.part4 ul {
  overflow: hidden;
}
.part4 ul li {
  background: #f8f8f8;
  padding: 20px 20px;
  cursor: pointer;
  margin-bottom: 30px;
  transition: all 0.5s;
}
.part4 ul li .newl {
  float: left;
  width: 900px;
  height: 98px;
  overflow: hidden;
}
.part4 ul li .newl a {
  color: #4c4c4c;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  width: 95%;
  display: block;
  margin-bottom: 15px;
  height: 25px;
  line-height: 25px;
}
.part4 ul li .newl .sub {
  font-size: 14px;
  color: #666666;
  line-height: 24px;
  width: 95%;
  max-height: 50px;
  overflow: hidden;
}
.part4 ul li .newr {
  float: right;
  border-left: 1px solid #cccccc;
  width: 255px;
  height: 98px;
  overflow: hidden;
  color: #e0e0e0;
  font-family: arial;
  background: url(../images/icon.png) center right no-repeat;
}
.part4 ul li .newr span {
  font-size: 42px;
  display: block;
  line-height: 45px;
  text-align: right;
  padding-right: 60px;
}
.part4 ul li .newr time {
  font-size: 18px;
  text-align: right;
  display: block;
  padding-right: 60px;
}
.part4 ul li:hover {
  background: #81a849;
}
.part4 ul li:hover .newl a {
  color: #fff;
}
.part4 ul li:hover .newl .sub {
  color: #dee7d4;
}
.part4 ul li:hover .newr {
  border-left: 1px solid #9ab96d;
  background: url(../images/icon2.png) no-repeat right;
  color: #c6d7b3;
}
.part4 ul li:hover .newr span {
  color: #fff;
}

.more2 {
  width: 57px;
  height: 57px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.more2 a {
  width: 57px;
  height: 57px;
  display: block;
  background: url(../images/more.png) no-repeat;
  color: #4f8320;
  font-size: 12px;
  line-height: 57px;
  text-align: center;
  margin: auto;
  cursor: pointer;
}
.more2 a:hover {
  font-weight: bold;
}

.footer {
  width: 100%;
  min-width: 1200px;
  background: url(../images/fbg.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  padding-bottom: 40px;
}
.footer .foot {
  margin: 60px auto 20px;
  background: #ffffff;
  padding: 10px;
  border: 1px solid #f7f5ee;
}
.footer .foot .fnav {
  width: 60%;
  margin: 0 auto;
  padding-top: 60px;
}
.footer .foot .fnav a {
  display: inline-block;
  float: left;
  width: 100px;
  background: url(../images/navbg.png) no-repeat right;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  color: #666;
}
.footer .foot .fot {
  padding-bottom: 60px;
  padding-top: 15px;
  width: 60%;
  margin: 0 auto;
  color: #999999;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
}

.brandnav {
  width: 1200px;
  margin: 0 auto;
  height: 35px;
  overflow: hidden;
  line-height: 35px;
  color: #999999;
  font-size: 14px;
}
.brandnav .con {
  max-width: 1200px;
  height: 35px;
  float: right;
  overflow: hidden;
}

.typebox {
  width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
  background: url(../images/line.png) repeat-x bottom;
  text-align: center;
  padding-bottom: 25px;
}
.typebox a {
  display: inline-block;
  font-size: 14px;
  color: #666;
  line-height: 35px;
  margin: auto 25px;
}
.typebox a:hover {
  background: url(../images/typebg.png) no-repeat;
}
</code></pre>
  </style>
</head>
<body>
  <!-- 网页内容 -->
</body>
</html>
四大名著 CSS 代码示例

原文地址: https://www.cveoy.top/t/topic/pkT 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录