水球网页

最新推荐文章于 2023-12-11 22:51:00 发布
最新推荐文章于 2023-12-11 22:51:00 发布
阅读量331 收藏
点赞数
分类专栏： front end 文章标签： css javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46069922/article/details/108354419
版权

前端网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>POLO360练习</title>
		<!-- 引入reset.css用来清除浏览器的默认样式 -->
		<link rel="stylesheet" type="text/css" href="../project 01/css/reset.css"/>
		<!-- 引入page-index -->
		<link rel="stylesheet" type="text/css" href="../project 01/css/polo-index.css"/>
	</head>
	<body>
	
		
		<!--创建头部div header-->
		<!--header开始-->
		<div class="header w">
			
			<!-- 创建一个导航条 -->
			<ul class="nav">
				<li>
					<a href="#">HOME</a>
					<p>Back to home</p>
				</li>
				<li>
					<a href="#">PRODUCTS</a>
					<p>What we have for you</p>
				</li>
				<li>
					<a href="#">SERVICES</a>
					<p>Things we do</p>
				</li>
				<li>
					<a href="#">BLOG</a>
					<p>Follow our updates</p>
				</li>
				<li>
					<a href="#">CONTACT</a>
					<p>Ways to reach us</p>
				</li>
			</ul>
			<!-- 在div中设置logo -->
			<div class="logo">
				<a href="#" title="一个非常非常好的网站">
					<img src="img/logo.png" alt="网站的logo" />
				</a>
			</div>
		</div>
		<!--header结束-->
		
		<!--banner开始-->
		<div class="banner w">
			<img src="img/banner/banner01.png" alt="这是一个图片" />
			
			<!-- 创建一个div，用于放置导航按钮 -->
			<div class="pointerDiv">
				<a href="#"></a>
				<a class="active" href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
		</div>
		<!--banner结束-->
		
		<!--content开始-->
		<div class="content w clearfix">
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			<!-- 放置内容的三个div -->
			<div class="pl">
				<h2>Perfect Logic</h2>
				<p class="p1">All you want your website to do.</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic1.jpg" alt="小男孩" />
				</div>
				
				<p class="p2">
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt 
				</p>
				
				<a class="lm" href="#">Learn More</a>
			</div>
			
			
			<div class="cs">
				<h2>Complete Solution</h2>
				<p class="p1">A tool anything and everything you can think</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic2.jpg" alt="小女孩" />
				</div>
				
				<p class="p2">
					Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
				</p>
				
				<a class="lm" href="#">Learn More</a>
			</div>
			
			
			<div class="uc">
				<h2>Uber Culture</h2>
				<p class="p1">Fresh. Modern and ready for future</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic3.jpg" alt="大绿球" />
				</div>
				
				<p class="p2">
					Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
				</p>
				
				<a class="lm" href="#">Learn More</a>
				
			</div>
		</div>
		<!--content结束-->
		
		<!--contact开始-->
		<div class="contact w clearfix">
			<!-- 创建三栏div -->
			<div class="sc">
				<h2>Social Connection</h2>
				<!-- 设置段落 -->
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<!-- 设置小图标的div -->
				<div class="icon">
					<a href="#"><img src="img/rss.png" /></a>
					<a href="#"><img src="img/fb.png" /></a>
					<a href="#"><img src="img/in.png" /></a>
					<a href="#"><img src="img/yt.png" /></a>
					<a href="#"><img src="img/tw.png" /></a>
				</div>
				
				<h2 class="nl">Newsletter</h2>
				
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				
				<!-- 创建一个表单 -->
				<form action="#">
					<input class="txt" type="text" placeholder="your email address" />
					<button class="btn">Subscribe</button>
				</form>
				
			</div>
			
			<!-- 联系栏中间 -->
			<div class="co">
				<!-- 创建一个标题 -->
				<h2>Contact</h2>
				<!-- 创建一个表单 -->
				<form action="#">
					<!-- 
						在文本框和文本域中可以通过placeholder来指定提示文字（水印）
						这个属性在IE8及以下的浏览器中不支持，如果要兼容IE8需要使用JS
					-->
					<input class="txt" type="text" placeholder="your name"  />
					<input class="txt" type="text" placeholder="your email address" />
					<textarea class="tarea" placeholder="message"></textarea>
					<button class="btn">Send it</button>
				</form>
			</div>
			
			<div class="nu">
				<h2>News Updates</h2>
				<p>
					<img src="img/pic/1.gif"/>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				</p>
				<p>
					<img src="img/pic/2.gif"/>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
				</p>
				<p class="no-margin">
					<img src="img/pic/3.gif"/>
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
				</p>
				<button class="btn">Visit our Blog</button>
			</div>
			
		</div>
		<!--contact结束-->
		
		<!--footer开始-->
		<div class="footer">
			<div class="w">
				<p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
				<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
				<p><a href="#">Home</a>  | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p>
				<p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p>
			</div>
		</div>
		<!--footer结束-->
		
		
		<!-- 处理ie6的png问题 -->
		<!--[if IE 6]>
			<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
			<script type="text/javascript">DD_belatedPNG.fix("div,img,a,h1");</script>
		<![endif]-->
	</body>
