8.综合案例：爱宠知识

最新推荐文章于 2022-11-22 10:12:10 发布
最新推荐文章于 2022-11-22 10:12:10 发布
阅读量2.5k 收藏 21
点赞数 2
分类专栏： Div+Css 文章标签： 综合 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neilro/article/details/79103433
版权

目标：将效果图转换为html界面。

截图：

素材：


代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body,ul,li{
		/*清除默认的内外边距属性*/
		margin: 0;
		padding: 0;
	}
	ul{
		background-color: #fff;
		height: 279px;
		width: 210px;
		margin-left: 10px;
		/*爱宠知识白色部分完整宽度为240px,其中两边的内边距为15x2=30px*/
		padding: 0 15px;
	}
	li{
		height: 30px;
		/*下边虚线*/
		border-bottom: 1px dashed #666;
		line-height: 30px;
		/*图标*/
		background: url("images/tb.gif") no-repeat left center;
		/*图标和文字的位置*/
		padding-left: 16px;
		/*去除列表的默认样式*/
		list-style: none;

	}
	li a{
		text-decoration: none;
	}
	 .box{
	 	/*定义整体界面宽高*/
	 	width: 260px;
	 	height: 327px;
	 	/*边框*/
	 	border: 1px solid #009900;
	 	/*盒子居中,div块相对整体body块居中*/
	 	margin: 10px auto;
	 	/*插入背景图片*/
	 	background: url("images/bg.gif");
	 }
	 .box .title{
	 	height: 23px;
	 	/*标题的外边距设置*/
	 	margin:10px 0 5px 10px ;
	 	/*爱宠知识左边的绿色小边:左边框*/
	 	border-left: 4px solid #C9E143;
	 	font: 16px/23px 微软雅黑;
	 	color: #fff;
	 	/*内边距缩进*/
	 	padding-left: 11px;

	 }
	</style>
</head>
<body>
	<div class="box">
		<div class="title">爱宠知识</div>
		<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>
	</div>
</body>
</html>


