html简单网页代码案例_HTML+CSS静态网页练习案例（转动的八卦图）

2024-04-25 10:51:38

需要的知识

1.div标签的运用

2.id选择器，后代选择器，

3.简单的css样式长，宽，高，背景颜色，浮动，绝对定位，边框弧度

4.div的布局特点

静态的完成效果

动态效果（点击链接观看）

太极页面1446450047.github.io

开始

HTML部分

<!DOCTYPE html>

HTML部分说明

1.其中最外面的id为八卦-wrapper为包住八卦的最大的div
2.id 为八卦的div为上图中的八卦
3.八卦里面的div为下图指示部分

CSS部分

CSS部分说明

通过改变每个div的大小颜色，浮动的left，top值，改变每个div的border-redius的值来画这个八卦图

完整代码

<!DOCTYPE html>

注意事项

1.id可以用中文，但是文件名和路径不能（最好不要）
2.一定要注意清楚浏览其的默认样式
3.能不写死就千万不要写死，最好用百分比代替像素（防止用户改变分辨率造成的bug）
4.父元素relative，子元素absolute
5.注意几个div的偏移位置，可以加boder: 1px,solid,red;来确定位置后调试
6.第27行代码为让八卦转起来在静态八卦中不起作用

让八卦转起来

/*先定义一个@keyframes 命名为x*/

转动的八卦完整代码

<!DOCTYPE html>

拓展：手机端的转动的八卦

在原代码不变的情况下使用
@media(max-width:500px){ }来设置移动端的样式
（其中设置的样式为当在移动端的时候所展现的样式，没有在其中设置的样式默认使用客户端的样式）

移动端完整代码

<!DOCTYPE html>

部署到GitHub上的链接：

https://github.com/1446450047/My-Code-Exercise/blob/master/html%2Bcss-demo1/index.htmlgithub.com

html简单网页代码案例_HTML+CSS静态网页练习案例（转动的八卦图）相关推荐

HTML+CSS静态网页练习案例（转动的八卦图）
HTML+CSS静态网页练习案例(转动的八卦图) 需要的知识 1.div标签的运用 2.id选择器,后代选择器, 3.简单的css样式长,宽,高,背景颜色,浮动,绝对定位,边框弧度 4.div的布局特 ...
HTML5+CSS期末大作业：环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码
HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码常见网页设计 ...
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业——橙色的素材火资源整站(25页)
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业--橙色的素材火资源整站(25页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结 ...
html网页设计期末大作业——生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业
html网页设计期末大作业--生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码...
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
div+css静态网页设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:电影网站设计--迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游 ...
一次简单的爬虫过程记录：静态网页小说下载
时间:2020年2月14日环境:windows7 编程语言及版本:Python3.8 IDE:Sublime Text 3 工具:requests,BeautifulSoup,sys 浏览器:Fir ...

最新文章

热门文章