篇文章主要给大家介绍一下如何使用html+css来制作百度首页页面。

1）制作页面所用的知识点

我们首先来分析一下百度首页的页面效果图

百度首页由头部的一个文字导航，中间的一个按钮和一个输入框以及下边的文字简介和导航组成。

我们这里主要用到的知识点就是列表标签（ul）的使用、浮动（float）的使用以及输入框（input）的样式控制。

1、列表标签ul（头部和底部的文字链接导航都有相同的颜色大小以及间距，我们可以使用ul和li来表示每个对应的文字导航）；

2、浮动元素float（每个li元素我们需要使用float:left;让其左对齐，中间的两个input我们需要使用float:left;来让其左对齐，这里涉及到了我们之前讲解的如何清除浮动的影响）；

3、输入框input（通过控制输入框的宽高、边框以及填充来使input变成我们想要的效果）

2）具体的实现代码

整体的百度实现代码如下所示：

好了，本篇文章就给大家说到这里，大家自己动手写一下百度首页看能不能写出一样的页面效果出来，有需要源码的可以直接私信我即可。

每日金句：沉重的担子是由那些有着坚强的肩膀的人来挑的。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

篇文章主要给大家介绍一下使用html+css来模仿制作小米官方网站右侧的浮动框。我们来看下边的这个浮动框，位于小米官网的右侧并且随着页面的滚动，一直浮动在右侧不变；

我们通过上边的图片可以看出图片有5个单独的块元素组成，每个块元素鼠标经过都有一个单独的颜色变为黄色的效果，然后第一个块元素鼠标经过还会在左侧弹出更多内容。接下来我们简单说一下制作所用到的核心知识。

1）制作页面所需知识点

1、列表标签（dl dd dt）的使用，使用dl和dd来完成前边5个相同模块的制作

2、鼠标经过（hover）的使用，第一个元素鼠标经过左侧显示，这个跟我们之前将的导航菜单类似，还有鼠标经过文字以及图片改变颜色，这里可以使用hover之后改变背景图片来实现；

3、浮动（fixed）的使用，该内容一直浮动在网页右侧，跟随页面一起滚动，我们可以使用position:fixed来实现；

2）代码实操演练

大体了解了我们所要使用的知识点之后，我们就可以开始根据图片上的内容来制作我们所需要的页面了，具体的实现代码就如下方所示：（首先写一个div盒子，看到列表形式，直接使用dl和dd，然后每个元素内部有文字和图片，使用h4标签和span标签来存放图片和文字内容，就这么搞定了哈哈），来看代码吧。

html代码挺简单的，我们啪啪敲完之后呢，剩下的就是书写css代码，来完成图片所示的布局样式的制作了。那么我们的css代码就如下图所示：（最外层box直接来个fixed和right、bottom配合，让其浮动在右侧，然后写写dl和dd的宽高，控制控制span的背景，随便写写hover事件，ok完成了）。不多说了，看代码吧。

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信【网站源码】即可。

每日金句：只有知道别人心里在想什么，你才能得到你想要的。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

事互联网行业的工作者，大多都有自己一个难实现的梦想养一个或者多个网站，几年之后这个站能给我带来比较大的利润、或者卖个比较高价钱之类的想法)，虽然这“梦想”个实现的可能性不会太高，不过还是使很多互联网工作者想拥有自己的网站。。。

因为都是工作者由于自身的能力有限制以及经济的负担，去建一个站或者买一个站实在不合适。。所以大部分人第一就会想到仿站，把别人的网站放过来自己使用。。。

在万般的熏染下使笔者(陈少庭)也有了比较强的拥有自己网站的欲望。在自己的未来的发展网站是必不可少的，仿站也是一种必备的手段。一个网站给怎么去仿制? 如何把一个站仿好呢? 请回答详细点。。。。谢谢！

仿站从理论上非常简单，一句话，就是把目标网站的数据替换成模板数据。 我稍微详细一点回答。

①首先要观察目标网站的页面，一般大体分为首页、栏目页、内容页以及其他的页面（搜索页面、标签页面等）。下面以首页为例，原理都一样。

②保存首页数据，一般在浏览器“文件-另存为”保存类型选择“网页、全部”，当然一些网站数据是没办法直接保存的，比如背景图片，这个你找到图片路径保存下来即可。

③替换数据（以织梦为例）。把网站的每一块都要替换，比如网页源码中的一块是

<div><ul>

<li><a href="URL">文章标题</a></li>

<li><a href="URL">文章标题</a></li>

<li><a href="URL">文章标题</a></li> </ul></div>

替换成织梦的标签就是<div><ul>

{dede:arclist row=3 titlelen=60 }<li>

<a href="[field:arcurl/]">[field:title/]</a></li>

{/dede:arclist}</ul></div>

每个程序的标签各不相同，所以你要熟悉使用程序的模板标签等。

④把每个需要替换的地方都用模板标签替换，框架（div+css）不变，当然也可以根据需要调整。

这样基本就完成了，需要注意的是，

最好在本地搭建程序环境（这样就不需要上传下载到主机，在本地调试好再上传）；

熟悉程序的标签（必须的），可以下载程序的使用手册；

不懂的地方多百度、谷歌；

熟能生巧，一开始肯定慢，而且易烦躁，熟悉了就好了。