DIV+CSS网站布局的方法

本文小编为大家详细介绍“DIV+CSS网站布局的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“DIV+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; }
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　为了用户体验更加友好，还是把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;}
　　二、用图片美化的横向导航
　　

　　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;}
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　下拉及多级弹出菜单
　　■带下拉子菜单的导航菜单
　　■绝对定位和浮动的区别和运用
　　■css自适应宽度滑动门菜单
　　一、带下拉子菜单的导航菜单
　　html代码增加二级菜单的代码：
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　二级菜单的背景和浮动清除掉
　　#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;}
　　二、绝对定位和浮动的区别和运用
　　当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。
　　而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。
　　三、 css自适应宽度滑动门菜单
　　需要在文字上增加一个辅助标签，如span，分别在a上和span上设置背景，一个左侧对齐，一个右侧对齐
　　绿色部分为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;}
　　

　　。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;}
　　
　　
　　
　　请选择项目：
　　
　　
　　　　　　
　　
　　
　　
　　
　　高效整洁CSS代码原则
　　1. 使用Reset但并非全局Reset *{ margin:0; padding:0; }
　　body, h2, h3, h4, h5, h6, h7, hr, p,
　　blockquote,
　　dl, dt, dd, ul, ol, li,
　　pre,
　　form, fieldset, legend, button, input, textarea,
　　th, td,
　　img{
　　border:medium none;
　　margin: 0;
　　padding: 0;
　　}
　　body,button, input, select, textarea {
　　font: 12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif; }
　　h2, h3, h4, h5, h6, h7 { 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网站布局的方法”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: python中搜索的示例分析

这篇文章将为大家详细讲解有关python中搜索的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。搜索是指从元素集合中找到某个特定元素的算法过程。搜索过程通常返回 True 或 False，分别表示元素是否存在。pyt…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。