CSS样式练习-01

xinjiatao

浏览: 257877 次
性别:
来自: 深圳

最近访客更多访客>>

hudan729046

juzhibest

elashu

123456lllppp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String contextPath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS 样式Test</title>
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/pages/excel/cssTest.css">

</head>
<body>
	<%-- <div class="event_left_tl">
		<div class="fullchose">
			<input class="eventcheckbox" type="checkbox" name="" value="" /> <span>全选</span>
		</div>
	</div>
	
	<div class="modal-content-row modal-content-row-btna">
		带空格的Class ID
	</div>

	<div class="modal-content-row modal-content-row-btna">
		<div class="add-black-yes-btn ssssss">确 认</div>
	</div> --%>
	
	<div class="div-top"> Top</div>
	<div class="div-upper">2</div>
	<div class="div-bottom">3</div>
	<div class="div-left">
		<div class="div-left2">s</div>
	</div>
	<div class="div-rigth">5-宽度70% DIV 居中</div>
	<div class="div-6">
		<div class="div-6-1">6-1</div>
		<div class="div-6-2">6-2</div>
		<div class="div-6-3">6-3</div>
	</div>
	
	<div class="div-7">
		<div class="div-7-1">7-1</div>
		<div class="div-7-2">7-2</div>
	</div>


	<script type="text/javascript"
		src="<%=request.getContextPath()%>/pages/excel/cssTest.js"></script>
</body>
</html>

@charset "utf-8";

body {
	overflow-y: hidden;
	background: #0c0c0c;
}

.event_left_tl .fullchose .eventcheckbox {
    margin: 8px 16px 0 7px;
    width: 18px;
}

/**选取 event_left_tl 下的子 ID .fullchose 下的 span 标签 **/
.event_left_tl .fullchose span {
	font-size:15px;
}

/**<div class="modal-content-row modal-content-row-btna">  放modal-content-row modal-content-row-btna无法选的取, 可以放modal-content-row 或  modal-content-row-btna进行选取**/
.modal-content-row-btna{
	font-size:20px;
}

.modal-content-row-btna{
	margin-top: 0;
}

.add-black-yes-btn {
	background-color: rgba(0, 0, 0, 0);
	background-position: 0 -1434px;
	background-repeat: no-repeat;
	color: #fff;
	cursor: pointer;
	float: left;
	font: 12px/36px "Microsoft YaHei";
	height: 37px;
	margin-right: 6px;
	text-align: center;
	text-shadow: 0 0 4px #a91717;
	width: 162px;
}

.div-top {
	width: 100%;
	height: 180px;
	background: none repeat scroll 0 0 #FFFF00;
}

.div-upper {
	width: 286px;
	height: 180px;
	padding: 15px 1 0 20px;
	background:#ff0000;
	/* background-image: url("../../images/login/login_wrap_bg.png"); */
	/* background-repeat: repeat-y;  属性设置是否及如何重复背景图像。*/
    position: absolute;
    top: 20px;
    left: 900px;
}

.div-bottom {
	width: 100%;
	height: 100px;
	background: none repeat scroll 0 0 #0000FF;
}

.div-left {
	width: 100%;
	height: 100px;
	background: none repeat scroll 0 0 #ececec;
}

.div-left2 {
	width: 50%;
	height: 100px;
	overflow: hidden;
	float: right;
	background: none repeat scroll 0 0 #FF00FF;
}

.div-rigth {
	width: 70%;
	height: 100px;
	margin: 0 auto;  /* div居中 */
	padding-top: 50px; 
	overflow: hidden;
	background: none repeat scroll 0 0 #ff0000;
}

.div-6{
	width: 100%;
	height: 100px;
	padding-top: 30px; /* 设置元素的上内边距（空间） */
	overflow: hidden;
	background: none repeat scroll 0 0 #00FF00;
}

.div-6-1 {
	width: 30%;
	height: 100px;
	overflow: hidden;
	float: left;
	background:#ff0000;
}

.div-6-2 {
	width: 30%;
	height: 70px;
	overflow: hidden;
	float: left;
	background: none repeat scroll 0 0 #000000;
	position: absolute;
    left: 500px;
}

.div-6-3 {
	width: 30%;
	height: 100px;
	overflow: hidden;
	float: right;
	background: none repeat scroll 0 0 #0000FF;
}


.div-7{
	width: 100%;
	height: 100px;
	padding-top: 0px; /* 设置元素的上内边距（空间） */
	overflow: hidden;
	background: none repeat scroll 0 0 #00FF00;
}

.div-7-1 {
	width: 50%;
	height: 100px;
	overflow: hidden;
	float: left;
	background:#C0C0C0;
}

.div-7-2 {
	width: 50%;
	height: 100px;
	overflow: hidden;
	float: left;
	background:#FF0000;
}

$(function() {
//<div class="add-black-yes-btn ssssss">确 认</div> 选取时写 add-black-yes-btn ssssss无效， 能写 add-black-yes-btn 或   ssssss
	$(".ssssss").click(function(){
		alert("确定 !");
	});
});

function addBlackOnly(){
	alert('Say Hello');
}