web第一课模拟淘宝设置静态网页——html+css布局设计

• 学会使用webstorm

1. 先打开webstorm（注意需要破解)然后注意首次打开之后会出现让你新建一个存放所有文件的目录（如下图所示文件保存在c盘路径为C:\Users\baitianmeng\WebstormProjects\untitled1）

    
2.保存完成之后file---new----directory-------(新建一个文件夹)如图建立文件夹名为bai

3.建好工程名-----new-----选择你所要建立的文件类型（例如htmlfile表示建德市html文件stylesheet表示css文件）如图在bai文件夹里建css文件名为add

4.建好之后就可以在里面写代码了
5.如果想要修改字体和字号背景则    file----settings---colors&fonts----font----进行相应的修改即可

6.所有的都设置完成之后，开始写代码，html右上角会对应出现各种浏览器，选择所需的即可

• 设计淘宝静态网页

设计思想

1.首先先将所有布局分析清楚，例如具体为分析有几个大的块，每个块里面的子块，和每个块的并列块。（建议先不要分的很细，只要先把大的Div布局先做好，再分析每个小的块里的东西）。
2.建议尽量用Div布局，每一次布局完成之后先给设置宽高边框，然后整体完成后在设置自动高或者注释掉边框即可。
3.大的布局完成之后再细分每个框里的子 布局

问题总结

问题一：字符关系之间的分层问题

众所周知分层属性在z-index只适用于并列关系中，且要结合相对或绝对定位来用，但是面对父子关系之间的分层我们能不能用呢？

首先我们知道子的层级肯定高于父级，所以我们只要给子降低层级就可以了。可是我们操作过程中发现无论怎么给子降低层级，给父亲升高层级都没有用，那么我们应该怎么办呢？

其实我们只要给父亲相对定位给子元素绝对定位然后只给子元素设置z-index：-1即可实现父的层级高于子的层级了。

***但要注意***

为了不影响其他并列元素的层级结构要相应的给他的整体层级太高相应的层数，为了实现鼠标悬停出来的悬浮狂要盖住底下的文字，要相应的给父元素所在的整体抬高2，相当于整体是2父亲是1儿子是0，与父亲并列的是没有设置所以还是0，所以儿子即使z-index:-1了但还是与其他与整体并列的内容在一层，所以鼠标悬停出来的可以盖住底下的内容了。

例如如下样式

                                  实现鼠标悬停到网站导航时出来的主体市场框盖住下面的图片和文字

问题二：导入文件时的路径问题

    无论是导入css样式还是导入图片和链接都存在路径的引入问题，大家都知道路径一般分为相对路径和绝对路径，绝对路径是直接复制图片的原路经名，一般不常用，对于相对路径比较复杂，一般主要分不清./  和../以及../../的区别，下面是我总结的小技巧，希望能帮到大家。

./ 当前目录
../ 父级目录
/ 根目录

                      1》当前目录如何表示：./表示当前目录

                      2》上级目录如何表示 ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。

          所以：    如果两个文件在同一级则引用为直接写文件名。

                             

               如图      我的css样式文件跟html文件在同一级，所以在html中引用为href="taobaowang.css"

                       如果两个文件在不同文件夹下则引用为；../文件夹名/文件名.

                           

                  如图      我的css样式文件的文件夹跟html文件的文件夹在同一级，所以在html中引用为css样式为

     ../tab/abc.css                                

                       如果要被引用的文件的文件夹跟要引用他的文件在一级则为：./文件夹名/文件名。

                            

               如图      我的css样式文件跟要引用的图片文件的文件夹在同一级，所以在html中引用为href="./sr/vi3.jpg"

         问题三：定位和浮动的用法区别

          

        CSS 相对定位

          使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，不会脱离文档流因此，移动元素会导致它覆盖其它框。

                

        CSS 绝对定位

            绝对定位使元素的位置与文档流无关，脱离文档流，因此不占据空间。

                 

           通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。(相对移动时注意他的父及元素必需绝对定位，对他进行绝对定位，然后修改对应的上下左右值eg:left:20px; 相对于父亲左移20像素)。

           浮动

            浮动默认的是左上角或右上角，但是常常下一个元素会受到这个浮动元素的影响。为了解决这个问题，我们经常会需要清除浮动。