[网页编程]-03 CSS 常用属性

prtyaa 2023-12-27 16:12:11  64070

分类专栏：资讯

字体处理常用属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.top{
				width: 100%;
				height: 6.25rem;
				border: 1px solid red;
			}
			
			.top_a{
				/* 字体颜色 */
				color: red;
				
				/* 字体大小 */
				font-size: 0.75rem;
				
				/* 字体加粗 */
				font-weight: bold;
				
				/* 字体风格 */
				font-family: 宋体;
				
				/* 字体倾斜 */
				font-style: italic;
				
				/* 去除下划线 */
				text-decoration: none;
			}	
			
			a:hover{
				/* 鼠标上放显颜色 */
				color: red;
				/* 鼠标上放显下划线 */
				text-decoration: underline;
			}
				
				
			.center{
				/* 宽度 */
				width: 100%;
				
				/* 高度 */
				height: 2.5rem;
				
				/* 边框 */
				border: 1px solid gold;
				
				/* 背景颜色 */
				background: paleturquoise;
				
				/* 文本居中  水平居中*/
				text-align: center;
				
				/* 文本居中  垂直居中 要和div给定高度一致才会居中*/
				line-height: 40px;
				
			}	
				
				
				
		</style>
		
		
	</head>
	<body>
		
		<!-- 顶部位置 -->
		<div class="top">
	<a href="" class="top_a">这里是修改字体的颜色/大小/以及鼠标上移变红操作</a>
		</div>
		
		<!-- 中间位置 -->
		<div class="center">
			<span>中间位置的那一句话</span>
		</div>
		
	</body>
</html>

背景颜色& 行内元素 & 块元素 & 浮动标签常用属性

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			

			
			.center{
				
				width: 100%;
				
				height: 500px;
				
				border: 1px  solid  red;
               /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				
				/*设置背景图片不重复*/
				
				background-repeat: no-repeat;
				
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5);
				
				
			}
			
		</style>
		
	</head>
	<body>
		<!--顶部的位置-->
		<div class="top">
		
		  <a href="" class="top_a">登录页面，调查问卷</a>
		</div>
		
		<!--中间的提示操作-->
		
		<div class="tips">
			
			<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
			
		</div>
		
		<div class="center">
			
			
			
		</div>
		
	</body>
</html>
<!--
	
	字体：
	
	            /*字体的颜色*/
				color: gray;
				/*字体的大小*/
				font-size: 12px;
				/*
				/*字体的加粗*/
				/*font-weight: bold;*/
				/*字体的风格*/
			    /*font-family: 宋体;*/
				/*字体倾斜*/
				/*font-style: italic;*/
	
	
	text
	            /*下划线展示*/
				text-decoration: underline;
	           /*去除下划线*/
				text-decoration: none;
	           /*文本居中*/
				text-align: center;
				
	行高
                line-height: 40px;  
                
                
    背景
                /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				
				/*设置背景图片不重复*/
				
				background-repeat: no-repeat;
				
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5);
           <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_1{
				
				width: 200px;
				
				height: 200px;
				
				background-color: rgba(255,0,0);
				
				color: rgba(0,0,255);
				
				/*调整透明度的属性  0-1*/
				opacity: 0.4;
				
				/*超出隐藏  hidden*/
				overflow: hidden;
				
				
			}
			
			#span_1{
				
				width: 100px;
				
				height: 100px;
				
				border: 1px solid red;
				/*行内元素转块级元素   inline   block  none(隐藏)*/
				display: block;
				
			}
			
			ul{
				
				float: right;
				
			}
			
			li{
				/*列表的风格去除*/
				list-style: none;
				
				float:left;
				/*内边距*/
				padding-left: 15px;
			}
			
		</style>
		
	</head>
	<body>
		
		
		<ul>
			<li><a href="">新闻</a></li>
			<li><a href="">hao123</a></li>
			<li><a href="">地图</a></li>
			<li><a href="">视频</a></li>
			<li><a href="">贴吧</a></li>
			<li><a href="">学术</a></li>
		</ul>
		
		<!--<hr />
		
		
		<div class="div_1">
			
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			
		</div>
		
		<hr />
		
		<span id="span_1">1234</span>
		
		<hr />
		-->
		
		
	</body>
</html>

<!--
	行内元素：（多个标签位于同一行）
	
	 span  font  小标签   img  a  等
	
	块元素：（标签可以自动换行的元素是块元素）
	   
	   div   h1-h6  ul    p    等
	
	
-->
-->

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31555

赞同 0

评论 0 条

