最新动态页面

最新推荐文章于 2024-08-27 15:45:31 发布
最新推荐文章于 2024-08-27 15:45:31 发布
阅读量388 收藏
点赞数
文章标签： 蓝桥杯 html webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61718994/article/details/123035893
版权

实验室动态 招新 活动概述 最新成果 图片展示
关键词由CSDN通过智能技术生成

 html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="idx.css">
	</head>
	<body>
		<h1>最新动态</h1>
		<div class="banner">
			<div class="wrapper">
				<ul>
					<li><a href="#"></a></li>
				</ul>
				<ol>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ol>
			</div>
			<a href="#" class="prev">&lt;</a> 
			<a href="#" class="next"> &gt;</a>
		</div>
		<div class="box">
			<!-- hd头部 -->
			<div class="hd">
		    <h2>实验室动态</h2>
			</div>
			<!-- bd内容 -->
			<div class="bd"><ul>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
					<h4>这里是动态1。</h4>
					<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
			</ul></div>
		</div>
		<!-- 招新动态 -->
<div class="box1">
			<!-- hd1头部 -->
			<div class="hd1">
		    <h2>招新动态</h2>
			</div>
			<!-- bd1内容 -->
			<div class="bd1"><ul>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
			</ul></div>
		</div>
		<!-- 近日参加 -->
		<div class="box2">
			<!-- hd2头部 -->
			<div class="hd2">
		    <h2>近日参加</h2>
			</div>
			<!-- bd2内容 -->
			<div class="bd2"><ul>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
					<h4>这里是动态1。</h4>
					<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
				<li>
					<img src="tupian/微信图片_20220213105103.png" alt="">
				<h4>这里是动态1。</h4>
				<h5>2022.2.10</h5>
				</li>
			</ul></div>
		</div>
		<div class="hengxian"></div>
		<div class="hengxian1"></div>
		<div class="fanhui"><a href="#" >返回首页</a></div>
	</body>
</html>

css代码：


body {
	height:4000px;
}
/* 标题 */
h1 {
	text-align: center;
	font-size: 48px;
	line-height: 55px;
}

/* 轮播图设置 */
.banner {
	position: relative;
	height: 480px;
}
/* 版心设置 */
.wrapper {
	position: absolute;
    /* background-color: grey; */
	width: 1064px;
	height: 480px;
	margin-left: 50%;
	left:-532px;
	/* 背景 */
background: url(tupian/tu1.png)  no-repeat top center;
}
/* 版心放置图片设置 */
.wrapper ul {
	list-style: none;
}
/* 左右箭头设置 */
.prev,
.next {
	margin-top: -25px;
	width: 40px;
	height: 50px;
	/*设置背景透明*/
	 background-color: rgba(0,0,0,0.2); 
	font-size:25px;
	color: black;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
	top: 50%; 
	position: absolute;/* 绝对定位 */
}
.banner .prev {
	left: 41px;
}
.banner .next {
	right: 41px;
}
/* 底部小圆点设置 */
.banner ol {
	   list-style: none;
	 /*设置导航条的宽度和高度*/
	/* width: 200px;
	 height: 40px; */
	bottom: 15px;
	 /*设置ol的背景颜色*/
	 /* background-color: rgba(255,255,255,.2); */
	 /*绝对定位*/
	 position: absolute;
	 left: 50%;
	margin-left: -100px;
	border-radius: 20px;
}
.banner ol li {
	float: left;
	/*设置每个li标签的宽高*/
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: rgba(2555,255,255,0.4);
	margin: 10px;
	cursor: pointer;
}
/* 实验室动态 */
/* 标题 */
.box {
	margin-top: 64px;
	height: 880px;
}
.hd h2 {
	text-indent: 0.5em;
	letter-spacing: 0.02em;
	font-size: 36px;
    line-height: 41px;
}
.hd:after {
	content:'';
	display:block;
	width:400px;
	margin-top:-20px;
	border-bottom:2px solid grey;
}
/* 内容 */
/* 把li的父亲ul 修改得足够宽一行能装下4个盒子就不会换行 */
 .bd ul {
	list-style: none;
	width: 1500px;
	position: relative;
	margin-left: 50%;
	left: -680px;
}
.bd ul li {
	width: 317px;
	height: 397px;
	background-color: white;
	float: left;
	margin-right: 5px;
	margin-bottom: 10px;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);}
/* 盒子里的图片 */
.bd ul li img {
	width:100%;
}
/* 盒子里的文字内容 */
.bd ul li h4,
.bd ul li h5 {
	margin:12px 12px ;
}
.bd ul li h4:after {
	text-align: center;
	content:'';
	display:block;
	width:294px;
	margin-top:10px;
	border-bottom:2px solid grey;
}
/* 招新动态 */
.box1 {
	margin-top: 64px;
	height: 465px;
}
.hd1 h2 {
	text-indent: 0.5em;
	letter-spacing: 0.02em;
	font-size: 36px;
    line-height: 41px;
}
.hd1:after {
	content:'';
	display:block;
	width:400px;
	margin-top:-25px;
	border-bottom:2px solid grey;
}
/* 内容 */
/* 把li的父亲ul 修改得足够宽一行能装下4个盒子就不会换行 */
 .bd1 ul {
	list-style: none;
	width: 1500px;
	position: relative;
	margin-left: 50%;
	left: -680px;
}
.bd1 ul li {
	width: 317px;
	height: 397px;
	background-color: white;
	float: left;
	margin-right: 5px;
	margin-bottom: 10px;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);}
