HTML5大前端学习过程第一周（Day05）

最新推荐文章于 2024-05-07 15:39:54 发布
最新推荐文章于 2024-05-07 15:39:54 发布
阅读量2.2k 收藏 4
点赞数 4
分类专栏： 作业 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SB_Hunter/article/details/104328487
版权

今天没有学什么新内容，就做了做作业，仿照做了一个百度首页，由于太菜，做了挺长时间，基本上和百度首页有一点相似了，不过还是有所不同，毕竟有的代码还没学，而且第一次写这种东西，废话不多说了，把代码放上来，大佬们轻喷，谢谢。
作业要求效果图：
在这里插入图片描述
HTML代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 外部引入的方式 -->
		<link rel="stylesheet" type="text/css" href="css/baidu.css"/>
	</head>
	<body>
		<!-- 
			1.先写网页的结构, 每一块区域单独的色块。
			2.调整色块与色块的间距。
			3.完善每一块的内容。
		 -->
		 <!-- 上 -->
		<div class="top">
			<a href="">新闻</a>
			<a href="">好123</a>
			<a href="">地图</a>
			<a href="">视频</a>
			<a href="">贴吧</a>
			<a href="">学术</a>
			<a href="" class="top_a">登录</a>
			<a href="" class="top_a">设置</a>
			<a href="" id="more">更多产品</a>
		</div>
		<!-- 中 -->
		<div class="middle">
			<img src="img/bd_logo1.png" >
			<!-- 输入框和按钮 -->
			<div class="input">
				<!-- 输入框 --><!-- 按钮 -->
				<input type="text" class="input_text"><input type="button" value="百度一下" class="input_btn">
			</div>
		</div>
		<!-- 下 -->
		<div class="bottom">
			<img src="img/code.png" >
			<p class="download">下载百度APP</p>
			<p class="look">有事搜一搜  没事看一看</p>
			<div class="about">
				<a href="">把百度设为主页</a>
				<a href="">关于百度</a>
				<a href="">About  Baidu</a>
				<a href="">百度推广</a>
				<span>(京)-经营性-2017-0020</span>
			</div>
			
			<div class="copyright">
				<span>©2020 Baidu </span> 
				<a href="">使用百度前必读</a>
				<a href="">意见反馈</a>
				<span>京ICP证030173号</span> 
				<img src="img/1.png" >
				<a href="" id="record">京公网安备11000002000001号</a>
				<img src="img/2.png" >
			</div>
		</div>
	</body>
</html>

css样式代码块：

* {
	margin: 0;
	padding: 0;
}
.top {
	/* 内容右对齐 */
	text-align: right;
	/* 上填充 */
	padding-top: 19px;
	/* 右填充 */
	padding-right: 11px;
}
/* 子代选择器 class选择器+元素选择器 */
.top>a {
	/* 文字相关 */
	color: #333333;
	font-size: 13px;
	line-height: 24px;
	/* 文字粗细 */
	font-weight: 700;
	/* 文字字体 */
	font-family: arial;
	/* 左间距 */
	margin-left: 20px;
}
/* class选择器+class选择器 */
.top>.top_a {
	/* 修改文字粗细 */
	font-weight: 400;
}

#more {
	/* 宽高 */
	width: 60px;
	height: 24px;
	/* 
		a标签是一个行属性标签, 行属性标签是无法更改宽高的,宽高由内容撑开.
		如果想让a标签能够设置宽高,比如给a标签添加一个属性display:inline-block;
	 */
	display: inline-block;
	background-color: #3388ff;
	/* 去掉下划线 */
	text-decoration: none;
	color: white;
	font-weight: 400;
	/* 水平居中 */
	text-align: center;
	/* 右间距 */
	/* margin-right: 11px; */
}

.middle {
	/* 上间距 */
	margin-top: 138px;
	/* 内容居中 */
	text-align: center;
}
.middle>img {
	width: 270px;
}
.input {
	/* 上间距 */
	margin-top: 25px;
}
/* 输入框 */
.input_text {
	width: 532px;
	height: 34px;
	border: 1px solid #b6b6b6;
	/* 去掉右边框 - 将右边框宽度设置为0 */
	/* border-right-width: 0; */
	border-right: none;
	/* 左填充 */
	padding-left: 7px;
	/* 
		盒模型的宽度: 539 + 1 + 1 + 7 = 548px
		第一个:多在width. -7            541px
		第二个:多个右边框. -1            540px
	 */
}
/* 按钮 */
.input_btn {
	width: 100px;
	height: 36px;
	background-color: #3385ff;
	color: white;
	border: 1px solid #3385ff;
	/* 垂直对齐方式 */
	vertical-align: top;
}

