• 学生个人网页模板 简单个人主页--贝聿铭人物介绍 6页带表单 带报告3800字

    ⛵ 源码获取 文末联系 ✈

    Web前端开发技术
    描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | ‍个人博客网站 | ‍个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 | HTML期末大学生网页设计作业

    1. HTML：结构

    2. CSS：样式
      在操作方面上运用了html5和css3，
      采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

    3. JavaScript：做与用户的交互行为

    文章目录

    前端学习路线

    （1）html文件：其中index.html是首页、其他html为二级页面；
    （2）css文件：css全部页面样式,文字滚动, 图片放大等；
    （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

    网页基本结构

    (1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
    (2)二级页面：从首页点击进入之后的页面叫做二级页面
    (3)三级页面：从二级页面点击进入的页面

    网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
    首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
    导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
    网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

    网页演示

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    HTML结构代码

    

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贝聿铭title>
<link rel="stylesheet" type="text/css"  href="css/css.css">
<style>
/*banner begin*/
.benner{
     
	width:1100px;
	height: 500px;
	margin:100px auto;}
.left1{
     
	width: 250px;
	height: 500px;
	float: left;
	margin:10px 20px auto auto;}
.tr{
     
	width: 250px;
	height: 250px;}
.benner .left1 .tr img{
     
	padding:20px;
	border:1px solid #666;
	box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #999 inset;}
.right1{
     
	width: 800px;
	height: 500px;
	float: right;
	margin-left:25px;
		}	
.benner .right1 img{
     
	width:730px;
	animation-name:mymove;
	animation-duration:10s;}
@keyframes mymove{
     
	from{
      transform:translate(0) rotateY(180deg)};
    50%{
      transform:translate(10px) rotateY(180deg)};
    51%{
      transform:translate(10px) rotateY(0deg)};
    to{
      transform:translate(0) rotateY(0deg)};	
	} 
/*banner end*/
/*content begin*/
.content{
     
	width:1100px;
	height:600px;
	margin:10px auto;
	position:relative;
	}
.conone{
     
	width:340px;
	height:550px;
	position:absolute;
	left:0;
	top:25px;}
.childone1{
     
	width:340px;
	height:450px;}
.childone2{
     
	width:340px;
	height:80px;
	margin:20px auto;
	background-image:radial-gradient(ellipse at center,#FFF ,#39506A);
	background-repeat:no-repeat;
	background-size:cover;
	border-radius:6%;
	font-family:"华文仿宋";
	font-size:24px;
	color:#000;
	line-height:3;
	font-weight:800;
	text-align:center;}
.pb{
     
	font-family:"华文仿宋";
	font-size:24px;
	line-height:1.5;
	border-bottom: 1px solid #000;
	margin:0 auto 10px auto;  }
.ps<
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
  • 相关阅读:
    Android内存回收机制、GC算法及内存问题分析解决
    Python 中的 Pandas(数据分析与处理)
    单目标应用：麻雀搜索算法（SSA）优化RBF神经网络实现数据预测（RBF隐藏层神经元个数可以自行设定）
    开发时长一年半golang工程师应该具备什么样的技术能力？
    Gitlab常用命令总结汇总
    5.OsgEarth加载地形
    智慧公路筑基者！天翼云打造全栈能力新底座
    鸿蒙开发游戏（三）---大鱼吃小鱼（放置NPC）
    汽车技术市场动态分析
    解决IntelliJ IDEA执行maven打包，执行java -jar命令提示jar中没有主清单属性
  • 原文地址：https://blog.csdn.net/m1_46321522/article/details/127921979