HTML练习之路11

最新推荐文章于 2023-08-13 17:38:03 发布
最新推荐文章于 2023-08-13 17:38:03 发布
阅读量176 收藏
点赞数
文章标签： html 蓝桥杯 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62714412/article/details/122632690
版权

本次的任务是完成如图所示界面：

分析可知，整体结构可看成一个大的<div>包裹两个并列的小<div>,第一个小<div>用于放置图片，第二个小<div>用于放置四个段落文本：

<body>
<div class="d1">
	
	<div class="d2">
		<img src="../../../Documents/muxishiye/user.jpg">
	</div>
	<div>
		<p>用户姓名：</p>
		<p>学习进度：</p>
		<p>兴趣爱好：</p>
		<p>参与的群：</p>
	</div>
	</div>
</body>

完成上面步骤后我们的基本框架就搭建完成了，接下来用CSS为标签添加样式，首先，我们使用链入式引用CSS代码，既然要引入CSS代码，就需要先新建CSS文件，CSS文件新建过程与html文件新建过程几乎一样，只是在如下界面将Html选项选择Css即可：

然后紧接着</title>标签 下一行引入Css文件：

<link href="index1_20_test03.css"  rel="stylesheet" type="text/css">

接下来我们来到CSS文件，第一步，祖传艺能，初始化边距：

*{
	        margin: 0px;
			padding:0px;			
}

对父<div>添加统一样式：

div {
	
	height: 180px;
	width: 150px;
	margin: 10px auto;		
	font-family: "微软雅黑";
	font-size: 18px;
}

设置图片所在<div>的高度，防止元素重叠：

div .d2{
	height: 125px;
}

对整个段落文本设置边框，边距，颜色等属性：

p{
	width: 138px;
	height: 40px;
	line-height: 40px;
	border: 1px solid aliceblue;
	margin-bottom: 3px;
	padding-left: 10px;	
	color: aliceblue
}

以下是实际演示效果：

 为了让展示效果更好，我为它设置了背景图片：

body{
	
	background-image:  url(  "../../../Documents/muxishiye/wallhaven-dp2ojo.png");
}

实际效果如下：

 完整.html源码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link href="index1_21_test1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="d1">
	
	<div class="d2">
		<img src="../../../Documents/muxishiye/user.jpg">
	</div>
	<div>
		<p>用户姓名：</p>
		<p>学习进度：</p>
		<p>兴趣爱好：</p>
		<p>参与的群：</p>
	</div>
	</div>
</body>
</html>

完整.css源码如下：

@charset "utf-8";
/* CSS Document */

*{
	margin: 0px;
	padding:0px;
	
}



div {
	
	height: 180px;
	width: 150px;
	margin: 10px auto;		
	font-family: "微软雅黑";
	font-size: 18px;
}

div .d2{
	height: 125px;
}

p{
	width: 138px;
	height: 40px;
	line-height: 40px;
	border: 1px solid #000000;
	margin-bottom: 3px;
	padding-left: 10px;	
	color: #000000;
}

body{
	
	background-image:  url(  "../../../Documents/muxishiye/wallhaven-dp2ojo.png");
}

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（QQ群：937864538  欢迎入群~）

