现在的位置: 首页 > 综合 > 正文

CSS常用样式

2018年05月20日 ⁄ 综合 ⁄ 共 8553字 ⁄ 字号 小 中 大 ⁄ 评论关闭

1.CSS设计首字放大下沉,文字环绕图片

1.jsp

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
	<img src="images/1.jpg" width="238" height="360">
	<p>
		<span >景</span> 甜，中国内地电影女演员，陕西西安人。曾就读于北京舞蹈学院附中，学习中国民间舞；
		2007年考入北京电影学院表演系本科。代言霸王旗下雪美人护肤品系列。2010年凭借时尚纯爱喜剧电影
		《我的美女老板》获得广大观众喜爱，人气飙升。 2011年上映的电影《战国》更是开启了景甜演艺事业的首次高峰。
	</p>
	<p>最喜欢的运动：跳舞、游泳最喜欢的电影：《罗马假日》最喜欢的季节：
		夏季最喜欢的书籍：张爱玲的小说最喜欢的音乐：摇滚乐、爵士乐最喜欢的偶像
		谢霆锋最喜欢的演员：奥黛丽·赫本最喜欢的歌手：麦当娜·西科尼最喜欢的颜色：粉色、白色
		最喜欢的食物：蛋糕、薯片、巧克力、可乐最喜欢的动物：吉娃娃小狗最希望演哪种角色：
		和自身性格很大差距的角色最害怕演哪种角色：女鬼给自己的定位：想走多元化的道路，
		不喜欢被一种类型框住理想中的配偶：理想的另一半应该是有责任心，有幽默感的想饰演的角色：警察
		2007年，走甜美曲风的景甜被美国西北樱桃协会指定为2007年度西北樱桃的代言人，
		并赴美国为西北樱桃拍摄了代言歌《不懂爱》MV，她那如樱桃般的甜美歌声和甜美笑容给人留下了深刻的印象。
		在美国期间，景甜除了拍摄《不懂爱》MV，还参加了许多大型活动， 其中最引人注目的就是受到了华盛顿州长的接见，2007年6月18日上午，
		景甜在西北樱桃协会负责人的陪同下，拜会了华盛顿州长，双方一见面， 景甜身上所散发出的甜美气质和甜甜的笑容就给华盛顿州长留下了美好的印象，
		会谈中，华盛顿州长不止一次夸赞景甜长得漂亮甜美，就像一颗“甜蜜樱桃”， 并表示由她代言西北樱桃恰如其分。
		2007年8月，景甜接受了吴泽涛的邀请，参演话剧《色戒》，出演女主角王佳芝。
		已在歌坛、影坛、代言全面出击，全面开花，成绩斐然的景甜，参与《色戒》的排演， 将在演艺事业上有新的突破。[14]
		几乎与此同时，8月份，景甜如愿收到了北京电影学院录取通知书， 成为北京电影学院表演系07级本科班学生。 景甜童年照 景甜童年照(2张)
		2008年4月，景甜将触角伸向了电视剧，首次触碰荧屏便和赵薇、 刘烨合作《一个女人的史诗》。景甜在剧中饰演赵薇和刘烨的女儿欧阳雪。
		电视剧在芜湖开机不足一月之际，已有超过10家上星频道向该剧抛出橄榄枝，
		欲购首播权。足以证明主演的观众号召力，特别是扮演赵薇和刘烨女儿欧阳雪的景甜。[13]
		2009年2月，景甜出演了个人第二部电视剧《孙子大传》。
		2009年10月，参演由北京星光灿烂影视文化有限公司出品的时尚纯爱喜剧电影《我的美女老板》。
		片中景甜一个人扮演两个角色，一个是叽叽喳喳的富家小妹，一个是雷厉风行的女老板。
		景甜以勤奋好学的态度以及扎实的演技将两个风格迥异的角色演绎得惟妙惟肖。
		2010年3月，景甜正式开始了电影《战国》的拍摄，出演女主角田夕。影片由金琛执导，
		北京星光灿烂影视文化有限公司投资拍摄。更值得关注的是，这部影片汇集孙红雷、金喜善、
		吴镇宇等大牌当红明星为景甜做配角，充分体现出对景甜演艺实力的肯定。2011年4月12日影片上映，
		仅六天票房即突破6000万元。[19]这部影片也正式开启了景甜演艺事业的高峰。 参演2013春节贺岁喜剧《越来越好之村晚》。[20]
		2013年6月，景甜和成龙、 刘烨大牌联手，参演电影《警察故事2013》。[21] 《特殊身份》相关
		2013年度动作大片《特殊身份》于7月22日下午在北京召开了新闻发布会，
		主演甄子丹、景甜和张涵予出席。发布会以“甄功夫开启新篇章”为主题，公布了影片的先导预告片及海报。
		甄子丹说：“《特殊身份》与我以往的电影相比，更具时尚感，武打更加扎实，不管是武术设计还是角色设置， 都有了前所未有的突破。”
		景甜：每一天身上都有新伤 发布会 发布会(5张) 预告片中，景甜帅气的动作让人印象深刻。干练利落的短发，杀气腾腾的眼神，
		在瓢泼大雨下，景甜面对多人的夹击，先撂倒一个彪形大汉，随即拔枪指向准备偷袭自己的敌人。
		这系列的动作，不禁让人感叹：“甜美女孩也可以变得如此冷峻。” 景甜表示，这是自己颠覆最大、挑战最大也最过瘾的一次演出。谈及首演打女的感受，
		景甜表示：“我小时候经常看动作片，大多是一些吊着威亚飞来飞去的动作，
		这次与子丹大哥演对手戏，完全被吓到了。丹哥要求所有的动作完全真打，虽然对我来说困难很大，
		但也让我成长非常快。”随后播放的VCR中，景甜在训练中挥汗如雨，一遍遍挥拳、
		奔跑、拔枪，对此，景甜笑言，拍摄过程比训练过程更加辛苦：“有一场雨中打戏，
		我和一个超过一米八的大汉对打，我整个架在他的身上，实打实的对打。一场戏下来，
		手都打青了，腰也直不起来。在拍戏的过程中，每一天身上都会添上新伤。</p>
