HTML学习——HTML布局

 时间:2026-04-24 03:16:05

1、新建Notepad并打开

HTML学习——HTML布局

HTML学习——HTML布局

2、使用 <div> 元素的 HTML 布局

HTML学习——HTML布局

3、页眉

#header

{

    background-color:black;

    color:white;

    text-align:center;

    padding:6px;

}

HTML学习——HTML布局

4、左侧导航条

#nav

{

    line-height:50px;

    backgrund-color:gray;

    height:300px;

    width:100px;

    float:left;

    padding:8px;

}

HTML学习——HTML布局

5、右侧正文

#section

{

    width:350px;

    float:left;

    padding:5px;

}

HTML学习——HTML布局

6、页脚

#footer

{

    background-color:black;

    color:white;

    clear:both;

    text-align:centet;

    padding:5px;

}

HTML学习——HTML布局

7、另存为HTML格式到桌面

HTML学习——HTML布局

HTML学习——HTML布局

8、打开HTML桌面生成的网页

HTML学习——HTML布局

  • HTML学习——HTML样式
  • HTML学习——HTML 链接
  • HTML基础学习——编辑HTML
  • HTML是什么?怎么学习HTML
  • HTML学习——HTML的标题
  • 热门搜索
    打印机卡纸怎么办 耳机怎么煲机 小腿酸痛是怎么回事 漂亮的英文怎么写 吃海鲜过敏怎么办 wps怎么合并单元格 喜欢一个人怎么办 房贷怎么算 摇篮奶粉怎么样 ps图层怎么解锁