沐曦可期
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4674
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
实验十一 操作HTML DOM对象
qq_56539172的博客
05-25 185
1.实现页面中两个按钮的作用，删除所有的水平线，替换所有的水平线。代码如下 2.添加元素（红色的水平线） 3、点击按钮将第二个列表的内容添加到第一个列表中 4、在一张页面中分三行显示有两个下拉列表框(select)、一个确定“按钮”(input)和一个段落标签(p)。在这两个下拉列表框中，分别表示省份和省份下辖的市县，在第一个列表中选择了某个的省份，则在第二个列表中列出所选省下辖的县，点击确定按钮，将两个下拉列表框中选择的“省份”和“县市”等内容显示在一个段落中。（不用列出中国的全部省份和
Web前端开发技术实验与实践（第3版）储久良编著实训11
热门推荐
weixin_45867761的博客
12-03 1万+
项目11 JavaScript事件分析 项目32 设计校园办公系统认证页面 页面效果截图 代码 <!--prj_11_1.html--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>校园办公系统认证页面</title> <style type="text/css"> div { margin: 0 auto;
HTML 第十一章总结
weixin_30653097的博客
12-07 164
# 第十一章总结:本章的标题为：layout and positioning Arranging Element##前言：这一章节，通过已经知道的 box model 的概念，进行讲述关于 layout 的知识，并且通过这些知识进行创造专业的设计和 multicolumn layouts. ##谈谈Flow###对于block element* 对 block element 来说， Brow...
汇编语言 王爽 第三版 实验十一
四位的博客
01-31 1143
实验11 题目要求 分析 判断是否为小写转变为判断是否不是大写简化操作 考虑到子程序用到的参数要进行栈操作 代码 assume cs:codesg datasg segment db"Beginner's All-purpose Symbolic Instruction Code.",0 datasg ends codesg segment start: mov ax,datasg m...
HTML练习之qq飞车首页
03-16
HTML练习之QQ飞车首页图片资源
HTML选择器练习之餐厅
04-24
有助于人们练习选择器的使用
html小练习.docx
08-27
HTML 小练习文档解读 本文档旨在指导初学者掌握 HTML 基础知识，并通过实践练习熟悉 HTML 编程。本文档共分为四页，涵盖 HTML 基础概念、表单设计、图片显示、样式设置等内容。 页 1：块级元素、内联元素和内联块...
Html初学练习.zip
最新发布
01-01
Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html...
HTML练习文档 HTML练习文档
01-14
html
HTML(第十一章)(两处代码存在着不同的浅微的差距)
qq_59861678的博客
05-12 185
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
百度前端实战训练营 笔记 1.2 HTML基础
m0_66849082的博客
01-04 402
百度前端实战训练营 笔记 1.2 HTML基础
HTML表单标签大全并附有详细代码+案例
小新的博客
08-13 5064
HTML表单标签 HTML 表单用于搜集不同类型的用户输入。 一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。 1. 表单标签 HTML 表单用于收集用户输入，表单使用 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。 注意：元素是块级元素，其前后会产生折行。
HTML5+CSS3学习笔记（第11章）JavaScript
fangpihuiyu的博客
02-07 174
HTML5+CSS3学习笔记（第11章）JavaScript 正式迈入JS 加油！！！！ 11.1JavaScript概述 JavaScript的使用 在页面中直接嵌入 导入外部的JS 例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
html5第十一章网页,第十一章 DOM扩展
weixin_36486217的博客
06-18 135
1.Element Traversal API 为DOM元素新增了5个属性：①childElementCount：返回子元素(不包括文本节点和注释)的个数。②firstElementChild：指向第一个子元素；firstChild的元素版。③lastElementChild：指向最后一个子元素；lastChild的元素版。④previousElementSibling：指向前一个同辈元素；pre...
HTMl十一章项目一,《第十一章HTML语言和脚本语言4+2.doc
weixin_39681724的博客
06-19 119
《第十一章HTML语言和脚本语言42HTML语言和脚本语言11.1 HTML语言11.1.1什么是HTMLHTML是用来制作网页的标记语言.HTML是Hypertext Markup Language的英文缩写,即超文本标记语言.HTML语言是一种标记语言,不需要编译,直接由浏览器执行.HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀....
从零开始学WEB前端——JavaScript基础介绍
su_zui的博客
02-24 1140
JavaScript（简称“JS”） 是一种具有**函数优先**的轻量级，**解释型**或即时编译型的**编程语言**。虽然它是作为开发Web页面的**脚本语言**而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于**原型编程**、多范式的动态脚本语言，并且支持**面向对象**、命令式、声明式、函数式编程范式。
HTML实战训练(1)——美站库
皮蛋瘦肉没有肉
06-22 1457
本人新手，在学习了近一个月HTML之后第一次进行了实战项目，写个博客主要是想记录一下自己的学习路程，欢迎高手指出缺点         本次实战训练主要是运用自己所学知识写出美站库的界面，选择美站库的原因主要是因为其界面简洁，适合初学者练习。 准备事项: 美站库（http://www.jilalin.com/）DW CS6Firefox 相关图片素材 美站库
html&css--------布局（11/6）
ydmichelle的博客
11-06 168
css中控制页面布局的定位机制：普通流、相对定位、绝对定位 普通流（position：static） 相对定位（position：relative） 绝对定位（position：absolute） 固定定位（position：fixed） 重叠元素（z-index）：控制元素的层次，数值越大，元素的层次就越靠前，z轴上彼此堆叠，置于顶层或置于底层 浮动元素（float） 清除浮动（c
html 练习题和答案
07-07
### 回答1： HTML 练习题和答案 1. 编写一个 HTML 文件，并在其中添加一个段落标签（<p>），在段落中写下你的姓名和年龄。 答案： ```html <html> <head> <title>练习题</title> </head> <body> <p>我的姓名是张三，年龄是20岁。</p> </body> </html> ``` 2. 创建一个 HTML 表格，并在表格中添加两行两列的数据。 答案： ```html <html> <head> <title>练习题</title> </head> <body> <table> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>20岁</td> </tr> </table> </body> </html> ``` 3. 在 HTML 页面中插入一张图片。 答案： ```html <html> <head> <title>练习题</title> </head> <body> <img src="image.jpg" alt="图片描述"> </body> </html> ``` 4. 创建一个有序列表，并在列表中添加三个项目。 答案： ```html <html> <head> <title>练习题</title> </head> <body> <ol> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ol> </body> </html> ``` 5. 创建一个链接，链接到另一个网页。 答案： ```html <html> <head> <title>练习题</title> </head> <body> <a href="https://www.example.com">点击这里访问另一个网页</a> </body> </html> ``` ### 回答2： HTML 练习题和答案是为帮助学习者巩固和提升他们在HTML方面的知识，以下为一些常见的HTML练习题和答案： 1. 创建一个HTML文件，包含一个标题为"我的第一个网页"的标题标签。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> </body> </html> ``` 2. 在第一个网页中，添加一个段落标签，内容为"欢迎来到我的网页！"。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <p>欢迎来到我的网页！</p> </body> </html> ``` 3. 在第一个网页中，添加一个链接，链接到www.example.com网站。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <p>欢迎来到我的网页！</p> <a href="http://www.example.com">点击这里访问www.example.com</a> </body> </html> ``` 4. 创建一个无序列表，包含三个列表项：“苹果”，“香蕉”和“橙子”。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <p>欢迎来到我的网页！</p> <a href="http://www.example.com">点击这里访问www.example.com</a> <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> </body> </html> ``` 5. 在第一个网页中嵌入一张图片，图片名称为"example.jpg"，宽度为300像素，高度为200像素。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <p>欢迎来到我的网页！</p> <a href="http://www.example.com">点击这里访问www.example.com</a> <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> <img src="example.jpg" alt="示例图片" width="300" height="200"> </body> </html> ``` 这些练习题和答案可以帮助学习者熟悉HTML的基本语法和标签，并且通过练习提升实践能力。随着练习的深入，学习者可以尝试更复杂的HTML练习题，以拓宽自己的HTML知识。 ### 回答3： HTML练习题和答案可以根据不同的难度和主题来设计。以下是一个简单的例子： 练习题1： 假设我们要创建一个简单的网页，其中包含一个标题和一个段落。请使用HTML代码编写这个网页。 答案1： ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个段落。</p> </body> </html> ``` 练习题2： 在上面的网页基础上，我们想要在段落中添加一个链接，链接到另一个网页。请添加这个链接的HTML代码。 答案2： ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个段落，你可以访问 <a href="https://www.example.com">另一个网页</a>。</p> </body> </html> ``` 这些练习题旨在帮助初学者熟悉HTML标记语言的基础语法和常用元素。对于更高级的HTML练习题和答案，可以参考相关教程、书籍和在线资源。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沐曦可期

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值