经典DIV+CSS下拉菜单

合集下载

div+css(5)原创

第三章【DIV】div——block块状对象（块级元素），显示为一个方块，默认状态下占据一行，其他对象将在下一行显示。

in-line行间对象（内联元素），允许下一个对象与之共享一行进行显示。

【XHTML标签与功能】-----------结构标签-----------html 根元素head 头部区域body 主体区域div 区块定义标签span 行间区块定义标签-----------Meta信息-----------DOCTYPE 文档类型指定title 浏览器标题栏link 链接到扩展资源meta Meta信息vstyle 样式表区域-----------文本控制-----------p 段落h1~h6 标题1~6级strong 加重重点em 重点/强调abbr 定义文本的简写词acronym 定义首字母简写词address 标签联系信息bdo 字母顺序左右反转blockguote 块状引用内容cite 行间引用内容q 行间小型的引用-----------链接-----------a 链接vbase 基础链接类-----------图像和对象-----------img 插入图像area 图像热区细节map 图像热区object 插入对象patam 对象的参数-----------列表-----------ul 无序列表ol 有序列表li 列表项dl 带描述的列表dt 描述列表中的名词dd 描述列表中的描述-----------表格-----------table 表格tr 行td 单元格th 表头tbody 表格主体thead 表格头部tfoot 表格底部col 表格列colgroup 表格列的集合caption 表格的标题-----------表单-----------form 表单区域input 输入框textarea 文本域select 下拉列表option 下拉列表项optgroup 下拉列表项集合button 按钮label 标签fieldset 标签页legent 标签页的标题-----------脚本-----------script 脚本区域noscript 无法执行脚本的替代-----------表现-----------b 加粗i 斜体tt 打字机字体sub 下标sup 上标big 加大small 减小hr 分割线【定位】--------------------------------- 【两列右侧自适应】--------------------------------- #left{background-color:#999;border:2px #000 solid;width:100px;height:300px;float:left;}#right{background-color:#999;border:2px #000 solid;height:300px;}---------------------------------绝对定位position:static;（默认）absolute;（漂浮，可使用top，right，bottom，left）relative;---------------------------------【三列，左右两列固定，中间列自适应】主要在blog中应用，大型网站设计较少使用。

css修改下拉列表select的默认样式

