运用html常用标签和css定位等学做模仿百度导航页面
导航部分文字链接,鼠标触碰变颜色,除百度logo引用图片外,其它均代码编写。注释部分是一开始用的百度一下截图做的按钮,后来用div填充颜色写了一个按钮。效果图如下。
HTML代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<link href="css/homework.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<ul>
<li><div id="more"><a href="#"><font color="white">更多产品</font></a></div></li>
<li class="b"><a href="#">设置</a></li>
<li class="b"><a href="#">登录</a></li>
<li class="hei"><a href="#">学术</a></li>
<li class="hei"><a href="#">贴吧</a></li>
<li class="hei"><a href="#">视频</a></li>
<li class="hei"><a href="#">地图</a></li>
<li class="hei"><a href="#">hao123</a></li>
<li class="hei"><a href="#">新闻</a></li>
</ul>
<div id="logo"></div>
<div id="search">
<div id="l">
<div id="kuang">
<input id="camera" type="text"
style="width: 600px; height: 32px; border: #5f9dfa 1px solid;">
</div>
</div>
<div id="r">
<!-- <input id="an" type="image" src="data:images/baiduan.png"> -->
<font color="white">百度一下</font>
</div>
</div>
</body>
</html>
CSS代码如下:
#nav .hei a:hover{
color:blue;
}
#nav .b a:hover{
color:blue;
}
li #more{
width:60px;
height:25px;
background-color:#3385ff;
font-size:13px;
line-height:25px;
text-align: center;
}
li #more a{
text-decoration: none;
font-color:write;
}
.hei{
font-color:black;
}
.b{
font-color:black;
}
#nav{
width:100%;
height:30px;
//font-color:black;
}
a:link{
color:black;
}
li{
list-style:none;
width:60px;
float:right;
font-size:13px;
font-color:black;
line-height:30px;
}
.hei{
font-weight:bolder;
} #logo{
width:100%;
height:200px;
background:url("../images/baidulogo.png") no-repeat 50%,50%;
}
#search{
width:100%;
height:300px;
float:left;
}
#l{
width:66%;
height:300px;
float:left;
}
#kuang{
float:right;
width:600px;
height:32px;
float:right;
}
#camera{
background:url("../images/camera.png") no-repeat 100%,100%;
}
#r{
width:34%;
height:300px;
float:left;
}
/* #an{
float:left;
} */
#r{
width:101px;
height:36px;
background-color:#3385ff;
font-size:14px;
line-height:37px;
text-align: center;
}
运用html常用标签和css定位等学做模仿百度导航页面的更多相关文章
- 前端之常用标签和CSS初识
外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...
- HTML常用标签与CSS基础知识
一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- CSS常用标签-手打抄录-感谢原未知博主-拜谢了
CSS常用标签 CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-siz ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版
实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
- HTML|CSS之HTML常用标签
知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...
随机推荐
- Spring Boot2.0之性能优化
1.JVM参数调优 针对运行效果 吞吐量 初始堆内存与最大堆尽量相同 减少垃圾回收次数 2.扫包优化: 启动优化 默认Tomcat容器改为Undertow Tomcat的吞吐量500 ...
- macd背离的级别
1分钟的背离可以忽略不看. 5分钟的背离可以预测未来5-6个小时的股价. 15分钟级别的背离可以预测未来24小时之内的股价. 30分钟级别的背离可以做中线. 周线背离可以影响1-2年的股价. 背离级别 ...
- PYTHON 爬虫笔记七:Selenium库基础用法
知识点一:Selenium库详解及其基本使用 什么是Selenium selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium ...
- 鸟哥的linux私房菜 - 第三章 主机规划与磁盘分区
各硬件装置在linux中的文件名 在linux系统中,每个装置都被当成一个档案来对待. 常见的装置与其在linux中的档名: 磁盘分区 磁盘链接的方式与装置文件名的关系 个人计算机常见的磁盘接口有两种 ...
- web项目的实质
web项目的实质 web项目的实质其实也就是在用户发过来一个请求后,我们返回一个响应. 用户看到的页面就是我们响应中的响应体(里面是html代码). 所以,我们整个项目的所有操作都是围绕着怎么来写好这 ...
- [原创]java在线打开PDF文档
步骤一:(涉及到的工具) 访问:http://www.zhuozhengsoft.com/dowm/,从官网下载PageOffice for Java. 步骤二:(配置工程) 1. 解压PageOff ...
- Eclipse IDE 主题颜色
已安装好的 Eclipse IDE help > install new software 打开窗口 输入地址 http://eclipse-color-theme.github.io/upda ...
- Codeforces 756C Nikita and stack
Codeforces 756C Nikita and stack 题目大意: 给定一个对栈进行操作的操作序列,初始时序列上没有任何操作,每一次将一个本来没有操作的位置变为某一操作(push(x),po ...
- [转]JavaScript的实例化与继承:请停止使用new关键字
JavaScript中的new关键字可以实现实例化和继承的工作,但个人认为使用new关键字并非是最佳的实践,还可以有更友好一些的实现.本文将介绍使用new关键字有什么问题,然后介绍如何对与new相关联 ...
- "The object cannot be deleted because it was not found in the ObjectStateManager."
最近优化EF的性能时遇到一个问题, 当在EF生成的Entityes的构造里加上: this.protocolnodes.MergeOption = MergeOption.NoTracking;thi ...