运用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”… ...
随机推荐
- UVA11330 Andy's Shoes —— 置换分解
题目链接:https://vjudge.net/problem/UVA-11330 题意: 给出n双鞋子,鞋子按左右左右地摆放,但“左右”是否为一对鞋子是不确定的.问:至少交换多少次鞋子,才能把每双鞋 ...
- Android窗口系统第三篇---WindowManagerService中窗口的组织方式
Android窗口系统第一篇—Window的类型与Z-Order确定 Android窗口系统第二篇—Window的添加过程 上面文章梳理了一个窗口的添加过程,系统中有很多应用,每个应用有多个Activ ...
- cifs挂载远程文件出现 No such device or address错误
1. 参考 https://www.raspberrypi.org/forums/viewtopic.php?t=82199 找了两天看到这个文章才解决了问题. 我是之前同事在windows上挂载成功 ...
- eclipse如何在不联网的情况下引入dtd约束文件
1. 获取dtd文件,解压 F:\Java配置文件\Mybatis\mybatis-3.3.0\mybatis-3.3.0.jar\org\apache\ibatis\builder\xml\ 路径下 ...
- properties文件的解析
此文章是从网上看到一篇实用小文章,感觉不过,摘录下来的!如有问题,可及时联系,可立刻做相应处理! Java读取.properties 配置文件的几种方法 在做java工程时, 经常会将一些配置信息放到 ...
- HihoCoder1644 : 完美命名的烦恼([Offer收割]编程练习赛37)(有向图的一笔画问题||欧拉路)
描述 程序员常常需要给变量命名.给函数命名.给项目命名.给团队命名…… 好的名字可以大大提高程序员的主观能动性,所以很多程序员在起名时都会陷入纠结和烦恼. 小Hi希望给新的项目起个完美的名字.首先小H ...
- JSP 使用<%@include%>报Duplicate local variable path 错误 解决方法
错误提示:Multiple annotations found at this line:- Duplicate local variable path- Duplicate local variab ...
- 网络最大流dinic模板
#include<iostream> #include<cstdio> #include<cstring> #include<queue> using ...
- Oracle日期范围
一.SQL语句: select to_date(to_char(to_date('2017-10-01', 'yyyy-mm-dd') + rownum - 1, 'yyyy-mm-dd'), 'yy ...
- SSAS IIS 发布
http://www.cnblogs.com/zhangzt/p/4046259.html IIS7下配置SSAS通过HTTP远程连接 淘宝 问答 学院 博客 资源下载 高端培训 ...