css修改下拉列表select的默认样式html 代码：<div><select name=""><option value="芝⼠">芝⼠</option><option value="奶油">奶油</option></select></div>给select添加⽗元素div⽬的是为了，⽤div的样式覆盖住select样式select{ //清除select的边框样式border: none; //清除select聚焦时候的边框颜⾊outline: none; //将select的宽⾼等于div的宽⾼width: 100%;height: 40px;line-height: 40px; //隐藏select的下拉图标appearance: none;-webkit-appearance: none;-moz-appearance: none; //通过padding-left的值让⽂字居中padding-left: 60px;}//使⽤伪类给select添加⾃⼰想⽤的图标div:after{ content: ""; width: 14px; height: 8px; background: url(img/xiala.png) no-repeat center; //通过定位将图标放在合适的位置 position: absolute; right: 20px; top: 45%; //给⾃定义的图标实现点击下来功能 pointer-events: none;}。

DIV+CSS实现二级下拉菜单

二级下拉菜单实现代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type=text/javascript>function menuFix() {var sfEls = document.getElementById("menu").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseDown=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");}}}window.onload=menuFix;</script><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:700px; height:38px; margin:0 auto; background:url(/Templates/show/images/menu_bg.jpg) ;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { float:left; margin-left:2px;}#menu ul li a { display:block; width:91px; height:38px; line-height:38px; text-align:center; font-size:14px; color:#FFFFFF; text-decoration:none; font-weight:bold;}#menu ul li a:hover { background:url(/Templates/show/images/Menu_link.jpg);display:block; width:91px; height:38px; line-height:38px; text-align:center; font-size:14px; color:#FF9966; text-decoration:none; font-weight:bold;}#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}#menu ul li ul li { float:none; width:88spx; background:#99CC99; margin:0;}#menu ul li ul li a { background:none;}#menu ul li ul li a:hover { background:#333; color:#fff;}#menu ul li:hover ul { display:block;}#menu ul li.sfhover ul { display:block;}</style></head><body><div id="menu"><ul><li><a href="#">网站首页</a></li><li><a href="#">关于我们</a><ul><li><a href="#">公司简介</a></li><li><a href="#">荣誉资质</a></li></ul></li><li><a href="#">新闻动态</a><ul><li><a href="#">公司新闻</a></li><li><a href="#">行业新闻</a></li><li><a href="#">社会新闻</a></li></ul></li><li><a href="#">产品展示</a></li><ul><li><a href="#">产品一</a></li><li><a href="#">产品二</a></li><li><a href="#">产品三</a></li><li><a href="#">产品四</a></li></ul><li><a href="#">人力资源</a></li><li><a href="#">客户中心</a></li><li><a href="#">联系我们</a></li></ul></div> </body> </html>。

CSS经典三栏布局方案（6种方法）

CSS经典三栏布局⽅案（6种⽅法）本⽂介绍了CSS经典三栏布局⽅案，分享给⼤家，也给⾃⼰做个笔记，具体如下：三栏布局，顾名思义就是两边固定，中间⾃适应。

三栏布局在开发⼗分常见1. float布局最简单的三栏布局就是利⽤float进⾏布局。

⾸先来绘制左、右栏：<style>.left {float: left;width: 100px;height: 200px;background-color: red;}.right {float: right;width: 100px;height: 200px;background-color: yellow;}</style><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>此时可以得到左右两栏分布：接下来再来看中间栏如何处理。

我们知道对于float元素，其会脱离⽂档流，其他盒⼦也会⽆视这个元素。

（但其他盒⼦内的⽂本依然会为这个元素让出位置，环绕在周围。

）所以此时只需在container容器内添加⼀个正常的div，其会⽆视left和right，撑满整个container，只需再加上margin为left right流出空间即可：<style>.left {float: left;width: 100px;height: 200px;background-color: red;}.right {float: right;width: 100px;height: 200px;background-color: yellow;}.main {background-color: green;height: 200px;margin-left: 120px;margin-right: 120px;}.container {border: 1px solid black;}<div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>优势：简单劣势：中间部分最后加载，内容较多时影响体验2. BFC 规则BFC(块格式化上下⽂)规则规定：BFC不会和浮动元素重叠。

网页制作特效——特效代码

网页制作特效-—网页特效(1）导航菜单:〈html〉<head〉〈meta http—equiv="Content—Language" content="zh—cn”〉<meta http—equiv=”Content-Type” content="text/html; charset=gb2312">〈meta http—equiv=”refresh” content="0；URL=http：//www。

/jscode/js080508/jscode.htm”>〈title>仿网页特效观止首页栏目切换滑动门效果</title〉〈/head〉<body〉文件较多,查看演示请直接点击下面的预览效果,下载该特效请点击上处链接下载</body〉〈/html〉(2）出发导航菜单：〈html〉〈head〉<meta http-equiv="Content-Type" content=”text/html；charset=gb2312”〉<title>网页特效代码｜｜---经典实用的触发型导航菜单〈/title〉〈/head〉〈body><STYLE type=text/css〉.sec1 ｛BORDER-RIGHT：gray 1px solid; BORDER-TOP:＃ffffff 1px solid；BORDER-LEFT：#ffffff 1pxsolid; CURSOR: hand; COLOR: ＃000000; BORDER-BOTTOM：#ffffff 1px solid; BACKGROUND-COLOR:#eeeeee｝.sec2 ｛BORDER—RIGHT：gray 1px solid；BORDER-TOP:＃ffffff 1px solid；FONT—WEIGHT: bold；BORDER-LEFT：＃ffffff 1px solid；CURSOR：hand；COLOR：#000000；BACKGROUND-COLOR：#d4d0c8}.main_tab {BORDER-RIGHT: gray 1px solid；BORDER—LEFT：＃ffffff 1px solid; COLOR：#000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR：＃d4d0c8｝</STYLE〉<!-—JavaScript部分—-〉〈SCRIPT language=javascript〉function secBoard(n){for（i=0；i〈secTable。

我学习DIV+CSS

cursor 设计鼠标的箭头 anto 正常 crosshair 十字 default 默认 pointer 点状鼠标 move 移动鼠标
e/ne/nw/n-resize 鼠标大小 text 文字鼠标 wait 等待鼠标 help 求助鼠标 progress 过程鼠标
三、通过CSS定义图片的样式
六、CSS滤镜的应用(一般情况下用不着，在PS中处理成图片就可以了)
filter:filtername(parameters)
alpha 设置透明(enabled 是否激活 opacity finishOpacity startX startY finishX finishY)
blur 设置模糊效果(makeshadow pixelradius shadowopacity )
a:link 未被访问前的样式属性 a:hover 鼠标悬停时的样式属性 a:active 被激活的属性 a:visited 已经被访问过的样式属性
margin 外边距
padding 内边距
border 和外边框有关的效果
background-color 设置背景的颜色
font-size字体大小
line-height行高
text-decoration文本修饰(underline 下划线 overline 顶划线 line-through 删除线 blink 文本闪烁)
letter-spacing字间距
text-align对齐方式(只可以作用于p blockquqte ul h1 h6标识符里面)
glow 为对象的外边界增加光效(enabled color strength)
wave 设置对象的波纹效果(enabled add freq lightStrength phase strength)

网页下拉菜单的制作

网页下拉菜单的制作MacroMedia公司不愧是软件大家，从AuthorWare到Flash无一不是软件中的精品，其主页制作工作Dreamweaver大概由于曲高和寡的原因吧，用的人反而不多，实际上Dreamweaver中层(Layer)、行为(Action)、时间线(TimeLine)等工具使我们可以非常方便地做出另人眼花缭乱动态网页。

下拉菜单是WINDOWS中最常见的菜单，在网页的制作中要做到却很不容易，好在有了Dreamweaver的层的概念，我们可以非常方便地在网页中做出下拉菜单（本文所用的示例文件为：/jzwl/xlcdnew.htm，大家可以下载后对照看看）。

过程如下：一、打开Dreamweaver，在SITE管理器中新建一个页面，双击即可用Dreamweaver打开，可先设好其页面属性，背景图片等。

二、许多人对网页中有链接的文字没有下划线，而当鼠标指向它时却出现下划线且文字颜色会改变而感到很奇怪，本文所用的例页中也有些效果，大家只要在网页的样式中加入示例文件中<style>与</style>之间的语句即可，不用自己再创建多种样式。

这一操作可按F10进入HTML编辑窗口复制即可。

三、在页面中输入好主菜单棒的文字，为了美观，主菜单棒可放在一个表格中，并固定各单无格宽度，以免走样。

如下图：四、点击插入(Insert)菜单，选择层(Layer)，在其属性窗口(如果没有该窗口可用Ctrl+F3打开)中可看见其名称为“Layer1”,插入一个新层，作为“菜单一”的下拉菜单。

点击该层选中后，点击插入(Insert)菜单，选择表格(Table)，选择好该表格中的行、列数，以及把表格线宽度设为0，把表格底色设为某种颜色。

如本例中“菜单一”的下拉菜单有4项，即该表格有1列4行。

然后在该表格中输入四个子项的菜单名，输入完成后调节表格的大小与层的大小，文字的对中，每一项的链接，以及层的位置（均可在属性窗口中调节，或用鼠标直接调节），使其正好在“菜单一”下。

HTML+CSS实现导航栏二级下拉菜单完整代码

HTML+CSS实现导航栏⼆级下拉菜单完整代码⼯具是vs code代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>li{list-style-type: none;}#menu {width: 370px;margin: 30px auto 0px;height: 45px;background-color: #030e11;}#menu li{float: left;width: 92px;line-height:39px;text-align: center;position:relative;border:none;}#menu li a {font-size:16px; color: #e6f8e9;display:block;outline:0;text-decoration:none;}#menu li:hover a {color: #ff0000; /*导航栏⽂字颜⾊ */}#menu li:hover .dropdown_1column {left:0px;top:38px;}.dropdown_1column{ /* 下拉菜单边框颜⾊*/margin: 0px auto;float: left;position: absolute;left: -999em;text-align: left;border: 1px solid #066591;border-top: none;background: #F4F4F4;width: 140px;}#menu li:hover div a { /* 下拉菜单⽂字颜⾊*/font-size:12px;color:#444;}#menu li:hover div a:hover{color:#21910e;} /*下拉带单⿏标停留颜⾊*/#menu li ul {list-style:none;padding:10px 5px;margin:0;}#menu li ul li {font-size:12px;line-height:26px;position:relative;padding:0;margin:0;float:none;text-align:left;width:130px;}#menu li ul li:hover {background:none;border:none;padding:0;margin:0;}</style></head><body><div id="menu"><ul><li> <a href="" class="nodrop">⾸页</a></li><li><a href="" class="drop">最⽕下载站</a><div class="dropdown_1column"><div class="col_1"><ul class="simple"><li><a href="">⽹站建设</a></li><li><a href="">导航条代码</a></li><li><a href="">电⼦商务</a></li></ul></div></div></li><li><a href="" class="nodrop">联系我们</a></li></ul></div></body></html>3.CSS + ul li 去掉列表项前⾯的标记类型例如：ul.circle {list-style-type:none;}ul.circle {list-style-type:circle;}ul.square {list-style-type:square;}ol.upper-roman {list-style-type:upper-roman;}ol.lower-alpha {list-style-type:lower-alpha;}4.CSS + ul li 竖着排列转成横向排列⽅法5. 块级元素，背景⾊设置6.⿏标放上去⼩⼿形状，字体颜⾊变化7.⼆级菜单出现位置，⼆级菜单边框，⿏标放到⼆级菜单上，字体颜⾊变化。

下拉、上拉菜单-bootStrap4常用CSS笔记

下拉、上拉菜单-bootStrap4常⽤CSS笔记菜单触发样式.dropdown-toggle下拉基类，定义⼀个触发下拉的元素。

要和data-toggle="dropdown"属性结合使⽤.dropdown-toggle-split菜单分割线，作⽤未知菜单列表样式.dropdown-menu定义⼀个下拉菜单容器.dropdown-menu-right下拉菜单容器右对齐。

默认是左对齐.dropdown-header下拉菜单标题.dropdown-item下拉菜单列表项⽬.dropdown-divider在下拉菜单中创建⼀个⽔平的分割线.active启⽤指定下拉菜单列表项⽬.disabled禁⽤指定下拉菜单列表项⽬下拉、上拉菜单需要引⼊jquery版本不低于3.2，且还要引⼊popper.min.js⽂件，两个⽂件的CDN引⽤如下：<script src="https:///jquery/3.2.1/jquery.min.js"></script><script src="https:///popper.js/1.12.5/umd/popper.min.js"></script>下拉菜单⽰例：1<div class="container">2<div class="wrapper">3<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">点我下拉</a>4<div class="dropdown-menu dropdown-menu-right">5<div class="dropdown-header">产品⼤类</div>6<a href="#" class="dropdown-item">菜单⼀</a>7<a href="#" class="dropdown-item">菜单⼆</a>8<div class="dropdown-divider"></div>9<a href="#" class="dropdown-item">菜单三</a>10<a href="#" class="dropdown-item">菜单四</a>11</div>12</div>13</div>按钮下拉⽰例：1<div class="container">2<div class="wrapper">3点击按钮，下拉菜单：<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">点我</button>45<div class="dropdown-menu">6<a href="#" class="dropdown-item">a菜单⼀</a>7<a href="#" class="dropdown-item">b菜单⼆</a>8<div class="dropdown-divider"></div>9<a href="#" class="dropdown-item">c菜单三</a>10<a href="#" class="dropdown-item">d菜单四</a>11</div>12</div>13</div>按钮组下拉⽰例：<div class="container"><div class="btn-group"><button class="btn btn-primary">请选择</button><button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><div class="dropdown-menu"><a href="#" class="dropdown-item">a菜单⼀</a><a href="#" class="dropdown-item">b菜单⼆</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">c菜单三</a><a href="#" class="dropdown-item">d菜单四</a></div></div></div>上拉菜单⽤法和下拉相同，只要将下拉菜单包含在⼀个类名为: dropup 的容器内就可以实现上拉菜单功能。

CSS3制作Dropdown下拉菜单的方法

CSS3制作Dropdown下拉菜单的⽅法:target 是CSS3 中新增的⼀个伪类，⽤以匹配当前页⾯的URI中某个标志符的⽬标元素（⽐如说当前页⾯URL下添加#comment就会定位到id=“comment”的位置，俗称锚）。

CSS3 为这个动作赋予了更加多的功能——就如同:hover ⼀样你可以做⼀些样式定义。

先上效果图正如标题所说，本⽂是教你如何巧⽤CSS3:target伪类制作Dropdown下拉菜单，原⽣HTML+CSS，⽆JavaScript。

为了吸引各位往下看，先上实际例⼦，再进⾏剖析。

Duang~ 实际例⼦其实就是DeveMobile 主题的右上⾓那个按钮，你点⼀下就会有⼀个Dropdown下拉菜单出现，在其他区域点击返回原状。

请⽤⼿机扫码查看：或者直接看这个gif 图⽚：实例剖析从解释原理的⾓度我们将HTML 拉出来最⼩化代码如下：CSS Code复制内容到剪贴板1. <a href="#dropdown-box" class="dropdown-switcher"></a>2. <div id="dropdown-box">3. <a href="##" class="close"></a>4. <div class="dropdown">5. <ul>6. <li></li>7. <li></li>8. </ul>9. </div>⼤体上上⾯的HTML代码可以分为两部分，⼀部分是⼀个出发下拉动作的⼊⼝（我习惯称为“开关”）——通常是⼀个button（实例是将a标签替换为⼀个button的功能）；⼀部分就是触发动作的下拉菜单显⽰了。

div+css 导航条下拉菜单不隐藏

div+css 导航条下拉菜单不隐藏浏览次数：389次悬赏分：5 |解决时间：2011-3-3 07:51 |提问者：ibanezxp就是想鼠标放在“首页"按钮上那个“下拉1” 才显示现在不知道怎么的它不放在上面也一直显示以下是代码：这个是网页的：<div id="navcontainer"><ul id="navlist"><li id="active"><ahref="/dqsy/huaxuehuagongxueyuan/" id="">首页</a> <ul><li><a href="#">下拉1</a></li><li><a href="#">下拉1</a></li></ul></li><li><a href="#">学院简介</a></li><li><a href="#">师资队伍</a></li><li><a href="#">学科建设</a></li><li><a href="#">教学工作</a></li><li><a href="#">科研工作</a></li><li><a href="#">研究生教育</a></li><li><a href="#">党建工会</a></li>这个是css的：#container {width : 900px;border : 5px solid #fff;margin-left : auto;margin-right : auto;padding : 10px;color : #666;background : #f2f2f5;}/*TOP BANNERs*/#banner {float : left;width : 100%;height : 160px;padding : 0;margin-bottom : 15px;color : #666;background : inherit;}#bannerb {float : right;width : 200px;margin : 0 0 15px 10px; padding : 0;color : #666;background : #f2f2f5;}/*TOP MENU*/#navcontainer {clear : both;position: relative;width : 100%;font-size:8px;}#navcontainer ul {float : left;width : 100%;padding-left : 0;margin-left : 0; background : #036;color : #fff;}#navcontainer ul li { display : inline;}#navcontainer ul li a {float : left;padding : 0.2em 1em;text-decoration : none; border-right : 1px solid #fff; background : #036;color : #fff;}#navcontainer ul li a:hover { background : #a1aac9; color : #fff;}最佳答案我给你说下思想：你的html中的这一段<ul><li id="active"><ahref="/dqsy/huaxuehuagongxueyuan/" id="">首页</a> <ul><li><a href="#">下拉1</a></li><li><a href="#">下拉1</a></li></ul>这块的<ul>放的不对，导航中首页，学院简介等放在ul的li里，不要把首页单独放在ul中，然后呢在目的不是要给首页加二级导航吗，就给首页的这个li加个<span>,在span里加首页样式，然后在li里加二级导航，放在<span></span>外面。

CSS学习笔记四：下拉选择框以及其动画特效

CSS学习笔记四：下拉选择框以及其动画特效以前学的只是了解了css的⼀些基本属性，在做项⽬的时候都是直接使⽤bootstrap响应式来写项⽬，这样⼦很⽅便，很快捷，但是在⾃⼰看来还是有⼀点缺陷的，毕竟，我很多时候不怎么清楚它⾥⾯的具体运作。

所以在学习原⽣，⼀个⼀个⼩标符号学习起来，学习原⽣可能会让我学习到更多的东西。

学习了两种下拉框，⼀种是往在弹，⼀种是从中间往外弹。

第⼀种下拉框现在学习的做东西，都是先确定好⾃⼰需要那⼏样东西，先把body的内容写了，再来⼀样⼀样规划样式。

1<div class="content">2<div class="select ">3<p>所有选项</p>4<ul>5<li data-value="所有选项" class="selected">所有选项</li>6<li data-value="html">html</li>7<li data-value="css">css</li>8<li data-value="javascript">js</li>9<li data-value="jquery">jq</li>10</ul>1112</div>1314</div>1、body,p,ul本⾝就⾃带了边界和内边距的距离，第⼀步是将他们给清除掉2、设置body的基本属性值，背景颜⾊以及字体颜⾊3、content是将它们总体往下移4、content 中的 select 的样式设定设置其边距和边界等等，在after中设置的是⼀个三⾓形的样式，⼀开始是倒三⾓形，当点击按钮后就会旋转，将按钮往上翻转。

DIV+CSS命名规范

DIV+CSS规范命名大全集合页头：header 如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id 区别及用法登录条：loginBar 标志：logo 侧栏：sideBar广告：banner 导航：nav 子导航：subNav菜单：menu 子菜单：subMenu 搜索：search滚动：scroll 页面主体：main 内容：content标签页：tab 文章列表：list 提示信息：msg小技巧：tips 栏目标题：title 加入：joinus指南：guild 服务：service 热点：hot新闻：news 下载：download 注册：regsiter状态：status 按钮：btn 投票：vote合作伙伴：partner 友情链接：friendLink页脚：footer版权：copyRight常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u1.CSS的 ID 的命名也许你需要了解class与Id区别外套：wrap 主导航：mainNav 子导航：subnav页脚：footer 整个页面：content 页眉：header版权：copyRight 商标：label 标题：title主导航：mainNav(globalNav) 顶导航：topnav边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar旗志：logo 标语：banner 菜单内容1： menu1Content菜单容量：menuContainer 子菜单：submenu边导航图标：sidebarIcon 注释：note面包屑：breadCrumb(即页面所处位置导航提示)容器：container 内容：content 搜索：search登陆：login 功能区：shop(如购物车，收银台)当前：currentDIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML 中重复使用调用。

DIV+CSS技术在资源平台网站建设的应用

DIV+CSS技术在资源平台网站建设的应用摘要：本文介绍了DIV+CSS技术的概念以及应用DIV+CSS技术制作网页的优势，并以资源平台网站建设为例介绍了DIV+CSS技术在网页制作过程中结构设计、二级菜单设计上的具体应用。

关键词：DIV CSS 资源平台网页制作1在网页制作技术的发展过程中，TABLE布局方式在WEB2.0盛行前是比较流行的布局方式，基于TABLE布局的网页具有搭建速度快、容易控制等特点，但这种布局方式将网页内容和表现混合在一起，结构不清，增加了设计和维护的成本，伴随着互联网的发展、多浏览器的盛行，传统的TABLE布局方式遇到了前所未有的挑战，越来越多的网站在开发过程中采用了DIV+CSS技术，将网页的结构和表现分离，通过将网页内容模块化，解决了网页制作流程复杂，制作周期长及后期维护不便等问题。

在《网站后台开发》课程资源库平台网站建设中，我们也选择了DIV+CSS技术进行网站的制作。

1 “DIV+CSS”技术介绍“DIV+CSS”准确地说应该是“XHTML+ CSS”，但由于大家在使用XHTML对网站进行标准化重构时，DIV是使用频率最高的一个元素，因此人们习惯称之为“DIV+CSS”。

DIV可以为HTML文档内大块(block-level)的内容提供结构和背景，在起始标记“<div>”和结束标记“</div>”之间的所有内容都是用来构成这个块的，其中所包含元素的表现形式由套用的CSS样式来定义。

CSS即Cascading Style Sheet(中文称为层叠样式表)，是一种用来表现HTML或XML等文件样式的脚本语言，可以对HTML中的各种元素实现更加精确的控制。

用DIV+CSS技术制作网站就是在HTML中只放网页内容，用CSS控制内容的表现，实现网页表现和结构的分离，网页代码简洁，体积减少，在网站维护和更新时，也只需要修改CSS，不需要对网页结构进行重新设计，从而降低了网站改版的成本。

纯CSS下拉菜单和右拉菜单的实现方法

纯CSS下拉菜单和右拉菜单的实现方法下拉和右拉菜单是网页当中最为常见的组件为便于理解，两个例子都只写了基本样式，实际应用时可以添加符合页面风格的美化样式，【】给大家讲解一下实现思路。

以下两例公用样式：<style>body,ul{margin:0px;padding:0px;}li{list-style:none;}a{text-decoration:none;}</style>一、纯CSS实现下拉菜单本例实现效果CSS代码#nav{height:18px;}#nav li{float:left;display:inline;}.list{background: #FFF;}.menu{height:18px;padding-left:10px;padding-right:10px;overflow:hidden;}.menu:hover{height:auto;}.menu:hover .list{position:absolute;z-index:1;}.list a{display:block}HTML代码<h3>下拉菜单示例</h3><ul id="nav"><li class="menu">菜单项目<div class="list"><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li><li class="menu">菜单项目<div class="list"><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li><li class="menu">菜单项目<div class="list"><a href="#">菜单项目</a><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li><li class="menu">菜单项目<div class="list"><a href="#">菜单项目2</a><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li></ul>实现关键点：1.一级导航指定固定高度，并将超出部分隐藏：.menu{height:18px;overflow:hidden;}；2.通过hover事件将高度属性改为auto：.menu:hover{height:auto;}；3.为了二级菜单显示时不影响其他节点的位置，通过position:absolute将二级菜单踢出文档流,并指定其优先层级menu:hover .list{position:absolute;z-index:1;}二、纯CSS实现右拉菜单本例实现效果CSS代码需要上面的公用样.menu-v{position:relative;width:100px;height:18px;padding-left:10px;padding-right:10px;}.list-v{background: #fff;display:none;width:120px;}.list-v a{display:block}.menu-v:hover .list-v{display:block;position:absolute;z-index:1;left:80px;top:0px;}HTML代码<ul><li class="menu-v">菜单项目<div class="list-v"><a href="#">菜单项目</a><a href="#">菜单项目</a><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li><li class="menu-v">菜单项目<div class="list-v"><a href="#">菜单项目</a><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li></ul>实现关键点1.先将二级菜单隐藏并指定显示位置并踢出文档流.list-v{display:none;position:absolute;z-index:1;left:80px;top:0px;width:120px;background: #fff;} 2.通hover事件将二级菜单显示.menu-v:hover .list-v{display:block;}。

CSS浮动布局与菜单栏设计

CSS浮动布局与菜单栏设计公司周六停电，终于可以双休了。

⽤周五空余时间再夯实⼀下css基础，《CSS权威指南》概念性的内容看起来容易犯困，不如实践来得快，动⼿操作吧。

⼀、浮动布局　浮动存在问题：浮动使元素脱离⽂档流，导致下⾯的元素向上提。

　布局存在问题：由于浮动元素宽度已设定，根据盒模型，对于有宽度的盒⼦添加padding border和magin导致盒⼦变⼤，从⽽挤出后⾯浮动元素，导致下移，称作“浮动移滑”。

围住浮动元素的三种⽅法： 1为⽗元素添加 overflow:hidden 强制包围浮动元素 2同时浮动⽗元素后⾯的元素清除 clear:both 3 1、添加⾮浮动的清除元素 div 2、添加伪类： .class:after{conten:'.';display:'block';height:0;visibility:hidden;clear:both;}　解决“浮动移滑”⽅案： 1.从设定的元素宽度中减去添加的外边距，内边距和边框宽度和（⼀变化就容易出错）； 2.给元素添加⼀个div，把内容放到div中。

3 使⽤box-sizing:border-box 添加边距使内容收缩，⽽不是盒⼦变⼤。

ie6/ie7不⽀持。

三栏固定宽带布局（⽤到浮动和清除） HTML代码1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 <link rel="stylesheet" href="../CSS/threeLayout.css" type="text/css"/>7 </head>8 <body>9 <header>浮动与三栏固定宽度布局</header>10 <div id="wrapper">11 <nav>这是导航栏</nav>12 <article>这是中间栏</article>13 <aside>这是右边栏</aside>14 </div>15 <footer>这是⾓标</footer>16 </body>17 </html>html代码 CSS代码： 1 body{2 text-align: center;3 }4 header {5 background: #f00;6 }7 footer{8 backgroud:#000;9 }10 nav{11 width:150px;12float: left;13 }14 article{15 width:600px;16float: left;17 background: #ffed53;18 }19 aside{20 width: 210px;21float: left;22 background: #3f7ccf;23 }24 footer{25 clear: left;26 background: #000;27 }css代码三栏-中栏流动布局/圣杯布局/双飞翼布局三栏-中栏流动1负外边距实现 1.设计思路：⼀个div包围左中右三栏，⼀个div包围左中两栏，利⽤负边距实现。

div+css布局中常用方法汇总

div+css布局中常用方法汇总1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible"2、cursor:pointer 使鼠标变成手形3、word-wrap:break-word;控制是否断词4、word-break:keep-all;控制文本不断行5、最后finally，开始first，虚线dashed，内部里面的inner,外面的外表的outer，注释note，热点hotspot，branding品牌，翻页pageturn，奇数行add6、透明设置：filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;7、解决IE中列表高度显示不正确的问题：*html ul li{float:left;height:1%;}*html ul li{height:1%;}8、a:hover在ie6及以下必须加链接才会有效；.over+javascript用在th:hover 时ie6及以下才能识别。

9、onfocus='this.blur()',onfocus是获得焦点事件，blur是移除焦点，换句话说就是不让这个链接获得焦点10、直接模仿iframe产生滚动条#content{heitht:200px;width:300px;overflow:auto;}11、父li设置了高度，而子li的高度不同时，要先给li：height:auto，在嵌套的列表里，将父li 浮动后，要将子li的float=none，子列表的所有内容都float=none，父ul设置了margin时，子ul要margin=0，因为子会应用父的样式12、在写类名、id名尽量写的权级低一些，从尔避免后面覆盖要写很长13、高度不适应：高度不适应主要发生在两个嵌套的对象中，特别当内层对象使用margin或padding时，外层对象不能自动调节高度。

DIV+Css总结

1.以下是下划线的效果<style>p.one {text-decoration:underline;} /* 下划线效果*/p.two {text-decoration:overline; }/* 顶划线*/p.three {text-decoration:line-through;} /* 中间划线*/p.four {text-decoration:blink;}/*闪烁，只在firefox中可以。

*/p.five{ text-decoration:underline overline line-through; }/* 三种同时,有几种就用空格隔开*/</style>2. 英文字母大小写的方式<style>font-family:Arial, Helvetica, sans-serif; /* 字体*/letter-spacing:-2px; /* 字母间距*/</style>3. vertical-align的用法！vertical-align只作用于在同一行内的元素vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom |baseline：与元素的基线对齐。

middle：与元素中部对齐。

sub：字下沉。

super：字上升。

常用CSS元素div_ul_dl_dt_ol的简单解释希望

单行三列
绝对定位
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}
表格的嵌套问题搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。
使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
#content-end{margin-left:auto;margin-right:auto;width:400px;}
单行两列
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
<h2>Thisistheleftsidebar.</h2>
</div>
<div id="right"class="column">
<h2>Thisistherightsidebar.</h2>

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<ul id="nav"><li><a href="/">div+css</a><ul><li><a href="/">CSS</a></li><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li></ul></li><li><a href="/rumen/">css入门</a> <ul><li><a href="#">入门一</a></li><li><a href="#">入门二</a></li><li><a href="#">入门二</a></li><li><a href="#">入门二入门二</a></li><li><a href="#">入门二入门二入门二</a></li><li><a href="#">入门二</a></li></ul></li><li><a href="/html/">HTML基础</a> <ul><li><a href="#">基础三</a></li><li><a href="#">基础</a></li><li><a href="#">基础三案例三</a></li><li><a href="#">基础三案例三案例三</a></li></ul></li><li><a href="/jiqiao/">DIV+CSS技巧</a><ul><li><a href="#">技巧四</a></li><li><a href="#">技巧四</a></li><li><a href="#">技巧四</a></li><li><a href="#">技巧四111</a></li></ul></li><li><a href="/template/">DIV+CSS模板</a><ul><li><a href="/template/">CSS模板</a></li><li><a href="#">模板</a></li><li><a href="#">模板</a></li><li><a href="#">模板模板</a></li><li><a href="#">模板模板模板</a></li><li><a href="#">模板模板</a></li><li><a href="#">模板模板</a></li><li><a href="#">模板模板模板模板</a></li></ul></li><li><a href="/shouce/">CSS手册</a><ul><li><a href="/shouce/">DIV+CSS手册</a></li> <li><a href="#">手册</a></li><li><a href="#">手册</a></li><li><a href="#">手册</a></li><li><a href="#">手册</a></li><li><a href="#">手册手册</a></li><li><a href="#">手册手册手册</a></li></ul></li></ul><style type="text/css"></style><script type=text/javascript>function menuFix() {var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseDown=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");}}}window.onload=menuFix;</script>。