HTML+CSS简单漫画 页设计成品 蜡笔小新3页 大学生个人HTML 页制作作品


?精彩专栏推荐????????????


文章目录??

  • 一、 页介绍??
  • 一、 页效果??
  • 二、代码展示??
    • 1.HTML结构代码 ??
    • 2.CSS样式代码 ??
  • 三、个人总结??
  • 四、更多干货??

一、 页介绍??

1 页简介:此作品为学生个人主页 页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生 页设计作业源码,这是一个不错的 页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。

3.知识应用:技术方面主要应用了 页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。


一、 页效果??

HTML+CSS简单漫画 页设计成品 蜡笔小新3页 大学生个人HTML 页制作作品

二、代码展示??


1.HTML结构代码 ??

代码如下(示例):以下仅展示部分代码供参考~


2.CSS样式代码 ??

/*通用类*/* {	margin: 0;	padding: 0;}body {	min-width: 1000px;	margin: 0 auto;	font-size: 14px;	font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif;	background: #fff;	text-align: justify;	color: #010000;	position: relative;}h1, h2, h3 {	font-weight: 500;}img {	border: none;}a {	cursor: pointer;	color: #333;	text-decoration: none;	outline: none;}ul {	list-style-type: none;}em {	font-style: normal;}.lt {	float: left;}.rt {	float: right;}div.clear {	font: 0px Arial;	line-height: 0;	height: 0;	overflow: hidden;	clear: both;}.clearfix::after {	content: "";	display: block;	clear: both;}/*wrapin 主体容器宽度*/.wrapin {	width: 1000px;	margin-left: auto;	margin-right: auto;}/*公用CSS 开始*//*header 开始*/header {	background: #cf2212;	line-height: 60px;	padding: 0 15px;}header .logo {	float: left;	font-size: 24px;	color: #fff;	font-weight: bold;	line-height: 60px;}header .nav {	float: right;}header .nav li {	width: 120px;	text-align: center;	font-size: 16px;	display: inline-block;}header .nav li a {	color: #fff;}.banner {	display: block;}.banner img {	display: block;	width: 100%;}.in_com {	background: #f4f8ff;	padding: 15px;	display: block;}.con_top .pic {