HTML入门练习篇（三）（四）：简单框架

最新推荐文章于 2022-07-29 15:21:10 发布

奥利奥怎么也扭不开

最新推荐文章于 2022-07-29 15:21:10 发布

阅读量653

点赞数 1

文章标签： HTML

本文链接：https://blog.csdn.net/YorikD/article/details/96594589

版权

接上一篇：HTML入门练习篇（一）（二）：基础功能
这篇blog继续整理了自己学习HTML练习的另外两个简单网页，主要练习了制作了拥有简单框架布局、可以完成简单具体功能的网页。

第三篇HTML练习主要练习多列布局，学会将整个HTML网页分割成不同的功能模块，有了标题栏Header、导航栏Nav、具体内容栏Section、底栏Footer的基本概念。同时运用了超链接的相关知识实现简单的导航、定位、以及新窗口打开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第三次HTML练习</title>

    <style type="text/css">
header {
    background-color:rgb(25, 112, 17);
    color:white;
    text-align:center;
    padding:10px;	 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:1500px;
    width:100px;
    float:left;
    padding:10px;	      
}
section {
    width:480px;
    float:left;
    padding:30px;	 	 
}
footer {
    background-color:rgb(25, 112, 17);
    color:white;
    clear:both;
    text-align:center;
    padding:5px;	 	 
}
    </style>

</head>
<body>
    <header>
        <br/>
        <h1>第三次HTML练习 多列布局应用</h1><hr/>
        <p>欧美音乐圈五大diva</p>
        </header>
        
        <nav>
        <br/>
        <a href="#L" style="text-decoration:none">Lady Gaga</a><br/><hr/>
        <a href="#K" style="text-decoration:none">Katy Perry</a><br/><hr/>
        <a href="#T" style="text-decoration:none">Taylor Swift</a><br/><hr/>
        <a href="#R" style="text-decoration:none">Rihanna</a><br/><hr/>
        <a href="#A" style="text-decoration:none">Adele</a><br/><hr/>
        <a href="#Bottom" style="text-decoration:none">跳到底部</a><br/>
        </nav>
        
        <section>
        <br/>
        <h1><a name="L" href="https://baike.baidu.com/item/Lady%20Gaga/6824820?fr=aladdin" target="_blank">
        Lady Gaga</a></h1>
        <p>
        Lady Gaga是个颇具争议的艺人，人们往往只关注她惊世骇俗的装扮和夸张的表演风格，却忘了她音乐本身的才华。她总是不断尝试新的音乐理念和形象。在处女作《The Fame》中，Lady Gaga巧妙融合了大卫·鲍威式的民谣、受皇后乐队启发的乐律以及流行电子舞曲曲风。在《Born This Way》中，Lady Gaga尝试加入了爵士、乡村、布鲁斯音乐的创作，给人惊艳与惊喜。而《ARTPOP》中R&B、抒情单曲、说唱舞曲等元素则体现了Lady Gaga音乐的多元化。而《Joanne》中，Lady Gaga大大减少了以前惯用的电子流行舞曲，开始玩儿起了乡村、民谣和摇滚，没有了之前的大胆疯狂的风格，而是更深入的研究音乐的多样性。
        </p><br/><hr/>
        <h1><a name="K" href="https://baike.baidu.com/item/%E5%87%AF%E8%92%82%C2%B7%E4%BD%A9%E9%87%8C?fromtitle=Katy+Perry&fromid=4087745" target="_blank">
            Katy Perry</a></h1>
        <p>
        天真混搭复古,其实Katy在四位小“天后”中，长相最甜美周正，最可能成为泡泡糖一样的少女偶像，但她却以辛辣的歌词和破碎的嗓音，证明自己不只是一个空有其表的花瓶。她喜欢一切香蕉、西瓜、小花朵等可爱元素并把它们改装成糖果抹胸、草莓文胸穿上身，形成一种娃娃和成熟女郎混搭的独特风格。有时豹纹裤、花西装或者亮片裙，有时简直宛如快餐店女服务员的花边裙，又恶搞了传统意义上的童话式的纯情。
        </p><br/><hr/>

        <h1><a name="T" href="https://baike.baidu.com/item/%E6%B3%B0%E5%8B%92%C2%B7%E6%96%AF%E5%A8%81%E5%A4%AB%E7%89%B9/8472307?fromtitle=Taylor+Swift&fromid=10164559" target="_blank">
            Taylor Swift</a></h1>
        <p>
        泰勒·斯威夫特唱的歌为她赢得了最大的歌迷群：年轻人。她写歌的习惯也成为捕获年轻人的杀手锏，她以写自己的成长经历闻名，歌曲里都是青春的味道，这一点正好切合了年轻歌迷的心，他们能听懂歌曲的内容，自然就会产生共鸣，从青春期开始，这一路下来，会有一批歌迷跟着她一起成长。她很善于利用她年轻这个优势。舞台上耀眼的泰勒，已和昔日的淳朴女孩大相径庭。她的歌中鼻音也越来越少，取而代之的是流行音乐常用的“气泡音”，她播撒在乡村音乐土壤中的种子，发芽后越来越向流行音乐生长.
        </p><br/><hr/>

        <h1><a name="R" href="https://baike.baidu.com/item/%E8%95%BE%E5%93%88%E5%A8%9C?fromtitle=RIHANNA&fromid=1701433" target="_blank">
            Rihanna</a></h1>
        <p>
        她不断的在突破自己在音乐和时尚上的界限，相信她在全球的音乐市场上带来一次更大的成功，在时尚界，蕾哈娜已经迅速成为了国际流行风向标，从她不断变化的另类发型，到她完美的时尚品味，她的一举一动都被世界所有的高端时尚杂志记录在册。在蕾哈娜的音乐世界中，听者不会觉得乏味，每次新专辑问世，她都给人们带来新的亮点.
        </p><br/><hr/>

        <h1><a name="A" href="https://baike.baidu.com/item/%E9%98%BF%E9%BB%9B%E5%B0%94%C2%B7%E9%98%BF%E5%BE%B7%E9%87%91%E6%96%AF?fromtitle=Adele&fromid=1261146" target="_blank">
            Adele</a></h1>
        <p>
        和大多数青春期女孩一样，阿黛尔喜欢恋爱的滋味，并不可避免地遇到爱与伤害。2009年，阿黛尔的歌曲《追逐的脚步》，正是她得知交往6个月的前男友劈腿后的“伤心之作”。而在创作《21》这张唱片时，她的灵感依然源于失败的恋情。她的歌就像恋爱中的碎碎念，有时像温柔的小猫，有时又像怒吼的狮子。
        </p><br/><hr/>

        <h5><a name="Bottom">更多欧美音乐圈相关知识请点击</a><a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a></h5>

        </section>
        
        <footer>
        版权所有 * 小菜鸟实习生 Yorik.D
        </footer>
          
