Web程序设计-实验02 CSS页面布局

【实验主题】

影视网站前台模板页设计

【实验任务】

1、浏览并分析多个影视网站（详见参考资源，建议自行搜索更多影视网站）的整体版面布局，对比同一网站不同页面（主页、列表页、详情页）的元素异同——剔除变化的，留下固定的元素就是本次任务。

2、新建 index.html和 style.css文件，用HTML标记编写页面元素，运用 CSS+DIV 实现页面布局。

1）至少包含 页首（header）、导航（nav）、内容（main）和页脚（footer）等几个单元。

2）在 页首（header）、导航（nav）和页脚（footer）等单元输入合适的内容（文字、图片等），页面添加 logo。

3）内容（main）单元暂时留空。

3、在完整地编写完成任务2后，仿照技术博客（详见参考资源），在内容（main）单元撰写实验报告，结合所写代码、配以图示说明，详细分析您的页面布局技术细节。

1）为避免字符转义的繁琐，报告中涉及的源代码可以作为内容放置到<textarea>元素中。

2）对报告中涉及的不同内容分别定义合理的 CSS样式，以方便舒适阅读。

【效果图】

全程手撸

 

 【index.html 文件】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>影视列表页</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="container">
			<div class="header">
				<a href="#">收藏</a>
				| HI，欢迎观看 ！
				<a href="#">【登录】</a>
				<a href="#">【注册】</a>
				<form action="" method="post">
					客户服务<select name="seivice">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
					网站导航<select name="site">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
					我收藏的影片<select name="collect">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				</form>
			</div>
			<a class="banner"
				href="https://v.youku.com/v_show/id_XNjM3Nzg1NjE0MA==.html?s=bdee93b23a4e46c09039&scm=20140719.manual.15358.show_bdee93b23a4e46c09039&spm=a2hja.14919748_WEBHOME_NEW.drawer1.d_zj1_4"
				target="_blank"></a>
			<div class="nav">
				<a href="#">首页</a>
				<a href="#">电视剧</a>
				<a href="#">电影</a>
				<a href="#">娱乐</a>
				<a href="#">综艺</a>
				<a href="#">动漫</a>
				<a href="#">微电影</a>
				<a href="#">片花</a>
				<a href="#">脱口秀</a>
			</div>
			<div class="sidebar">
				<div class="headSidebar">按地区</div>
				<a href="#">大陆</a>
				<a href="#">香港</a>
				<a href="#">台湾</a>
				<a href="#">韩国</a>
				<a href="#">美国 </a>
				<div class="headSidebar">按类型</div>
				<a href="#">古装</a>
				<a href="#">武侠</a>
				<a href="#">警匪</a>
				<a href="#">军事</a>
				<a href="#">神话 </a>
				<div class="headSidebar">按状态</div>
				<a href="#">更新中</a>
				<a href="#">全集</a>
				<a href="#">近期上映</a>
				<a href="#">仅预告</a>
			</div>
			<div class="middlecontent">
				<div class="watch">
					首页 > 电视剧 > 盗墓笔记
				</div>
				<textarea name="code" cols="137" rows="50">
					* {
						margin: 0;
						padding: 0;
						/* 清除用户代理样式 */
					}
					
					.container {
						width: 1300px;
						margin: 0 auto;
						font-family: Arial, Helvetica, sans-serif;
					}
					
					a {
						text-decoration: none;
					}
					
					.header a {
						color: black;
					}
					
					.header a:hover {
						color: rgb(255, 102, 0);
					}
					
					.header {
						padding: 0px 60px;
						height: 30px;
						line-height: 30px;
						background-color: rgb(247, 247, 247);
						border-bottom-style: solid;
						border-bottom-color: rgb(218, 218, 218);
						font-size: 12px;
					}
					
					.header form {
						display: inline-block;
						float: right;
					}
					
					.banner {
						display: block;
						height: 120px;
						background: black url(./image/banner.jpg) no-repeat scroll 10px -195px;
					}
					
					.nav {
						font-size: 20px;
						height: 50px;
						text-align: center;
						background-color: rgb(36, 36, 35);
						margin-bottom: 10px;
					}
					
					.nav a {
						display: inline-block;
						width: 124px;
						color: white;
						line-height: 50px;
					}
					
					.nav a:hover {
						background-color: rgb(255, 102, 0);
					}
					
					.sidebar {
						float: left;
						width: 180px;
					}
					
					.middlecontent {
						float: left;
						padding-left: 20px;
					}
					
					.middlecontent .watch {
						width: 1000px;
						height: 50px;
						font-size: 20px;
						line-height: 50px;
						border-bottom-style: solid;
						border-bottom-color: rgb(132, 189, 0);
						margin-bottom: 20px;
					}
					
					.headSidebar {
						font-size: 20px;
						width: 180px;
						height: 50px;
						line-height: 50px;
						color: black;
						background-color: rgb(132, 189, 0);
						text-indent: 60px;
					}
					
					.sidebar a {
						font-size: 20px;
						display: block;
						width: 180px;
						height: 50px;
						line-height: 50px;
						color: black;
						background-color: rgb(250, 250, 250);
						text-indent: 60px;
					}
					
					.sidebar a:hover {
						background-color: rgb(255, 102, 0);
					}
					
					.textcol {
						clear: left;
						padding-top: 20px;
						font-size: 25px;
						color: rgb(132, 189, 0);
					}
					
					.collaborations {
						background-color: rgb(250, 250, 250);
						text-align: center;
						border-top-style: solid;
						border-top-color: rgb(132, 189, 0);
					}
					
					.collaborations a {
						display: inline-block;
						width: 180px;
						height: 72px;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						margin: 10px;
						margin-bottom: 20px;
					}
					
					.collaborations .col1 {
						background-image: url(./image/cctv.png);
					}
					
					.collaborations .col2 {
						background-image: url(./image/youku.png);
					}
					
					.collaborations .col3 {
						background-image: url(./image/sohu.png);
					}
					
					.collaborations .col4 {
						background-image: url(./image/leshi.png);
					}
					
					.collaborations .col5 {
						background-image: url(./image/aiqiyi.png);
					}
					
					.collaborations .col6 {
						background-image: url(./image/mangguotv.png);
					}
					
					.collaborations .col7 {
						background-image: url(./image/tecentvideo.png);
					}
					
					.collaborations .col8 {
						background-image: url(./image/1.jpg);
					}
					
					.collaborations .col9 {
						background-image: url(./image/2.png);
					}
					
					.collaborations .col10 {
						background-image: url(./image/3.png);
					}
					
					.collaborations .col11 {
						background-image: url(./image/4.png);
					}
					
					.collaborations .col12 {
						background-image: url(./image/5.png);
					}
					
					.copyright {
						text-align: center;
					}
				</textarea>
			</div>
			<div class="textcol">合作专区</div>
			<div class="collaborations">
				<a href="#" class="col1"></a>
				<a href="#" class="col2"></a>
				<a href="#" class="col3"></a>
				<a href="#" class="col4"></a>
				<a href="#" class="col5"></a>
				<a href="#" class="col6"></a>
				<a href="#" class="col7"></a>
				<a href="#" class="col8"></a>
				<a href="#" class="col9"></a>
				<a href="#" class="col10"></a>
				<a href="#" class="col11"></a>
				<a href="#" class="col12"></a>
			</div>
			<div class="copyright">Copyright 2015-2020 Q- Walking Fashion E&s 漫步时尚广场(QST教育)版权所有</div>
			<div class="copyright">中国青岛 高新区河东路8888号 青软教育集团 咨询热线:400-658-0166 400-658-1022</div>
		</div>
	</body>
