css婚礼页面

*{
  margin:0px;
  padding:0px;
 }
 body{font:14px 微软雅黑; }
 li{list-style:none;}
 a{
   display:block; /*块状显示*/
   text-decoration:none;/*清除下划线*/
   }
 .top{
     width:980px;/*logo宽高*/
     height:70px;
     padding-top:20px;/*顶部位置,上下为零左右居中*/
     margin:0 auto;
     }
 .nav{  
     width:100%;
     height:48px;
     background:#fe668f;
     line-height:48px;/*菜单文字竖直高度*/
     }
 .nav ul{
       width:980px; /*文字宽度/位置*/
       margin:o auto;
        }
.nav ul li{float:left;}
.nav ul li a{
        font-size:16px;
        color:#fff;
        padding:0 50px;/*文字之间距离 上下0 左右50像素*/
            }
.nav ul li a:hover{background:#fe9ab5;}/*当鼠标经过时底纹变色*/
.banner{
     width:980px; /*图片容器的宽度*/
     height:430px;
     margin:0 auto;/*容器位置*/
     position:relative;/*相对定位*/
       }
 .banner img{
                 width:100%;/*图片宽度*/
                 height:100%;
                 position:absolute;/*绝对定位*/
             }
.banner ul{
         position:absolute;
         left:20%; /*左边位置*/
         bottom:20px;
         }
.banner ul li{
            width:120px;/*按钮的宽度*/
            height:12px;
            background:#fe668f;
            margin:6px;/*按钮之间的距离*/
            float:left;
            boeder-radius:3px;/*添加圆角*/
            cursor:pointer;/*鼠标变手型*/
             }
.banner ul li.hot{background:#ffff99;}
/*内容部分*/
.content{
      width:980px;
      height:934px;
      background:url(../images/content_bg.jpg);
      margin:0 auto;/*图片的位置*/
      padding-left:150px;/*内边距,左缩进*/
      box-sizing:border-box;/*修复padding*/
        }
    /*标题1样式*/
    h2.step{
          width:454px;
          height:80px;/*文字宽高*/
          font-size:20px;
          color:#dd8787;
          line-height:80px;/*文字上边距*/
          font-weight:normal;/*文字不加粗*/
          background:url(../images/step.jpg)no-repeat;/*添加图片,不重复*/
          background-position:center right;/*图片上下居中,右对齐*/
           }
  /*标题2样式*/
  h3{
   width:444px;
   height:44px;/*标题2的宽高*/ 
   color:#dd8787;
   font-weight:noemal;/*文字不加粗*/
   line-height:44px;/*文字竖直居中*/
   border-bottom:1px solid #dd8787;/*加下边框线*/
    }
    /*表格的样式*/
   table td{
        height:50px;/*列的竖直高度*/
        color:#dd8787;
           }
   td.left{
        width:120px;/*列的宽度*/
        text-align:right;/*右对齐*/
          }
 /*文本框样式*/
 input.tt{
       width:320px;/*文本框宽高*/
       height:30px;
       border:1px solid #dd8787;/*给文本框加边框*/
       }

/*下拉菜单样式*/
select{
    width:180px;
    height:30px;
    border:1px solid #dd8787;
       }
textarea{
     width:380px;
     padding:20px;/*内边距*/
     border:1px solid #dd8787;/*给文本框加边框*/
     resize:none;/*不能改变大小*/
        }

/*按钮样式*/
input.but{
       width:170px;/*按钮宽高*/
       height:50px;
       background:#fe668f;
       color:#fff;
       font-size:18px;
       border:none;/*不加边框*/
       border-radius:5px;/*添加圆角*/
       cursor:pointer;/*鼠标变手形*/
       margin:20px auto;/*上下距离,左右居中*/
       display:block;/*块状显示*/
       text-align:center;/*文字居中*/
         }
         /*页脚样式*/
    footer{
       width:100%;
       height:70px;
       background:#dd8787;
       text-align:center;/*文字居中*/
       line-height:30px;
    }
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值