JavaWeb开发——使用DIV+CSS设计简单页面

最新推荐文章于 2024-10-05 08:34:55 发布

炸鸡和薯条

最新推荐文章于 2024-10-05 08:34:55 发布

阅读量1.7k

点赞数 4

分类专栏： JavaWeb 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43908642/article/details/109126882

版权

使用frameset标签，以及搭配使用DIV+CSS，设计并布局一个简单的页面。

① 定义body属性

body{
      font-size:12px;
      margin:0px auto;
      height:auto;
      width:100%;
      background-image:url(star.jpg);/*插入背景图片*/
      color:#FFFFFF;
      background-size:cover;
      text-align:center;
      font-family:Arial,Helvetica,sans-serif;
     }

② 定义字体属性

h1{
       font-family:'Times New Roman', Times, serif;
       font-size:50px;
       font-weight:bold;
       text-align:center;
       color:#FFFFFF;
      }
 p{
       text-indent:2em;
       text-align:center;
       padding-top:8px;
     }

③ 定义分割线属性

#line{
        display:inline-block;
        width:310px;
        border-top:1px solid #CCCCCC;
        vertical-align:5px;
        margin-left:10px;
        margin-right:10px;
     }

④ 定义页头header的属性

#header{
        height:100px;
        width:auto;
        margin-right:auto;
        margin-left:auto;
        padding:0px;
        text-align:center;
        background-repeat:no-repeat;
       }

⑤ 定义导航栏的属性

#navigator{       /*定义一个导航栏的长盒子*/
         margin-top:5px;
         display: inline-block;
         font-size:21px;
         list-style-type:none;   /*让navigator这个大盒子下面的小盒子li列表样式不显示，这对于标准浏览器很重要*/
          }
 #navigator li{
           float:left;  让li这些小盒子左对齐*/
             }
 #navigator li a{
            color:#FFFFFF;
            text-decoration:none; /*让li盒子里面的链接样式没有下划线*/
            padding-top:4px;
            display:block     /*让li里面的链接以块状呈现，就像一个按钮，而不必一定要点中间的链接文字才起作用*/
            text-align:center;
            margin-left:64px;
           }
#navigator li a:hover{
            background-color:#808080;        /*鼠标指针移到链接盒子上面改变盒子的背景色*/
            color:#FFFFFF;
           }

⑥ 定义中间内容部分

#content{
           width:auto;
           padding:5px 0px 0px 0px;
        }
#content td{
           padding:8px;
        }

⑦ 定义页脚footer属性

#footer{
           clear:both;
           width:auto;
           margin-right:auto;
           margin-left:auto;
           line-height:2em;
           text-align:center;
           padding:0px;
        }

⑧ 定义表单属性

#username,#password{
            width:250px;
            height:31px;
            border:1px solid #A6A6A6;
            border-radius:5px;
            padding-left:10px;
           }
#checkcode{
            width:164px;
            height:31px;
            border:1px solid #A6A6A6;
            border-radius:5px;
            padding-left:10px;
           }
#img_check{
            height:32px;
            width:80px;
            vertical-align:middle;
            border:1px solid #A6A6A6;
            border-radius:5px;
          }
#signin{
           width:150px;
           height:40px;
           background-color:#FFD026;
           border:1px solid #FFD026;
         }

⑨ 定义各标记的边界

*{
          margin:0px;
    }

⑩ 结构代码

<body>
    <div id="header">
        <h1>Spiderman</h1>
            <div id="navigator">
                <ul id="navigator">
                     <li><a href="#">首页</a></li>
                     <li><a href="#">文章</a