</html>



body {
    /*设置body的背景图片，水平方向重复*/
    background: url(../img/bd-bg.png) repeat-x;
}

/*
 * 解决高度塌陷问题clearfix
 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.clearfix {
    zoom: 1;
}

/*
 * 固定元素的宽度和居中
 */
.w {
    width: 940px;
    margin: 0 auto;
}

/*设置header*/
.header {
    /*background-color: #bfa;*/
    /*设置一个上内边距*/
    padding-top: 37px;
    /*设置一个下内边距*/
    padding-bottom: 46px;
}

/*设置logo的位置*/
.logo {
    margin-left: 15px;
}

/*
 * 设置导航条
 */
.nav {
    /*设置向右浮动*/
    float: right;
    /*设置一个上外边距*/
    margin-top: 22px;
}

.nav li {
    /*设置向左浮动*/
    float: left;
    /*设置左右内边距*/
    padding: 0 10px 8px;
    /*设置左边框*/
    border-left: 1px #d6d6d6 dotted;
}

/*设置导航条中的超链接*/
.nav a {
    /*设置字体颜色*/
    color: #666;
    /*设置字体*/
    font: bold 14px Georgia;
    /*去除下划线*/
    text-decoration: none;

}

/*设置超链接的移入效果*/
.nav a:hover {
    color: #a1a1a1;
    text-decoration: underline;
}

/*
 * 设置导航中的小标题
 * 在chrome浏览器中字体最小支持到12px
 * 	1-11都显示为12px
 */
.nav p {
    /*字体颜色*/
    color: #b7b7b7;
    /*字体大小*/
    font: 11px tahoma;
}

/*
 * 设置banner
 */
.banner {
    /*设置高度*/
    height: 356px;
    /*设置背景*/
    background: url(../img/banner-bg.png) no-repeat bottom center;
    /*开启一个相对定位*/
    position: relative;
}

/*设置导航按钮*/
.pointerDiv {
    /*开启绝对定位*/
    position: absolute;
    /*为导航点进行定位*/
    top: 314px;
    left: 15px;
}

.pointerDiv a {
    /*设置a浮动*/
    float: left;

    /*设置宽度和高度*/
    width: 17px;
    height: 17px;

    /*设置一个左外边距*/
    margin-left: 4px;

    background: url(../img/sprite.png) no-repeat;
}

/*设置超链接的hover*/
.pointerDiv .active,
.pointerDiv a:hover {
    background: url(../img/sprite.png) no-repeat -27px 0px;
}

/*设置content部分*/

.content h1 {
    /*设置文本居中*/
    text-align: center;
    /*设置字体*/
    font: bold 24px Georgia;
    /*设置上内边距*/
    padding: 6px 0 20px 0;
    /*设置一个下外边距*/
    margin-bottom: 38px;
    /*设置背景*/
    background: url(../img/line.png) no-repeat bottom center;
}


/*
 * 中间的三个div
 */
.content .pl,
.content .cs,
.content .uc,
.contact .sc,
.contact .co,
.contact .nu {
    /*向左浮动*/
    float: left;
    width: 300px;
}

/*
 * 给div添加左右边距
 */
.content .cs,
.contact .co {
    margin: 0 20px;
}

/*设置div中的标题*/
.content h2 {
    color: #11719e;
    font: 21px Georgia;
}

