HTML实战篇：html仿百度首页

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

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

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

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

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

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

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

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

2）具体的实现代码

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

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

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

经过两天的学习,小编终于可以仿出10年前的百度首页了,想着马上就要走向人生的巅峰,迎娶白富美,成为CEO ,心里感觉好激动啊!下面是今天的代码.

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

.header {

text-align: right;

padding-top: 25px;

}

.header a {

color: black;

font-size: 14px;

font-weight: bold;

margin-left: 10px;

margin-right: 10px;

}

.header a:hover {

color: blue;

}

.menu {

list-style:none;

display:none;

background-color: #f4f4f4;

/*定位*/

position: absolute;

top: 0;

right: 0;

width: 80px;

height: 500px;

}

/*鼠标置于更多产品上时显示*/

.more:hover+.menu {

display: block;

}

.more {

background-color: #38f;

color: white;

font-size: 14px;

padding: 5px;

}

.content {

margin-top: 60px;

}

.search {

/*给定宽度结合左右margin auto实现水平居中*/

width: 650px;

margin: 0 auto;

/*让块内部的行内元素和文本水平居中*/

text-align: center;

}

#input {

width: 460px;

height: 30px;

border: 1px solid gray;

outline: none;

}

/*聚焦时*/

#input:focus {

border: 1px solid #38f;

}

#go {

color:white;

padding: 7px 18px;

font-size: 14px;

background-color: #38f;

text-decoration: none;

vertical-align: middle;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

<div>

<div>

</div>

</body>

</html>

生成后的百度图片

运行生成的百度图片

百度真正首页

二维码图片以及下方的链接文字正在制作中,希望能做好!自勉!!!

　云涯君之前教了大家如何快速搭建网站后（如果还不会搭建网站的朋友可看云涯君之前写的一篇文章《利用phpStudy和DedeCms快速搭建网站》），很多朋友反映本地网站搭建好后网站模板都是千篇一律的一个样子，不好看，网站风格不是自己喜欢的，也不是自己想要的。问怎么样更换网站模板或修改成自己想要的网站风格？

　　今天云涯君就教大家一个简单的方法去如何更换网站模板，这个方法不需要你懂代码就可以完成，直接下载第三方模板程序包安装即可，所以不会代码的朋友完全不必担心怎么操作。接下来就跟着云涯君一起来操作吧！

　　一、网站模板下载

　　1、百度搜索“织梦猫”进入官网

百度搜索“织梦猫”

“织梦猫”官网首页

　　2、选择适合自己的或者自己喜欢的模板进行下载，选择模板时要注意：

　　①网站模板分为免费和收费的，根据自身需要去选择（由于是做演示示范，小编在此选择免费的模板）。

　　②网站模板分为UTF-8和GBK两种版本，必须选择与你网站相应的编码进行下载，否则安装后会出现乱码。（小编的网站采用的是UTF-8格式编码，故此选择UTF-8版本的网站模板进行下载安装）

网站首页里选择免费模板进行下载

模板下载

　　二、模板安装

　　1、解压下载好的模板安装包，打开安装包将web文件夹内的所有文件和文件夹上传并覆盖到网站根目录。

打开解压后的模板安装包文件夹

web文件夹内的文件

将web文件夹内的文件复制粘贴到根目录WWW文件夹里

　　2、登录网站后台并还原数据库

　　①进入dede后台，找到‘系统’---‘数据库备份/还原’

找到‘系统’---‘数据库备份/还原’

　　②在屏幕右上角点击‘数据还原’

数据还原

　　③点击屏幕下方的‘开始还原数据’按钮

开始还原数据

　　3、成功还原数据后，确定网站风格（无论是否修改，都点击一下确定）：

　　①点击‘系统’---系统基本参数

　　②将‘站点根网址’改为您的网址，如http://www.xxx.com/（本地安装请保持http://localhost/）

　　③点击‘确定’按钮

网站风格确定

　　4、更新整站缓存：

　　点击‘生成’---‘更新系统缓存’

更新系统缓存

　　5、更新网站：

　　点击‘生成’---‘一键更新网站’---‘更新所有’---‘开始更新’

　　点击‘生成’---‘更新主页html’

网站更新

更新主页

　　至此网站模板安装成功，可以点击预览主页进行查看安装后的效果。

更换模板后的网站首页

　　以上就是更换网站模板的方法与步骤，简单而又不粗暴，不需要修改任何代码就可完成网站模板的更换，不过此方法只针对用dedecms安装的网站适用；模板安装成功后，可以根据需要对网站内容、栏目、图片等信息进行修改，修改成自己的东西。大家在更换模板过程中如遇到问题可进行留言，云涯君一一为大家解答。

在线咨询

上一篇：HTML5标准三维建筑表现技术，不需要安装任何专用插件
下一篇：JavaScript代码怎样引入到HTML中？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML实战篇：html仿百度首页

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

2）具体的实现代码

一、网站模板下载

二、模板安装

您的项目需求

　　一、网站模板下载

　　二、模板安装