</body>
</html>

index.css

@CHARSET "UTF-8";
/*css Document*/
body {/*设置背景色*/
	background-color:#FFF;
}

p { /*段落字体大小和颜色*/
	font-size: 15px;
	color: #369;
}

p  span { /*祖孙选择器*/
	font-size: 60px;
	/*左浮动*/
	float: left;
}

img {   /*图片*/
	float: left;
	/*设置元素的右外边距*/
	margin-right:20px;
	/*设置对象下方外边距属性*/
	margin-bottom:10px;
}

实际效果：

2.实现隔行变色,鼠标移入移出交替隔行变色(滑入时变成特定颜色，滑出时颜色恢复)

table.jsp

<html>
  <head>
<link rel="stylesheet" type="text/css" href="css/table.css">
  </head>
  <body>
    <table class="datalist" width="528" border="1">
  <tr class="altrow">
    <td width="51">姓名</td>
    <td width="43">性别</td>
    <td width="51">年龄</td>
    <td width="70">家庭住址</td>
    <td width="72">工作单位€</td>
    <td width="36">生日</td>
    <td width="96">电话号码</td>
    <td width="57">婚否</td>
  </tr>
  <tr>
    <td>•刘丽</td>
    <td>女</td>
    <td>22</td>
    <td>武汉</td>
    <td>武汉</td>
    <td>2.4</td>
    <td>15671717155</td>
    <td>否</td>
  </tr>
  <tr class="altrow">
    <td>丁伟</td>
    <td>男</td>
    <td>22</td>
    <td>黄冈</td>
    <td>武汉</td>
    <td>10.11</td>
    <td>125671714578</td>
    <td>是</td>
  </tr>
  <tr>
    <td>李强</td>
    <td>男</td>
    <td>22</td>
    <td>英山</td>
    <td>武汉</td>
    <td>5.11</td>
    <td>15327307845</td>
    <td>否</td>
  </tr>
   <tr class="altrow">
    <td>刘涛</td>
    <td>男</td>
    <td>22</td>
    <td>罗田</td>
    <td>武汉</td>
    <td>4.11</td>
    <td>15327457845</td>
    <td>是</td>
  </tr>
  <tr>
    <td height="29">范伟</td>
    <td>男</td>
    <td>22</td>
    <td>锦州</td>
    <td>武汉</td>
    <td>8.28</td>
    <td>15685748594</td>
    <td>否</td>
  </tr>
</table>
</body>
</html>

table.css

