css(2)
来源：互联网 发布：上海联创汽车电子知乎 编辑：程序博客网 时间：2024/05/16 11:23
Float网页
<!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" xml:lang="en" lang="en"> <head> <title>Float网页</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> /*step: 1、调整宽度 2、为products指定float：left属性 3、为test指定float：left属性 4、为copyright定义clear：left属性 5、设置products和test的margin-left为20px 6、将步骤5中的两个margin改为12px，最后去掉copyright */ /*products向左 tests向右*/ div{ text-align:center; border:1px solid blue; } #products{ width:528px; float:left; margin-left:17px; } /*products总宽度： 528+325+20+20=893+16*4 =957+4*2=965 */ #test{ width:465px; float:right; margin-right:18px}} /*float不能超过容器的边框，不能超越前一个元素的边界 去除前后float元素的影响：clear:both/left/right */ #copy{clear:left} </style> </head> <body> <div id="intro">Logo&Title</div> <div id="nav">body width:960px,默认字体大小 </div> <div id="content"> <div id="products">产品 （padding：1em；border：4px） </div> <div id="test">客户评价（padding：1em；） </div> <div id="copy"> All content copyright©某公司 </div> </div> </body></html>盒子模型（BoxModel）
<!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" xml:lang="en" lang="en"> <head> <title>盒子模型（BoxModel）</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> /*读取网页顺序：html-->css-->图片-->JS*/ h1,h2,h3,h4,h5,h6,p,ul,ol,li{padding:0;margin:0} /*CSS的继承性，网页默认字体为12px*/ body{font-size:12px; background-color:#0063A0; background-image:url(images/body_bg2.jpg)} /*背景图默认双方向平铺*/ div{border:1px solid red; margin:0 auto} #header{height:90px;text-align:right; background-image:url(images/header_bg.png) } /*链接常用属性：去下划线，保持颜色不变*/ #header a{ line-height:61px; text-decoration:none; color:#fff; margin-right:40px } /*hover鼠标划过,字体放大1.2倍，鼠标划过加下划线 */ #header a:hover{ font-weight:bold; font-size:14px; text-decoration:underline; } /*鼠标按下未抬起active{字体变红}*/ #header a:active{color:red;} #navi{height:90px;background-image:url(images/navigation.png)} #main{width:950px;height:410px; background-color:#e8f3f8; border:5px solid #8acedb; } #footer{height:50px;text-align:center} #footer p{line-height:50px;color:blue;text-align:center} #header,#footer{width:960px;} .subdiv{width:910px;} #operate{height:30px;text-align:right} /*去掉边框，修改鼠标样式为手指*/ #operate input{border:0px;cursor:pointer; width:73px;height:26px; /*默认位置，top left左上*/ background-image:url(images/button_bg.PNG); } /*鼠标划过，将背景移动至中间*/ #operate input:hover{background-position:center; } /*按下去未放，将背景地底部与按钮对其*/ #operate input:active{background-position:bottom} #data{height:340px} #pages{ height:28px;text-align:center; } /*行内元素不支持宽高属性*/ /*解决：框模型-BoxModel*/ #pages a{line-height:28px;text-decoration:none; border:1px solid #97b9c9; color:blue; /*字跟框之间的距离*/ padding:5px 10px; } /*鼠标划过超链接背景变色*/ #pages a:hover{background-color:#cddde4} /*高亮显示当前页--由程序控制的--类选择器*/ /*背景变白,边框去掉*/ #pages .curr_page{background-color:#fff;border:0px;} /***选择器优先级： id最高 类 伪类 元素选择器最低***/ input.btn_add{ height:26px; width:73px; background-image:url("images/btn_bg.png"); color:#fff; border:0; cursor:pointer; /*background-position:bottom;*/ } /*鼠标划过,显示图片中部区域:*/ input.btn_add:hover{ background-position:center; } /*鼠标按下去未起来,显示图片底部区域:*/ input.btn_add:active{background-position:bottom;} #datalist{ width:900px; margin:0 auto; /*合并单元格间的缝隙*/ border-collapse:collapse; /*单元格之间的距离： border-spacing:20px 10px; border-spacing:0px; */ border:1px solid #ccc; background-color:#fff; } /*表中每个单元格+边框*/ #datalist td,#datalist th{border:1px solid #ccc;} #datalist th{ background-color:#fbedce; height:35px} #datalist td{ height:32px; text-align:center; } /*td\th的样式优先于tr*/ #datalist tr:hover{background-color:lightblue;} /*带图标按钮*/ /*先分类：修改；删除*/ /*去边框，背景白色*/ /*公共样式部分：去边框;去背景;变手指;去平铺;背景垂直居中*/ .modify,.delete{ border:0px; background:none; cursor:pointer; background-repeat:no-repeat; background-position:left; /*移动内容（字），让出左侧宽度的位置*/ padding-left:18px;} .modify{background-image:url(images/modify.png)} .delete{background-image:url(images/delete.png)} /*Logo往左飘*/ #header img{float:left} /*菜单 三步：去圆点；改横排；变成块*/ #navi ul{ list-style-type:none; } #navi li{float:left;} /*dispaly:改变一个元素的显示类别，block（变成块元素）*/ /*padding:1em 一倍字体大小--16px*/ #navi a{ display:block; width:85px; height:85px; border:0; color:#fff; /*无下划线*/ text-decoration:none; /*文字在中间位置*/ text-align:center; line-height:91px;} #navi a:hover{background-color:navy} /*对话框样式*/ #result_info{ width:400px; height:70px; border:1px solid green; background-color:#fdecec; padding-left:40px; } #result_info img{ float:right; margin-right:10px; margin:10px; cursor:pointer; } #result_info span{ font-size:1.5em; line-height:70px; } /*自由定位position:relative|absolute*/ /*相对定位:相对于原始位置位移，原始位置不释放。*/ /*#result_info{ position:relative;top:50px;left:50px; }*/ /*绝对定位:父级相对，自己绝对,位移相对于父元素边框,释放原始位置*/ #main{position:relative;} #result_info{ position:absolute;top:90px;left:250px; } #adv{ background-image:url("images/guanggao.png"); width:232px; height:109px; /*浏览器窗口定位。fixed:相对于浏览器定位*/ position:fixed; right:10px; bottom:100px; } #ao{ background-image:url(images/ao.jpg); width:100px; height:200px; padding:20px 10px 20px 20px; background-repeat:no-repeat; /*上下相同，左右相同*/ margin-left:200px; } </style> </head> <body> <div id="header"> <img src="images/logo.png"> <a href="#">退出</a> </div> <div id="navi"> <ul> <li><a href="#">首页</a></li> <li><a href="#">角色管理</a></li> <li><a href="#">管理员</a></li> </ul> </div> <!-- <div id="ao"></div> --> <div id="main"> <!--操作成功提示--> <div id="result_info"> <img src="images/close.png"/> <span class="success">修改成功！</span> </div> <div id="operate" class="subdiv"> <input type="button" value="增加" class="btn_add"/> </div> <div id="data" class="subdiv"> <table id="datalist"> <tr> <th> <input id="chbAll" type="checkbox"/> <label for="chbAll">全选</label> </th> <th>管理员ID</th> <th>姓名</th> <th>拥有角色</th> <th></th> </tr> <tr> <td><input type="checkbox"/></td> <td>1</td> <td>张三</td> <td>超级管理员</td> <td> <input type="button" value="修改" class="modify"/> <input type="button" value="删除" class="delete"/> </td> </tr> <tr> <td><input type="checkbox"/></td> <td>2</td> <td>李四</td> <td>角色管理员</td> <td> <input type="button" value="修改" class="modify"/> <input type="button" value="删除" class="delete"/> </td> </tr> </table> </div> <div id="pages" class="subdiv"> <a href="#">上一页</a> <a href="#">1</a> <a href="#" class="curr_page">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">下一页</a> </div> </div> <div id="footer"> <p>版权所有©某公司</p> </div> <!--广告--> <div id="adv"> </div> </body></html><!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=utf-8"/> <title>XHTML</title> <style type="text/css"> p,h1,h2,h3,h4,h5,h6,ul,ol,li{ margin:0; padding:0; } ul,ol{ list-style:none; } body{ margin:0px auto; padding:0px; border:0; font-size:16px; font-family:Tahoma,Geneva,sans-serif; background-repeat:repeat; background-image:url(images/body_bg2.jpg); } div{ margin:0px auto; padding:0px; } /*整体布局样式*/ #header,#footer{ width:960px; } #header{ height:61px; text-align:right; background:url(images/header_bg.png) no-repeat; } #header a{ margin-right:20px; line-height:61px; color:#fff; text-decoration:none; } #header a:hover{ font-weight:bold; text-decoration:underline; } #header img{ float:left; } #navi{ width:100%; height:91px; /*background:gray;*/ background:url(images/navigation.png) repeat; } #menu{ margin:3px auto; width:960px; padding:5px; list-style-type:none; } #menu li{ float:left; margin:0 14px; } #menu a{ display:block; width:68px; height:77px; } .index_off{ background:url(images/index_out.png) no-repeat; } .role_off{ background:url(images/role_out.png) no-repeat; } .admin_off{ background:url(images/admin_out.png) no-repeat; } .fee_off{ background:url(images/fee_out.png) no-repeat; } #main{ border:5px solid #bac1db; min-height:410px; width:950px; max-height:450px; background-color:#e8f3f8; position:relative; } #footer{ height:50px; } #footer p{ margin:0px auto; color:blue; line-height:25px; text-align:center; } /*正文部分*/ #operate,#data,#pages{ width:910px; } #operate{ height:30px; } #operate_result_info{ width: 400px; height: 70px; line-height: 70px; padding-left: 40px; font-size: 16px; position: absolute; z-index: 100; top: 260px; left: 30%; background-color: #fdecec; border: 1px solid #f57676; background-repeat: no-repeat; background-position:10px center; } #operate_result_info img{ float:right; margin-right:10px; margin-top:10px; cursor:pointer; } div.operate_success{ color:#af6606; background-image:url(images/ok.bmp) } #data{ height:340px; } #datalist{ width:910px; margin:5px auto; text-align:center; background-color:#fff; border:0; border-collapse:collapse; } #datalist td{ height:32px; vertical-align:middle; border:1px solid #ccc; } #datalist tr:hover{ background-color:#f7f9fd; } #datalist tr.header td{ font-weight:bold; height:35px; background:#fbedce; } input.btn_modify, input.btn_delete{ margin-left:3px; width:58px; cursor:pointer; color:#000; border:0; background-color:#fff; background-repeat:no-repeat; background-position:left center;/*水平居左，垂直居中*/ } input.btn_modify{ background-image:url(images/modify.PNG) } input.btn_delete{ background-image:url(images/delete.PNG) } #pages{ height:28px; } </style> </head> <body> <!--logo start--> <div id="header"> <img src="images/logo.PNG" alt="logo" title="logo"/> <a id="quit" href="#">[退出]</a> </div> <!--logo end--> <!--navi start--> <div id="navi"> <ul id="menu"> <li><a href="#" class="index_off"></a></li> <li><a href="#" class="role_off"></a></li> <li><a href="#" class="admin_off"></a></li> <li><a href="#" class="fee_off"></a></li> <li><a href="#" class="account_off">5</a></li> <li><a href="#" class="service_off">6</a></li> <li><a href="#" class="bill_off">7</a></li> <li><a href="#" class="report_off">8</a></li> <li><a href="#" class="information_off">9</a></li> <li><a href="#" class="password_off">10</a></li> </ul> </div> <!--navi end--> <!--main start--> <div id="main"> <!--操作区--> <div id="operate"></div> <!--信息提示框--> <div id="operate_result_info" class="operate_success"> <img src="images/close.png" /> <span>操作成功！</span> </div> <!--数据区--> <div id="data"> <table id="datalist"> <tr class="header"> <td><input type="checkbox" /><span>全选</span><td> <td>管理员ID<td> <td>姓名<td> <td>拥有角色<td> <td><td> </tr> <tr> <td><input type="checkbox" /><td> <td>1<td> <td>张三<td> <td>超级管理员，角色管理员<td> <td> <input type="button" class="btn_modify" value="修改"/> <input type="button" class="btn_delete" value="删除"/> <td> </tr> <tr> <td><input type="checkbox" /><td> <td>2<td> <td>张三<td> <td>超级管理员<td> <td> <input type="button" class="btn_modify" value="修改"/> <input type="button" class="btn_delete" value="删除"/> <td> </tr> <tr> <td><input type="checkbox" /><td> <td>3<td> <td>张三<td> <td>超级管理员<td> <td> <input type="button" class="btn_modify" value="修改"/> <input type="button" class="btn_delete" value="删除"/> <td> </tr> <tr> <td><input type="checkbox" /><td> <td>4<td> <td>张三<td> <td>超级管理员<td> <td> <input type="button" class="btn_modify" value="修改"/> <input type="button" class="btn_delete" value="删除"/> <td> </tr> </table> </div> <!--分页区--> <div id="pages"></div> </div> <!--main end--> <!--footer start--> <div id="footer"> <p>版权所有©。。。。。</p> </div> <!--footer end--> </body></html> 0 0
- HTML css 2 css
- css-2(css选择器)
- css-2
- css(2)
- 【2】CSS
- css-2
- CSS-2
- CSS(2)
- 体验DIV+CSS(2)：DIV + CSS 进阶
- css学习2----css动态菜单
- css学习之路(2)--css选择器
- 【HTML+CSS】(2)CSS Sprite雪碧图
- 【css杂记】css兼容处理杂记 2
- CSS之CSS概念记录2
- CSS学习笔记2：CSS基础选择器
- CSS（2）css文件样式
- html&css---------css简介（11/2）
- CSS速成手册(2)
- is发布的网站用localhost可以访问，改成IP就无法访问如何解决？
- 【C++ Primer 学习笔记】： 容器和算法之【顺序容器】
- 二叉树的创建和三种遍历方式
- dom事件
- 尝试为文件 C:\XXX\App_Data\XXX.mdf 附加自动命名的数据库，但失败。已存在同名的数据库，或指定的文件无法打开或位于 UNC 共享目录中
- css(2)
- HTTPRequest 网络请求之get请求和post请求
- Spring依赖注入——手工装配（XML方式）
- 常用加密算法的Java实现(一)
- AdaBoost
- 关于VS2013下inet_ntoa函数不能使用的问题
- java下如何执行mongodb的db.currentOp
- hdu 1284
- matlab学习笔记（十一）---二值形态学运算
