CSS+Div

最新推荐文章于 2024-05-11 11:43:05 发布

紫夜✘

最新推荐文章于 2024-05-11 11:43:05 发布

阅读量280

点赞数 2

分类专栏：网页设计文章标签： css html html5

本文链接：https://blog.csdn.net/Purple_night_/article/details/120032453

版权

网页设计专栏收录该内容

7 篇文章 0 订阅

订阅专栏

类选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 定义两个样式 */
			/* .代表类选择器 */
			.test1{
				font-size: 24px;
				color: red;
				border: 3px solid #008000;
			}
			.test2{
				font-size: 34px;
				color: #008000;
				border: 3px solid #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="test1">我是一个大好人</div>
		<div class="test2">好男人就是我，我就是一个大好人</div>
	</body>
</html>

标签选择器：

<!DOCTYPE html>
<html>
	<head>
		<!-- 标签选择器 -->
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				font-size: 20px;
				color: green;
			}
		</style>
	</head>
	<body>
		<h2>望庐山瀑布</h2>
		<p>日照香炉生紫烟，<br />
		   遥看瀑布挂前川。<br />
		   飞流直下三千尺，<br />
		   疑是银河落九天。</p>
	</body>
</html>

id选择器：#代表id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 定义两个样式 */
			/* .代表类选择器 */
			.test1{
				font-size: 24px;
				color: red;
				border: 3px solid #008000;
			}
			#test2{
				font-size: 34px;
				color: #008000;
				border: 3px solid #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="test1">我是一个大好人</div>
		<div id="test2">好男人就是我，我就是一个大好人</div>
	</body>
</html>

将css文件导入html文件：

		<link type="text/css" rel="stylesheet" href="css/test2.css"/>

j设置页面元素的背景样式：

属性	描述
background-color	背景色，取整如，red,#FF0000
background-image	背景图片，如：background-image:url("./imafes/bg.png")
background-position	背景位置
background-repeat	背景补充方式取值：repeat-x\|repeat-y\|no-repeat
background	合写方式：如background:#fff url(bg.png) left top no-repeat;

列表属性：

属性	描述	举例
list-style-image	将列表设置为列表标志	list-style-image:url("./arrow.gif")
list-style-type	设置列表项标记的类型：disc(实心圆） circle(空心圆）square(正方形）	list-style-type:circle
list-style	以上属性的合并简写，写成none去掉默认属性设置	list-style:square url("./arrow.gif")
line-height	设置行高	line-height:40px

超链接伪类：

		<style>
		a:link{
			color: red;/*未访问的链接*/
		}
		a:visited{
			color: blue;/* 已访问链接 */
		}
		a:hover{
			color: green;/* 当有鼠标悬停在链接上 */
		}
		a:active{
			color: yellow;/* 被选择的链接 */
		}
		</style>

鼠标形状控制：cursor属性只有在hover状态下好用

外边距：margin(margin上右下左默认顺序，顺时针方向)

内边距：padding

练习题：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.content{
				text-align: center;
				border: 1px solid #3a6587;
				padding: 20px 30px 20px 30px;
			}
			.title{
				background-color: #3a6587;
				color: white;
				padding-left: 20px;
				height: 40px;
				/* 如何上下居中，行高 */
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<div style="width: 300px; margin-left:auto;margin-right:auto">
			<div class="title">会员登陆</div>
			<div class="content">
				姓名：<input type="text" size="12" /><br />
				邮箱：<input type="text" size="12" /><br />
				电话：<input type="text" size="12" /><br />
				<input type="button" value="登录" />
			</div>
		</div>
	</body>
</html>

盒子模型总尺度=border+padding+margin+内容尺寸（宽/高）

外边距可用于网页居中显示：

margin-left:auto;

margin-right:auto;

块元素才能完全适用于盒子模型

使用display属性来相互转化

none(元素隐藏，不可见)

block(转为块元素，独占一行)

inline(转为内联元素，不换行）

内联元素没有宽高：span,<a>超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span style="display: block;  border: 1px solid #000000;">sp1</span>
		<span style="display: block;  border: 1px solid #000000;">sp2</span>
		<div style="border: 1px solid #0000FF;display: inline;">dv1</div>
		<div style="border: 1px solid #0000FF;display: inline;">dv2</div>
	</body>
</html>

float属性：

取值：

left:左浮动

right:右浮动

none:不浮动

超链接，浮动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.main-content{
			width: 200px;
			border:1px solid #aacbee;
			background-color: #f5f9fc;
		}
		hr{
			height: 1px;
			border: 0px;
			background-color: #aacbee;
		}
		a:link{
			color: #000000;
			text-decoration: none;
		}
		a:hover{
			color: #008000;
		}
		</style>
	</head>
	<body>
		<div class="main-content">
			<div>
				<span style="color: #1f376d; padding-left: 30px;">课堂导航</span>
				<hr />
			</div>
			<div>
				<!-- href链接路径 -->
				<a href="#" style="padding-left: 10px;">Java软件工程师</a>
				<span style="float: right; color: #aacbee; padding-right: 10px;">&gt;</span>
			</div>
		</div>
	</body>
</html>

overflow属性：定义溢出元素区的内容会如何处理

visible(默认）

auto

hidden(隐藏）

scroll(添加滑动条）

div{
			overflow: scroll;
		}

position属性：

relative(相对定位）

相对它原来的位置，通过指定偏移，到达新的位置

仍在标准流中，他对父级盒子和相邻盒子都没有任何影响

absolute(绝对定位）

相对于已设定非static定位属性的父元素计算偏移量

fixed(相对浏览器固定定位，IE6不支持）

static(默认）

偏移量设置

x轴（left right 属性）与Y轴(top,bottom属性）

可取值：像素或者百分比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.test1{
			width: 100px;
			height: 100px;
			border: 1px solid #000000;
			
			position: absolute;
			left: 100px;
			top: 50px;
		}
		.test2{
			width: 20px;
			height: 20px;
			border: 1px solid red;
			position: relative;
			left: -40px;
			top: -40px;
		}
		</style>
	</head>
	<body>
		<div class="test1">
			<div class="test2"></div>
		</div>
	</body>
</html>

<style type="text/css">
		.ps{
			position: fixed;
			top: 50px;
			left: 70px;
		}
		</style>

紫夜✘

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS+Div

类选择器：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 定义两个样式 */ /* .代表类选择器 */ .test1{ font-size: 24px; color: red; border: 3px solid ..
复制链接

扫一扫

专栏目录