简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 新闻列表样式跳转
Blogger Information
Blog 13
fans 0
comment 0
visits 11018
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
新闻列表样式跳转
linuxup的博客
Original
1161 people have browsed it

总结

通过这次课程，我初步学会了CSS基本语法，以及相关元素、标签的作用，如果通过页面内部CSS,修改div标签样式，按照自己的想法呈现。

实例1

<!DOCTYPE html>
<html>
<head>
	<title>129496第五期第一节课作业</title><!-- 标题 -->
	<meta charset="utf-8"><!-- 字符编码 -->
	<!-- 手机屏幕适用禁止缩放 -->
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="">
<!-- 	外部链接CSS样式
	rel:与文档之间得关系
	type：文档类型
	href:文件路径 -->
	<link rel="icon" type="images/x-icon" href="favicon.ico">
<!-- 	网站标签页logo设置 -->
<!-- 内部css样式 -->
	<style type="text/css" media="screen">
/*内容的外边距和内边距为0像素*/
		*{
		margin:0px;           
		padding: 0px;
		}
		p{
			width: 400px;   /*设置P标签的宽度*/
			text-indent: 2em;  /*首行缩进*/

		}
		div {
		width: 300px;	/*设置div标签的宽度*/
		white-space: nowrap; /*强制超出的内容不换行显示*/
		overflow: hidden;    /*超出宽度的就隐藏*/
		text-overflow: ellipsis; /*隐藏部分用。。。代替*/

		}
	</style>
</head>
<body>
	<h1>h1标题</h1>  
	<h2>h2标题</h2>
	<h3>h3标题</h3>
	<b>加粗字体</b>
	<br> <!--  定义换行 -->
	<small>小号字体small</small>  
	<br>
<strong>重要得标签,加重语气词</strong>   
<p>这是一段文本，第一次在上PHP中文网得课感觉还不错，以前学过h't'm'l，再次拾起来感觉惭愧啊。~~~~加油学习了。这是一段文本，第一次在上PHP中文网得课感觉还不错，以前学过h't'm'l，再次拾起来感觉惭愧啊。~~~~加油学习了。</p>
<hr>  <!-- 水平线 -->
<del>删除字体</del>
<p><abbr title="我来学习h't'm'l了">我来了</abbr></p>
<del>399</del><b>299</b>

<div>	
	<!-- 超链接 -->
<!-- 	target 设置_blank重新打开页面跳转 -->
<a href="2.html" target="_blank">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</a>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例2

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>新闻页面</title>
	<style type="text/css" media="screen">
		*{
			margin: 0px;
			padding: 0px;
		}
		h1 {
			font-family: '宋体';  /*定义h1内字体*/
		}
		div {
			
			margin:0px auto; /*上下0px 左右自动  效果就是剧中*/
			width: 700px; /*宽度700*/
			border: 1px dashed #ccc;  /*1px的虚线边框用于知道DIV的范围*/
		}
		abbr {
			text-decoration: none;   /*取消原来自带样式*/
			color:#ccff55;  /*文字颜色*/
		}
		p
		{
			font-size: 14px;   /*字体大小*/

		}
		img {

			margin: 40px 0px;   /*设置外边距上下顶出40px*/
		}
		.box{   /*class。选择器*/
			font-size: 14px;
			line-height: 30px;   /*行高，让文字达到水平居中*/
			margin-bottom: 30px;
			text-indent: 2em;  /*首行缩进*/

		}
	</style>
</head>
<body>

	<div>
		<h1>大家好，这是一篇新闻，现在是标题</h1>
<!-- 内联样式 -->
		<p style="color:#ccc;line-height: 70px;"><abbr title="antker">antker</abbr>   2019-03-12  13:13</p>
		<p style="background: #f2f2f2;line-height: 70px;text-align: center;"><b>摘要：</b>新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
		<img src="1.jpeg" alt="这是一张图片" width="700">
		<p class="box"><b style="font-size: 18px;">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
		<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
		<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>

	</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！