导航部分文字链接，鼠标触碰变颜色，除百度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. mini2440 u-boot下设置tftp

    在烧写好u-boot后,重新启动mini2440,一直按空格键进入u-boot界面: U-Boot 月 - ::) modified by tekkamanninja (tekkamanninja@. ...

  2. Hadoop- 分布式资源管理YARN架构讲解

    YARN是分布式资源管理,每一台机器都要去管理该台计算机的资源,Yarn负责为MapReduce程序分配运算硬件资源.每一台机器的管理者叫 NodeManager,整个集群的管理者管理着整个集群的No ...

  3. listen 64

    Winning Athletes Engage in Arms Raise You see it when you watch almost any game: there's a touchdown ...

  4. 查看linux连接进程占用的实时流量 -nethogs

    1.安装nethogs yum -y install nethogs 2.安装完成后,就可以执行命令 nethogs 3.实时查看进程流量,来个图显示 图中会显示当前的nginx产生的流量有多少都会清 ...

  5. 集训Day12

    快乐 快乐就完事了 今天把Trie树 / 可持久化Trie树搞了一下 Trie树可以维护区间最大异或和 具体就是区间异或和 -> 区间两个前缀异或和的异或 然后就变成了 "从n个数里找 ...

  6. Spring笔记05（Spring JDBC三种数据源和ORM框架的映射）

    1.ORM框架的映射 01.JDBC连接数据库以前的方式代码,并给对象赋值 @Test /** * 以前的方式jdbc */ public void TestJdbc(){ /** * 连接数据库的四 ...

  7. 「JLOI2011」「LuoguP4568」飞行路线（分层图最短路

    题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为00到n-1n−1,一共有mm种航线,每种航线连接两个城市,并且 ...

  8. Mesos和Marathon

    libz is required for mesos to build 需要安装zlib-devel-1.2.7-17.el7.x86_64.rpm   其实跨Shell的Profile文件同步只要执 ...

  9. mysql错误-修改mysql.sock位置

    在Mysql下有时候会出现mysql.sock位置错误,导致无法链接数据库. mac下报错的时候: 首先修改my.cnf 位置在/etc/my.cnf下,假如没有的话,去/usr/locate/mys ...

  10. VIJOS:P1082丛林探险

    描述 东非大裂谷中有一片神秘的丛林,是全世界探险家的乐园,著名黄皮肤探险家BB一直想去试试.正好我国科学家2005年4月将首次对东非大裂谷进行科考,BB决定随科考队去神秘丛林探险.在出发之前,他搜集了 ...