发布时间:2019-12-30    所属分类:网站建设   浏览:2267

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三


横向导航菜单


image.png


■横向列表菜单

■用图片美化的横向导航

■css Sprites


一、横向列表菜单


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { border: 1px solid #CCC; height:26px; background: #eee;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; }

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="">首页</a></li>

<li><a href="">网页版式布局</a></li>

<li><a href="">div+css教程</a></li>

<li><a href="">div+css实例</a></li>

<li><a href="">常用代码</a></li>

</ul>

</div>

</body>

</html>


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第1张

     为了用户体验更加友好,还是把a转换成块级元素,也可给a设置背景色或背景图片来更加美观了,另外再设置鼠标放上时的样式。

 


#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}

 #menu ul { list-style: none; margin: 0px; padding: 0px; }

 #menu ul li { float:left;}

 #menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}

 #menu ul li a:hover { background:#333; color:#fff;}


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第2张

二、 用图片美化的横向导航


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; margin-left:2px;}

#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}

#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}

#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a id="current" href="">首页</a></li>

<li><a href="">网页版式</a></li>

<li><a href="">web教程</a></li>

<li><a href="">web实例</a></li>

<li><a href="">常用代码</a></li>

</ul>

</div>

</body>

</html>


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第3张

三、 CSS Sprites技术


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; margin-left:2px;}

#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;}

#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;}

#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a id="current" href="">首页</a></li>

<li><a href="">网页版式</a></li>

<li><a href="">web教程</a></li>

<li><a href="">web实例</a></li>

<li><a href="">常用代码</a></li>

</ul>

</div>

</body>

</html>


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第4张

下拉及多级弹出菜单


■带下拉子菜单的导航菜单

■绝对定位和浮动的区别和运用

■css自适应宽度滑动门菜单


一、带下拉子菜单的导航菜单

html代码增加二级菜单的代码:


<div id="menu">

 <ul>

 <li><a id="current" href="">首页</a></li>

 <li><a href="#">网页版式</a>

 <ul>

 <li><a href="">自适应宽度</a></li>

 <li><a href="">固定宽度</a></li>

 </ul>

 </li>

 <li><a href="">web教程</a>

 <ul>

 <li><a href="">新手入门</a></li>

 <li><a href="">视频教程</a></li>

 <li><a href="">常见问题</a></li>

 </ul>

 </li>

 <li><a href="">web实例</a></li>

 <li><a href="">常用代码</a></li>

 </ul>

 </div>


二级菜单的背景和浮动清除掉


#menu ul li ul li { float:none;}

 #menu ul li ul li a { background:none;}

#menu ul li ul { border:1px solid #ccc;}

 #menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}

 #menu ul li ul li a { background:none;}

 #menu ul li ul li a:hover { background:#333; color:#fff;}


二级菜单隐藏


#menu ul li ul { display:none; border:1px solid #ccc;}

 #menu ul li:hover ul { display:block;}


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第5张


二、绝对定位和浮动的区别和运用


当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时)。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。

而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示,而没有脱离文档流,理解了这一点,就很容易弄明白什么时候用定位,什么时候用浮动了。


三、 css自适应宽度滑动门菜单


需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第6张  网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第7张网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第8张


绿色部分为span,然后定义它的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。当文字多时,会把span撑开,这实现了自适应宽度的按钮了。


CSS表单设计


■改变文本框和文本域样式

■用图片美化按钮

■改变下拉列表样式

■用label标签提升用户体验


一、改变文本框和文本域样式


.text1 { border:1px solid #f60; color:#03C;}

 .text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}

 .text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-repeat;}

 .text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;}


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第9张


三、改变下拉列表样式


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

.select { border:1px solid #f60; background:#FF9; height:30px;}

.tip { width:50px; border:1px solid #ccc; background:#fff; position:absolute; top:5px; left:70px; font-size:12px; height:100px; padding:5px;}

</style>

</head>

<body>

<p>请选择项目:</p>

<p>

<select name="select" id="select" class="select">

<option>请选择----------------</option>

<option>标准之路</option>

</select>

</p>

<div class="tip">看看谁能把我挡着</div>

</body>

</html>


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三  html教程 divcss 第10张



高效整洁CSS代码原则


1. 使用Reset但并非全局Reset  *{ margin:0; padding:0; }


/** 清除内外边距 **/

 body, h1, h2, h3, h4, h5, h6, hr, p,

 blockquote, /* structural elements 结构元素 */

 dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

 pre, /* text formatting elements 文本格式元素 */

 form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */

 th, td, /* table elements 表格元素 */

 img/* img elements 图片元素 */{

 border:medium none;

 margin: 0;

 padding: 0;

 }

 /** 设置默认字体 **/

 body,button, input, select, textarea {

 font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; }

 h1, h2, h3, h4, h5, h6 { font-size: 100%; }

 em{font-style:normal;}

 /** 重置列表元素 **/

 ul, ol { list-style: none; }

 /** 重置超链接元素 **/

 a { text-decoration: none; color:#333;}

 a:hover { text-decoration: underline; color:#F40; }

 /** 重置图片元素 **/

 img{ border:0px;}

 /** 重置表格元素 **/

 table { border-collapse: collapse; border-spacing: 0; }


2. 良好的命名习惯

无疑乱七八糟或者无语义命名的代码  .aaabb{margin:2px;color:red;}


3. 代码缩写


li{

 font-family:Arial, Helvetica, sans-serif;

 font-size: 1.2em;

 line-height: 1.4em;

 padding-top:5px;

 padding-bottom:10px;

 padding-left:5px;

 }

就可以缩写为:

li{


 font: 1.2em/1.4em Arial, Helvetica, sans-serif;

 padding:5px 0 10px 5px;

 }


CSS 清理浮动方式

/* 清理浮动 */

 .clearfix:after {

  visibility:hidden;

  display:block;

  font-size:0;

  content:" ";

  clear:both;

  height:0;

 }

 .clearfix {

  zoom:1;

 }


相关内容:


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三



上一篇:网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二

下一篇:详细为您讲解网站编辑推广技巧(一)



除非注明,本站所有文章皆为本人原创,可随意转载但请保留链接或名字,谢谢!



相关标签:html教程divcss石家庄做网站石嘴山做网站双鸭山做网站四川做网站肃北蒙古做网站肃南裕固做网站绥芬河做网站随州做网站台山做网站太仓做网站太原做网站泰兴做网站泰州做网站唐山做网站天津做网站调兵山做网站铁岭做网站通化做网站

发表评论:

SEO姜东
    SEO姜东微信二维码

    常州SEO姜东


    从事互联网行业多年,希望分享各类互联网、SEO理念、跨境电商,扫码与我交流SEO


与我详谈SEO

常州SEO木木qq


常州SEO木木qq

SEO标签
最新留言
加我的微信:SEO-jiangd详谈网络营销