zoukankan      html  css  js  c++  java
  • CSS背景图片设置

    *{
        margin:0px;
        padding:0px;
        list-style: none;
        text-decoration: none;
        font-family: Arial,'Microsoft YaHei',"Helvetica Neue",Helvetica,sans-serif;
    }
    body{
      background-color: #e5e5e5;
      background: url(../images/tyczz2.jpg);
      background-position: center top;
      background-size: 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
      
    
    }
    .main{
        background-color: #ffffff;
        width:1220px;
        margin:0 auto;
        height:1480px;
    }
    .head{
        width:100%;
        height:40px;
        background-color:#000;
    }
    .nav{
        
        position:relative;
        z-index:3;
    }
    .nav ul{
        width:1305px;
        height:40px;
        margin:0px auto;
    }
    .nav ul li{
        font-size:16px;
        color:#fff;
        width:115px;
        height:40px;
        float:left;
        text-align:center;
        margin-left:30px;    
    }
    .nav ul li dl a{
        color:#fff;
    }
    .nav ul li dl dt{
        margin:0px;
        padding:0px;
        width:115px;
        height:40px;
        line-height:40px;
        position: relative;    
    }
    .nav ul li dl dt:hover{
        background-color:#173E7B;    
    }
    .nav ul li dl dd{
        font-size:14px;
        color:black;
        width:115px;
        height:30px;
        background-color:#000;
        border-top:1px solid #fff;
        line-height: 30px;
        display:none;
        border-radius:5px;
    
    }
    .nav ul li:hover dl dd{
        display:block;
        position:relative;
    
    }
    .nav ul li dl dd .hot{
        color:red;
    
    }
    .nav ul li dl dd a:hover{
        color: #ffd053;
    }
    .nav ul li dl dd .hot:hover{
        color:#44EAAD;
    }
    .nav ul li dl dt img{
        position:absolute;
        bottom:25px;
    }
    .nav ul li dl dd .hot-img {
        position:absolute;
        bottom:20px;
        
    }
    .creat{
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px dashed;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
    .nav ul li dl dd p{
        width:60px;
        height:30px;
        line-height:30px;
    }
    .ad1{
        width:100%;
        margin:0px auto;
        margin-left:10px;
    }
    .ad{
        width:100%;
        height:110px;
        margin:5px auto;
        margin-left:10px;
    }
    
    /***********************************************************************/
    .container{
        width:1200px;
        height:568px;
        margin-left:10px;
    }
    .promo{
        width:800px;
        height:458px;
        float:left;
    }
    .rec{
        width:350px;
        height:458px;
        float:left;
    }
    .pic{
        width:115px;
        height: 70px;
        float:left;
        margin-right:15px;
        
    }
    .promo ul li{
        width:100%;
        height:70px;
        margin-top:15px;
    }
    .promo ul li p{
        position: relative;
    }
    
    .promo ul li p a{
        color:#f60;
        position:absolute;
        right:0px;
        top:0px;
    }
    .promo ul li p a:hover{
        text-decoration: underline;
    }
    .promo ul li h3 a{
        display:block;
        color: #333;
        font-size: 18px;
        margin-bottom:8px;
    }
    .promo ul li h3 a:hover{
        text-decoration: underline;
        color: #FF6600;
    }
    .promo ul li p {
        font-size: 12px;
        height: 40px;
        line-height: 20px;
        overflow: hidden;
        color: #666565;
        position: relative;
    }
    .rec{
        margin-left: 50px;
    }
    /***********************************************************************/
    .rec-type{
        width: 350px;
        height: 165px;
        
    
    }
    .rec-1{
        width:350px;
        height:45px;
        border-left:3px solid #00aa98;
        padding-left:7px;
        margin-top:15px;
    }
    .rec-1 h3{
        font-size: 16px;
        height:27px
        line-height:22px;
        color:#000;
        padding: 0 12px 0 5px;
        float:left;
    }
    .rec-1 span{
        display:block;
        color:#787878;
        height:27px;
        line-height:24px;
        font-size: 12px;
    
    }
    .rec-4{
        padding:0 8px;
        font-size: 14px;
        height:18px;
        line-height:20px;
    }
    .rec a{
        color:#333;
    }
    .rec a:hover{
        text-decoration: underline;
    }
    .promo h2{
        border-bottom: 3px solid #00aa98;
        display:inline-block;
        height: 30px;
        padding-left: 28px;
        background: url(../images/ico_i_sys.png) 0 0 no-repeat;
    }
    .rec h2{
        border-bottom: 3px solid #00aa98;
        display:inline-block;
        height: 30px;
        padding-left: 28px;
        background: url(../images/ico_i_sys.png) 0 -30px no-repeat;
         margin-bottom:10px;
    }
    
    
    /**************************************************************************/
    .footer1 {
        height: 190px;
        background-color:#061a31;
        margin:20px 0px 0px 0px;
        padding: 0px;
        width: 1200px;
        
        text-align: center;
        display: block;
        margin-left:10px;
    
        
    }
    .footer-ad {
        padding: 0px;
        margin: 0px;
        width: 24.83%;
        height: 70px;
        background-color:#071f3c;
        border: 1px solid #D5B362;
        float: left;
        display: block;
    }
    .footer-ad p {
        margin-top: 4px;
        color: #fff;
        font-size: 18px;
    
    }
    .footer-ad-bottom{
        position:relative;
    }
    .footer1 i {
        display: block;
        width: 900px;
        height: 4px;
        background-color: #fff;
        overflow: hidden;
        position:relative;
        left: 140px;
        top:55px;
        clear: both;
        z-index: 1;
    }
    .footer-ul {
        height: 100%;
        margin: 0px;
        padding: 0px;
        display: flex;
    
    }
    .footer-ul li {
        margin-top: 10px;
        padding: 0px;
        z-index: 2;
        margin: 0px auto; 
        padding: 0px;
        display: inline-block;
    }
    .footer-bootom-radius {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        float: left;
        background-color: #fff;
        padding: 0px;
        margin-top: 5px;
    }
    .footer-bootom-radius span {
        display: block;
        font-size: 30px;
        line-height: 36px;
        margin-top: 22px;
    }
    /****************************************************************************/
    .footer{
        width:100%;
        background-color: #020c18;
        text-align: center;
        padding-bottom: 20px;
    }
    .w1000{
        width: 1000px;
        margin:0px auto;
    }
    .ico{
        height: 47px;
        background:url(../images/ico.png) no-repeat;
    }
    .footer .flink {
        text-align: center;
        color: #434343;
        height: 50px;
        line-height: 50px;
    }
    .footer .flink a {
        font-size: 12px;
        font-family: "微软雅黑";
        color: #fff;
        margin: 0 10px;
        transition: all 0.3s;
    }
    .footer .flink a:hover{
        color: #ffcf2e;
    }
    .footer .copyright {
        text-align: center;
        color: #fff;
        font-size: 12px;
        font-family: "微软雅黑";
    
    }
  • 相关阅读:
    jmeter 安装
    Day05_系统监控、rpm、yum软件包管理及源码安装python解释器
    Day04_vim编辑器及硬盘操作
    Day03_用户群组权限及正文处理命令
    Day02_操作系统、网络及Linux基础
    Day01_计算机硬件及启动流程
    让Sublime Text成为静态WEB服务器:SublimeServer
    sublime text2-text3 定义的不同浏览器的预览快捷键
    css之px自动转rem—“懒人”必备
    修改Sublime Text3 的侧边栏字体大小
  • 原文地址:https://www.cnblogs.com/gzpu/p/12321453.html
Copyright © 2011-2022 走看看