刚学了几天，算是把常用的HTML标签过了一遍，于是乎在网上找了一个简单网页练练手。比较简单的一个网页，很适合我这种刚学的，可以很好的熟悉熟悉标签，练练布局啥的。
《原网页在这里》我写了两个版本，第一个是用 table 进行布局的，写完后去跟原网页的源码比较，结果发现人家的布局样式啥的是用的外部 CSS 文件，而我还没学到这个，所以看到前几行我就一脸萌币了...
第二个版本是用 div 进行布局的，因为视频里都说 table 真正的功能不是用来布局的，div 才是，所以就用 div 的方式又写了一遍。两个版本的代码都在下面了。
table 布局版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="author" content="DK">
<title >观鸟网练习</title>
<link rel="icon" href="img/鸽子图标.png" />
<style type="text/css">
/*#div_1
{
margin: 0 auto;
}*/
a{
text-decoration: none;
color: black;
}
.tab{
background-color: chartreuse;
width: 1000px;
a
}
</style>
</head>
<body>
<div style="background-color:darkgray;">
<table align="center" border="10" bordercolor="chartreuse" cellspacing="0" class="tab" >
<tr >
<td colspan="5" align="center" >
<p style="font-family: '仿宋'; font-size: 30px;"><strong>观鸟网</strong>
<img src="img/鸽子图标.png" alt="鸽子图标" width="50px" align="right"/>
</p>
</td>
</tr>
<tr align="center" style="font-size: 22px; height: 60px; border: limegreen; background-color: limegreen;">
<td>主页</td>
<td><a href="#" >开始</a></td>
<td><a href="#" >图片</a></td>
<td><a href="#" >设备</a></td>
<td><a href="#" >论坛</a></td>
</tr>
</table>
<br />
<!--第二个板块-->
<table align="center" cellspacing="10" class="tab">
<tr style="border: limegreen; background-color: limegreen;">
<td width="740" valign="top">
<p align="center" style="font-family: '楷体'; font-size: 30px;">欢迎</p>
<p>欢迎访问观鸟网虚拟站点。如果这是一个真实的网站，那么它就是观鸟爱好者的理想聚集地。无论你是一名期望学习观鸟知识的新手，还是一位希望分享体会、经验和图片的观鸟老手。</p>
<p>时不我待！赶快带齐装备，关上电脑，去拥抱美丽的大自然吧！</p>
</td>
<td align="center" >
<p style="font-family: '楷体'; font-size: 30px;">收藏图片</p><br />
<a href="img/鸟1.jpg" target="_blank"><img src="img/鸟1.jpg" height="110px" title="点击查看大图" /></a><a href="img/鸟2.jpg" target="_blank"><img src="img/鸟2.jpg" height="110px" title="点击查看大图" /></a>
<br />
<a href="img/鸟3.jpg" target="_blank"><img src="img/鸟3.jpg" height="110px" title="点击查看大图" /></a><a href="img/鸟4.jpg" target="_blank"><img src="img/鸟4.jpg" height="110px" title="点击查看大图" /></a>
</td>
</tr>
</table>
<br />
<!--第三个板块-->
<table align="center" class="tab">
<tr>
<td>
<p>本虚拟站点采用 CC0 协议，代码所有内容均可任意修改和复用。原始版本由 Chris Mills 于 2016 年编写。Roy Tian 于 2019 年汉化。</p>
<p><a href="https://game-icons.net/1x1/lorc/dove.html" target="_blank" style="text-decoration: underline; color: darkblue;" >鸽子图标</a> 由 Lorc 绘制。</p>
</td>
</tr>
</table>
<!--<div id="div_1" style="background: chartreuse; width: 1000px;" >
<br />
<p>本虚拟站点采用 CC0 协议，代码所有内容均可任意修改和复用。原始版本由 Chris Mills 于 2016 年编写。Roy Tian 于 2019 年汉化。</p>
<p><a href="https://game-icons.net/1x1/lorc/dove.html" target="_blank" style="text-decoration: underline; color: darkblue;" >鸽子图标</a> 由 Lorc 绘制。</p>
<br />
</div>-->
</div>
</body>
</html>
div 布局版本
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" name="author" content="DK" />
<title>div测试而已</title>
<link rel="icon" href="img/鸽子图标.png" />
<style type="text/css">
/*.div{今天看了一些 CSS ，发现这样命名类选择器是有问题的，不能用标签名做类选择器的名字，所以修改一下*/
.div-outer{
margin: 0 auto;
border: 10px solid #00FFFF;/* solid 表示边框的样式是实线，dashed表示虚线 。可以省略颜色，但不可以省略样式*/
}
</style>
</head>
<body style="background: darkgray;">
<article>
<div style="background: #00FFFF; width: 1000px; height: 180px;" class="div-outer">
<br />
<img src="img/鸽子图标.png"/ align="right" alt="鸽子图标" width="50" />
<div align="center" style="width: 200px; height: 40px; font-family: '楷体'; font-size: 35px; margin: 10px auto 0px auto;">
观鸟集
</div>
<div style="background: #7FFF00; width: 1000px;margin: 0 auto; margin-top: 35px; "><!--两个margin的顺序不能反-->
<table style=" width: 960px; height: 70px;" cellspacing="0">
<tr style="font-family: '宋体'; font-size: 25px;" align="center">
<td>首页</td>
<td><a href="#" style="text-decoration: none; color: #000000;">开始</a></td>
<td><a href="#" style="text-decoration: none; color: #000000;">图片</a></td>
<td><a href="#" style="text-decoration: none; color: #000000;">论坛</a></td>
<td><a href="#" style="text-decoration: none; color: #000000;">设备</a></td>
</tr>
</table>
</div>
</div>
</article>
<aside>
<div style="background: #00FFFF; width: 1000px; height: 300px; margin-top: 20px;" class="div-outer">
<div style="background: #7FFF00; width: 695px; height: 300px; float: left;">
<h1 align="center">欢迎</h1>
<p>欢迎访问观鸟网虚拟站点。如果这是一个真实的网站，那么它就是观鸟爱好者的理想聚集地。无论你是一名期望学习观鸟知识的新手，还是一位希望分享体会、经验和图片的观鸟老手。</p>
<p>时不我待！赶快带齐装备，关上电脑，去拥抱美丽的大自然吧！</p>
<br />
<br />
</div>
<div style="background: #7FFF00; width: 295px; height: 300px; float: right;" align="center">
<h1>收藏</h1>
<a href="img/鸟1.jpg" target="_blank"><img src="img/鸟1.jpg" height="110px" title="点击查看大图" /></a><a href="img/鸟2.jpg" target="_blank"><img src="img/鸟2.jpg" height="110px" title="点击查看大图" /></a>
<br />
<a href="img/鸟3.jpg" target="_blank"><img src="img/鸟3.jpg" height="110px" title="点击查看大图" /></a><a href="img/鸟4.jpg" target="_blank"><img src="img/鸟4.jpg" height="110px" title="点击查看大图" /></a>
</div>
</div>
</aside>
<footer>
<div style="background: #00FFFF; width: 1000px; height: 100px; margin-top: 20px;" class="div-outer">
<p>本虚拟站点采用 CC0 协议，代码所有内容均可任意修改和复用。原始版本由 Chris Mills 于 2016 年编写。Roy Tian 于 2019 年汉化。</p>
<p><a href="https://game-icons.net/1x1/lorc/dove.html" target="_blank" style="text-decoration: underline; color: darkblue;" >鸽子图标</a> 由 Lorc 绘制。</p>
</div>
</footer>
</body>
</html>
练习的收获
-
1、给你的文档标题加个图标
- 这需要用到标签，该标签定义文档与外部资源的关系，常用于链接样式表。它有一个名为 rel 的属性，当该属性的值为 icon 时，就代表“导入表示该文档的图标”的意思。 2、关于 class 属性
- 这是一个全局属性，即所有标签都可以用这个属性（H5都可以，H4有些标签不可以），它的作用是定义元素的类名，通常用于指向样式表的类 3、margin：0 auto 与 margin：auto的区别
- margin：0 auto 即是 margin：0 auto 0 auto，表示左右外边距自动取得，这样写可以达到左右居中的效果。 margin：auto 即是 margin：auto auto auto auto，表示上下左右的外边距都自动取得，这样写的效果是上下左右都居中。 margin：0 auto 和 margin：auto看似是一种简写方式，实则是因为 margin 继承机制，若只写了上（margin：上 右 下 左），那么上的属性就会被右和下继承，而后左又会继承右，所以margin：auto 即是 margin：auto auto auto auto。若只写了上和右，它俩就会分别被下和左继承，所以margin：0 auto 即是 margin：0 auto 0 auto。--来自百度 4、关于 margin 的一个多余问题
- 如果你想让一个盒子横向居中并且上边距为10px，那么你可以这样写：”margin: 10px auto 0px auto;”。你也可以这样写（虽然这样写很没必要）：”margin: 0 auto; margin-top: 10px;”。如果想多敲几个单词采用了第二种，那么你一定要注意这两句的先后顺序，一定要是”margin：0 aut;”在前，否则会出问题。 5、关于 div 等的边框设置
- 设置边框：border: 宽度 样式 颜色; 样式有实线（solid）和虚线（dashed）。 注：可以省略颜色，但不可以省略样式！今天敲代码的时候就因为不知道这个让我萌币了好久。（看来还是得先看看CSS才能做练习…） 6、关于 div 的一个多余问题
- 当你创建div盒子时，千万别忘了设置width and height… 7、布局
- 按照头、身体、尾巴的顺序写，真的挺带劲的
1211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