[网页编程]-09 JavaScript Array数组 2023-12-27 65658 浏览
数组声明的四种方式方式一最常用的,简略的声明了数组,但是没给长度vararr4=["你好数组!",123,newDate(),false];方式二只是声明了数组,但是给有给定长度和内容vararr=newArray();方式三声明了数组以及长度,但是没有给定数组内具体内容vararr2=newArray(5);方式四声明了数组以及其中的内容,但是没有给定具体长度vararr3=newArray("
[网页编程]-16 JavaScript Document节点获取 2023-12-27 66747 浏览
元素节点的获取有两种方式,第一种是直接获取,第二种是间接获取1.直接获取(三种)1.1方式1id方式直接获得获得的是单个对象/*直接获取节点对象的方式*/functiondemo1(){//方式1:id方式直接获得获
[网页编程]-15 JavaScript Document节点 2023-12-27 65132 浏览
document节点,可以简单的理解为就是我们网页内显示的内容的全部标签,节点呈树形结构下方两图一致蓝色元素节点橙色属性节点绿色文本节点
[网页编程]-14 JavaScript Bom对象中常用属性 2023-12-27 66067 浏览
Navigator返回由客户机发送到服务器的user-agent的头部信息(用户代理对象)判断是移动端还是PC端Locationurl:查看地址href:查看主机地址hostname:主机地址port:端口号/*Lo
[网页编程]-13 JavaScript BOM对象中常用的方法 2023-12-27 64805 浏览
注意,下面所有方法中的Window是可以省略的弹窗第一种只有确定按钮/*三种弹框方式*///第一种functiontk1(){//window可以省window.alert("第一种弹框方式");}
[网页编程]-12 JavaScript BOM和DOM对象 2023-12-27 64129 浏览
简单的来说,整个浏览器的结构就是BOM这包括着浏览器的全部而Dom就是中间我们浏览内容的那一块Bom包含Dom●什么是BOM●BOM是Browser0bjectModel的简写，即浏览器对象模型。●BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法●BOM没有统一的标准(每种客户端都可以自定标准)。●BOM的顶层是window对象●什么是DOM●DOM;是DocumentObjectMo
[网页编程]-11 JavaScript 键盘code表 2023-12-27 66576 浏览
keycode8=BackSpaceBackSpacekeycode9=TabTabkeycode12=Clearkeycode13=Enterkeycode16=Shift_Lkeycode17=Control_Lkeycode18=Alt_Lkeycode19=Pausekeycode20=Caps_Lockkeycode27=EscapeEscapekeycode32=spacespacek
[网页编程]-10 JavaScript event事件 2023-12-27 65610 浏览
满足某些条件就会被触发例如单击常用操作:单击事件:onclick最常用双击事件:ondblclick获得焦点事件:onfocus失去焦点事件:onblur鼠标移动事件:onmousemove鼠标离开事件:onmouseout鼠标抬起事件:onmouseover键盘抬起事件:onkeyup页面加载事件:onload要一个操作触发多个事件只需要在事件中以分号隔开即可
[网页编程]-03 JavaScript 变量 2023-12-27 67192 浏览
【1】JS中变量的声明var变量名=值；【2】JS中变量的使用注意的事项A、js中的变量的名称和java中标识符的命名保持一致就可以了。B、js中变量名称是可以重复的，但是后者的名称会把前者的名称值覆盖C、js中末尾即使没有分号结束也是可以的，但是不推荐大家这样书写。
[网页编程]-04 JavaScript 数据类型 2023-12-27 68249 浏览
JS中的数据类型number（数字类型的数据）string（字符串类型）boolean（布尔数据类型）object（对象类型）JS中特殊数据类型undefined(未定义)NaN(不是一个数字)notanumbernull(空对象)
- 登录注册
- 菜单
  - 资源
  - 问答
  - 资讯
  - 专家在线
  - 知识库
  - 回首页 index
- 菜单
  - 首页
  - 资源
  - 问答
  - 资讯
  - 专家在线
  - 知识库
信创开放社区 Copyright © 2024 渝ICP备15002787号-10 渝公网安备50010702506279 关于社区使用帮助招贤纳士友情链接：重庆市软件正版化服务平台信创参考信创产业网重庆享动科技有限公司
- 关注我们
  
  扫一扫关注公众号
  
  添加我为好友，拉您入交流群！
- 
添加我为好友，拉您入交流群！

请使用微信扫一扫!

[网页编程]-03 CSS 常用属性

字体处理常用属性

背景颜色& 行内元素 & 块元素 & 浮动标签 常用属性

相关文章

关注我们

背景颜色& 行内元素 & 块元素 & 浮动标签常用属性