学习周记1（html/css）

最新推荐文章于 2023-12-14 08:30:00 发布

「理想家」

最新推荐文章于 2023-12-14 08:30:00 发布

阅读量338

点赞数 3

本文链接：https://blog.csdn.net/Estheri/article/details/114601111

版权

学习笔记

基础知识

定义图像的语法是：
<img src="url" alt="some_text">
URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 
的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
设置宽高度；<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
实例 <p>这个<br>段落<br>演示了分行的效果</p>

font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
实例 <h1 style="font-family:verdana;">一个标题</h1> 
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
实例<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p>

设置动态背景

  .box{           width: 570px;
		           height: 1000px;
				background: url("file:///D:/workplace/test/picture/63f434a5736f9929145dc37c97d52575.gif") no-repeat;

插入图片

<img src="picture/微信图片_20210309203838.jpg" alt="这是照片" width="200" height="200" class="ex1">

个人介绍代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title style="font-family: arial, helvetica, sans-serif">个人介绍</title>
		<style>
		       .box{
		           width: 570px;
		           height: 1000px;
				background: url("file:///D:/workplace/test/picture/63f434a5736f9929145dc37c97d52575.gif") no-repeat;
		       }
			   p.ex1{margin-left: 1cm;}
			   img.ex1{margin-left: 1cm;}
		</style>
	</head>
	<body>
		<div class="box">
			<h1 style="text-align: center;;color:FireBrick"><br>团队个人介绍</h1>
		<h2 style="text-align: center;color:Indianred">王辰淇 北京XX大学2019级本科</h2>
		<img src="picture/微信图片_20210309203838.jpg" alt="这是照片" width="200" height="200" class="ex1">
        <p style="font-family:Comic Sans MS, cursive, sans-serif;font-size:20px;color:Indianred" class="ex1">姓名：王辰淇</p>
		<p style="font-family:Comic Sans MS, cursive, sans-serif;font-size:20px;color:Indianred "class="ex1">性别：女</p>
		<p style="font-family:Comic Sans MS, cursive, sans-serif;font-size:20px;color:Indianred"class="ex1">学院：电商与物流学院</p>
		<p style="font-family:Comic Sans MS, cursive, sans-serif;font-size:20px;color:Indianred"class="ex1">专业：信息管理与信息系统</p>
		<p style="font-family:Comic Sans MS, cursive, sans-serif;font-size:20px;color:Indianred"class="ex1">学号：190XXXX316</p>
		<p style="font-family:Comic Sans MS, cursive, sans-serif;font-size:20px;color:Indianred"class="ex1">兴趣爱好：钢琴曲，旅行</p>
		</div>
	</body>
</html>

结果呈现

在这里插入图片描述

「理想家」

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
学习周记1（html/css）

学习笔记基础知识定义图像的语法是：<img src="url" alt="some_text">URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。<img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。设置宽高度；&
复制链接

扫一扫