导航部分文字链接，鼠标触碰变颜色，除百度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. Spring Boot2.0之Admin-UI分布式微服务监控中心

    前面https://www.cnblogs.com/toov5/p/9823353.html  说的很不好用哈哈 还需要json格式化 我们可以用Admin-UI 比较爽歪歪 原理: 将所有服务的监控 ...

  2. tkinter之button

    Button按钮,直接上代码: from tkinter import * def gs(): global read s=Label(read,text='昨夜西风凋敝树,堵上高楼,望尽天涯路!', ...

  3. Es6 学习笔记（一）数组扩展

    扩展运算符 ... 1.数组的扩展运算符将一个数组转换成一个逗号分隔的参数序列 console.log(...[1,2,3])   //1,2,3 ['a', 'b',...[1,3]]   //a, ...

  4. python下setuptools安装

      python下的setuptools带有一个easy_install的工具,在安装python的每三方模块.工具时很有用,也很方便.安装setuptools前先安装pip,请参见<pytho ...

  5. P3515 [POI2011]Lightning Conductor[决策单调性优化]

    给定一序列,求对于每一个$a_i$的最小非负整数$p_i$,使得$\forall j \neq i $有$ p_i>=a_j-a_i+ \sqrt{|i-j|}$. 绝对值很烦 ,先分左右情况单 ...

  6. POJ2387(最短路入门)

    Til the Cows Come Home Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 38556   Accepted ...

  7. 开源监控系统中 Zabbix 和 Nagios 哪个更好？

    监控平台的话,各有优劣,但基本都可以满足需求.等达到一定监控指标后,发现,最困难的是监控项目的管理. CMDB中小规模(服务器<=1k):Zabbix大规模(1k>=服务器<=10k ...

  8. Redis多个数据库

    注意:Redis支持多个数据库,并且每个数据库的数据是隔离的不能共享,并且基于单机才有,如果是集群就没有数据库的概念. Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存 ...

  9. Linux中的nc测试端口是否开放

    nc测试端口是否开放 在Linux中有一个级强大的网络工具netcat,在默认情况下面都是没有安装的,现在介绍一下安装过程 其实安装很简单 一.安装使用 1.只需输入命令yum安装: [root@SZ ...

  10. warning: conflicting types for built-in function 'puts'

    warning: conflicting types for built-in function 'puts' [编译器版本] arm-linux-gcc 3.4.1 [问题描述] 在做嵌入式底层开发 ...