.bottom {
	/* 上间距 */
	margin-top: 256px;
	/* 内容居中 */
	text-align: center;
}

.bottom>img {
	border: 1px solid #f3f3f3;
	padding: 5px;
}

.download {
	/* 文本相关 */
	color: #333333;
	font-size: 16px;
	line-height: 32px;
	/* 字母间距 */
	letter-spacing: 3px;
	/* 字体 */
	font-family: arial;
}

.look {
	color: #999;
	font-size: 14px;
	line-height: 14px;
	font-weight: 300;
}

.about {
	/* 文本相关的属性 */
	color: #999;
	font-size: 12px;
	line-height: 22px;
	font-family: arial;
	/* 上间距 */
	margin-top: 25px;
}
/* 
	a元素对文字有自己的颜色设置,所以如果想要修改a元素中文字的颜色,就必须作用到a标签身上(必须得直接对a元素做修改).
 */
.about>a {
	color: #999;
	/* 右间距 */
	margin-right: 25px;
}

.copyright {
	color: #999;
	font-size: 12px;
	font-family: arial;
	line-height: 24px;
}
.copyright>a {
	color: #999;
}
.copyright>img {
	/* 修改图片的垂直对齐方式 -- 垂直居中对齐 top顶部 middle居中 bottom底部 baseline基线*/
	vertical-align: middle;
}
#record {
	/* 左间距 */
	margin-left: 15px;
}

我做出来的成品图：
在这里插入图片描述
还算是可以吧，如果哪位朋友觉得哪需要优化，可以告诉我，一起讨论一下，共同进步，谢谢。
还有第二个作业，比较简单，是表格的练习。
先放成品图：
在这里插入图片描述
我的代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>报考学校</title>
		<style type="text/css">
			.lo{
				background-color: gainsboro;
			}
			.one {
				width: 130px;
			}
			.two{
				width: 180px;
			}
			.three{
				width: 145px;
			}
			.four{
				width: 40px;
			}
			.five{
				width: 80px;
			}
			.six{
				width: 80px;
			}
			td {
				text-align: center;
				height: 28px;
				font-size: 12px;
			}
			.r {
				color: #FF0000;
			}
			#t {
				text-indent: 9em;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellspacing="0px" >
			<!-- 1 -->
			<tr>
				<td class="lo one">专业类别</td>
				<td class="lo two">专业名称</td>
				<td class="lo three">报考热度排名</td>
				<td class="lo four">层次</td>
				<td class="lo five">就业前景</td>
				<td class="lo six">开设院校</td>
			</tr>
			<!-- 2 -->
			<tr>
				<td rowspan="4">哲学类</td>
				<td>哲学</td>
				<td>全国25 哲学1</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 3 -->
			<tr>
				<!-- <td></td> -->
				<td>逻辑学</td>
				<td>全国56 哲学2</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 4 -->
			<tr>
				<!-- <td></td> -->
				<td>宗教学</td>
				<td>全国708 哲学4</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 5 -->
			<tr>
				<!-- <td></td> -->
				<td>伦理学</td>
				<td>全国678 哲学3</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 6 -->
			<tr>
				<td rowspan="6">经济学类</td>
				<td>经济学</td>
				<td>全国732 经济学12</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 7 -->
			<tr>
				<!-- <td></td> -->
				<td>经济统计学</td>
				<td>全国966 经济学15</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 8 -->
			<tr>
				<!-- <td></td> -->
				<td>国民经济管理</td>
				<td>全国49 经济学5</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 9 -->
			<tr>
				<!-- <td></td> -->
				<td>资源与环境经济学</td>
				<td>全国36 经济学4</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 10 -->
			<tr>
				<!-- <td></td> -->
				<td>商务经济学</td>
				<td>全国2 经济学1</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 11 -->
			<tr>
				<!-- <td></td> -->
				<td>能源经济</td>
				<td>全国73 经济学8</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 12 -->
			<tr>
				<td rowspan="2">财政学类</td>
				<td>财政学</td>
				<td>全国16 经济学2</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 13 -->
			<tr>
				
				<td>税收学</td>
				<td>全国1020 经济学16</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 14 -->
			<tr>
				<td rowspan="8">金融学类</td>
				<td>金融学</td>
				<td>全国801 经济学13</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 15 -->
			<tr>
				<!-- <td></td> -->
				<td>金融工程</td>
				<td>全国24 经济学3</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 16 -->
			<tr>
				<!-- <td></td> -->
				<td>保险学</td>
				<td>全国1090 经济学17</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 17 -->
			<tr>
				<!-- <td></td> -->
				<td>投资学</td>
				<td>全国661 经济学9</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 18 -->
			<tr>
				<!-- <td></td> -->
				<td>金融数学</td>
				<td>全国63 经济学7</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 19 -->
			<tr>
				<!-- <td></td> -->
				<td>信用管理</td>
				<td>全国685 经济学11</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 20 -->
			<tr>
				<!-- <td></td> -->
				<td>经济与金融</td>
				<td>全国60 经济学6</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
			<!-- 21 -->
			<tr>
				<!-- <td></td> -->
				<td>精算学</td>
				<td>全国1177 经济学18</td>
				<td>本科</td>
				<td class="r">点击查看</td>
				<td>点击查看</td>
			</tr>
		</table>
		<p id="t"><img src="img/QQ截图20200214221438.png"  ></p>
	</body>
