css 02day（文本样式布局和选择器）

最新推荐文章于 2023-03-02 23:51:17 发布

pandaHe_Status

最新推荐文章于 2023-03-02 23:51:17 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_43321726/article/details/103775279

版权

前端专栏收录该内容

101 篇文章 2 订阅

订阅专栏

1.用到的标签
在这里插入图片描述 2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div style="color: gray;margin: auto;width: 500px;">
			<p style="text-align: center;">
				<span style="background-color: gray;color: white;font-size: 24px;">惠城简介</span>
			</p>
			<p>
				<b>惠州城市职业学院（City College of Huizhou）</b>是经广东省人民政府批准、
				国家教育部备案、广东省教育厅主管的公办全日制普通高等院校
				（学院代码：14510，高考录取批次有如下多种录取方式：
				<span style="color: aqua;">专科批次、高职“3+证书”
				、学业水平考试、自主招生、学前教育专业学院、五年一贯制）。</span>    
			</p>
			<p>
				<b>惠州城市职业学院前身为惠州商贸旅游高级职业技术学校</b>，该校由创办于1964年的
				<span style="color: red;">惠阳地区供销学校</span>（后更名为惠州市供销学校和惠州旅游学校）、惠阳地区粮食学校
				（后更名为惠州市粮食学校和惠州外贸学校）和创办于1965年的惠阳地区商业学校
				（后更名为惠州市商业学校）三所公办中专学校整合成立，办学历史已近一甲子，
				至今已向社会输送了10万名高素质技术技能人才。
			</p>
			<p>
				<b>校址位于惠州市惠城区惠南大道明德路</b>，交通便利。占地面积30万平方米，
				校舍建筑面积20.2万平方米，<span style="color: bisque;">校园具有"人文校园、生态校园、智慧校园</span>、
				职业校园"的浓郁山水特色和现代风格。
				
			</p>
		</div>
		
	</body>
</html>

3.效果图
在这里插入图片描述 A。标签B。代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			html{
				background-color: #ddd;
			}
			body{margin: 0;
				
			}
			#navigation{height: 80px;line-height: 80px;text-align: center;background-color: white;
				
			}
			#bottom{height: 40px;line-height: 40px;text-align: center;font-size: 14px;color:gray ;
				
			}
			.nav{
				text-decoration: none;color: black;margin: 0 15px;
			}
			#banner img{
				width: 100%;	
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<img src="images/动漫.jpg">
		</div>
		<div id="navigation">
			<a href="#"class="nav">首页</a>
			<a href="#"class="nav">关于王力</a>
			<a href="#"class="nav">产品世界</a>
			<a href="#"class="nav">新闻中心</a>
			<a href="#"class="nav">网络事件</a>
			<a href="#"class="nav">联系我们</a>
			<a href="#"class="nav">关于我们</a>
			<a href="#"class="nav">网络新闻</a>
			
		</div>
		<div id="bottom">
			版权所有：浙江网络游戏有限公司&nbsp;技术支持py网络
			
		</div>
	</body>
</html>