@CHARSET "UTF-8";
.datalist{/*类选择器*/
	/*简写属性在一个声明设置所有的边框属性*/
	border:1px solid;
	/*规定元素的字体系列*/
	font-family:Gadget;
	background-color:#6FF;
	font-size:16px;
	}
	
.datalist tr.altrow{
	background-color:#FFF;
	}
	/*选择器的集体声明，多个选择器之间用逗号隔开*/
.datalist tr:hover,datalist tr.altrow{
	background-color:red;
	}

实际效果图：

鼠标滑入：

现在要实现当鼠标移到某一行时，与之对应的基数行与偶数行颜色交替显示(当鼠标滑过时，表格隔行交替变色,奇数行和偶数行的颜色交替)

我们来看源码：

table.css

@CHARSET "UTF-8";
.datalist{/*类选择器*/
	/*简写属性在一个声明设置所有的边框属性*/
	border:1px solid ;
	/*规定元素的字体系列*/
	font-family:Gadget;
	background-color:#6FF;
	font-size:16px;
	}
	
.datalist tr.altrow{
	background-color:#FFF;
	}
	/*选择器的集体声明，多个选择器之间用逗号隔开*/
/*
.datalist tr:hover,datalist tr.altrow{
	background-color:red;

}
*/

table.jsp

<html>
  <head>
    <base href="<%=basePath%>">
<link rel="stylesheet" type="text/css" href="css/table.css">
<script type = "text/javascript" src="js/jquery-1.6.4.min.js"></script>
  </head>
  <script type = "text/javascript">
  	$(function(){
               //匹配所有索引值为奇数的元素，从 0 开始计数，索引为基数，实际上是偶数行
                $("table.datalist tr:nth-child(odd)").addClass("altrow");
  		$("table").mouseover(function(){
                //匹配所有大于给定索引值的元素，使第一行不变色
                $("tr:gt(0)").toggleClass("altrow");
  		});
  		$("table").mouseout(function(){
  			$("tr:gt(0)").toggleClass("altrow");
  		});
  	});
  </script>
  <body>
    <table class="datalist" width="528" border="1">
  <tr class="altrow">
    <td width="51">姓名</td>
    <td width="43">性别</td>
    <td width="51">年龄</td>
    <td width="70">家庭住址</td>
    <td width="72">工作单位€</td>
    <td width="36">生日</td>
    <td width="96">电话号码</td>
    <td width="57">婚否</td>
  </tr>
  <tr>
    <td>•刘丽</td>
    <td>女</td>
    <td>22</td>
    <td>武汉</td>
    <td>武汉</td>
    <td>2.4</td>
    <td>15671717155</td>
    <td>否</td>
  </tr>
  <tr class="altrow">
    <td>丁伟</td>
    <td>男</td>
    <td>22</td>
    <td>黄冈</td>
    <td>武汉</td>
    <td>10.11</td>
    <td>125671714578</td>
    <td>是</td>
  </tr>
  <tr>
    <td>李强</td>
    <td>男</td>
    <td>22</td>
    <td>英山</td>
    <td>武汉</td>
    <td>5.11</td>
    <td>15327307845</td>
    <td>否</td>
  </tr>
   <tr class="altrow">
    <td>刘涛</td>
    <td>男</td>
    <td>22</td>
    <td>罗田</td>
    <td>武汉</td>
    <td>4.11</td>
    <td>15327457845</td>
    <td>是</td>
  </tr>
  <tr>
    <td height="29">范伟</td>
    <td>男</td>
    <td>22</td>
    <td>锦州</td>
    <td>武汉</td>
    <td>8.28</td>
    <td>15685748594</td>
    <td>否</td>
  </tr>
</table>

</body>
</html>

实际效果图：

鼠标移入后，奇偶颜色互换，移出恢复

3.css结合无序列表设计菜单

menu.jsp

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>

<body>
	<div id="navigation">
	<ul>
		<li><a href="http://www.baidu.com">百度</a></li>
		<li><a href="http://www.sina.com.cn/">新浪</a></li>
		<li><a href="http://www.sohu.com/">搜狐</a></li>
		<li><a href="http://www.qq.com/">腾讯</a></li>
		<li><a href="http://write.blog.csdn.net/postlist">个人博客</a></li>
	</ul>
	</div>
</body>
</html>

menu.css

@CHARSET "UTF-8";

body {/*背景颜色*/
	background-color: #fff;
}

#navigation {
	/*设置层的宽度*/
	width: 400px;
	/*设置字体集*/
	font-family: Verdana, Geneva, sans-serif;
}