neilro
关注
  • 2
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)
qq_38517951的博客
05-07 237
🐕 宠物网页设计 、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。🏷️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的
宠物行业专题报告之二：爱宠有道，未来可期.rar
09-09
宠物行业专题报告之二：爱宠有道，未来可期
宠物行业专题报告之二：爱宠有道，未来可期（2021）（27页）.pdf
02-18
宠物行业专题报告之二：爱宠有道，未来可期（2021）（27页）.pdf
20210316-东莞证券-宠物行业专题报告之二：爱宠有道，未来可期.pdf
06-20
20210316-东莞证券-宠物行业专题报告之二：爱宠有道，未来可期.pdf
纯css3实现宠物小鸡实例代码
09-22
最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。下面小编给大家带来了纯css3实现宠物小鸡的相关知识，感兴趣的朋友一起看看吧
宠物行业专题报告之二：爱宠有道，未来可期-210316_宠物行业研究报告.pdf
06-14
宠物行业专题报告之二：爱宠有道，未来可期-210316_宠物行业研究报告.pdf
【Web】CSS（No.21）Css经典案例（三）《爱宠知识》
Sherry带你学Web
06-12 2708
需要素材点击图片联系我或私信、评论 效果图： 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱宠知识</title> <style> * { margin:0; padding:0;...
CSS 08-01 爱宠知识 案例思路笔记
Write less，do more
06-14 460
1.首先确定结构 *清除内外边距 1.整个为一个大盒子,测量高宽.W H 2.然后测量边框,border:1px solid red; 3.然后给bgi 4.然后给一个margin:20px auto 0; 5.最后分析给一个padding:10px 这里有宽所以会撑大!要减去 .box { width: 240px; height: 307px; margin: 20px auto 0; border: sol
大学生WEB前端静态网页——旅游介绍35页 响应式,
qq_524614081的博客
11-17 1244
web期末作业设计网页 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
宠物网页html+css.zip
04-26
登录注册+4个页面付费下载自取
JSP基于SSM爱宠宠物交易平台可升级SpringBoot源码案例设计.zip
最新发布
04-19
源码设计，具体请到资源详情查看使用前必读
宠物护理的网页制作(html+css+js)
weixin_50765519的博客
11-16 2493
       怎么说呢，本人前几天接到了同学的几个单子，说是帮忙做几个网页。说的是样式尽可能都不太一样，于是我千辛万苦，费了九牛二虎之力终于做出了6个样式不同的网站，我放一个我之前下载好的模板，经过自己的“改造”，摇身一变成为“高端”网页的网站，现把关键部分分享出来供大家学习和参考。 1、网站的头部，导航栏部分 这个部分好办，通过一些css样式来实现导航栏的一些选项是否选中 html关键代码： <div id="header"
html网页设计作业代码——蓝色版爱宠之家(5页) 致热爱动物网页设计作品 大学生爱宠专题网页设计作业模板 动物静态HTML网页模板下载
04-25 420
HTML5期末大作业：爱宠之家网站设计——蓝色版爱宠之家(5页) 致热爱动物网页设计作品 大学生爱宠专题网页设计作业模板 动物静态HTML网页模板下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求,
html页面小宠物代码大全,纯css3实现宠物小鸡实例代码
weixin_29144939的博客
06-03 2704
最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。所以最近用css3仿写了我每天都照顾的宠物小鸡的模样，第一次写，有些细节处理的不够好。先看最终效果图：接下来是我书写的步骤：首先是html,分别写出云朵，小鸡的身体，鸡冠，眼睛，嘴巴，腮红，翅膀，鸡爪接下来是css设置样式：先设置整体的背景色，使用的是线性渐变linear-gra...
web课程设计网页规划与设计---公司网站(5页 带下拉菜单)
qq_524614081的博客
11-22 412
HTML：结构CSS：样式 web前端开发技术 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
爱宠页面列表
weixin_30475039的博客
03-03 156
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,ul,li{ margin: 0; padding: 0; } ul,li{ ...
HTML5+CSS3 制作一个宠物信息的表单
qq_55786319的博客
10-21 305
<!doctype html> <html> <head> <meta charset="utf-8"> <title>汪汪</title> <style> body{background-color: antiquewhite;} </style> </head> <body> <form action="" method="post"> <fieldset
Java实现面向对象编程
热门推荐
GHHCNGC的博客
07-17 2万+
目录 第1章... 10 抽象和封装... 10 1.1用面向对象设计电子宠物系统... 14 1.1.1为什么使用面向对象... 14 1.1.2使用面向对象进行设计... 15 1.2通过创建对象实现领养宠物功能... 17 1.2.1创建类的对象... 17 1.2.2构造方法及其重载... 23 1.2.3常见错误... 28 1.3使用封装优化电子宠物系统的类... ...
每个人心目中都有一只自己心爱的小宠物，就请大家在python中利用类和对象的知识，创建出自己心目的爱宠吧。
05-31
好的，我可以帮你完成这个任务。我假设你的心目中的爱宠是一只猫咪，那么我们就可以创建一个名为Cat的类，具有以下属性和方法： 属性： - name：猫咪的名字 - age：猫咪的年龄 - color：猫咪的颜色 - gender：猫咪的性别 - weight：猫咪的体重 方法： - __init__(self, name, age, color, gender, weight)：初始化函数，用于初始化属性值。 - eat(self, food)：让猫咪吃东西的方法。 - sleep(self)：让猫咪睡觉的方法。 - play(self)：让猫咪玩耍的方法。 - meow(self)：让猫咪发出“喵”的声音的方法。 下面是具体的实现代码： ```python class Cat: def __init__(self, name, age, color, gender, weight): self.name = name self.age = age self.color = color self.gender = gender self.weight = weight def eat(self, food): print(self.name, "is eating", food) def sleep(self): print(self.name, "is sleeping") def play(self): print(self.name, "is playing") def meow(self): print(self.name, "says: meow") ``` 接下来，我们可以创建一个具体的猫咪对象，然后调用它的方法： ```python my_cat = Cat("Tom", 2, "grey", "male", 3.5) my_cat.eat("fish") my_cat.sleep() my_cat.play() my_cat.meow() ``` 输出结果为： ``` Tom is eating fish Tom is sleeping Tom is playing Tom says: meow ``` 这样，我们就成功创建了一只猫咪，并且让它执行了一些基本的操作。如果你想创建其他类型的宠物，也可以按照类似的方式进行实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值