导航部分文字链接，鼠标触碰变颜色，除百度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定位等学做模仿百度导航页面的更多相关文章

  1. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  2. HTML常用标签与CSS基础知识

    一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  3. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  4. CSS常用标签-手打抄录-感谢原未知博主-拜谢了

    CSS常用标签   CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-siz ...

  5. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  6. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  7. 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版

    实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...

  8. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  9. HTML|CSS之HTML常用标签

    知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...

随机推荐

  1. SQLSERVER安装记录

    很多人都喜欢重装编程环境,VS,SQL是最常见的 尤其是SQL,在删除所有的SQL相关的组件之后(360),记得再次打开控制面板,查看是否有漏掉的,本人就有一个SQLXML没有删除掉 在删除之后,清理 ...

  2. HDU 3853 LOOPS：期望dp【网格型】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3853 题意: 有一个n*m的网格. 给出在每个格子时:留在原地.向右走一格,向下走一格的概率. 每走一 ...

  3. Win7 下安装MongoDB

    1).下载MongoDBhttp://downloads.mongodb.org/win32/mongodb-win32-i386-2.4.5.zip 下载Windows 32-bit版本并解压缩,程 ...

  4. L2-028 秀恩爱分得快（25 分）

    古人云:秀恩爱,分得快. 互联网上每天都有大量人发布大量照片,我们通过分析这些照片,可以分析人与人之间的亲密度.如果一张照片上出现了 K 个人,这些人两两间的亲密度就被定义为 1/K.任意两个人如果同 ...

  5. mysql数据库表分区详解（数量过大的数据库表通过分区提高查询速度）

    这篇文章主要介绍了MySQL的表分区,例如什么是表分区.为什么要对表进行分区.表分区的4种类型详解等,需要的朋友可以参考下 一.什么是表分区通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysq ...

  6. 解决mongodb查询慢的问题

    最近项目上一直在用mongodb作为数据库,mongodb有他的优势,文档型类json格式存储数据,修改起来比传统的关系型数据库更方便,但是最近在用mongodb出现了查询缓慢的问题,我用命令行查询, ...

  7. websocket之二：WebSocket编程入门

    一.WebSocket客户端 websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信.在websocket中有两个方法: 1.send() 向远程服务 ...

  8. hive 面试题

    使用 Hive或者自定义 MR 实现如下逻辑 product_no lac_id moment start_time user_id county_id staytime city_id 134291 ...

  9. Java虚拟机学习 - 体系结构 内存模型（转载）

    一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代” .“非堆”,  它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共享的内存区域.默认最小值为16MB, ...

  10. Python之文件输入输出，

      文件输入与输出 • 打开文件返回文件对象 – file_object=open(file_name,access_mode='r') • 关闭文件对象 – file_object.close() ...