/* 盒子里的图片 */
.bd1 ul li img {
	width:100%;
}
/* 盒子里的文字内容 */
.bd1 ul li h4,
.bd1 ul li h5 {
	margin:12px 12px ;
}
.bd1 ul li h4:after {
	text-align: center;
	content:'';
	display:block;
	width:294px;
	margin-top:10px;
	border-bottom:2px solid grey;
}
/* 近日参加 */
.box2 {
	margin-top: 64px;
	height: 880px;
}
.hd2 h2 {
	text-indent: 0.5em;
	letter-spacing: 0.02em;
	font-size: 36px;
    line-height: 41px;
}
.hd2:after {
	content:'';
	display:block;
	width:400px;
	margin-top:-20px;
	border-bottom:2px solid grey;
}
/* 内容 */
/* 把li的父亲ul 修改得足够宽一行能装下4个盒子就不会换行 */
 .bd2 ul {
	list-style: none;
	width: 1500px;
	position: relative;
	margin-left: 50%;
	left: -680px;
}
.bd2 ul li {
	width: 317px;
	height: 397px;
	background-color: white;
	float: left;
	margin-right: 5px;
	margin-bottom: 10px;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);}
/* 盒子里的图片 */
.bd2 ul li img {
	width:100%;
}
/* 盒子里的文字内容 */
.bd2 ul li h4,
.bd2 ul li h5 {
	margin:12px 12px ;
}
.bd2 ul li h4:after {
	text-align: center;
	content:'';
	display:block;
	width:294px;
	margin-top:10px;
	border-bottom:2px solid grey;
}
	
.hengxian,
.hengxian1 {
	margin-top:64px;
	height:10px;
}
.hengxian:after,
.hengxian1:after {
	position: relative;
	margin-left: 50%;
	content:'';
	display:block;
	margin-top:10px;
	border-bottom:2px solid grey;
}
.hengxian:after {
	width: 414px;
	left: -207px;
}
.hengxian1:after {
	width: 196px;
	left: -98px;
}
.fanhui {
	margin-top: 56px;
	width: 630px;
	height: 50px;
	background: #C4C4C4;
	position: relative;
	margin-left: 50%;
	left: -315px;
	font-style: normal;
	font-weight: normal;
	font-size: 28px;
	line-height: 50px;
	display: table;
	text-align: center;
	
}
.fanhui a {
	text-decoration: none;
	color: #000000;
}

 页面展示：

 

 

 