.content .p1 {
    color: #8c8c8c;
    font: 12px Helvetica;
}

/*设置图片div*/
.content .imgDiv {
    width: 299px;
    height: 190px;
    background: url(../img/img-bg.png) no-repeat;
    /*设置上下外边距*/
    margin: 16px 0px 10px 0px;
    /*设置水平居中*/
    text-align: center;
    /*设置上内边距*/
    padding-top: 12px;
}

/*设置第二个段落*/
.content .p2 {
    height: 92px;
    color: #3e3e3e;
    font: 13px Helvetica;
    word-spacing: 2px;
}

/**
 * 设置按钮的样式
 */
.content .lm {
    /*设置块元素*/
    display: block;
    /*设置宽和高*/
    width: 163px;
    height: 40px;
    /*设置背景*/
    background: url(../img/sprite.png) no-repeat 0px -70px;
    /*设置下划线*/
    text-decoration: none;
    /*设置文字*/
    color: #016999;
    font: 12px/40px Helvetica;
    /*设置文字的缩进*/
    text-indent: 1em;
    /*设置下外边距*/
    margin-bottom: 35px;
}

/*设置背景*/
.contact {
    background: url(../img/line.png) no-repeat top center;
}


/**
 * 设置联系栏中的表单项
 */
.contact .txt {
    width: 276px;
    height: 33px;
    line-height: 33px;
    /*
	 * 设置背景图片
	 */
    background: url(../img/input.png) no-repeat;
    /*单独为IE6设置一个背景不随元素滚动*/
    _background-attachment: fixed;

    /*
	 * 去除默认边框
	 */
    border: none;

    /*去除默认的内边距*/
    padding: 0px 10px;
    margin: 0px 0px 16px;
}

.contact .tarea {
    width: 276px;
    height: 114px;
    background: url(../img/textarea.png) no-repeat;
    /*单独为IE6设置一个背景不随元素滚动*/
    _background-attachment: fixed;
    /*
	 * 去除默认边框
	 */
    border: none;
    /*
	 * 去除滚动条
	 */
    overflow: auto;
    /*
	 * 设置文本域不能调整大小
	 */
    resize: none;

    /*
	 * 去除默认内外边距
	 */
    padding: 10px;
    margin: 0;
}

.contact .btn {
    width: 163px;
    height: 32px;
    background: url(../img/sprite.png) no-repeat 0px -27px;
    border: none;

    /*
	 * 去除默认内外边距
	 */
    padding: 0;
    margin: 11px 0px 23px;

    /*设置字体*/
    color: white;
    font: 13px Georgia;
    /*设置文字的位置*/
    text-align: left;
    text-indent: 1em;
    /*
	 * cursor可以用来设置鼠标指针的样式
	 */
    cursor: pointer;

}

/*
 * 设置标题
 */
.contact h2 {
    color: #444;
    font: 18px/1 georgia;
    /**
	 * 设置下边框
	 */
    border-bottom: 1px dashed #d3d3d3;
    /*
	 * 设置内边距
	 */
    padding: 44px 0px 10px;
    /*设置一个下外边距*/
    margin-bottom: 15px;
}

/*设置联系栏左侧*/
.sc .p1 {
    color: #444;
    font: 12px/1 Helvetica;
}

/*设置小图标*/
.sc .icon {
    /*设置字体大小为0，去除空格*/
    font-size: 0;
    /*设置上外边距*/
    margin-top: 4px;
}

.sc .icon a {
    margin-right: 6px;
}

/*设置左侧的第二个标题*/
.sc .nl {
    font: bold 18px/1 "gill sans mt";

    /*设置内边距*/
    padding: 34px 0px 10px;

}

/*设置左侧的表单项*/
.sc .txt {
    /*设置上外边距*/
    margin-top: 15px;
    /*为ie6设置上外边距*/
    _margin-top: 18px;
    margin-bottom: 0px;
}

/*设置联系栏右侧*/

.nu p {
    color: #444;
    font: 12px/1 helvetica;
    height: 58px;
    /*单独为IE6设置一个高度*/
    _height: 60px;
    /**
	 * 设置下边框
	 */
    border-bottom: 1px dashed #d3d3d3;

    margin-bottom: 14px;
    padding-bottom: 9px;
}

.nu .no-margin {
    margin-bottom: 0px;
}

