2019/9/9Day2学习小结

最新推荐文章于 2024-10-07 16:07:33 发布
最新推荐文章于 2024-10-07 16:07:33 发布
阅读量169 收藏
点赞数
文章标签： 学习 日常
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cheer_98_/article/details/100668505
版权

2019/9/9学习小结

上午学习内容

内容：

  1. 认识网页；
  2. html标签分类；
    双标签：<标签名> 内容 </标签名>
    单标签：<标签名 />
  3. HTML标签关系
  • 嵌套关系<head> <title> </title> </head>
  • .并列关系<head></head><body></body>
  1. HTML标签的语义化
    所谓标签语义化，就是指标签的含义。
  2. 链接标签(重点)

单词缩写： anchor 的缩写 。基本解释 锚, 铁锚 的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target

target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本。

2.使用相应的id名标注跳转目标的位置。

base 标签

base 可以设置整体链接的打开状态

base 写到 之间

无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

总结

总结今天的思路贯穿线：

在这里插入图片描述

下午学习内容

自己做课后作业
效果图：
在这里插入图片描述

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.header-1{
			width: 100%;
			height: 50px;
			clear:both; 
		}
		.tu1{
			width: 20%;
			float: left;

		}
		.logo{
			width:100px;
			float: left;


		}
		.tu2{
			width: 50%;
			text-align: center;
			float: left;


		}
		.img01{
			height: 50px;

		}
		.header-1 ul li{
			float: right;
		}
		.ul1 {
			float: right;
			width: 20%;
			
		}
		.ul1 ul{
			float: right;
			
		}
		.ul1 ul li{
			list-style: none;
			margin-right: 5px;
		}

		.header-2{
			width: 100%;
			height: 40px;
			background-color:black; 
		}
		.ul2 ul{
			margin: 0;
			padding: 0;
			clear: both;
		}
		.ul2 ul li{
			float: left;
			list-style: none;
			margin-right: 5px;

		}
		.ul2 ul li a{
			color: #fff;
			font-size: 14px;
			text-decoration: none;
			line-height: 30px;
		}
		.bannertu{
			width: 100%;
			height: 500px;
		}
		.shangpin {
			height: 30px;
			width: 100%;
		}
		.shangpin h3{
			float: left;
			margin: 0;
			padding: 0;
		}
		.shangpin img{
			float: left;
			margin-top: 5px
		}
		.zhongjian-1{
			clear: both;
		}
		.zhongjian-1 .left{
			float: left;
		}
		.zhongjian-1 .rigth{
			/*float: left;*/
			height: 480px;
			width: 100%;
			/*clear: both;*/
		}
		.rigth .rigth-top{
			float: left;
			width: 1000px;
			height: 236px;
		}
		.rigth .rigth-top img{
			float: left;
		}
		.rigth .rigth-top ul{
			float: left;
			margin: 0;

		}
		.rigth .rigth-top ul li{
			float: left;
			list-style: none;
			margin-left: 30px; 
			height: 236px;
		}
		.p1{
			padding-top: 20px;
			padding-left: 30px; 
		}
		.p2{
			padding-left: 30px; 
			color: red;
		}
		.rigth .rigth-foot{
			float: left;
			width: 1000px;
			height: 236px;

		}
		.rigth .rigth-foot img{
			float: left;
		}
		.rigth .rigth-foot ul{
			float: left;
			margin: 0;
			padding: 0;

		}
		.rigth .rigth-foot ul li{
			float: left;
			list-style: none;
			margin-left: 30px; 
			height: 236px;
			margin-top: 20px;
		}
		.ad img{
			width: 100%;
		}
		.footertu img{
			width: 100%;
		}
		.footer{
			text-align: center;
		}
		.footer ul{
			list-style: none;

		}
		.footer ul li{
			margin-right: 5px;
			display: inline;
		}
		.p3{
			font-size: 13px;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="header-1">
			<div class="tu1">
				<img class="logo" src="day2作业/img/logo2.png" alt="">
			</div>
			<div class="tu2">
				<img class="img01" src="day2作业/img/header.png" alt="">
			</div>
			<div class="ul1">
				<ul>
					<li>
						<a href="#">登录</a>
					</li>
					<li>
						<a href="#">注册</a>
					</li>
					<li>
						<a href="#">购物车</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="header-2">
			<div class="ul2">
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">手机数码</a>
						
					</li>
					<li>
						<a href="#">电脑办公</a>
						
					</li>
					<li>
						<a href="#">鞋靴箱包</a>
						
					</li>
					<li>
						<a href="#">香烟酒水</a>
						
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="banner">
		<img  class="bannertu" src="day2作业/img/1.jpg" alt="">
	</div>
	<div class="shangpin">
		<h3>最新商品</h3>
		<img src="day2作业/img/title2.jpg" alt="">
	</div>
	<div class="zhongjian-1">
		<div class="left">
			<img src="day2作业/img/big01.jpg" alt="">
		</div>
		<div class="rigth">
			<div class="rigth-top">
				<img src="day2作业/img/middle01.jpg" alt="">
				<ul>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					
				</ul>
			</div>
			<div class="rigth-foot">
				<ul>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					
				</ul>
			</div>

		</div>
	</div>
	<div class="ad">
		<img src="day2作业/img/ad.jpg" alt="">
	</div>

	<div class="shangpin">
		<h3>最新商品</h3>
		<img src="day2作业/img/title2.jpg" alt="">
	</div>
	<div class="zhongjian-1">
		<div class="left">
			<img src="day2作业/img/big01.jpg" alt="">
		</div>
		<div class="rigth">
			<div class="rigth-top">
				<img src="day2作业/img/middle01.jpg" alt="">
				<ul>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					
				</ul>
			</div>
			<div class="rigth-foot">
				<ul>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					<li>
						<img src="day2作业/img/small08.jpg" alt="">
						<p class="p1">高压锅</p>
						<p class="p2">$998</p>
					</li>
					
				</ul>
			</div>

		</div>
	</div>
	<div class="footertu">
		<img src="day2作业/img/footer.jpg" alt="">
	</div>
	<div class="footer">
		<ul>
			<li>
				<a href="#">关于我们</a>
			</li>
			<li>
				<a href="#">联系我们</a>
			</li>
			<li>
				<a href="#">招贤纳士</a>
			</li>
			<li>
				<a href="#">法律声明</a>
			</li>
			<li>
				<a href="#">友情链接</a>
			</li>
			<li>
				<a href="#">支付方式</a>
			</li>
			<li>
				<a href="#">配送方式</a>
			</li>
			<li>
				<a href="#">服务声明</a>
			</li>
			<li>
				<a href="#">广告声明</a>
			</li>
		</ul>
		<p class="p3">Copyrigth &nbsp 2005-2016宁财商城版权所有 </p>
	</div>
</body>
</html>
cheer_98
关注
HTML基础知识（1）
panchaoyu的博客
09-23 991
HTML基础知识（1） 开发工具：Dreamweaver、sublime、HBuilder、Visual Studio Code。 字符集：utf-8、gb2312、BIG5、GBK 路径： 路径分为相对路径、绝对路径。 1. 相对路径： 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如。 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如&lt...
Unite 2019 个人笔记小结
工 具 人
05-14 2430
在5月10日到12日期间，有幸在上海伙计会议中心参加了Unite Shanghai 2019大会。为期三天的Unite大会为大家带来了分享、交流和学习的平台，让开发者获取到最新的Unity技术知识和使用技巧。 因为没有参加10日的Training day，我就总结一下11日和12日的内容，属于个人的小结（记录一下，防止之后忘记）。 这里大部分是本人的感想和一些笔记的记录，如果有问题，请大家见谅 ...
day1学习vue2笔记 vue指令
weixin_51715424的博客
08-10 948
vue基础学习
小兔鲜Vue3 项目学习笔记Day01
不被定义的程序媛写的博客儿
05-18 1597
vue3现在使用很广泛，必学！vue3项目，本文主要是学习项目功能实现并进行总结。配套资料的话去B站下方自己拿。持续更新…
GO学习笔记(4) strconv/time
m0_51376859的博客
09-08 1257
/+0800 表示东八区，即UTC时间加上8小时。中国大部分地区都位于东八区。
小兔鲜Vue3 项目学习笔记 Day06
不被定义的程序媛写的博客儿
05-29 1712
文章目录购物车本地1. 列表购物车基础数据渲染2. 列表购物车单选功能3. 列表购物车全选功能4. 列表购物车统计列表实现5. 接口-加入购物车6. 接口-删除购物车7. 退出登录-清空购物车数据8. 合并购物车到服务器(重要)结算1. 路由配置和基础数据渲染2. 地址切换-打开弹框交互实现3. 切换地址-地址激活交互实现4. 生成订单功能实现支付1. 渲染基础数据2. 实现支付功能3. 支付结果展示4. 封装倒计数函数小结 购物车本地 1. 列表购物车基础数据渲染 模板 views/CartList
小兔鲜Vue3 项目学习笔记Day02
不被定义的程序媛写的博客儿
05-21 1647
文章目录Pinia1.使用2. pinia-计数器案例3. getters实现4. 异步action5. storeToRefsx 数据解构保持响应式6. pinia 调试项目起步1.项目初始化和git管理2. 使用ElementPlus3. ElementPlus 主题色定制4. axios 基础配置5. 路由设计6. 静态资源初始化和 Error lens安装7.scss自动导入8. Layout静态模板结构搭建9. Layout字体图标引入10.Layout一级导航渲染11. layout - 吸顶导
【剑指offer】学习计划day2
忆梦初心的博客
05-14 1125
本系列是针对Leetcode中剑指offer学习计划的记录与思路讲解。剑指offer-学习计划https://leetcode.cn/study-plan/lcof/?本期是本系列的day2，今天的主题是----》链表（简单）题目：JZ06：从尾到头打印链表，JZ24：反转链表，JZ35：复杂链表的复制。
Day14 Java 学习笔记
qq_52897007的博客
03-19 1025
Java核心库为每种基本类型都提供了对应的包装类型：基本类型对应的引用类型booleanbyteshortintlongfloatdoublechar。
oracle日期字段加2天,Oracle时间日期操作方法小结第2/2页
weixin_42511886的博客
04-06 1522
Oracle时间日期操作方法小结第2/2页更新时间：2010年11月21日 14:53:07 作者：Oracle时间日期操作方法小结，需要的朋友可以参考下。在oracle中有很多关于日期的函数，如:1、add_months()用于从一个日期值增加或减少一些月份date_value:=add_months(date_value,number_of_months)例:SQL> select ...
day10 12 接口的内容小结
08-31
day10_12_接口的内容小结
day09【常用API、引用类型小结】_pojie_
10-03
在“day09【常用API、引用类型小结】”的学习中，我们可能会涉及到以下关键知识点： 1. **常用API**：这部分可能涵盖各种常用库，例如Java的`java.util`包，其中包含集合框架（如ArrayList、HashMap）、日期时间...
韩顺平玩转oracle学习小结
04-13
### 韩顺平玩转Oracle学习小结 #### 1. Oracle基础介绍 ##### 1.1 基本概念 **实例**: 在Oracle中，“实例”指的是数据库中的相关进程被启动并加载到内存中形成的一个整体。这些进程协同工作以支持数据库的正常...
10.2学习
2401_87363162的博客
10-02 1142
​ Spring AOP就是基于动态代理的，如果要代理的对象，实现了某个接⼝，那么Spring AOP会使⽤JDKProxy，去创建代理对象，⽽对于没有实现接⼝的对象，就⽆法使⽤ JDK Proxy 去进⾏代理了，这时候Spring AOP会使⽤基于asm框架字节流的Cglib动态代理 ，这时候Spring AOP会使⽤ Cglib ⽣成⼀个被代理对象的⼦类来作为代理。每个线程中都有一个自己的ThreadLocalMap类对象，可以将线程自己的对象保持到其中，各管各的，线程可以正确的访问到自己的对象。
Go基础学习10-原子并发包sync.atomic的使用：CSA、Swap、atomic.Value......
FLJS_T的博客
10-02 969
原子操作sync.atomic以及原子变量atomic.Value详细介绍。go中原生的支持原子操作的函数支持的变量类型int32、int64、uint32、uint64、uintptr，以及unsafe包中的Pointer。对于上述原子操作类型中的每一个，可以支持的数据类型有：==int32、int64、uint32、uint64、uintptr，以及unsafe包中的Pointer。但是否sync.Mutex变量能够保证操作的原子性。atomic.Value类型是开箱即用的，我们声明一个该类型的变量
6.824 Lab 2C 学习记录
kingsill的博客
09-29 327
最后10s，开始的时候，恢复网络，插入一个数据，等待这个数据被提交，如果超过这10s就报错。2C的test中的unreliable figure8算是给博主的迎头一棒，需要根据raft论文的figure8进行解决，leader。根据前任及博主自己的经验，unreliable figure8的除了上述这一点以外，需要对。博主由于之前的不严谨，给自己留下了很大的改进困难，最后不得不重构代码。进行一定的设计，可以参考课程里老师提出的意见。一下为博主的github仓库，需要的可以参考。有一定的考验，那么就需要对。
【DirectX sdk 学习使用】
qq_41610493的博客
10-01 372
设置包含目录：打开你的项目属性，导航到VC++目录，然后在包含目录中添加DirectX SDK的Include文件夹路径。设置库目录：同样在VC++目录中，在库目录中添加DirectX SDK的Lib文件夹路径。运行安装程序：下载完成后，找到下载的安装程序（通常是一个.exe文件），双击运行。选择安装路径：选择你希望安装DirectX SDK的路径，或者使用默认路径。如果你有任何问题或需要进一步的指导，请随时告诉我。接受许可协议：在安装向导中，阅读并接受许可协议。完成安装：点击“安装”按钮，等待安装完成。
操作系统 | 学习笔记 | 王道 | 4.1 文件系统基础
最新发布
m0_74795952的博客
10-07 503
定义文件是以计算机硬盘为载体的存储在计算机上的信息集合，在用户进行的输入、输出中，以文件位基本单位。文件管理系统是实现的文件的访问、修改和保存，对文件维护管理的系统。文件的组成文件的结构数据项记录：是一组相关的数据项的集合，用于描述一个对象在某方面的属性。文件：是指由创建者所定义的、具有文件名的一组相关元素的集合，分为有结构文件和无结构文件两种。
Java学习打卡day2：DOS执行原理与classpath环境变量
"Java学习打卡day2，涉及Java执行原理，类加载器，classpath环境变量，以及Java注释的使用和类型" 在Java学习的第二天，我们深入理解了Java程序的执行过程，主要包括以下几个关键知识点： 1. **Java程序执行原理**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值