【HTML+CSS 实例】用HTMl+CSS 写一个你自己的小网站

本文链接：https://blog.youkuaiyun.com/xudahai513/article/details/145054263

大家跟着我学了一些基础知识，是该写些例子给大家参考下，这样学习才有动力，才能加深对代码的理解和运用。

这篇博文主要对以下博文内容进行一个总结：

【HTML】学会＜iframe＞框架，你就可以把所有网页集中放在一个网页里-优快云博客

【HTML】一张图带你了解网页布局标签＜header＞、＜nav＞、＜article＞、＜section＞、＜aside＞、＜footer＞-优快云博客

https://blog.youkuaiyun.com/xudahai513/category_12873508.html CSS这块内容才开始写，很多内容还没补充，大家可以关注，后续会慢慢更新补充上去。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        header { width:100%;height:90px; place-items: center; background-color: rgb(173,216,230);}

/*        内容居中*/
        nav { place-items: center; }

/*        li标签 padding: 0 115px 左右间隔115像素*/
        .navigation li {padding: 0 115px;display: inline-block}

/*        去下横线*/
        a {text-decoration: none; }

/*        鼠标点击文字变红色*/
        .navigation li:hover { color:yellow; } 

        #myIframe { width:100%;height:400px; }

        footer {background-color:rgb(111, 211, 255);}
        footer li { padding: 0 50px;display: inline-block; }

    </style>
</head>
<body>

<header>
    <h1>黑口罩 HTML+CSS 代码示例网站</h1>
    <nav>
        <ul class="navigation">
            <li><a href="https://blog.youkuaiyun.com/xudahai513?type=blog" target="myIframe">首页</a></li>
            <li><a href="https://blog.youkuaiyun.com/xudahai513/category_8929649.html" target="myIframe">JAVA学习</a></li>
            <li><a href="https://blog.youkuaiyun.com/xudahai513/category_12872874.html" target="myIframe">HTML学习</a></li>
            <li><a href="https://blog.youkuaiyun.com/xudahai513/category_11860017.html" target="myIframe">敏捷开发学习</a></li>

        </ul>
    </nav>
</header>
<article>
    <iframe src="https://blog.youkuaiyun.com/xudahai513?type=blog" name="myIframe" id="myIframe"></iframe>
</article>
<footer>
    <ul>
        <li>出品方：黑口罩</li>
        <li>电话：xxxxxxxx</li>
        <li>版本：V1.0</li>
    </ul>
</footer>
</body>
</html>

展示效果：