百度首页(HTML5)
2024-04-17 22:02:13
一 效果图(分三部分)
1 图一 : header(位于右上角)
2 图二 : content(位于中间位置)
3 图三 : footer(位于底部的中间)
二 需要创建的文件
三 HTML中设计的部分(先将主旨部分搭建好)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>百度首页</title><link href="CSS/index.css" rel="stylesheet">
</head>
<body><!--头部(target:在哪个地方打开新窗口)--><div id="header"><a href="http://www.nuomi.com/?utm_source=yc&utm_medium=cps&utm_term=&utm_content=&utm_campaign=&cid=007607" target="_blank">糯米</a><a href="http://news.baidu.com/" target="_blank">新闻</a><a href="https://www.hao123.com/" target="_blank">hao123</a><a href="http://map.baidu.com/" target="_blank">地图</a><a href="http://v.baidu.com/" target="_blank">视频</a><a href="http://tieba.baidu.com/" target="_blank">贴吧</a><a href="#" class="no-weight">登录</a><a href="#" class="no-weight">设置</a><a href="#" class="more-product">更多产品</a></div><!--中间内容--><div id="content"><div class="content-top"><!--src:资源的缩写;alt:如果网速图片显示不出来,就显示文字--><img src="imgs/logo_white_ee663702.png" alt="百度logo"></div><div class="content-bottom"><!--type:定义单行输入的文字;href:链接URL--><input type="text"><a href="#">百度一下</a></div><div class="content-img"><a href="#"><img src="imgs/d_1.png"></a><a href="#"><img src="imgs/d_2.png"></a><a href="#"><img src="imgs/d_3.png"></a><a href="#"><img src="imgs/d_4.png"></a></div><div class="content-img"><a href="#"><img src="imgs/d_5.png"></a><a href="#"><img src="imgs/d_6.png"></a><a href="#"><img src="imgs/d_7.png"></a><a href="#"><img src="imgs/d_8.png"></a></div></div><!--尾部--><div id="footer"><div class="footer-top"><a href="https://www.baidu.com/cache/sethelp/help.html" target="_blank">把百度设为主页</a><a href="http://home.baidu.com/" target="_blank">关于百度</a><a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-homeprofile" target="_blank">About Baidu</a></div><div class="footer-bottom">©2016 Baidu<a href="#">使用百度前必读</a> 意见反馈 京ICP证030173号<img src="imgs/copy_rignt_24.png" alt="标识"></div></div>
</body>
</html>四 每个模块的设计(在CSS中设置)–> 里面都附上了详细的注释
/*设置全局的属性*/
*{padding: 0px;margin: 0px;
}
/*设置a标签中字体的颜色*/
a{color: black;
}
/*设置整个网页的背景图片*/
body{background: url("../imgs/bg.jpg");background-size: cover;
}/*头部*/
#header{background-color: rgba(255,255,255,0.3);/*对齐方式*/text-align: right;/*垂直居中line-height:height*/height: 38px;line-height: 38px;/*设置外边距*/margin: 0 0 30px;
}/*header中的a*/
#header a{/*右边间距*/margin-right: 8px;/*加粗*/font-weight: bold;font-family: Arial;font-size: 15px;/*字体颜色*/color: white;
}/*设置标题中后三个标题中的两个标题模式*/
#header a.no-weight{font-weight: normal;
}
/*设置最后一个标题的模式*/
#header a.more-product{/*背景颜色*/background-color: #3385ff;color: white;/*去除下划线*/text-decoration: none;/*设置内边距*/padding: 5px;
}/*中间内容*/
#content{/*background-color: green;*/
}/*中间内容的头部*/
.content-top{/*水平居中*/text-align: center;
}
/*设置头部图片的大小*/
.content-top img{width: 270px;
}
/*设置中间内容的底部(输入框)*/
.content-bottom{background-color: red;/*高度和宽度*/width: 600px;height: 38px;/*水平居中*/margin: 10px auto 30px;
}/*设置输入框的大小*/
.content-bottom input{/*高度和宽度*/width: 500px;height: 38px;/*边框*/border: 1px solid #dddddd;/*向内扩展*/box-sizing: border-box;/*左边间距*/padding-left: 8px;/*字体大小*/font-size: 15px;
}
/*设置百度一下的字体(focus:当鼠标点击的时候获得焦点)*/
.content-bottom input:focus{/*outline: none;*/text-decoration: none;/*设置边框*/border: 1px solid #3385ff;
}/*设置百度一下的字体*/
.content-bottom a{/*处理背景颜色*/background-color: #3385ff;/*改变标签的类型(段内块级标签)*/display: inline-block;/*设置宽度和高度(设置完后文字会跑下来,因为整个框容纳不了,所以会超出来)*/width: 100px;height: 38px;/*设置浮动方向*/float: right;/*设置水平垂直居中*/text-align: center;/*这里要和高度一样*/line-height: 38px;/*设置字体*/color: white;/*取出下划线*/text-decoration: none;
}/*设置图片*/
.content-img img{/*宽度*/width: 120px;/*距离(上下;左右)*/margin: 0 5px;/*设置阴影*/box-shadow: 0px 0px 50px gray;/*设置圆角*/border-radius: 5px;
}/*设置图片的位置*/
.content-img{text-align: center;margin-bottom: 10px;
}/*设置图片的伪类*/
.content-img img:hover{/*不透明度*/opacity: 0.5;
}/*设置尾部*/
#footer{/*定位(相对浏览器定位)*/position: fixed;/*离底部的距离*/bottom: 0px;/*宽度*/width: 100%;/*内边距*/padding: 50px 0;/*位置*/text-align: center;/*字体*/font-size: 13px;
}/*底部的顶端*/
.footer-top{/*靠近底部之间的间距*/margin-bottom: 8px;
}/*底部顶端的文字*/
.footer-top a{/*间距*/margin: 0% 5px;/*颜色*/color: darkgray;
}/*底部的底端*/
.footer-bottom{/*颜色*/color: darkgray;
}/*底部底端的a标签*/
.footer-bottom a{/*颜色*/color: darkgray;
}五 资料
1 如果有不理解的标签,直接去该网站查找 : http://www.w3school.com.cn/
六 总结
1 HTML5学习的差不多了,相对来说只要你具有ios的基础,学习起来并不是很难,只要经常的去上面的网站逛逛就可以.最近花了点时间在HTML5上,希望能给大家分享我理解的知识.最后如果大家觉的我写的还可以,麻烦大家关注我的官方博客,谢谢!!!!
百度首页(HTML5)相关推荐
- 百度html5.3,移动版百度首页推HTML5+CSS3特效 情人节演绎技术范
站长之家(Chinaz.com)2月14日报道:继农历新年"搜龙点睛"活动之后,百度移动在情人节当日再次推出情人节页面特效,借助HTML5技术成功演绎情人节浪漫的"技术范 ...
- html5 手机情人节,情人节演绎技术范 移动版百度首页推HTML5+CSS3特效
站长之家(Chinaz.com)2月14日报道:继农历新年"搜龙点睛"活动之后,百度移动在情人节当日再次推出情人节页面特效,借助HTML5技术成功演绎情人节浪漫的"技术范 ...
- html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作 首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
- html5一键导航代码,站长有福了-让网址一键添加百度首页导航
自从受到了领导的熏陶之后,就想做一个针对企业运维IT人员的网站,收集一些对企业运维有价值的网站,也推荐一些安全信息给运维人员,在工作中发现中国It运维人员缺少对安全的认知,目前网站已经上线,可以到sh ...
- 利用HTML5仿制百度首页
制作百度首页,要用到div进行分块,需要对快的位置进行控制,一般有 对div进行规范大小width,height分别对应宽度高度 margin:有对div进行定位有margin-top,margin- ...
- 【Python】百度首页GIF动画的爬虫
今天百度首页的GIF动画很可爱,就想着用才学的爬虫爬取一下,虽然直接点击"图片另存为"就可以了 import requestsimport urllibclass Gif():de ...
- html+css 百度首页练习
这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...
- 为什么百度首页的HTML源代码最后一行要多一行？浪费空间呀！
为什么百度首页的HTML源代码最后一行要多一行?浪费空间呀!
- java爬取百度首页源代码
爬虫感觉挺有意思的,写一个最简单的抓取百度首页html代码的程序.虽然简单了一点,后期会加深的. 1 package test; 2 3 import java.io.BufferedReader; ...
最新文章
- 华为机考HJ8合并表记录
- Python装饰器实现一个代码计时器？
- Python 技术篇-socket套接字实现两个窗口间消息传递实例演示，TCP实现
- 【转】全面理解javascript的arguments,callee,caller,call,apply概念(修改版)
- dubbo-admin安装和简单使用
- Servlet是否单例？
- php 的定界符 eof
- Spring配置 context:component-scan/ mvc:annotation-driven /
- 【docker】关于docker 中 镜像、容器的关系理解
- jQuery开发之windows边栏小工具开发（Gadget development）- wi...
- 批处理处理当前文件路径的写法
- linux安装chrome_chrome 的安装及出现密钥问题（ubuntu16.04）
- spring3.1.0 jar包详解说明
- 帝豪gl车机系统降级_美好的陪伴、舒心的用车，帝豪GL，32000公里用车有感
- 病毒周报(081208至081214)
- vs code设置默认浏览器
- NOI2017退役记
- 有汇源上下界最大流和最小流
- 【实验】虚拟驱动模拟实验
- Win10 固定IP地址方法