Html,CSS样式练习

今天尝试还原这个画面，编写代码的过程中，遇到的疙瘩有：

1、自定义列表

自定义列表<dl></dl>。每个自定义列表项<dt></dt>。每个自定义列表项<dd></dd>。

【后来发现很不好用，还不如写<li><img src=""/><p>文字</></li>，不好用的原因是，没办法将图片和文字放在同一行显示，我认为这是<dl>本身所带的性质决定的，这种列表不只是把信息列出来，更加倾向于以注释的形式显示。因此dt和dd没办法显示在同一行。】

2、怎么使列表项显示在同一行

<ul class="list">

      <li></li>

       ···

      <li></li>

</ul>

.list{

     定义宽度 

}

.list li{

     display:block;

     float:left;

}

3、副标题

4、

文件夹内图片保存名不规范写成了5 .png,后改正为5.png就行了。

5、绝对路径：写下完整路径（不推荐） 相对路径：从当前文件开始找 ../找到他的上一层文件，如下

相对路径

../../则是向上两层寻找

6、自适应网页设计（Adaptive Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。（不要滥用绝对相对定位会造成网页尺寸变形）

实现自适应

首先，在网页代码的头部，加入一行viewport元标签

<meta name="viewport" content="width=device-width,initial-scale=1"/>

意思为：viewport是网页默认的宽度和高度。网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

兼容（IE6，IE7，IE8）

兼容方法

第二，不使用绝对宽度

网页会根据屏幕宽度调整布局，所以不能使用绝对宽度布局，也不能使用具有绝对宽度的元素。

具体如下：

css代码不能指定像素宽度

只能设置为百分数

或者

设置为auto

第三 相对大小的字体

字体也不能使用绝对大小（px）,只能使用相对大小（em）,如下

相对大小字体

意思为：字体大小是页面默认大小的100%，即为16px

相对大小字体

h1的大小是默认的1.5倍，（16*1.5）

第四 流动布局

流动布局的意思是各个区块的位置是浮动的，不能是固定的

流动的布局

float的优点，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免使用滚动条

绝对定位需要非常小心的使用

第五 选择加载CSS

自适应网页的核心是css3引入的media Query模块。意思为自动探测屏幕宽度，然后加载相应的css文件。

(<400)引入模块

代码意思为：如果屏幕的宽度小于400px（max-device-width: 400px），就加载tinyScreen.css文件

(<600)引入模板

代码意思为：如果屏幕大于400px小于600px时加载smallScreen.css文件

另一种加载方式

第六 @media规则

在同一个CSS文件中，可以根据不同的屏幕分辨率吧。选择不同的CSS规则

@media

代码意思为：如果屏幕宽度小于400像素，则column块取消浮动，宽度自动调节，sidebar块不显示

第七 图片的自适应

实现图片的自动缩放功能，如下：

图片自适应

max-width 定义元素的最大宽度。

该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。

另一种写法

兼容老版浏览器的写法

解决失真（1）

windows平台缩放图片时，可能出现图像失真现象。

解决失真（2）

两种情况：

1、不管怎么样只显示固定数目的图。

2、随着屏幕的增大显示更多，或者随着屏幕的减小显示更少。

7、关于float的理解，float可以使两个div并排，也就是消除了这两个div的行。给容器添加图片，如果容器内部没有撑开容器的元素的话，图片是不会显示出来的。因此我在一个图片上使两个div用float成为行显示，图片消失也是理所当然的。但是这很难接受为什么float又支持文字环绕呢？难道说文字不是撑开容器的元素么？

解释的通。文字环绕和背景图片环绕其实是一样的。但我把图片和文字（h-left-img）(h-left-p)用float弄成一行的时候，背景图片消失不是错误了。实际上图片正如文字一样环绕着这两个元素，图片之所以不见了，只是由于清楚行之后没有乐撑开容器的元素。一旦添加了元素，背景图片又再次出现叻。

8、图片的放置

9、自适应和响应式的区别

 我们平时谈论的自适应布局，大多指的就是宽度自适应布局。在这种布局下，出现了两派：百分        比宽度布局；流式布局。这里说的是第一派，宽度使用百分比，文字使用 em，现在也很多开始使      用rem了，也就是所谓的高清方案。

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小 的屏幕，根据屏幕宽度，自动调整网页内容大小，但是无论怎样，他们主体的内容和布局是没有变的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。

10、版本2 photo3的目标是，图片位置固定，一行显示5张，图片大小随屏幕大小改变而改变。

以下是背景。

待整理