恋爱网站首页编写

 

这是效果图， 看到效果图，我们要从效果分析用了哪些模块，要加多少容器？分析可以使用画图工具辅助，例如，关于顶部和导航栏的分析

 这样有利于我们更好的编写网页，网页引用的是外部的CSS文件

先设置网页的主体部分，决定网页整体的大小 

 先设置网页上部的LOGO，引入图片文件，并设置图片所在DIV的大小，设置居中

 随后是设置导航栏，有的人面对导航栏，有时候无从下手，不知道怎么设置导航栏里面各个容器以及导航栏第一个容器左间距间的设置。我的思路是导航栏设置三个容器，一个容器设置背景，一个容器装导航栏内所有内容，一个容器装导航栏单个内容，如图:

 上图的代码是设置超链接访问前的样式，以及鼠标悬停在超链接上的样式。同时去除掉下划线。

 引入首页中的主要图片，同时，设置容器大小与居中

 设置区域的背景图片，以及区域的大小，区域的大小可以参考背景图片的大小。

 

 甚至注册步骤部分，引入图片，设置容器大小与边距。这里有个小问题，就是设置浮动的时候会顺手给图片部分也设置一个浮动，导致下一部分与图片部分连接在一起。

 接下来一部分设置信息输入区。

先设置信息输入区域的大小，横线以及文字

接下来是信息采集的部分

 

 设置每一行容器的宽高，每一行容器负责容纳一行文本与输入框

 设置左侧文本所在容器的大小，与右侧输入框锁在容器的样式

 设置右侧文本输入框的颜色

第二个文本输入区域与第一个区域有细微差别，第一个区域的数据不适合应用到第二个区域

但从整体上而言第一个区域第二个区域并没有太大差别

 设置接下来的选择部分

 

 下拉选择框要设置一个新的容器，选择框区域

也要设置相应的参数

设置多选框

 设置文本输入域

 这里遇到的小问题可能就是写顺手了，没有设置一个新的选择器，设置新的参数，可能导致尺寸不够造成的错位。同时，文本输入域，使用style属性设置文本输入域的样式。同时需要设置禁止拖动文本域的属性。

记得插入完成注册图片的图片

 最后就是设置商标了

 最后，如果有什么错误，欢迎指出，以及如果认为代码可以更精简的，也可以指出。