css基础

你得握有刀剑

于 2019-08-31 20:17:31 发布

阅读量200

点赞数

分类专栏： javaee

本文链接：https://blog.csdn.net/qq_39027486/article/details/100176400

版权

javaee 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

css基础

文字样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>	
	<style>	
		p{
			/*字体大小 */
			font-size: 20px;
			/*字体颜色*/
			color:red;
			/*字体样式 */
			font-family: "微软雅黑";
			/*行高*/
			line-height: 30px;
			/*字体间隔*/
			letter-spacing: 20px;
h1 {text-decoration: overline}//线条在文字上方
h2 {text-decoration: line-through}//线条穿过文字
h3 {text-decoration: underline}//线条在文字下方
h4 {text-decoration:blink}//普通标题
a {text-decoration: none}//超链接去除下划线
			/*文字的修饰 */
			text-decoration:line-through;
			/*右边对其*/
			text-align:right;
		}		
	</style>	
	<body>
		
		<p> 周末好 </p>
		
	</body>
</html>

显示在右上角

在这里插入图片描述

图片背景操作

图片为背景的前提下在文本框中放入另一张图片并将之显示在文本框的端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<style>
		
	#p1{
			height: 400px;
			width: 500px;
			background-color: red;
			background-image: url("./img/timg.jpg");
			/* 不要重复的 */
			background-repeat: no-repeat;
			/* 图片的移动 */
			/*background-position-x: 200px;
			background-position-y: 200px;*/
		}
		
		#text1{
			height: 45px;
			width: 400px;
			background-image: url(img/timg.jpg);
			background-repeat: no-repeat;
			background-position-x: 350px;
			background-position-y: 5px;
			
		}
		
	</style>
	
	<body>
		
		<div id="p1">
		
		//可以在图片为背景的前提下编辑图片
		<input id="text1" type="text" />
		</div>
	</body>
</html>

在这里插入图片描述

固定按钮位置：

点我按钮一直在屏幕的该位置，无论鼠标向下移动否
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>		
	<style>	
		a{
			color: green;
			font-size: 30px;
			background-color: red;
            /*下划线去掉*/			
			text-decoration: none;
			/*position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其位置。
			并且元素的位置在屏幕滚动时不会改变。*/
			position: fixed;
			left: 700px;
		}
		
		body{
			background-color: skyblue;
			height: 2000px;
		}
		
	</style>
	
	<body>		
		<img src="img/HBuilder.png" /> 
		<img src="img/HBuilder.png" /> 
		<br />
				<img src="img/timg.jpg" />
		<br/>
		/*下划线去掉*/		
		<a href="http://www.itbaizhan.com"> 点我 </a>
		
	</body>
</html>

div盒子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div {
			font-size: 20px;
			color: red;
			/* 内边距 是 20 px */
			padding: 20px;
			width: 200px;
			height: 200px;
			/* 边框  5 宽度  solid 实心  red 边框颜色*/
			border: 20px solid red;
			/*外边距(白色) */
			margin: 100px;
			background-color: green;
		}	
		body{
			margin: 0px;
		}	
		ul{
			list-style-type: none;
			padding: 0px;		
		}		
	</style>

	<body>

		<div>

			我是内容部分

		</div>

		<ul>
			<li>武汉</li>
			<li>长沙</li>
		</ul>
	</body>

</html>

外边距白色，内边距红色，背景绿色
去除li的*号和边距，顶格写

在这里插入图片描述

盒子边距问题：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<style>
		#p1{
			
			width: 100px;
			height: 100px;
			background-color: red;
			margin-bottom: 20px;
		}
		
		#p2{
			
			width: 100px;
			height: 100px;
			background-color:yellow;
			margin-top: 50px;
		}
		
	</style>
	
	<body>
		
		<div id="p1"> Div1</div>
		<div id="p2"> Div2</div>
	</body>
</html>

当两个盒子间的距离不同时，取间距的最大值（50》20）
在这里插入图片描述

实现导航条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<style>
		
		ul{
			list-style-type: none;
			padding: 0px;
			margin: 0px;
		}
		
		ul li{
			color: white;
			font-size: 20px;
			line-height: 60px;
			text-align: center;
			height: 60px;
			width: 120px;
			background-color: skyblue;
			float: left;
		}
		
		/* 鼠标悬浮 的 样式的 改变 (伪类)*/
		ul li:hover{
			background-color: red;
			color: green;
			font-size: 26px;
		}
		
	</style>
	
	<body>
		
		<ul>
			
			<li>Baidu</li>
			<li>尚学堂</li>
			<li>网易</li>
			<li>阿里巴巴</li>
			
		</ul>
		
	</body>
</html>

鼠标移动到baidu上显示红色
在这里插入图片描述

你得握有刀剑

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css基础

css基础文字样式：图片背景操作固定按钮位置：div盒子：盒子边距问题：实现导航条文字样式：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> p{ /*...
复制链接

扫一扫