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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
