3.2 网址导航(简单仿hao123主页)_HTML视频教程

- 灬无言 - 阅 4,859

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

3.2.1 百度搜索框

网址导航的百度搜索框,就是将表单提交到了http://www.baidu.com/s。一个文本输入框,一个提交按钮即可完成。

<form action=”http://www.baidu.com/s”>

<input id=”baidu” type=”text” name=”word” maxlength=”1000px” />

<input id=”button” type=”submit” value=”百度一下”>

</form>

3.2.2 CSS雪碧技术

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

设置显示区域(宽高),通过对区域设置背景图片,再进行图片定位来实现。

width:50px;

height:50px;

background: url(images/1.jpg) no-repeat 50px 50px;

如果是列表使用,首先设置所有li背景图片共享合并图片,然后通过单独对每个li进行背景定位,background-position : -50px -100px ;

3.2.3 step by step

  1. 利用上节课的页面布局,留下head中top_content、logo_content和menu_content;main中的只留main_content;footer中只留footer_content。对应的css也删了。
  2. 修改整体布局。

内容  .auto                             width:1190px;

头部  #head                             height:236; margin-bottom:10px;

#top                           height:60;border-bottom:1px solid #ccc;

#top_content                     height:60;

#top_logo                          height:134;

#top_logo_content          height:134;

#menu                               height:41;

#menu_content              height:38;border-bottom:1px solid #eaeaea;

border-top:2px solid #099e6a;

#main不仿,故不动。

#footer                                        height:70; background-color: #f0eff4;

非内容区非底部背景均设置为:background-image:url(../images/ body_bg.png)

  1. top区域

#top_content   删除     background-color:blue;

top_content的div内插入hao123_logo   <img src=”images/hao123_logo.png”/>

  1. logo区域

#logo_content  删除  background-color:#f1f1f1;

logo_content的div内新建div

logo_search为百度logo图片、搜索框和百度一下按钮区域。

<div id=”logo_content” class=”auto”>

<div id=”logo_content_search”>

<div id=”logo_search”></div>

</div>

</div>

#head #logo #logo_content #logo_content_search{

height:77px;

padding:36px 0 0 166px;

}

#head #logo #logo_content #logo_search{

height:44px;

width:800px;

}

  1. 百度logo图片

<div id=”logo_search”>

<div id=”logo_search_baidu”></div>

</div>

#logo_search_baidu{

height:40px;

width:120px;

background:url(../images/baidu.png) -10px -212px no-repeat;

margin:4px 30px 0 -26px;

}

  1. 创建form表单

<form action=”http://www.baidu.com/s”></form>

  1. 设置搜索框背景图

<form action=”http://www.baidu.com/s”>

<div id=”logo_search_window”></div>

</form>

#head #logo_search_window{

height:44px;

width:540px;

background:url(../images/baidu.png) -159px -207px #fff no-repeat;

float:left;

}

另外#logo_search_baidu(百度logo图片)加上float:left;

  1. 在搜索框中添加表单对象(文字字段)

<div id=”logo_search_window”>

<input id=”logo_input” type=”text” name=”word” maxlength=”100″ value=” 小小课堂_HTML、CSS网页制作入门课程”/>

</div>

#head #logo_input{

width:448px;

height:18px;

padding:10px 0;

border:0;

margin:4px 30px 0 60px;

font:16px arial;

}

  1. 添加提交按钮,这里还需要讲解一个知识点,鼠标在对象上移动时,显示的光标形状,一般用cursor:auto 或 pointer 或url(图片地址)来实现。下面我们用的pointer光标显示为小手,如不加为箭头效果。

<form action=”http://www.baidu.com/s”  target=”_blank”>

<div id=”logo_search_window”>

<input id=”logo_input” type=”text” name=”word” maxlength=”100″/>

</div>

<div>

<input id=”logo_button” type=”submit”value=””/>

</div>

</form>

#head #logo_button{

width:118px;

height:44px;

background:url(../images/baidu.png) no-repeat -699px -207px;

float:left;

border:0px;

cursor:pointer;

}

  1. menu导航列表创建

<ul>

<li id=”menu_first”>

<span class=”title”>首页</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>电视剧</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>最新电影</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>新闻头条</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>八卦娱乐</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>军事热点</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>热门游戏</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>小游戏</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>今日特价</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>特价旅游</span>

<span class=”menu_split”></span>

</li>

<li class=”menu”>

<span class=”title”>生活服务</span>

<span class=”menu_split”></span>

</li>

</ul>

  1. #menu_first的CSS

#head #menu #menu_first{

width:81px;

height:38px;

line-height:38px;

float:left;

text-align:center;

cursor:pointer;

overflow:hidden;

}

  1. .menu的CSS

#head #menu #menu_first{

width:81px;

height:38px;

line-height:38px;

float:left;

text-align:center;

cursor:pointer;

overflow:hidden;

background-color:#0aa770;

color:#fff;

}

#head #menu .menu{

width:111px;

height:38px;

line-height:38px;

float:left;

text-align:center;

cursor:pointer;

overflow:hidden;

}

#head #menu #menu_last{

width:110px;

height:38px;

line-height:38px;

float:left;

text-align:center;

cursor:pointer;

overflow:hidden;

}

#head #menu .title{

border-width:2px 0 0 0;

font-size:16px;

font-family:Microsoft Yahei;

 

text-align:center;

}

.menu_split{

cursor:pointer;

display:block;

width:1px;

height:40px;

position:relative;

bottom:40px;

right:0;

background:url(../images/index.png) center left no-repeat;

}

  1. 为所有的menu中的li标签内的元素加上<a>标签,为不同状态链接设置对应颜色,并去除下划线效果。

<a href=”html/main_html.html” target=”main_html”> </a>  这就是之前讲过的浮动框架链接效果。给不同的li设置不同的href属性,达到在浮动框架内浏览不同页面的功能。

#head #menu #menu_first a:link{

color:#fff;

text-decoration:none;

}

#head #menu #menu_first a:visited{

color:#fff;

text-decoration:none;

}

#head #menu .menu a:link{

color:black;

text-decoration:none;

}

#head #menu .menu a:visited{

color:black;

text-decoration:none;

}

#head #menu #menu_last a:link{

color:black;

text-decoration:none;

}

#head #menu #menu_last a:visited{

color:black;

text-decoration:none;

}

#head #menu li:hover .title{

color:#118850;

}

  1. 底部hao123logo图。

<div id=”footer_content” class=”auto”>

<div id=”footer_full”>

<div id=”footer_left”>

<div id=”footer_logo”></div>

</div>

</div>

</div>

#footer #footer_content #footer_full{

border-top:1px solid #e9e9e9;

margin:auto;

padding-top:20px;

height:50px;

}

#footer #footer_content #footer_left{

float:left;

}

#footer #footer_content #footer_logo{

width:228px;

height:28px;

margin:0 16px 0 9px;

background:url(../images/bottom.jpg)

}

  1. 删除main_content区域背景颜色,添加iframe浮动框架

<div id=”main_content” class=”auto”>

<iframe id=”iframes” name=”main_html” src=”html/main_html.html”></iframe>

</div>

#main #main_content #iframes{

height:800px;

width:1190px;

border:none;

background-color:# f0eff4;

margin-top:10px;

}

  1. 设置不同HTML文档,在不同的li列表中,查看效果。html设置不同背景颜色 #fcb6f8;
  2. 以下为html中的内容。

图文不够清楚?请观看小小课堂网HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

46

本文转载 " https://www.xxkt.org/1631 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注