</body>
</html>

网页效果：

第四次HTML练习将之前的三次练习制作的页面集合到同一个网页页面中，运用框架的基本知识，显示导航栏页面和三次练习页面，通过超链接进行导航。

框架部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第四次HTML练习-框架</title>
</head>

<frameset cols="20%,*">
    <frame noresize="noresize"  src="file:///D:/Yorik.D/HTML%E7%BB%83%E4%B9%A0/%E7%AC%AC%E5%9B%9B%E6%AC%A1HTML%E7%BB%83%E4%B9%A0-%EF%BC%88%E5%AF%BC%E8%88%AA%E6%A0%8F%E6%9D%90%E6%96%99%EF%BC%89.html"></frame>
    <frame name="showframe" src="file:///D:/Yorik.D/HTML%E7%BB%83%E4%B9%A0/HTML%E7%BB%83%E4%B9%A01%20-%20%E7%AE%80%E6%98%93%E8%BE%93%E5%85%A5%E5%8A%9F%E8%83%BD.html"></frame>
    <frame name="showframe" src="file:///D:/Yorik.D/HTML练习/HTML练习2%20-%20超链接表格容器.html"></frame>
    <frame name="showframe" src="file:///D:/Yorik.D/HTML练习/HTML练习3%20-%20多列布局.html"></frame>
</frameset>

</html>

导航栏部分代码：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第四次HTML练习-导航栏</title>
    <style>
        .box{
            background-color: rgb(5, 119, 30);
            color:white;
           
            padding:10px;
        }
        .other{
            background-color:#eeeeee;
            
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="box">
    <h3>导航栏</h3><br/>
    </div><br/>
    <div class="other">
        <br/>
    <a href="file:///D:/Yorik.D/HTML%E7%BB%83%E4%B9%A0/HTML%E7%BB%83%E4%B9%A01%20-%20%E7%AE%80%E6%98%93%E8%BE%93%E5%85%A5%E5%8A%9F%E8%83%BD.html" target="showframe" style="text-decoration: none">第1次练习</a><br/><hr/>
    <a href="file:///D:/Yorik.D/HTML%E7%BB%83%E4%B9%A0/HTML%E7%BB%83%E4%B9%A02%20-%20%E8%B6%85%E9%93%BE%E6%8E%A5%E8%A1%A8%E6%A0%BC%E5%AE%B9%E5%99%A8.html" target="showframe"style="text-decoration: none" >第2次练习</a><br/><hr/>
    <a href="file:///D:/Yorik.D/HTML%E7%BB%83%E4%B9%A0/HTML%E7%BB%83%E4%B9%A03%20-%20%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80.html" target="showframe" style="text-decoration: none">第3次练习</a><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
</body>
</html>

网页效果：

通过这两次HTML练习，基本了解了简单的网页布局以及框架，掌握了构造出具有整体主题与功能的简单页面，并能够运用超链接完成一些简单的导航功能。

奥利奥怎么也扭不开

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
HTML入门练习篇（三）（四）：简单框架

这篇blog继续整理了自己学习HTML练习的另外两个简单网页，主要练习了制作了拥有简单框架布局、可以完成简单具体功能的网页。第三篇练习主要练习多列布局，学会将整个HTML网页分割成不同的功能模块。同时运用了超链接的相关知识实现简单的导航、定位、以及新窗口打开。第四篇练习将之前的三次练习制作的页面集合到同一个网页页面中，运用框架的基本知识，显示导航栏页面和三次练习页面，通过超链接进行导航。
复制链接

扫一扫