Web前端实训两天记录

最新推荐文章于 2022-09-22 20:54:59 发布

jihome

最新推荐文章于 2022-09-22 20:54:59 发布

阅读量3.8k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/jihome/article/details/89959000

版权

本文记录了一次为期两天的Web前端实训经历，涵盖了HTML+CSS的基础知识，包括HTML基本结构、列表、颜色、样式组合、字体属性、表单设计、盒子模型、边框圆角和阴影效果等。通过实训，作者深化了对这些概念的理解，并学习到一些实用技巧。

摘要由CSDN通过智能技术生成

Web前端实训两天记录

实训前言

之前自学过一段时间的网页设计基础知识，这次学校组织了实训集中学习网页前端的知识，趁这个机会巩固复习和学习了一些内容，顺便把总结一下把写出来，记录一下这两天的成果。使用软件：Sublime Text。

HTML+CSS基础知识

第一天内容

01.html

练习了html基本结构和一些标签：head,body,p,br,pre,em,strong,div,sup,sub等。具体如下代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>
		my first html
	</title>
	<meta name="keywords" content="AHNU">
	<link rel="shortcut icon" type="imag/x-icon" href="imag0.jpg">
	<style>
		p{
    
			text-align: center;
		}
	</style>
	<!-- 这是注释 -->
</head>
<body>
	<h1>hello world!</h1>
		hello<br>
	<a href="http://www.ahnu.edu.cn">AHNU</a>
	<p>
		显示<br>
		缩进<br>
		一个&nbsp;空格<br>
		<!-- html实体 -->
		&lt;h1&gt;左右圆括号<br>
		版权符号&copy;<br>
		人民币&yen;
	</p>
	<p style="width: 300px;border-width: 2px;">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<!-- 保持原格式 -->
	<pre>
		天王
		地虎
	</pre>
	<div>
		<em>斜体</em><br>
		<strong>粗体</strong><br>
		<mark>被选中</mark><br>
		<ruby>
			拼音
			<rt>pin xin</rt>
		</ruby><br>
		<sub>下角标</sub>
		<sup>上角标</sup>
	</div>
</body>
</html>

注：p中间那段是随机生成的一段文本，用于测试。

02.html

此案例写了列表的基本信息，颜色单位。颜色的表示形式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>
		颜色单位 列表
	</title>
	<style type="text/css">
	/*优先级
	id>class>div>**/
		div{
    
			width: 300px;
			height: 200px;
			background-color: #c1c1c1;
		}
		p{
    
			border: 1px	solid red;
		}
		#item{
    
			border: 2px solid green;
		}
		#item01{
    
			border: 3px solid yellow;
		}
		.item04{
    
			border: 4px solid green;
		}
		div{
    
			border: 5px solid blue;
		}

	</style>
</head>
<body>
	<p id="item">
		what do want to do.
	</p>
	<p>
		I want you.
	</p>
	<!-- 无序列表 -->
	<ul class="item1">
		<li>第一组</li>
		<li>第二组</li>
		<li>第三组</li>
			<ul>
				<li>first</li>
				<li>second</li>
				<li>third</li>
			</ul>
		<li>第四组</li>
		<li>第五组</li>
	</ul>

	<!-- 有序列表 -->
	<ol>
		<li>一</li>
		<li>二</li>
			<ol>
				<li>first</li>
				<li>second</li>
				<li>third</li>
			</ol>
		<li>三</li>
	</ol>
	<div id="item01" class="item02">
		你好啊。
	</div>
</body>
</html>

03.html

CSS的一些样式组合。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>组合 群组 后代元素</title>
	<style type="text/css">
		/*后代元素选择器*/
		.list li{
    
			border: 2px solid blue;
		}

		/*子元素选择器*/
		.list>li{
    
			border: 1px solid red;
		}

		/*群组选择器*/
		/*或者*/
		div,p,#item{
    
			border: 3px solid yellow;
		}

		/*规定一个元素必须要有这几样*/
		/*和*/
		li.item02{
    
			border: 4px solid blue;
		}

	</style>
</head>
<body>
	<ul>
		<li