CSS实战——百度搜索首页

成果

支持搜索内容。

步骤
一般来说：

使用css+div进行页面的布局，css一般是用外联进行开发
使用html进行每一个页面的填充

注意事项

id的命名规范：父标签id_自己的id
css一般一个选择器一行，没有换行
设置页面基础样式——设置特定标签样式——使用伪类给标签添加样式。

css文件

/* 设置页面基础设置 */
*{padding: 0px;margin: 0px;}
/* 设置header */
#header{width: 100%;height: 40px;}#header_nav {float: left;list-style-type: none;position: absolute;right: 90px;top:26px;}#header_nav a{margin-left: 24px;color: #333;font-size: 13px;font-weight: 30px;}
/* 设置main */
#main{width:100%;height: 290px;text-align: center;}#img_logo{margin-top: 50px;0px;margin-bottom: 20px;}input[type=text]{height: 34px;width: 539px;margin-right: 0px;border:solid 1px #4992FF;background-image: url(img/img.png);background-repeat: no-repeat;background-position-x: 500px;}input[type=submit]{height: 37px;px;width: 100px;font-size: 15px;color: #fff;background-color: #2d78f4;border: solid 0px;letter-spacing: 1px;position: relative;right: 5px;top:2px}
/* 设置tailer */
#tailer{width: 100%;height: 300px;}
/* 使用伪类给标签加样式 */
#header_nav a:hover{color:blue;}

html文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>百度一下，你就知道</title><!-- 1，使用css+div进行页面的布局css一般是用外联进行开发2，使用html进行每一个页面的填充--><link rel="stylesheet" type="text/css" href="baidu.css"/><link href="./img/logo.ico" rel="shortcut icon"/></head><body><!-- 头部 --><div id="header"><!-- 命名规范，父标签id_id --><li id="header_nav"><a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1">抗击肺炎</a><a href="http://news.baidu.com/">新闻</a><a href="https://www.hao123.com/">hao123</a><a href="https://map.baidu.com/@13265880.8,4373425.72,12z">地图</a><a href="http://v.baidu.com/">视频</a><a href="https://tieba.baidu.com/index.html">贴吧</a><a href="http://xueshu.baidu.com/">学术</a><a href="">登录</a><a href="">设置</a></li></div><!-- 主体 --><div id="main"><form action="https://www.baidu.com/s" method="get"><img id="img_logo" src="img/bd_logo1.png" width="270px" height="129px"><br><input type="text" name="wd" id="" value="" /><input type="submit" name="" id="" value="百度一下" /></form></div><!-- 底部 --><div id="tailer"><img src="img/bottom.png" align="center"></div></body>
</html>

CSS实战——百度搜索首页相关推荐

百度爬虫 css,提高百度搜索排名:假如百度搜索可以剖析道CSS内容！
近期百度站长俱乐部负责人Lee对站长的一些SEO问题进行了简单解答,站长之家热心的网友对这些问题进行了整理,希望能给关心网站SEO问题的站长带来帮助. 一.百度是否能分析并抓取CSS 百度:百度是能够 ...
仿百度搜索首页完整代码
仿百度首页未登陆状态页面初学HTML 做个小记录看看就好,也可以共同学习一下做的时候也有很多问题,现在也有点懵,还请各位看完指出问题 <!DOCTYPE html> <html ...
pythonselenium一个简单的自动化测试实战:百度搜索
目录前提准备 1. Chrome浏览器的安装 2. chrome浏览器下载驱动地址及Chrome的版本号查看 3.下载chrome浏览器驱动 4.下载安装selenium 代码 PC端移动端前提 ...
HTML常用表单写一个百度搜索和注册页面
目录 1.实战百度搜索,向百度服务器发送请求 2.注册的一个页面 1.实战百度搜索,向百度服务器发送请求 https://www.baidu.com/s?键1=值1&键2=值2 action: ...
Html+css+js实战：百度搜索框样式实现
一.效果展示二.代码实现 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
仿百度首页（可进行百度搜索）
仿制百度首页制作,搜索框可调用百度搜索体验地址:百度一下,你就知道网页结构: <!doctype html> <html lang="zh"><h ...
其他网页可以使用，但百度首页打不开，百度搜索无法使用，怎么办
真操蛋,今天我的电脑在使用无线时浏览器的百度搜索竟然不能用了,百度首页打不开,百度搜索不能用,但goolge什么的都能用,百度贴吧什么的也能用,在网上找了很多方法都没作用,最后按照下面的方法才弄好. ...
【百度美化 Stylus】百度搜索卡片美化高斯模糊 Baidu CSS Stylus Stylish
1.简单介绍百度美化TAB版 ( 精简美化.卡片模糊.十余种风格一键更换 ) 建议使用设置中氢气系列壁纸,纯色不花眼利用浏览器插件Stylus,对百度 ...
【百度搜索推出惊雷算法】靠刷点击上首页已走到尽头
就在本月底,百度为了提高用户体验和促进搜索内容生态的良性发展,将推出惊雷算法,以此来严厉打击通过刷点击提升网站关键词排名的作弊行为. 惊雷算法会例行产出惩罚数据,对存在刷点击的作弊的行为进行惩罚,同时 ...

CSS实战——百度搜索首页

成果

css文件

html文件

CSS实战——百度搜索首页相关推荐

最新文章

热门文章