CSS案例

时间  2020-02-22
标签 css 案例 栏目 CSS 繁體版
原文   原文链接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">css

<html>html

<head>数据库

<title>netctoss</title>框架

<meta http-equiv = "content-type" content="text/html;charset=utf-8"/><!--设置编码集  同时注意设置的编码集方式要和保存时方式相同  save as --> ide

<!--引用外部样式表-->ui

<link type="text/css" rel="stylesheet" href="demo.css"/>编码

<style></style>url

</head>spa

<body> <!--总体采用框模型-->orm

<div id="header"><!--文档中的特殊部分用id选择器-->

<img src="p_w_picpaths/logo.png"/>

<a href="#">[退出]</a>

</div>

<div id="navi"><!---导航条用列表 由于可能有下一级列表-->

<ul id="menu"><!--须要取得ul-->

<li> <a class="index" href=""></a></li><!--设置为背景 不要写成img便于维护   由于有许多连接的样式是相同的 因此用class选择器-->

<li> <a class="role" href=""></a></li><!--选着图片后  可是连接是行内元素 要表位块级元素-->

<li> <a class ="admin" href=""></a></li>

<li> <a class ="fee" href=""></a></li>

<li> <a class ="account" href=""></a></li>

<li> <a class ="service" href=""></a></li>

<li> <a class ="bill" href=""></a></li>

<li> <a class ="report" href=""></a></li>

<li> <a class ="information" href=""></a></li>

<li> <a class ="password" href=""></a></li>

</ul>

</div>

<div id="main" >

<div id="result" class="success"> <!--选择是成功仍是失败    能够同时使用两个选着器-->

<span>操做成功</span><!--由于须要对 文字 进行css的设置给一个span便于设置-->

<img src="p_w_picpaths/close.png"/>

</div>

<div id="result" class="fail"> <!--选择是成功仍是失败    能够同时使用两个选着器   id相同 有相同的设置，class不一样 经过class获得不一样的值  -->

<span>操做失败</span>

<img src="p_w_picpaths/close.png"/>

</div>

<div id="opera"></div>

<div id="data" >

<form>

<table id="dataList"><!--使用ID是由于  能够与数据库中的某一个表对应使用-->

<tr class="header">

<td>

<input type="checkbox"/>全选

</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 class="modify" type="button" value="修改"/>

<input class="delete" type="button" value="***"/>

</td>

</tr>

</table>

</form>

</div>

<div id="pages"></div>

</div>

<div id="footer">

<p>你好</p>

<p>你好</p>

</div>

</body>

</html>




body{

margin:0px;padding:0px;

background-p_w_picpath:url(p_w_picpaths/body_bg.png);

 background-repeat:repeat-x;

}

div{

border:0px solid black;/*像素能够是小数*/

margin:0px auto;

}

#header,#footer{width:960px;}

#header{

height:61px;

background-p_w_picpath:url(p_w_picpaths/top_bg.png);

background-repeat:no-repeat;

text-align:right;/*框中的内容右对齐  text-align设置的是框中文本的位置  不能直接设置文本align*/

}

#navi{

width:100%;

height:91px;

background-p_w_picpath:url(p_w_picpaths/navigation.png);

    background-repeat:repeat-x;

}

#main{

width:950px;

height:410px;

border:5px solid #8ac1db;

background-color:#e8f3f8;

}

#footer{

height:50px;

}

#data,#opera,#pages{width:910px;}

#data{height:340px;}

#opera{height:30px;}

#pages{height:28px;}

/*定义连接文本*/

#header a{

color:white;

font-size:9pt;

text-decoration:none;

margin-right:50px;

line-height:61px;

}

#header a:hover{

font-weight:bold;

text-decoration:underline;/*移动到时显示 下划线*/

}

#footer p{

color:white;

/*border:1px solid red;*/

margin:0px;

text-align:center;

line-height:25px;/*有两行  将50px的宽度填满*/

}

/*表格样式*/

#dataList{

background-color:white;

border-collapse:collapse;/*设置单元格和表的边界*/

width:910px;/*不知道有几行 则设置td的高*/

font-size:11pt;

}

#dataList td{

border:1px solid #ccc;

height:35px;/*设置每一行的高度*/

text-align:center;

}

#dataList tr.header{ /*设置的是class */

height:40px;

background-color:#fbedce;

font-weight:bold;

}

#dataList tr:hover{/*设置的是伪列*/

background-color:#f7f9fd;

}


input.modify,input.delete{

width:80px;

height:20px;

background-repeat:no-repeat;

background-position:5px 50%;/*设置位置 left top 默认是左上角*/

border:0px;

background-color:white;

}

input.modify{

background-p_w_picpath:url(p_w_picpaths/modification.png);

}

input.delete{

background-p_w_picpath:url(p_w_picpaths/delete.png);

}

#header img{

float:left; /***采用浮动/

}

#menu{

border:0px;

width:960px;

margin:3px auto;

list-style-type:none;

}

#menu li{

margin-left:14px;

margin-top:1px;

float:left;

}

#menu li a{

/*a是行内元素要使用高宽则要变成块级元素*/

display:block;

width:68px;

height:77px;

}

a.index{

background-p_w_picpath:url(p_w_picpaths/index_out.png);

}

a.role{

background-p_w_picpath:url(p_w_picpaths/role_out.png);

}

a.admin{

background-p_w_picpath:url(p_w_picpaths/admin_out.png);

}

a.fee{

background-p_w_picpath:url(p_w_picpaths/fee_out.png);

}

a.account{

background-p_w_picpath:url(p_w_picpaths/account_out.png);

}

a.service{

background-p_w_picpath:url(p_w_picpaths/service_out.png);

}

a.bill{

background-p_w_picpath:url(p_w_picpaths/bill_out.png);

}

a.report{

background-p_w_picpath:url(p_w_picpaths/report_out.png);

}

a.information{

background-p_w_picpath:url(p_w_picpaths/information_out.png);

}

a.password{

background-p_w_picpath:url(p_w_picpaths/password_out.png);

}

/**/

#main{

position:relative;   /*和绝对定位一块儿用  祖父框架是相对的 当是不须要设置 相对位置  只表示他又定位*/

}

#result{

position:absolute;/*采用绝对定位 记得设置top right等值  通常采用子框架position是绝对的   祖父框架是相对的*/

top:100px;

left:40%;

width:300px;

height:100px;

background-color:#fdecec;

border:1px solid gray;

background-repeat:no-repeat;

background-position:10px 50%;

}

#result span{/*设置 提示文字 */

margin-left:35px;

line-height:100px;/**居中显示*/

}

#result img{

float:right;

margin:10px 10px 0px 0px;

cursor:pointer;/*设置鼠标的样式为手的形状*/

}

div.success{

color:green;

background-p_w_picpath:url(p_w_picpaths/ok.png);

}

div.fail{

color:red;

background-p_w_picpath:url(p_w_picpaths/warning.png);

}

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程