DIV+CSS布置简单登录界面

最新推荐文章于 2023-12-19 23:43:36 发布

伊瑞绮嘉拉

最新推荐文章于 2023-12-19 23:43:36 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44417735/article/details/109264717

版权

DIV+CSS布置简单登录界面

body属性定义

body {
       border: 1px solid #ADD8E6;
       text-align: center;
       background-image: url(bai.jpg);//插入背景图片（须同一文件夹内）
       background-size:100% 100%;//图片自适应大小
       fileter:alpha(opacity=80);//
       -moz-opacity: 0.8;
       opacity: 0.8;//透明度
       font-family: Arial, Helvetica,sans-serif;
       margin-left: auto;
       margin-right: auto;
   }

header属性定义

#header {
         width: auto;
         padding:10px;
         margin: 0px;
         background: -webkit-linear-gradient(top,aliceblue,lavender);//渐变色
         height: 150px;
         text-align: center;
    }

#header p{//字体定义
       font-family: cambria;//字体
       padding-top:10px;
       font-size: 100px;//大小
       margin: 10px;
       color: #9370db;//颜色
  }

contain属性定义

#contain {
          width: auto;
          height: 550px;
          border: 2px solid #ADD8E6;//边界颜色
          text-align: center;
          line-height: 20px;//边界宽度
          background: -webkit-linear-gradient(top,lavender,lightsteelblue);
          padding:10px;
          margin: 0px;
    }

footer属性定义

#footer {
       height: 100px;
       width: auto;
       padding:10px;
       background: -webkit-linear-gradient(top,lightsteelblue,lavender);
       text-align: center;
   }

文字及按钮设定

<body>
<div id="header"  style="font-family:verdana"><p><b>whale</b></p></div

最低0.47元/天解锁文章

伊瑞绮嘉拉

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS布置简单登录界面

DIV+CSS布置简单登录界面body属性定义body { border: 1px solid #ADD8E6; text-align: center; background-image: url(bai.jpg);//插入背景图片（须同一文件夹内） background-size:100% 100%;//图片自适应大小 fileter:alpha(opacity=80);// -moz-opacity: 0.8;
复制链接

扫一扫