</html>

 【style.css 文件】

* {
	margin: 0;
	padding: 0;
	/* 清除用户代理样式 */
}

.container {
	width: 1300px;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	text-decoration: none;
}

.header a {
	color: black;
}

.header a:hover {
	color: rgb(255, 102, 0);
}

.header {
	padding: 0px 60px;
	height: 30px;
	line-height: 30px;
	background-color: rgb(247, 247, 247);
	border-bottom-style: solid;
	border-bottom-color: rgb(218, 218, 218);
	font-size: 12px;
}

.header form {
	display: inline-block;
	float: right;
}

.banner {
	display: block;
	height: 120px;
	background: black url(./image/banner.jpg) no-repeat scroll 10px -195px;
}

.nav {
	font-size: 20px;
	height: 50px;
	text-align: center;
	background-color: rgb(36, 36, 35);
	margin-bottom: 10px;
}

.nav a {
	display: inline-block;
	width: 124px;
	color: white;
	line-height: 50px;
}

.nav a:hover {
	background-color: rgb(255, 102, 0);
}

.sidebar {
	float: left;
	width: 180px;
}

.middlecontent {
	float: left;
	padding-left: 20px;
}

.middlecontent .watch {
	width: 1000px;
	height: 50px;
	font-size: 20px;
	line-height: 50px;
	border-bottom-style: solid;
	border-bottom-color: rgb(132, 189, 0);
	margin-bottom: 20px;
}

