导航部分文字链接，鼠标触碰变颜色，除百度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. debian下编译openwrt固件

    参考文章:Ubuntu下编译OpenWRT固件 我买的路由器是RG100A-AA,采用了bcm63xx系列的芯片. 下载openwrt源码: svn co svn://svn.openwrt.org/ ...

  2. ES6中promise总结

    一.什么是ES6的Promise 讲太多也没有.直接在打印出来就好,console.dir(Promise) Promise 是一个构造函数,自身有all, reject, resolve 这几个眼熟 ...

  3. less的安装使用和入门实践

    1.简介 LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可 ...

  4. mysql八：ORM框架SQLAlchemy

    阅读目录 一 介绍 二 创建表 三 增删改查 四 其他查询相关 五 正查.反查 一 介绍 SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进 ...

  5. Android Studio 字体大小和背景色的设置

    豆绿色的RGB值:#C7EDCC 1.打开Android Studio——>Ctrl+Alt+s 或者 File——>Settings 2.在弹窗中选中“Colors&Fonts” ...

  6. Java的访问权限修饰符

    default或者friendly表示默认的访问权限修饰符.

  7. AtCoder AGC #2 Virtual Participation

    在知乎上听zzx大佬说AGC练智商...于是试了一下 A.Range Product 给$a$,$b$,求$\prod^{b}_{i=a}i$是正数,负数还是$0$ ...不写了 B.Box and ...

  8. Money Systems

    链接 分析:来看看背包九讲里面的一段话: 对于一个给定了背包容量.物品费用.物品间相互关系(分组.依赖等) 的背包问题,除了再给定每个物品的价值后求可得到的最大价值外,还可以得 到装满背包或将背包装至 ...

  9. JZOJ 1667【AHOI2009】中国象棋——dp

    题目:https://jzoj.net/senior/#main/show/1667 只注重0.1.2的列有多少个,不注重它们的位置,就能记录了. #include<iostream> # ...

  10. .NETFramework：ConfigurationManager

    ylbtech-.NETFramework:ConfigurationManager 1.程序集 System.Configuration, Version=4.0.0.0, Culture=neut ...