临沂做wish网站,零基础做电商从什么做起,赤坎网站制作,互联网招聘网站排名希望你开心#xff0c;希望你健康#xff0c;希望你幸福#xff0c;希望你点赞#xff01; 最后的最后#xff0c;关注喵#xff0c;关注喵#xff0c;关注喵#xff0c;佬佬会看到更多有趣的博客哦#xff01;#xff01;#xff01; 喵喵喵#xff0c;你对我真的… 希望你开心希望你健康希望你幸福希望你点赞 最后的最后关注喵关注喵关注喵佬佬会看到更多有趣的博客哦 喵喵喵你对我真的很重要 目录 前言 横向二级导航菜单 Web页面设计实例 总结 前言 该练的还是要练终究是自己的 网页标题二级下拉导航菜单网页的主体部分代码为 使用外部样式表为其设置样式在CSS文件夹下新建样式表文件style10.css charset utf-8; /* CSS Document */ ul{margin:0;padding:0; }ul li{height:30px;width:115px;list-style-type:none;float:left;font:0.9em Arial, Helvetica, sans-serif;text-align:center;/*display:inline;*/ }ul li a{color:#fff;width:113px;margin:0px;padding:0 0 0 8px;display:inline-block; /*display:block;*/background:#808080;line-height:29px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;text-decoration:none; } ul li a:hover{background-color:#666;border-bottom:1px dashed #ff0000; }ul li ul li{height:25px; }ul li ul li a{background-color:#666;line-height:24px; }ul li ul{display:none; /*visibility:hidden;*/ }ul li:hover ul{display:block; /*visibility:visible;*/ }ul li ul li a:hover{background-color:#333; }并设置如下样式 整体样式和8-8中的style8.css中的样式一致。需要增加的样式就是设置二级下拉导航菜单的隐藏/显示以及二级菜单单独的样式效果。利用后代选择器ul li ul li设置二级菜单中li的高度为25px。利用后代选择器ul li ul li a设置二级菜单中a的背景颜色为#666行高24px。利用后代选择器ul li ul设置ul初始的时候为隐藏不显示[display:none]利用后代选择器ul li:hover ul设置当鼠标悬停在一级导航菜单上时显示二级菜单。利用后代选择器ul li ul li a:hover设置鼠标悬停在二级菜单的超链接上时超链接的背景颜色为#333. !doctype html html head meta charsetutf-8 title二级下拉导航菜单/title link relstylesheet hrefCSS/style10.css /headbody div idnavullia href#首页/a/lilia href#jQuery特效/aullia href#jQuery图片特效/a/lilia href#jQuery导航特效/a/lilia href#jQuery选项卡特效/a/lilia href#jQuery文字特效/a/li/ul/lilia href#JavaScript特效/a/lilia href#Flash特效/aullia href#Flash图片特效/a/lilia href#Flash导航特效/a/lilia href#Flash选项卡特效/a/lilia href#Flash文字特效/a/li/ul/lilia href#divcss教程/a/lilia href#HTML5教程/a/li/ul /div /body /html横向二级导航菜单 网页标题横向二级导航菜单 网页的主体部分代码为 使用外部样式表为其设置样式在CSS文件夹下新建样式表文件style11.css charset utf-8; /* CSS Document */ /*定义外层图层样式*/ #menu{padding-left:100px;margin:0 auto;width:100%;height:60px;background-color:#55aaee;border:1px solid #333; }#menu ul{margin:0;padding:0; }/*定义存放子菜单的图层样式*/ .submenu{width:900px;height:28px;text-align:center; }#menu ul li{height:30px;width:115px;list-style-type:none;float:left;font:0.9em Arial, Helvetica, sans-serif;text-align:center; }/*定义主菜单中超链接样式*/ ul li a{color:#fff;width:114px;margin:0;padding:0 0 0 8px;text-decoration:none;display:block;background-color:#55a0ff;line-height:29px;border-bottom:1px solid #ccc; } /*定义子菜单中列表项的样式 */ ul li .submenu ul li{height:25px;width:113px;list-style-type:none;float:left;font:0.8em Arial, Helvetica, sans-serif;text-align:center; } /*定义子菜单中超链接的样式 */ ul li .submenu ul li a{background-color:#55aaee;line-height:24px; }ul li a:hover{background-color:#666;border-bottom:1px dashed #ff0000; }ul li .submenu{ /*定义子菜单初始状态为不显示 */display:none; }ul li:hover .submenu{display:block; }ul li .submenu ul li a:hover{background-color:#333; } 并设置如下样式 定义外层图层样式#menu左内边距100px相对于页面居中显示宽100%高60px背景颜色#55aaee边框1px 实线 #333定义主菜单样式#menu ul:内外边距均为0定义主菜单li的样式#menu ul li:高30px宽115px不显示项目符号向左浮动字体大小0.9emArial系列字体文本居中对齐定义主菜单中超链接样式(ul li a):字体颜色白色宽114px外边距0左内边距8px其余内边距均为0无下划线显示为块级元素背景颜色为#55a0ff行高29px下边框线1px 实线 #ccc定义主菜单中鼠标悬停在超链接上的样式ul li a:hover:背景颜色#666下边框线1px 虚线 #f00定义子菜单图层样式.submenu:宽900px高28px文本居中对齐定义子菜单中列表项的样式(ul li .submenu ul li):高25px宽113px不显示项目符号向左浮动字体大小0.8emArial字体系列文本居中显示定义子菜单中超链接的样式ul li .submenu ul li a:背景颜色#55aaee行高24px定义子菜单初始状态为不显示(ul li .submenu)定义鼠标悬停在主菜单列表项上时显示其下的子菜单(ul li:hover .submenu)定义鼠标悬停在子菜单的超链接上时的样式(ul li .submenu ul li a:hover)背景颜色#333 !doctype html html head meta charsetutf-8 title横向二级导航菜单/title link relstylesheet hrefcss/style11.css /headbody div idmenuullia href#首页/a/lilia href#jQuery特效/adiv classsubmenuullia href#jQuery图片特效/a/lilia href#jQuery导航特效/a/lilia href#jQuery选项卡特效/a/lilia href#jQuery文字特效/a/li/ul/div /lilia href#JavaScript特效/a/lilia href#Flash特效/adiv classsubmenuullia href#Flash图片特效/a/lilia href#Flash导航特效/a/lilia href#Flash选项卡特效/a/lilia href#Flash文字特效/a/li/ul/div/lilia href#divcss教程/a/lilia href#HTML5教程/a/li/ul /div /body /htmlWeb页面设计实例 参照下图的显示效果完成网页的制作 使用外部样式表为其设置样式在CSS文件夹下新建样式表文件style12.css charset utf-8; /* CSS Document */ /* exp_10_1.css */body { font-family:Verdana; font-size:16px; margin:0;text-align:center; } h4{float:left;margin:45px auto;padding-left:50px;} p{margin:2px;font-size:14px; } #Container {margin:0 auto; width:900px; } #Header { height:118px; border-bottom:5px;background-color:rgb(230,230,230);border-bottom:5px solid #FFFFFF; } #PageBody { height:380px; border-bottom:5px solid #FFFFFF; } #SideBar { float:left; width:200px; height:380px; background:#Dff100;text-align:center;padding:50px auto; border-right:5px solid #FFFFFF; } #MainBody { float:right; width:695px; height:380px; background:#cff000; } #Footer { height:60px; background-color:rgb(230,230,230);text-align:center;font-family:Courier New;font-size:12px;padding-top:10px; } #Header img{float:left; }span{margin-top:45px;width:50px;height:30px;font-size:20px;font-family:华文新魏;padding:45px 10px; vertical-align:middle;text-align:center;}a{width:48px;height:24px; font-size:20px;font-family:华文新魏; text-align:center; } ul{list-style-type:none;margin:0px;padding:35px;text-align:center;} li{ width:50px;height:30px;font-size:20px;font-family:华文新魏; padding:10px 35px; } h3{text-align:center;color:red;font-size:24px; background:#CFF000;padding:6px auto;} a:link,a:visited,a:active{text-decoration:none;display:block; } a:hover{border-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF;}建议页面的宽度设置为900px !doctype html html head meta charsetutf-8 titleWeb页面设计实例/title link hrefcss/style12.css relstylesheet / /head bodydiv idContainerdiv idHeaderimg srcimages/Header.jpgh4span首页/spanspan|/spanspan博客/spanspan|/spanspan设计/spanspan|/spanspan论坛/spanspan|/spanspan关于/span/h4/divdiv idPageBodydiv idSideBarullia href#首页/a/lilia href#博客/a/lilia href#设计/a/lilia href#论坛/a/lilia href#关于/a/li/ul/divdiv idMainBodyh3欢度新春佳节/h3 img srcimages/huanduchunji.jpg width694 height308 border0 alt/div/divdiv idFooterpCopyrights 2015-2020 Web前端开发工作室copy; All rights reserved. 中国江苏/p /div/div /body /html/body /html 总结 不用一模一样自己可以做个升级有自己的风格那真是超赞的 希望你开心希望你健康希望你幸福希望你点赞 最后的最后关注喵关注喵关注喵佬佬会看到更多有趣的博客哦 喵喵喵你对我真的很重要