</html>
SB_Hunter
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5大前端学习过程第二周（Day10）
01-08
一. 本节课学习目标。 掌握定位的应用。 重点 二. 定位练习1-小米官网1。 小米官网 手机 电话卡 > 手机 电话卡 电视 盒子 > 电视 ...
前端HTML该如何学习？
qq_57662137的博客
03-20 134
HTML作为前端开发的基础，是每个前端学习者需要掌握的技能之一。在学习HTML时，初学者可能会感到困惑和不知所措。本文将提供一些有关如何学习HTML的方法和技巧，以帮助您更快地掌握这一技能。
HTML_day05
big_lu的博客
11-17 133
杨燕 [email protected] qq:445190209 一.第二阶段学习内容 1.HTML5（2天） 搭建网页结构，实现内容的体现 http://www.cssmoban.com/ 高性能网站建设指南 2.AJAX(3天) 实现数据异步交互 3.AJAX项目（2天） 完成用户表数据的增删改查（从前端页面发起异步请求） 4.CSS3（6天） 美化HTML页面 5.Bootst...
前端学习流程
u011927449的博客
06-27 1228
第一步：了解前端发展前景。学习任何一个东西要明白它是干什么的，它的前景怎么样，自己适不适合学习。 第二步：基础知识学习。html和css没有多少逻辑性，容易上手，标签多记多用，网页经常使用到的标签有：　　　 　　内容详细标签： 　　　　<h1>~<h6>标题标签　　　　<pre>格式化文本　　　　<u>下划线（underline)　　　　<i>斜体字（italics）　　　　<cite>引用，通常为斜体　　　　<em>强调文
HTML+CSS前端学习
热门推荐
X-Dragon的博客
05-23 1万+
HTML相关示例及代码：D:\XML HTML+CSS+JS\day01 HTML和day02 HTML CSS1、什么是HTML是用来描述网页的一种语言 ! (超文本标记语言)  HTML使用的是标签来描述网页1.1 HTMLCSS JavaScript的关系HTML 名词 CSS  形容词 JS   动词1.2 HTML标签是什么与XML中标签基本一致 ,  由w3c组织定义的一系列的标签名称...
从零开始学前端：HTML解析过程
FBm的博客
07-15 2263
从事前端工作，也有近两年时间，但对前端知识体系没有系统学习或整理。为了巩固自己的基础以及更深入学习前端的技术，博主将从零开始学前端。并将学习过程记录以及所有知识点记录在《从零开始学前端》系列帖子。
HTML678day_htmlCSS_前端基础_
10-01
黑马前端课程第一阶段就业班学习资料，第6天-第8天内容
前端小白的成长Day01
01-08
HTML&CSS篇 1.vsCode 编码软件 ：! + tab 自动生成的固定格式 2.SEO优化 Search Engine Optimization 搜索引擎（百度、google等）优化，促进...职场小白的第一篇博客~ 欢迎小伙伴们的互相交流哦~ 有什么写的不对的地
frontendmentor-challenge-day1:这是我的第一个Frontend Mentor挑战。 建立了loopstudio登陆页面
05-25
移动导航切换中包含一小部分JS。 但是您也可以选择不使用JS！ 您可以使用任何喜欢的工具来帮助您完成挑战。 因此，如果您有想要练习的东西，请随时尝试。 您的用户应该能够： 根据设备的屏幕尺寸查看网站的最佳...
老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料
05-15
(5)\\python全栈day41-50\\python全栈s3 day41；目录中文件数:10个 ├─(1) 01 python s3 day41 JS的历史以及引入方式.avi ├─(2) 02 python s3 day41 JS的基础规范.avi ├─(3) 03 python s3 day41 JS的基本数据...
HTML5前端学习路线
liuyingv8的博客
03-06 399
一.HTML5初级开发工程师1.HTML5介绍互联网发展趋势H5语言的优势简单易学人人都能编程H5就业和薪资情况H5常见的项目与产品H5的未来与方向2.HTML基础HTML简介与历史版本常用开发软件常见标签与属性表格与表单标签规范与标签语义化实战：网页结构布局3.CSS基础css简介与基本语法常见的各种样式属性CSS选择器与标签类型理解盒子模型与CSS重置浮动与定位利用photoshop工具测量样...
to yangyan:呵呵~博客么，就是说想说的，写想写的，随意尽情就好~
weixin_30823683的博客
12-13 52
to yangyan:呵呵~博客么，就是说想说的，写想写的，随意尽情就好~ 转载于:https://www.cnblogs.com/mazhuang/archive/2008/12/13/1641736.html
HTML5大前端学习过程第一周（Day02）
SB_Hunter的博客
02-12 3252
2020年2月12日 一. 本节课学习目标。 掌握HTML常用的标签。 重点 掌握HTML常用的标签属性。 掌握emmet快捷键写法。 能够通过HTML基础标签完成简单网页制作。 二. 标签属性。 <meta charset = “UTF-8” /> meta标签，只有一个标签，单标签。 meta元信息，存放一些网页的设置内容。 charset = “UTF-8”，标签属性。 ...
如何正确学习WEB前端？以及如何找工作？
web3087800396的博客
12-16 1092
解释一下web前端工作是做啥的，Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 个人背景： 首先我的前端是自学的，而那个时候并没有前端...
CSS-显示模式
最新发布
Kevin7_35Durant的博客
05-07 388
显示模式 块级元素 独占一行 宽度默认是父级元素的100% 设置宽高属性生效 行内元素 一行可以显示多个，每个元素之间空格 设置宽高属性不生效 宽高由内容决定 行内块元素 一行可以设置多个 设置宽高属性生效 宽高也可以由内容决定 切换显示模式 属性名:display 属性值 效果 block 块级 inline-block 行内级
前端科举八股文-CSS篇
星海拾遗
04-25 1326
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
CSS-背景属性
Kevin7_35Durant的博客
05-06 596
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定。属性：background-attachment。属性名：background-position。属性名:background-repeat。属性名：background-image。属性名：backgourd-color。属性：background-size。属性值：跟color的使用方法一样。网页中，使用背景图片来装饰图片效果。作用：背景不会随着内容滚动。属性：background。属性值：url ()
CSS移动端弹性布局
weixin_57780589的博客
04-30 487
二倍图css初始化normalize.css盒子模型box-sizing特殊样式流式布局。
CSS 样式清单整理：解决IOS页面滑动卡顿和滚动条样式
weixin_44487537的博客
05-07 183
【代码】CSS 样式清单整理：解决IOS页面滑动卡顿和滚动条样式。
前端获取当前时间是本年第几周，含跨年
06-02
你可以通过JavaScript中的Date对象来获取当前时间，然后使用getWeek()函数来获取本年第几周。具体实现如下： ```javascript // 获取当前时间 ...如果当前时间是2022年1月1日，那么输出结果为“本年第1周”。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值