.nu img {
    /*设置向左浮动*/
    float: left;
    margin-right: 8px;

}

.nu .btn {
    _margin-left: -1em;
}

/*设置底部*/
.footer {
    height: 173px;
    background: #333;
    /*设置上边框*/
    border-top: 10px solid #4c4c4c;
}

/*
 * 设置底部的文字的样式
 */
.footer a,
.footer p {
    color: #999;
    font: 11px Helvetica;
    text-decoration: none;
}

/*
 * 设置a元素的hover
 */
.footer a:hover {
    color: #cccaca;
    text-decoration: underline;
}

.footer p {
    margin-left: 8px;
    margin-right: 23px;
    margin-bottom: 6px;
}

.footer .w {
    padding-top: 18px;
}

.footer .copy {
    float: right;
    /*处理双倍边距的bug*/
    display: inline;
}
碧水金睛兽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LVGL库实现的简单实时时钟表盘示例代码
MyLovelyJay的博客
03-25 4092
LVGL库实现的简单实时时钟表盘示例代码
欧美水球模板
04-01
【标题】"欧美水球模板"所指的是一款专门设计用于展示水球运动相关内容的网页模板。这样的模板通常由专业的网页设计师制作，旨在为网站提供一个具有吸引力且符合水球运动特色的外观。它可能包含与水球相关的图像、...
littleVGL学习笔记4——Tasks任务系统
贾贾的博客
07-08 8416
Tasks任务系统介绍   littleVGL 自带了一个任务管理系统,此任务系统除了给 littleVGL 内部使用外,还开放出来给我们用户使用,这给我们的应用程序设计带来了极大的便利,它支持6个任务优先级,高优先级的任务可以抢占低优先级的任务,注意,此任务管理系统是非实时的,因为任务的时效性是取决于 lv_task_handler()函数的调用,而 lv_task_handler()函数一般放在 main 函数主循环中进行调用,所以你也要确保 main 函数主循环中不能有其他过大的延时存在,满足上述要求
LVGL7.0设置界面背景
qq_36690796的博客
01-06 1万+
界面背景 1、界面纯色背景创建 创建背景纯色 void Home_Page_Create(void) { lv_obj_t* bgk; bgk = lv_obj_create(lv_scr_act(), NULL);//创建对象 lv_obj_clean_style_list(bgk, LV_OBJ_PART_MAIN); //清空对象...
LVGL_V8.3入门四---圆形表盘UI设计(字体、图片、时间显示设计)
xddwg521125的博客
12-11 4042
在现代界面设计中，用户体验至关重要。表盘是一种直观而有效的方式，通过图形化的形式向用户传达信息。为了创造出令人印象深刻的用户界面，我选择使用LVGL（LittlevGL）库，这是一个功能强大而灵活的开源图形库。在这篇博客中，我将分享我的经验，介绍如何使用LVGL创建一个引人注目的圆形表盘UI。通过这篇博客，你将学到如何使用LVGL创建一个引人注目的圆形表盘UI。LVGL提供了丰富的功能和灵活性，使得用户界面的设计变得轻而易举。
LVGL_V8.2 时钟动画 （持续更新中）
woaihetang的博客
11-22 4631
本文章主要基于lvgl_v8.2实现多种表盘样式
jQuery10种不同的水球效果
02-18
在网页设计中，视觉效果是吸引用户注意力的关键因素之一，其中动态效果的运用可以增加页面的趣味性和互动...无论是在网页计数器上展示数据的变化，还是作为页面的装饰元素，这些水球效果都能为网页增添生动活泼的氛围。
Python绘制动态水球图过程详解
09-16
`render()`方法用于将水球图渲染为HTML文件，便于在网页中展示。 你可以自定义水球图的颜色，只需在`add()`方法中添加`color`参数，如下所示： ```python c = ( Liquid() .add("完成率", [0.5], is_outline_show=...
Canvas 制作动态进度加载水球详解及实例代码
09-01
Canvas是HTML5中的一种绘图技术，允许开发者在网页上绘制图形。本篇文章将深入讲解如何使用Canvas制作动态进度加载的水球效果，并提供实例代码供参考。 首先，我们需要了解Canvas的基本用法。Canvas是一个HTML元素...
基于Canvas的简单实用的jQuery水球图表插件
12-11
jQuery的核心功能包括选择器、DOM操作、事件处理、动画以及Ajax交互，这些都是创建交互式网页的关键部分。 Canvas是HTML5的一个重要特性，它允许通过JavaScript动态绘制图形。Canvas是一个二维绘图上下文，开发者...
LittelvGL使用教程
12-31
LittelvGL使用中文教程 https://github.com/littlevgl/lvgl/issues/125
基于LVGL的手表UI架构设计
StarEmbedded的博客
06-06 9323
1、软件信息平台：ubuntu 18.04lvgl：V7.11FreeRTOS：V10.4.3参考代码：lvgl：https://github.com/lvgl/lvgl.git模拟器：https://github.com/lvgl/lv_sim_eclipse_sdl.git主要数据结构（1）activity生命周期及事件管理（2）activity描述（3）手势事件定义（4）屏幕切换方式定义activity 示例activity 效果演示表盘：app list：system app：轨迹 app：二维码
lvgl gauge（表盘控件）
chenliang0224的专栏
01-13 2732
//9. 仪表控件 //设置时钟的网址：https://blog.csdn.net/mymycsdn321/article/details/108060627 //9.1 设置仪表的样式 static lv_style_t gauge_style; lv_style_copy(&gauge_style, &lv_style_pretty_color); gauge_style.body.main_color = lv_color_hex3(0x666); /*开始的刻度..
【Python数据分析】利用Python删除EXCEL表格中指定的列数据或行数据
热门推荐
Python_20220416的博客
06-04 2万+
【Python数据分析】利用Python删除EXCEL表格中指定的列数据或行数据。想获取代码文件，请微信关注微信公众号“闲谈项目管理”，对话框回复“数据分析案例5”即可获得文件下载链接。
ESP32 开发笔记(四）LVGL控件学习 Chart 图表控件
cnicfhnui的博客
12-03 9100
先看效果，创建三个不同风格的图表控件来了解图表控件的使用 此文章为盖楼文章，为组织目录链接用，未写教程，教程更新后会删除此行 开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674 一、开发板简介 二、开发环境搭建 windows ESP32例程为C语言开发，并非Python/Arduino/AT指令开发，基于ESP-IDF_V4.2框架库
LVGL 8.2.0之Faded area line chart with custom division lines
mygod2008ok的专栏
03-30 647
绘制事件处理函数 static lv_obj_t* chart1; static lv_chart_series_t* ser1; static lv_chart_series_t* ser2; static void draw_event_cb(lv_event_t* e) { lv_obj_t* obj = lv_event_get_target(e); //获取事件对象 /*Add the faded area before the lines are drawn*/ lv
lvgl函数说明 V6 V7版本对比
原初引力
11-23 3096
一.透明度设置 Version6: lv_obj_set_opa_scale(imgLogo,LV_OPA_TRANSP); Version7:
LVGL笔记15–lv_bar进度条
未来可期
02-15 1823
LVGL笔记15–lv_bar进度条 lv_bar 进度条它由背景和指示器俩部分构成,这俩部分的样式都可以被单独设置,然后此进度条会根据它的宽和高的大小来自动决定它是水平进度条还是垂直进度条,可以通过lv_bar_set_range 接口来设置进度条的数值范围,通过 lv_bar_set_value 接口来设置一个新的进度值,与此同时可选一个进度变化的动画效果。默认的进度条样式比较一般，通过设置样式可以把进度条设置的美观一些。 lv_bar进度条主要数据类型 enum { LV_BAR_STYL
LVGL lv_bar进度条（13）
jiang_2018的博客
01-13 1259
lv_bar 进度条包括背景和指示器（INDIC），高和宽决定是水平还是竖直进度条 样式 /** Bar parts */ enum { LV_BAR_PART_BG, /** Bar background style. */ LV_BAR_PART_INDIC, /** Bar fill area style. */ _LV_BAR_PART_VIRTUAL_LAST }; typedef uint8_t lv_bar_part_t; 例子 void lv_ex_bar_1(v
echartas水球
最新发布
12-22
以下是使用PyEcharts绘制水球图的示例代码： ```python from pyecharts import options as opts from pyecharts.charts import Liquid def draw_liquid_chart(): liquid = ( Liquid() .add("Liquid", [0.6]) # ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值