javaWeb入门到实战1.2.6实践环节页面布局

最新推荐文章于 2024-07-06 10:50:45 发布

暖暖落辰

最新推荐文章于 2024-07-06 10:50:45 发布

阅读量105

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_60315095/article/details/133436876

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice1_2</title>
  <style type="text/css">
    body{
      font-family:Arial,Helvetical,sans-serif;
      font-size:12px;
      margin:0px auto;
      width:800px;
      border:1px solid #006633;
    }

    #header{
      height:100px;
      width:800px;
      background-image: url("背景图.webp");
      background-repeat: no-repeat;
      background-size: cover;
      margin:0px 0px 3px 0px;
    }

    #navigator{
      heght:25px;
      width:800px;
      font-size:14px;
      list-style-type:none;      /*ist-style-type 属性设置为 none，意味着列表项不显示默认的项目符号。*/
    }

    #navigator li{
      float:left;
    }

    #navigator li a{
      color:#000000;
      text-decoration: none;   /*"text-decoration: none;" 是一个 CSS 样式属性，用于去除文本的装饰线条，例如链接的下划线。*/
      padding-top: 4px;
      display: block;   /*让li里面的链接以块状呈现，就像一个按钮，而不必一定要点中链接文字才起作用*/
      width:131px;
      height:22px;
      text-align:center;
      background-color: #009966;
      margin-left:2px;
    }

    #navigator li a:hover{
      background-color: #006633;
      color:#FFFFFF;
    }

    #content{
      height:auto;
      width:780px;
      line-height: 1.5em;
      padding:10px
    }

    #content p{
      text-indent:2em;
    }

    #content h3{
      font-size:16px;
      margin:10px;
    }

    #footer{
      height:50px;
      width:780px;
      line-height: 2em;
      text-align: center;
      background-color: #009966;
      padding:0px;
    }

    *{
      margin:0px;
      padding:0px;
    }

  </style>
</head>
<body>
<div id="header"></div>
<div id="navigator">
  <ul id="navigator">
    <li><a href="#">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">相册</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">帮助</a></li>
  </ul>
  <div id="content">
    <h3>前言</h3>
    <p> zyy编写css实践环节————页面布局</p>
    <h3>理解DIV+CSS布局</h3>
    <p>希望我能成功！</p>
  </div>
</div>
<div id="footer">
  <p>关于| 广告服务| 招聘| 客服中心| QQ留言| 网站管理| 会员登录| 购物车</p>
  <p>Copyright@清华大学出版社</p>
</div>>

</body>
</html>