Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

HTML+CSS 轻松入门之盒子模型之边框（下）

通常我们是很少给p标签来加边框的，但是在设计的时候，我们会给div 标签 加上 边框，这样看起来会明显一点

下面我们来做一个实例：比如网站首页部分，头部　　中部（分为左右俩块）　　底部　　这样的一个布局样式，我们要怎么实现呢

首先我们要给一个大的div  头部中部和底部都放在这个div 中 这样我们就要给第一个div 做一个css样式，然后再这个div 中加入3个div 标签

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
        #dv1{
          width:800px;
          height:500px;
          border:1px solid red;
          margin:0 auto;   /*居中*/
        }


  </style>
</head>
<body>
    <div id="dv1">
          <div id="top">头部</div>
          <div id="cen">中部</div>
          <div id="but">底部</div>
    </div>
</body>
</html>

下面我们要给头部中部底部分别加上样式，完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
        #dv1{
          width:800px; height:500px;border:1px solid red;margin:0 auto;   /*居中*/text-align:center;
        }
        #top{
          width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px;
        }
        #cen{
          width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px;
        }
        #but{
          width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px;
        }

        #left{
          width:200px;
          height:198px;
          border:1px solid green;
          margin-left:5px;
          float:left;
        }
        #right{
          width:570px;
          height:198px;
          border:1px solid black;
          float:right;
        }

  </style>
</head>
<body>
    <div id="dv1">
          <div id="top">头部</div>
          <div id="cen">
            <div id="left">左边</div>
            <div id="right">右边</div>
          </div>
          <div id="but">底部</div>
    </div>
</body>
</html>

注：边框也要分上下左右的

    border-top  上

    border-left  左

    border-right  右

    border-buttom 下

Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #dv1{ width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center; } #top{ width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px; } #cen{ width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px; } #but{ width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px; } #left{ width:200px; height:198px; border:1px solid green; margin-left:5px; float:left; } #right{ width:570px; height:198px; border:1px solid black; float:right; } </style> </head> <body> <div id="dv1"> <div id="top">头部</div> <div id="cen"> <div id="left">左边</div> <div id="right">右边</div> </div> <div id="but">底部</div> </div> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492782 spielt ab