#navigation ul {/*控制导航条里面的ul*/
	/*设置列表项标记的类型*/
	list-style-type:none;
	/*简写属性在一个声明中设置所有外边距属性*/
	margin: 0px;
	/*简写属性在一个声明中设置所有内边距属性*/
	padding: 0px;
}

#navigation  ul li {
	/*简写属性把下边框的所有属性设置到一个声明*/
	border-bottom: 1px solid #609;
	/*通过设置左浮动使导航条水平,默认为垂直*/
	float:left;
}

#navigation ul li a {
	/*属性规定元素应该生成的框的类型*/
	display: block;
	/*内边距*/
	paddiong: 5px 5px 5px 0.5em;
	/*属性规定添加到文本的修饰*/
	text-decoration: none;
	/*简写属性把左边框的所有属性设置到一个声明中*/
	border-left: 12px solid #609;
	/*简写属性把右边框的所有属性设置到一个声明中*/
	border-right: 1px solid #609;
}
#navigation ul li a:link,#navigation ul li a:visited{
	background-color:#9F0;
	color:#6cc;
}
#navigation ul li a:hover{
	  background-color:#03f;
	color:red;
}

实际效果图:

用jquery进行改写，由上面的一级菜单改为二级菜单:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>css档</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
</head>
<style>
<!--
body,div,ul,li {
	padding: 0;
	margin: 0;
}

body {
	background-color: #ffdee0;
}

#navigation {
	width: 500px;
	font-family: Arial;
	margin: 0 auto;
}

#navigation>ul {
	list-style-type: none; /* 不显示项目符号 */
}

#navigation>ul>li {
	border-bottom: 1px solid #ED9F9F; /* 添加下划线 */
	/*
	float: left; /*控制水平和垂直*/
	*/
	width: 100px;
	text-align: center;
}

#navigation>ul>li>a {
	display: block; /* 区块显示 */
	padding: 5px 5px 5px 0.5em;
	text-decoration: none;
	border-left: 10px solid #711515; /* 左边的粗红边 */
	border-right: 1px solid #711515; /* 右侧阴影 */
}

#navigation>ul>li>a:link,#navigation>ul>li>a:visited {
	background-color: #c11136;
	color: #FFFFFF;
}

#navigation>ul>li>a:hover { /* 鼠标经过时 */
	background-color: #990020; /* 改变背景色 */
	color: #ffff00; /* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

#navigation ul li ul li {
	border-top: 1px solid #ED9F9F;
}

#navigation ul li ul li a {
	display: block;
	padding: 3px 3px 3px 0.5em;
	text-decoration: none;
	border-left: 10px solid #a71f1f;
	border-right: 1px solid #711515;
}

#navigation ul li ul li a:link,#navigation ul li ul li a:visited {
	background-color: #e85070;
	color: #FFFFFF;
}

#navigation ul li ul li a:hover {
	background-color: #c2425d;
	color: #ffff00;
}


#navigation ul li ul.myHide { /* 隐藏子菜单 */
	display: none;
}

#navigation ul li ul.myShow { /* 显示子菜单 */
	display: block;
}
-->
</style>
<script language="javascript">
	$(function() {
		$("li").find("ul").prev().click(function() {
			$(this).next().toggleClass("myHide");//这句话相当于下面的两句话，当用下面的方法时，上面定义的隐藏子菜单无意义
			//$(this).next().slideToggle(1000);
		});
		//$("li").find("ul").hide();
	});
</script>
</head>
<body>
	<div id="navigation">
		<ul id="listUL">
			<li><a href="#">主页</a>
			</li>
			<li><a href="#">新闻</a>
				<ul class="myHide">
					<li><a href="#">最新新闻</a>
					</li>
					<li><a href="#">所有新闻</a>
					</li>
				</ul></li>
			<li><a href="#">运动</a>
				<ul class="myHide">
					<li><a href="#">蓝球</a>
					</li>
					<li><a href="#">足球</a>
					</li>
					<li><a href="#">排球</a>
					</li>
				</ul></li>
			<li><a href="#">天气</a>
				<ul class="myHide">
					<li><a href="#">今天天气</a>
					</li>
					<li><a href="#">天气预报</a>
					</li>
				</ul></li>
			<li><a href="#">联系我</a>
			</li>
		</ul>
	</div>
</body>
<html>

实际效果图：

点击后

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