一、作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、作品效果
▶️视频演示
https://live.csdn.net/v/embed/239836
(title-B37JP 樱桃小丸子(24页面)HTML+CSS)]
截图演示
01.png
02.png
03.png
04.png
三、 作品代码
HTML代码
Untitled Document
小丸子百科
作品简介
演员表
角色介绍
座位表
目录
制作人员
动画音乐
分集剧情
社会影响
创作背后
作品评价
精彩瞬间
高音质头戴式耳机
高音质头戴式耳机
高音质头戴式耳机
小丸子百科
《樱桃小丸子》是全球知名度最高及最具影响力的动漫作品之一。其动画连续二十余年高居日本动画收视率前三位，到2013年时已超过1000集，仍于每周日黄金时段下午六点在日本富士电视台（日本富士电视台在日本的地位相当于中国的CCTV1）上进行连载热播，是日本男女老少心中的国民动画。本作品是以作者的童年生活为蓝本的故事，故事围绕着小丸子以及其家人和同学展开，有关于亲情、友谊，或是一些生活小事，其中有笑有泪，令人回想起童年的稚气。
小丸子图库
小丸子
小丸子
小丸子
小丸子
小丸子
小丸子
小丸子
小丸子
小丸子
小丸子
小丸子
小丸子
真人版小丸子百科
概述
拍摄情况
演员
各集内容
精彩瞬间
小丸子宝贝
高音质头戴式耳机
高音质头戴式耳机
高音质头戴式耳机
高音质头戴式耳机
CSS代码
@charset "UTF-8";
/* CSS Document */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul, li {
list-style: none outside none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: "";
}
abbr, acronym {
border: 0 none;
}
a, a:hover{ color:#c72638; text-decoration:none;}
.top{ width:100%; background:url("../../../../www.foreseebio.com/chengpin/ye66/images/img1.jpg")/*tpa=http://www.foreseebio.com/chengpin/ye66/images/img1.jpg*/ no-repeat left top; height:150px;}
.top_in{ width:1004px; margin:0 auto;}
.nav{ width:100%; height:40px; background:#d12f44;}
.nav_in{ width:1004px; margin:0 auto; font-size:18px; font-weight:400; color:#fff; font-family:"方正卡通简体";}
.nav_in a{ color:#fff; text-decoration:none;}
.box{ width:100%; background:#fed6cd;}
.box_in{ width:1004px; margin:0px auto; font-family:"微软雅黑","黑体";}
.banner{ width:100%; background:url("../images/img3.jpg")/*tpa=http://www.xiaoyazhi.xyz/chengpin/ye66/images/img3.jpg*/ no-repeat top center; height:212px;}
.mt20{ margin-top:20px;}
.footer{ width:100%; margin-top:20px; border-top:1px solid #c72638; color:#c72638; padding:20px 0px; line-height:30px; font-size:14px; text-align:center; font-family:"微软雅黑","黑体";}
.b_table td{ border:1px dashed #c72638; line-height:45px; padding-left:10px;}
.b_table1 td{ border:1px dashed #c72638; line-height:45px;}
四、更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app