.headSidebar {
	font-size: 20px;
	width: 180px;
	height: 50px;
	line-height: 50px;
	color: black;
	background-color: rgb(132, 189, 0);
	text-indent: 60px;
}

.sidebar a {
	font-size: 20px;
	display: block;
	width: 180px;
	height: 50px;
	line-height: 50px;
	color: black;
	background-color: rgb(250, 250, 250);
	text-indent: 60px;
}

.sidebar a:hover {
	background-color: rgb(255, 102, 0);
}

.textcol {
	clear: left;
	padding-top: 20px;
	font-size: 25px;
	color: rgb(132, 189, 0);
}

.collaborations {
	background-color: rgb(250, 250, 250);
	text-align: center;
	border-top-style: solid;
	border-top-color: rgb(132, 189, 0);
}

.collaborations a {
	display: inline-block;
	width: 180px;
	height: 72px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 10px;
	margin-bottom: 20px;
}

.collaborations .col1 {
	background-image: url(./image/cctv.png);
}

.collaborations .col2 {
	background-image: url(./image/youku.png);
}

.collaborations .col3 {
	background-image: url(./image/sohu.png);
}

.collaborations .col4 {
	background-image: url(./image/leshi.png);
}

.collaborations .col5 {
	background-image: url(./image/aiqiyi.png);
}

.collaborations .col6 {
	background-image: url(./image/mangguotv.png);
}

.collaborations .col7 {
	background-image: url(./image/tecentvideo.png);
}

.collaborations .col8 {
	background-image: url(./image/1.jpg);
}

.collaborations .col9 {
	background-image: url(./image/2.png);
}

.collaborations .col10 {
	background-image: url(./image/3.png);
}

.collaborations .col11 {
	background-image: url(./image/4.png);
}

.collaborations .col12 {
	background-image: url(./image/5.png);
}

