超能陆战队大白html代码,HTML加CSS技术打造超能陆战队的大白
一.应用知识点
1.2实验知识点
div布局
CSS相对定位
CSS各种属性的应用
1.3实验环境
本实验环境采用带桌面的Ubuntu Linux环境,实验中可能会用到桌面上的程序:
Firefox:浏览器,可以用在需要前端界面的课程里,只需要打开环境里写的HTML/JS页面即可;
GVim:非常好用的编辑器,最简单的用法可以参考课程Vim编辑器
1.4适合人群
本课程难度一般,只要你学过基本的HTML和CSS就能做出来。
二、开发准备
进入到/home/shiyanlou/目录下,新建空白文档:
命名为Baymax.html(其它名字也可以,但后缀名必须是.html):
使用gedit打开,准备编辑代码:
三、实验步骤
3.1编写HTML
下面通过div定义大白身体的各个部位:
Baymax
3.2添加CSS样式
我们已经使用HTML定义好「大白」的各个元素,现在就需要利用到CSS来绘制它的样式外表。
由于「大白」是白色的,为了更容易辨识,我们把背景设为深色。然后首先是头部:
再来添加眼睛和嘴吧。
#eye, #eye2 { width: 11px; height: 13px; background: #282828; border-radius: 50%; position: relative; top: 30px; left: 27px; /*旋转该元素*/
一个mini的「大白」,雏形初现:
接下来是躯干和腹部:
#torso, #belly { margin: 0 auto; height: 200px; width: 180px; background: #fff; border-radius: 47%; /*设置边框*/
赋予「大白」象征生命的心脏:
#heart{ width:25px;
还没有手和脚,怪萌怪萌的...「大白」需要温暖的手臂:
#left-arm, #right-arm { height: 270px; width: 120px; border-radius: 50%; background: #fff; margin: 0 auto; position: relative; top: -350px; left: -100px; transform: rotate(20deg); z-index: -1;
添加手指头:
#l-bigfinger, #r-bigfinger { height: 50px; width: 20px; border-radius: 50%; background: #fff; position: relative; top: 250px; left: 50px; transform: rotate(-50deg);
给大白加上腿:
#left-leg, #right-leg { height: 170px; width: 90px; border-radius: 40% 30% 10px 45%; background: #fff; position: relative; top: -640px; left: -45px; transform: rotate(-1deg); z-index: -2; margin: 0 auto;
一个完整的大白就出现在网页上了。
超能陆战队大白html代码,HTML加CSS技术打造超能陆战队的大白相关推荐
- 纯css打造超能陆战队--大白
纯css打造超能陆战队–大白 要点 思路 要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger ...
- Android APK加壳技术方案----代码实现
本文章由Jack_Jia编写,转载请注明出处. 文章链接:http://blog.csdn.net/jiazhijun/article/details/8746917 作者:Jack_Jia 邮 ...
- css应用网页设计,CSS技术在网页设计中的运用
多层模式表单(Cascading Style Sheet, CSS)是一种为超文本置标语言(HyperText Markup Language, HTML)提供增强补充服务的技术,可对每一个HTML的 ...
- html中写css代码,开发DIV CSS时 先写CSS代码还是先写HTML代码
相信良多LOVE用DIV+CSS技术启示重构网页的爱好者友好,在起源学习DIV+CSS的时分都邑想一个标题,想晓得DIV+CSS妙手或有教育者在开发制作html页面的时刻,下场是先写html照样先写c ...
- img 加载 svg占位符_如何使用SVG作为占位符以及其他图像加载技术
img 加载 svg占位符 by José M. Pérez 由JoséM.Pérez 如何使用SVG作为占位符以及其他图像加载技术 (How to use SVG as a Placeholder, ...
- iframe异步加载技术及性能
我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog ...
- vue“路由懒加载” 技术,让网页快速加载 (优化篇)
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载 所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
- 减少 JavaScript 代码量的原生技术
作者 | Anthony Ricaud 译者 | 弯月 责编 | 欧阳姝黎 出品 | CSDN(ID:CSDNnews) 以下为译文: 如今依赖 JavaScript 提供交互的网站越来越多 ...
- 【JavaWeb - 网页编程】一 HTML技术与CSS技术
第一章 HTML技术与CSS技术 创作日期:2021-12-19 1.1 网页简述 1.1.1 B/S软件的结构 1.1.2 前端的开发流程 1.1.3 网页的组成部分 页面由三部分内容组成: 内容( ...
最新文章
- 【深度学习】这才是深度学习的本源
- Kali Linux重设root密码
- 如何去写一手好 SQL?
- 2020年度「炼丹笔记」搜索推荐系统干货集锦
- ASP.NET Core 项目简单实现身份验证及鉴权
- 公文字体字号标准2020_手把手教你写公文——红头文件的制作技巧
- win7设置默认浏览器
- php socket keepalive,使用keepalive和fastcgi_keep_conn打开Nginx php-fpm时出错
- Windows Server 2008终端服务详解系列3:结合MOSS 2007部署TS Web Access
- PE系统加载RAID驱动
- 定时任务:数据表设计与实现方案
- Android短信数据库相关
- pytorch 问题:_, term_width = os.popen(‘stty size‘, ‘r‘).read().split()
- Linux中的阻塞机制
- 数字电路基础04(查找表LUT)
- Paper reading (二十一):Human gut microbiome: hopes, threats and promises
- 什么是车联网,车联网需要解决哪些问题,未来发展前景怎么样?
- wifi丢包率高怎么解决_网络Ping延时高怎么办 网络丢包高怎么解决
- wechat 6.6 .3android,微信6.6.3
- 人脸识别智能门禁打造智慧社区广告新玩法
热门文章
- 在RSS服务器上订阅网站,快速服务器上的RSS订阅实现
- 《你必须知道的的495个C语言问题》阅读笔记-(第4章)指针篇
- terminate called without an active exception
- 需求分解 设计_分解设计专业知识
- 前端开发中常用设计模式-总结篇
- Python习题十一
- adb 输入回车命令_Android超级终端(Adb Shell)常用命令、命令大全-持续更新 | 何连超的博客小站...
- SuperZero gero同步区块进度可视化
- 【论文阅读 Journal of Financial Economics】Surprise election for Trump connections
- 304.	Range Sum Query 2D - Immutable