• 【HTML打卡】0125 实战首页布局之导航



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <title>新建网页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="布尔教育 http://www.itbool.com" />
    <link rel="stylesheet" href="./images/reset.css" />
    <style>
        #container{
             1002px;
            margin: 0 auto;
        }
        #header{
            height: 128px;
            background: gray url(./images/top_bg.jpg);
        }
        #nav li{
             90px;
            margin: 1px;
            float: left;
        }
        #nav a{
             90px;
            height: 37px;
            font-size: 16px;
            font-family: '微软雅黑';
            color: #363636;
            display: block;
            text-align: center;
        }
        #nav a:hover{
            color: white;
            background: url(./images/nav_on.gif);
        }
    </style>
    </head>
        <body>
            <div id="container">
                <div id="header">
                    <img src="./images/logo.jpg" alt="" id="logo" />
                    <ul id="nav">
                        <li><a href="#">导航1</a></li>
                        <li><a href="#">导航2</a></li>
                        <li><a href="#">导航3</a></li>
                        <li><a href="#">导航4</a></li>
                        <li><a href="#">导航5</a></li>
                        <li><a href="#">导航6</a></li>
                        <li><a href="#">导航7</a></li>
                    </ul>
                </div>
                <div id="main">
                    <div id="lside">
                        <div class="subtitle"></div>
                        <div class="four"></div>
                        <div class="four"></div>
                        <div class="four"></div>
                        <div class="four"></div>
                    </div>
                    <div id="rside">
                        <div class="subtitle"></div>
                        <ul id="art">
                            <li>文章1</li>
                            <li>文章2</li>
                            <li>文章3</li>
                            <li>文章4</li>
                            <li>文章5</li>
                            <li>文章6</li>
                            <li>文章7</li>
                        </ul>
                    </div>
                </div>
                <div id="footer"></div>
            </div>
        </body>
    </html>
  • 相关阅读:
    ubuntu 软件包(package)更换源(source)为阿里云镜像 update&upgrade
    【转载】 ftp 命令行
    阿里云服务器开启端口
    [转载] login shell和non-login shell
    python中global变量释疑
    python 用abc模块构建抽象基类Abstract Base Classes
    【转载】python 特殊函数 dunder function
    tensorflow2.0——波士顿房价数据与多个特征的关系(多元函数的预测)
    tensorflow2.0——波士顿房价数据与房间数关系的预测
    tensorflow2.0——自动求导GradientTape
  • 原文地址:https://www.cnblogs.com/iriswang/p/11084661.html
Copyright © 2020-2023  润新知