begin 专注
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 动态网页实例 —— 页面处理
cccloveforever的博客
05-19 898
在 JavaScript中，提供了对 HTML,页面，尤其是 HTML页面元素的处理方法。从本文开始，着重介绍JavaScript对于HTML页面元素的处理方法。本文主要介绍文档页面元素的按位置访问，文档元素的按名称访问，动态修改页面元素的内容，尤其是对内容的修改。在本文最后，还给出一种动态改变页面样式的方法。
php 抓取动态网页_PHP-php如何抓取动态页面的数据
weixin_28717807的博客
03-09 1127
解决方案：直接抓取 http://jipiao.kuxun.cn/beijing-shanghai.html?2012-07-21#page_loc 的内容然后进行 html 分析即可。比如使用方式，代码如下：$url = "http://jipiao.kuxun.cn/beijing-shanghai.html?2012-07-21#page_loc";$contents = file_get_...
静态网页制作（html+css）、css浮动,练习（网页布局），清除浮动
m0_69034993的博客
06-24 4532
常用元素： div, hr, p, h1~h6, ul, ol, dl, form, table。float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟元素也应该浮动，以防止引起问题。网页布局第一准则：多个块元素纵向排列找标准流，多个块元素横向排列找浮动。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
HTML+CSS网页制作——香港眼镜
缘 源 园
03-25 382
实现的效果图： HTML框架 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=..
java动态页面_java之jsp实现动态网页
weixin_36234738的博客
02-12 1126
动态页面，说白了，就是根据一定的信息(条件)去改变呈现给用户的内容。而这里所提到的一定的信息，通常就是指，在一个表单中用户所输入的信息。先来看一个我们常见的用户登录界面吧。在这里我们可以看到一共有三个页面，登录界面、登录成功界面、登录失败界面。但是，实际上为了实现登录界面向两个分支进行跳转，这中间还会有一个空文本的文件，为页面的跳转提供一个方向(判断)。业务逻辑：首先4个页面，demo.html(...
静态页面和动态页面的区别
热门推荐
技术专家
09-09 1万+
什么是静态页面？什么是动态页面？两者有什么区别？很多不了解前端技术的人可能会认为静态页面就是一个内容固定不变，没有任何效果的页面，而动态页面则是页面非常丰富，有各种交互效果和动态效果的页面。其实这个理解是错误的。通过本篇文章的阅读，详细为大家分享一下静态页面和动态页面到底是什么，两者有什么区别。 什么是静态页面和动态页面？ 　　通俗的来讲，静态页面是随着HTML代码的生成，页面的内容和显示效果就基本不会发生变化（除非修改页面代码），而动态页面，虽然同样页面代码不发生变化，但是其显示的内容确实可以随着时间环
如何实现动态网页
qq_40180411的博客
08-31 1万+
所谓“动态”，并不是指放在网页上的GIF图片，动态网页技术有以下几个特点： 1. "交互性"，即网页会根据用户的要求和选择而动态改变和响应,将浏览器作为客户端界面,这将是今后WEB发展的大势所趋. 2. "自动更新"，即无须手动地更新HTML文档,便会自动生成新的页面,可以大大节省工作量. 3. "因时因人而变"，即当不同的时间,不同的人访问同一网址时会产生不同的页面。 除了早期的CGI外...
静态网页和动态网页
ccc369639963的博客
03-09 5256
静态网页和动态网页 本节我们了解一下静态网页和动态网页的相关概念。如果您熟悉前端语言的话，那么您可以快速地了解本节知识。 当我们在编写一个爬虫程序前，首先要明确待爬取的页面是静态的，还是动态的，只有确定了页面类型，才方便后续对网页进行分析和程序编写。对于不同的网页类型，编写爬虫程序时所使用的方法也不尽相同。 静态网页 静态网页是标准的 HTML 文件，通过 GET 请求方法可以直接获取，文件的扩展名是.html、.htm等，网面中可以包含文本、图像、声音、FLASH 动画、客户端脚本和其他插件程序等。静态网
动态网页的抓取
A_D_I_D_A_S的博客
09-19 963
在进行爬虫的时候，有时候我们在网页中看到的数据是一个样子的，但是抓取到的数据却是另外一个样子的。这是为什么呢？这个时候啊很可能我们抓取的是动态网页。动态网页的代码虽然没有改变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果二发生改变的。动态网页一般使用被称为 AJAX 的快速动态创建网页技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。那么这种网页该如何进行抓取呢...
scrapy爬取动态页面
Braylon的博客
04-30 7067
文章目录简介查看目标网站代码部分 简介 现在在整理原来写过的东西，这是一个比较简单的爬虫项目，就是进行动态页面的爬取，主要的难点是实现模拟点击。 查看目标网站 查看目标网站： 但是这不是我们的目标，我们要爬取的是点击热搜榜之后的热搜话题： 是这样的： 然后才能爬取，所以这是一个爬取动态页面的项目。 这里我用到了selenium库进行模拟操作，首先使用该库模拟点击然后进行数据的爬取。 要在sc...
最新游戏动态网页模板
01-21
【最新游戏动态网页模板】是一种专门用于展示游戏更新、新闻、活动等内容的网页设计模板，旨在为游戏爱好者提供一个互动且吸引人的平台。这个模板融合了现代网页设计的趋势和技术，如响应式布局、动态效果和丰富的...
My_phone网站设计.rar_phone_动态网页_动态页面_网页开发
09-21
下面将详细阐述动态网页、动态页面以及网页开发的相关知识点。 首先，动态网页是相对于静态网页而言的，它能够根据用户的行为或者服务器端的数据变化实时更新内容。动态网页通常基于服务器端的编程语言如PHP、Java...
JavaScript 动态网页设计期末大作业CHASMISH眼镜网（纯手打，高分项目）.zip
06-18
JavaScript 动态网页设计期末大作业CHASMISH眼镜网（纯手打，高分项目）。 JavaScript 动态网页设计期末大作业CHASMISH眼镜网（纯手打，高分项目）。 JavaScript 动态网页设计期末大作业CHASMISH眼镜网（纯手打，...
uIP 处理动态页面方法.doc
01-08
uIP 处理动态页面方法 uIP 处理动态页面方法是指在 uIP 微型 WEB 服务器中处理动态页面的方法。动态页面是指在客户端请求时，服务器端根据请求信息动态生成的 HTML 页面。uIP 处理动态页面方法可以使用 HttpWatch ...
动态网页模板
12-25
动态网页模板是一种特殊的网页设计，它利用编程语言如JavaScript、PHP、ASP.NET或Python等，将静态HTML页面转变为能够实时更新、交互性强的网络界面。这些模板通常包含预先设计的布局、样式和功能，使开发者可以快速...
今日算法：蓝桥杯基础题之“切面条”
沐爸的博客
08-27 732
经典算法题之切面条，对折 10 次后从中间切一刀能得到几根面条，你有答案吗？
【蓝桥杯青少组】第十五届省赛python(2024)
m0_54696634的博客
08-25 607
选择题做得飞快。编程题被绊住了...第四题 熟悉 等差数列求和公式即可，无需赘述第五题 果然是贪心算法，之前强化训练了一天，看来效果还是不够。
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 635
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
30分钟从零开始入门拿下 HTML
最新发布
Y_1215的博客
08-27 1194
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值