.copyright {
	text-align: center;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/536658.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

故障诊断 | 基于LSTM的滚动轴承故障诊断

故障诊断 | 基于LSTM的滚动轴承故障诊断

效果 概述 基于LSTM（长短期记忆网络）的滚动轴承故障诊断是一种利用深度学习技术来预测滚动轴承是否存在故障的方法。下面是一个基本的滚动轴承故障诊断的流程： 数据收集：首先，需要收集与滚动轴承相关的振动信号数据。这些数据可以通过传感器或振动监测系统获取。收集的数…
阅读更多...
如何对输入信号产生一个固定的时移(CODESYS信号时移FB)

如何对输入信号产生一个固定的时移(CODESYS信号时移FB)

1、同步性问题(跟随给定和跟随反馈的区别) 随动系统同步性问题(跟随给定和跟随反馈的区别)-CSDN博客文章浏览阅读39次。1、运动控制比例随动运动控制比例随动系统_正运动随动系统-CSDN博客PLC如何测量采集编码器的位置数据，不清楚的可以参看我的另一篇博文：三菱FX3U PLC高速…
阅读更多...
【绩效管理】建立员工绩效考核机制，提升企业绩效管理水平

【绩效管理】建立员工绩效考核机制，提升企业绩效管理水平

随着企业的迅猛发展&#xff0c;其内部管理问题日益突出&#xff0c;已经制约了企业的进一步发展。一方面&#xff0c;员工工作懒散、积极性不高&#xff0c;出错的次数也逐步上升&#xff0c;另一方面&#xff0c;管理者也无法有效评价员工的工作好坏。面对这些问题&#xff0…
阅读更多...
计算机网络常见面试总结

计算机网络常见面试总结

文章目录 1. 计算机网络基础1.1 网络分层模型1. OSI 七层模型是什么&#xff1f;每一层的作用是什么&#xff1f;2.TCP/IP 四层模型是什么&#xff1f;每一层的作用是什么&#xff1f;3. 为什么网络要分层&#xff1f; 1.2 常见网络协议1. 应用层有哪些常见的协议&#xff1f;2…
阅读更多...
02—js数据类型及相互转换

02—js数据类型及相互转换

一、数据类型 js把数据分为两类 基本类型&#xff1a;string number boolean undefined null 引用类型&#xff1a;object(fuction(可以执行) array&#xff08;数值下标&#xff0c;内部数据是有序的&#xff09;) 1.Number:数值类型&#xff0c;整数和小数 &#xff08…
阅读更多...
SpringMVC原理及工作流程

SpringMVC原理及工作流程

组件 SpringMVC的原理主要基于它的各个组件之间的相互协作交互&#xff0c;从而实现了Web请求的接收&#xff0c;处理和响应。 它的组件有如下几个&#xff1a; DispatcherServlet前端控制器 HandlerMapping处理器映射器 Controller处理器 ModelAndView ViewResolver视图…
阅读更多...
Mysql内存表及使用场景（12/16）

Mysql内存表及使用场景（12/16）

内存表&#xff08;Memory引擎&#xff09; InnoDB引擎使用B树作为主键索引&#xff0c;数据按照索引顺序存储&#xff0c;称为索引组织表&#xff08;Index Organized Table&#xff09;。 Memory引擎的数据和索引分开存储&#xff0c;数据以数组形式存放&#xff0c;主键索…
阅读更多...
前端CSS讲义1

前端CSS讲义1

什么是 CSS? CSS 指层叠样式表 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中&#xff0c;是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 样式对网页中元素…
阅读更多...
DAY03|203.移除链表元素、707.设计链表、206.反转链表

DAY03|203.移除链表元素、707.设计链表、206.反转链表

203.移除链表元素、707.设计链表、206.反转链表 LeetCode 203.移除链表元素LeetCode 707.设计链表LeetCode 206.反转链表双指针法递归法 LeetCode 203.移除链表元素 注意&#xff0c;在dummy上操作&#xff0c;返回也返回dummy->next 如果头铁想返回head&#xff0c;那样会…
阅读更多...
2024高交会-2024深圳高新技术展-高新技术成果交易会

2024高交会-2024深圳高新技术展-高新技术成果交易会

2024高交会-2024深圳高新技术展-2024高新技术成果展-中国高校技术交易会-第26届高交会-深圳高交会-深圳高科技展-深圳新科技展-深圳高新技术成果展 第二十六届中国国际高新技术成果交易会&#xff08;简称高交会&#xff09; 时间&#xff1a;2024年11月15日-19日 地址&#…
阅读更多...
点击按钮(文字)调起elementUI大图预览

点击按钮(文字)调起elementUI大图预览

时隔一年&#xff0c;我又回来了 ~ 最近在做后台&#xff0c;遇到一个需求&#xff0c;就是点击“查看详情”按钮&#xff0c;调起elementUI的大图预览功能&#xff0c;预览多张图片&#xff0c;如下图&#xff1a; 首先想到的是使用element-ui的el-image组件&#xff0c;但它是…
阅读更多...
NzN的数据结构--交换排序

NzN的数据结构--交换排序

篇接上文&#xff0c;今天要学习的就是交换排序&#xff0c;这么励志的日更博主&#xff0c;你怎么能不三连一下呢&#xff1f; 目录 一、基本思想 二、冒泡排序 三、快速排序 1. hoare版本 2. 挖坑法 3. 前后指针法 4. hoare版本优化 5. 非递归实现快速排序 一、基本…
阅读更多...
模拟移动端美团案例（react版）

模拟移动端美团案例（react版）

文章目录 目录 概述 项目搭建 1.启动项目&#xff08;mock服务前端服务&#xff09; 2.使用Redux ToolTik(RTK)编写store(异步action) 3.组件触发action并渲染数据 一、渲染列表 ​编辑 二、tab切换类交互 三、添加购物车 四、统计区域功能实现 五、购物车列表功能实现 六、控制…
阅读更多...
【Java集合进阶】泛型的通配符和综合练习

【Java集合进阶】泛型的通配符和综合练习

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …
阅读更多...
加速度JUSDO | 电子元器件商城行业调研及运营方案

加速度JUSDO | 电子元器件商城行业调研及运营方案

一、行业背景与竞品分析 随着电子元器件行业的快速发展&#xff0c;线上元器件商城已成为行业交易的重要渠道。目前市场上存在多个知名的元器件商城&#xff0c;如立创、云汉芯城、贸泽商城等&#xff0c;它们都提供了丰富的元器件产品和便捷的线上交易服务。 立创商城&#x…
阅读更多...
蓝桥杯第十三届c++大学B组详解

蓝桥杯第十三届c++大学B组详解

目录 1.九进制转十进制 2.顺子日期 3.刷题统计 4.修剪灌木 5.x进制的减法 6.统计子矩阵 7.积木画 8.扫雷 9.李白打酒 10.砍竹子 1.九进制转换十进制 题目解析&#xff1a;就是将2022的每一位拿出来乘以9的n-1次方的和就是最终答案。次方是从0开始的到n-1. #include &…
阅读更多...
蓝桥杯物联网竞赛_STM32L071_16_EEPROM

蓝桥杯物联网竞赛_STM32L071_16_EEPROM

仍然是没有考过的知识点 朴素的讲就是板子中一块不会因为断电重启而导致数值初始化的一片地址 要注意的是有时候容易把板子什么写错导致板子什么地址写坏了导致程序无法烧录&#xff0c;这个时候记得一直按flash键烧录&#xff0c;烧录时会报错&#xff0c;点击确定&#xff0…
阅读更多...
什么是MOV视频格式？如何把MP4视频转MOV视频格式？

什么是MOV视频格式？如何把MP4视频转MOV视频格式？

一&#xff0c;前言 当然可以&#xff0c;MP4视频可以转换为MOV格式。这两种格式都是常见的视频文件格式&#xff0c;它们都可以用于存储和播放视频内容。虽然它们的编码方式和特性有所不同&#xff0c;但使用合适的视频转换工具可以轻松地将MP4视频转换为MOV格式。 二&#…
阅读更多...
【洛谷 P8804】[蓝桥杯 2022 国 B] 故障 题解（概率论+条件概率+贝叶斯公式）

【洛谷 P8804】[蓝桥杯 2022 国 B] 故障 题解（概率论+条件概率+贝叶斯公式）

[蓝桥杯 2022 国 B] 故障 题目描述 在软件或系统开发中&#xff0c;我们会遇到各种各样的故障。为了从故障现象反推故障原因&#xff0c;工程师们会总结一种叫做相关性矩阵的二维表格&#xff0c;来表示故障原因与故障现象之间的关系。比如: 其中每行表示一种故障原因&#x…
阅读更多...
bugku-web-你从哪里来

bugku-web-你从哪里来

这里就这一句话提示&#xff0c;问我是不是谷歌的&#xff1f; 用谷歌浏览器访问 没看见什么变化 抓包查看 没有变化 这时我想到爬虫中的反爬策略中有一种&#xff0c;判断请求的当前界面来判断用户的起始判断位置 这时抓取报文 GET / HTTP/1.1 Host: 114.67.175.224:1516…
阅读更多...
最新文章

Copyright @ 2022~2023