精华内容
下载资源
问答
  • HTML语言与网页设计题库(含答案)希望对你有帮助。
  • 一共160道题目包括了答案,涵盖了基本上全部的H5响应式内容,适合学习,复习,考试等
  • 网页制作HTML题库 主要依据网页制作教程第三版 第一章 HTML 基础 第1题 判断正误 1HTML标记符的属性一般不区分大小写 2网站就是一个链接的页面集合 3将网页上传到Internet时通常采用FTP方式 4所有的HTML标记符都包括...
  • HTML模拟题:大题部分 根据输入的苹果和香蕉的数量 用JS代码实现点击“计算”按钮时,计算并显示总重量和总价钱。 代码如下; <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

    HTML模拟题:大题部分

    1. 根据输入的苹果和香蕉的数量
      用JS代码实现点击“计算”按钮时,计算并显示总重量和总价钱。
      在这里插入图片描述
      代码如下;
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	
    </head>
    <body>
    	<script src="index.js"></script>
    	<div>苹果(公斤):
    		<input type="txt" id="pingguo">
    		单价(2元/公斤)
    	</div>	
    	<div>香蕉(公斤):
    		<input type="txt" id="xiangjiao">
    		单价(3元/公斤)
    	</div>
    	<div>
    		水果总重(公斤):<input type="txt" id="zhong" value=0>
    	</div>
    	<div>
    		总价:<input type="txt" id="zong" value=0></div>
    	<input type="button" value="提交" onclick="zong1();">
    </body>
    </html>
    

    对应的js:

    function zong1() {
    	var p=document.getElementById("pingguo").value;
    
    	var x=document.getElementById("xiangjiao").value;
    	p=Number(p);
    	x=Number(x);	
    	var z=p+x;
    	document.getElementById('zhong').value=z;
    	var z1=p*2+x*3;
    	document.getElementById('zong').value=z1;
    }
    
    1. 根据输入的半径值,用JS代码实现点击“计算”按钮时,计算并显示周长和面积。
      在这里插入图片描述
      代码如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<script src="index.js"></script>
    	<div>输入半径:
    		<input type="txt" id="r">
    	</div>	
    	<div>周长:
    		<input type="txt" id="l">
    	</div>
    	<div>
    		面积:<input type="txt" id="s" value=0>
    	</div>
    	<input type="button" value="提交" onclick="qiu();">
    </body>
    </html>
    
    function  qiu(){
    	var r=document.getElementById("r").value;
    r=	Number(r);
    var l=2*Math.PI*r;
    var s=Math.PI*r*r;
    document.getElementById("l").value=l;
    document.getElementById("s").value=s;
    }
    

    3.写HTML代码实现下面截图效果的页面(表格背景颜色为99FFFF,并且表格在网页内居中对齐)
    在这里插入图片描述
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<table border="1" cellspacing="0" bgcolor="#99FFF" align="center">
    		<tr>
    			<th colspan="3" >表格的使用</th>
    		</tr>	
    		<tr > 
    			<td width="150px" height="20px"></td>
    			<td width="150px" height="20px"></td>
    			<td rowspan=2 width="150PX" ></td>
    		</tr>
    		<tr>
    			<td width="150px" height="20px"></td>
    			<td width="150px" height="20px"></td>
    		</tr>
    	</table>
    </body>
    </html>
    
    1. 用写HTML代码实现下面截图效果的页面在这里插入图片描述
      代码如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
    
    	<form class="a">
    		<div style="background-color: #A8A8A8 ;">客户注册信息</div>
    		<div>客户姓名:<input type="txt" name="1">(最多16个字符)</div>
    		<div>&#12288;&#12288;密码:<input type="password" name="2">(最多16个字符)</div>
    		<div>确认密码:<input type="txt" name="3"></div>
    		<form><div>&#12288;&#12288;性别: <input type="radio" name="sex" value="female"><input type="radio" name="sex" value="female"></div></form>
    			<div>&#12288;&#12288;城市:
    				<select>
    					<option>杭州</option>
    					<option>无锡</option>
    					<option>北京</option>
    					<option>河北</option>
    				</select>
    			</div>
    			<div>&#12288;&#12288;<input type="button" value="提交">&#12288;&#12288;&#12288;<input type="button" value="重置"></div>
    		</form>
    
    	</body>
    	</html>
    

    5.用写HTML代码实现下面截图效果的页面
    在这里插入图片描述
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	姓名:<input type="txt" value="对方的时光"><br>
    	E-mail:<input type="txt"><br>
    	选择你最经常访问的网站:<input type="checkbox">地大热线
    	<input type="checkbox">新浪网
    	<input type="checkbox">搜狐<br>
    	<form>请选择你所感兴趣的类别:
    		<select>
    			<option>时事新闻</option>
    			<option>股市综述</option>
    			<option>体育比赛</option>
    			<option>文学艺术</option>
    		</select>
    	</form>
    	</html>
    

    5.设计函数消除数组中重复的元素
    在这里插入图片描述
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body style="text-align:center;">
    	<script src="index.js"></script>
    	<table border="1" cellspacing="0" >
    		<tr>
    			<th colspan="8" height="30px">原数组</th>
    		</tr>
    		<tr>
    			<td width="200px" height="30px">1</td>
    			<td width="200px" height="30px">1</td>
    			<td width="200px" height="30px">3</td>
    			<td width="200px" height="30px">2</td>
    			<td width="200px" height="30px">4</td>
    			<td width="200px" height="30px">6</td>
    			<td width="200px" height="30px">3</td>
    			<td width="200px" height="30px">6</td>
    		</tr>
    	</table>
    	<input type="button" value="点击检查重复数字" onclick="chong()">
    	<table border="1" cellspacing="0" text-align="center">
    		<tr>
    		<td width="200px" height="30px" id="a0">1</td>
    			<td width="200px" height="30px" id="a1">1</td>
    			<td width="200px" height="30px" id="a2">3</td>
    			<td width="200px" height="30px" id="a3">2</td>
    			<td width="200px" height="30px" id="a4">4</td>
    			<td width="200px" height="30px" id="a5">6</td>
    			<td width="200px" height="30px" id="a6">3</td>
    			<td width="200px" height="30px" id="a7">6</td>
    		</tr>
    	</table>
    </body>
    </html>
    

    js片段:

    function chong(){
    	var	a1=new Array(1,1,3,2,4,6,3,6);
    	for (var i = 0; i < a1.length; i++) {
    		var x=a1[i];
    		for(var j = 0; j < a1.length; j++){
    			if(x==a1[j]&&(i!=j))
    				a1[j]="已被替换";
    		}
    	}
    	document.getElementById("a0").innerHTML=a1[0];
    	document.getElementById("a1").innerHTML=a1[1];
    	document.getElementById("a2").innerHTML=a1[2];
    	document.getElementById("a3").innerHTML=a1[3];
    	document.getElementById("a4").innerHTML=a1[4];
    	document.getElementById("a5").innerHTML=a1[5];
    	document.getElementById("a6").innerHTML=a1[6];
    	document.getElementById("a7").innerHTML=a1[7];
    
    }
    

    6.设计一函数计算数组中索引为奇数的元素之和。
    在这里插入图片描述
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body style="text-align:center;">
    <script src="index.js"></script>
    	<table border="1" cellspacing="0" >
    		<tr>
    			<th colspan="8" height="30px">数组</th>
    		</tr>
    		<tr>
    			<td width="200px" height="30px">1</td>
    			<td width="200px" height="30px">1</td>
    			<td width="200px" height="30px">3</td>
    			<td width="200px" height="30px">2</td>
    			<td width="200px" height="30px">4</td>
    			<td width="200px" height="30px">6</td>
    			<td width="200px" height="30px">3</td>
    			<td width="200px" height="30px">6</td>
    		</tr>
    	</table>
    	<input type="button" value="点击求和" onclick="he()"><br>
    	<div>总和:<div id="b1">0</div></div>
    </body>
    </html>
    

    js片段:

    function he(){
    var	a2=new Array(1,1,3,2,4,6,3,6);
    var x1=0;
    for (var i = 0; i < a2.length; i++) {
    	var j=i+1;
    	if((j%2)==1){
    		x1+=a2[i];
    	}
    }
    document.getElementById("b1").innerHTML=x1;
    }
    

    7.小王今年23岁,他计划将10000元存为一年定期,利率为3%,按复利计算,请设计函数计算他60岁时这个存单的本息之和为多少元。.
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <script src="index.js"></script>
    <body style="text-align:center;">
    	<div>小王今年23岁,他计划将10000元存为一年定期,利率为3%,按复利计算,请设计函数计算他60岁时这个存单的本息之和为多少元。.</div>
    	<input type="button" value="点击计算" onclick="fuli()"><br>
    	60岁时:<div id="c1">0</div>
    </body>
    </html>
    

    js片段:

    function fuli(){
    var x=1;
    for(var i=0;i<37;i++){
    	x=1.03*x;
    }
    
    document.getElementById("c1").innerHTML=x+"万";
    }
    

    8.小王今年23岁,他计划每年年初定投10000元,假定年化收益为8%,按复利计算,请设计函数计算他60岁时本利和为多少万元。
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <script src="index.js"></script>
    <body style="text-align:center;">
    	<div>小王今年23岁,他计划每年年初定投10000元,假定年化收益为8%,按复利计算,请设计函数计算他60岁时本利和为多少万元。</div>
    	<input type="button" value="点击计算" onclick="fuli1()"><br>
    	60岁时:<div id="c2">0</div>
    </body>
    </html>
    

    js:

    function fuli1(){
    	var x=1;
    	for(var i=0;i<37;i++){
    	x=1.03*x+1;
    }
    document.getElementById("c2").innerHTML=x+"万";
    }
    

    9.给一个不多于 5 位的正整数,
    要求: 一、 求它是几位数, 二、 逆序打印出各位数字。
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <script src="index.js"></script>
    <body style="text-align:center;">
    <div>9.给一个不多于 5 位的正整数,
     要求: 一、 求它是几位数, 二、 逆序打印出各位数字。
    </div>
    <div>请输入一个不多于5位的数字:</div>
    	<input type="txt" id="d1" onchange="shuzi()" value="0">
    	<p>该数字是<span id="d2">0</span>位数字</p>
    	<p>该数字逆序输出是:<span id="d3">0</span></p>
    </body>
    </html>
    

    js:

    function shuzi(){
    	var x=document.getElementById("d1").value;
    	x=Number(x);
    	/*var x1= x%10;
    	var x2=x%100-x1;
    	var x3=x%1000-x2*100-x1;
    	*/
    var n=0;
    if(x<10){
    document.getElementById("d2").innerHTML=1;
    n=1;
    }
    else if(x>=10&&x<100){
    document.getElementById("d2").innerHTML=2;
    n=2;
    }
    else if(x>=100&&x<1000){
    	document.getElementById("d2").innerHTML=3;
    	n=3;
    }
    else if(x>=1000&&x<10000){
    	document.getElementById("d2").innerHTML=4;
    	n=4;
    }
    else{
    	document.getElementById("d2").innerHTML=5;
    	n=5;
    }
    var x1=0;
    var x2=0;
    var x3=0;
    var x4=0;
    var x5=0;
    if(n==1){
    	document.getElementById("d3").innerHTML=x;
    }
    if(n==2){
    x1=x%10;
    x2=(x-x1)/10;
    x1=String(x1);
    x2=String(x2);
    document.getElementById("d3").innerHTML=x1+x2;
    }
    if(n==3){
    x1=x%10;
    x2=(x%100-x1)/10;
    x3=(x-x1-x2*10)/100;
    x1=String(x1);
    x2=String(x2);
    x3=String(x3);
    document.getElementById("d3").innerHTML=x1+x2+x3;
    }
    if(n==4){
    x1=x%10;
    x2=(x%100-x1)/10;
    x3=(x%1000-x2*10-x1)/100;
    x4=(x-x1-x2*10-x3*100)/1000;
    x1=String(x1);
    x2=String(x2);
    x3=String(x3);
    x4=String(x4);
    document.getElementById("d3").innerHTML=x1+x2+x3+x4;
    }
    if(n==5){
    x1=x%10;
    x2=(x%100-x1)/10;
    x3=(x%1000-x2*10-x1)/100;
    x4=(x%10000-x1-x2*10-x3*100)/1000;
    x5=(x-x1-x2*10-x3*100-x4*1000)/10000;
    x1=String(x1);
    x2=String(x2);
    x3=String(x3);
    x4=String(x4);
    x5=String(x5);
    document.getElementById("d3").innerHTML=x1+x2+x3+x4+x5;
    }
    
    
    }
    
    展开全文
  • 网页设计复习试题理论 一选择题 1在网页中不能添加的元素是 D A文字图像 B 表格动画 C声音视频 D 纸张等实物 2下面不属于页面属性中可以设置的内容 D A外观 B 链接 C跟踪图像 D 首选参数 3下列 (B ) 方法无法添加...
  • 选择题 HTML 文件必须使用 htm 或者...脚本语言 WWW是B的意思 A网页 B万维网 C浏览器 D超文本传输协议 在网页中显示特殊字符如果要输入<应使用D Alt; B≪ C< D< 以下说法中错误的是D A获取WWW服务时需要使用浏览
  • 网页制作题库含参考答案 HTML 基础 第 1 题 判断正误 1HTML 标记符的属性一般不区分大小写对 2 网站就是一个链接的页面集合对 3 将网页上传到Internet 时通常采用 FTP 方式对 4 所有的HTML 标记符都包括开始标记符和...
  • Java Web程序设计题库含答案 一选择题 1以下文件名后缀中只有 C 不是静态网页的后缀 A.html B.htm C .JSP D.shtml 2以下文件名后缀中只有 B 不是动态网页的后缀 A.jsp B.html C.aspx Dphp 3在page指令中 C 属性是...
  • 精选文库 PAGE PAGE 3 -- 理工抽测理论网页设计与制作 一选择题1-40题为单选 1目前在Internet上应用最为广泛的服务是 ( ) AFTP服务 BWWW服务 CTelnet服务 DGopher服务 2为了标识一个HTML文件开始应该使用的HTML标记...
  • 国家开放大学电大专科Dreamweaver网页设计单项选择题题库及答案试卷号2445 盗传必究 单项选择题 1下面哪个顶层域名( )可以用来标识非盈利的组织团体 Acom Bgov Corg Dmil 2下面选项中关于浏览器的描述是错误的( ) A...
  • 网页设计与制作期末考试试题 一单项选择题每个题只有一个的答案是正确的每题3分共60分 1目前在Internet 上应用最为广泛的服务是 ( ) A FTP 服务 B WWW 服务 CTelnet 服务 D Gopher 服务 2为了标识一个HTML 文件开始...
  • HTML 编写的文件的扩展名是 A. css B. txt C. asp D. html(htm) 回答错误 !正确答案 D HTML 的英文全称是 收藏 A. World Wide Web B. file transter protocol C. Hypertext Markup Language D. EXtensible Markup...
  • 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在专栏???????????????????????????????? ...

    🍅 作者主页:Java李杨勇 

    🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我,都给你】

    🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

     临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在专栏👇🏻👇🏻👇🏻👇🏻

    HTML5+CSS精彩网页特效实战分享

    Html+Css+JavaScript期末大作业网页模板

     都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的小游戏网页制作,画面精明,非常适合初学者学习使用。

    网页动图显示:文末获取源码

    项目组织结构:

    主要源码展示:

    index.html

    
    <body>
    
        <div class="moon">
            <div class="crater"></div>
        </div>
    
        <div class="footprints">
            <span></span>
            <span></span>
            <span></span>
        </div>
    
        <div class="astronaut">
    
            <div class="backpack"></div>
    
            <div class="head">
                <div class="helmet"></div>
            </div>
    
            <div class="neck"></div>
    
            <div class="body"></div>
    
            <div class="arm right">
                <div class="top"></div>
                <div class="bot"></div>
                <div class="hand"></div>
            </div>
    
            <div class="arm left">
                <div class="top"></div>
                <div class="bot"></div>
                <div class="hand"></div>
            </div>
    
            <div class="leg right">
                <div class="top"></div>
                <div class="bot"></div>
                <div class="foot"></div>
            </div>
    
            <div class="leg left">
                <div class="top"></div>
                <div class="bot"></div>
                <div class="foot"></div>
            </div>
    
        </div>
    
    </body>
    
    </html>

    style.css

    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        background: #080808;
        overflow: hidden;
        background-image: radial-gradient(1px 1px at 5% 98%, #ffffff, #fff0), radial-gradient(1px 1px at 18% 79%, #ffffff, #fff0), radial-gradient(2px 1px at 26% 52%, #ffffff, #fff0), radial-gradient(1px 2px at 31% 20%, #e6e6e6, #fff0), radial-gradient(1px 1px at 41% 44%, #e8e8e8, #fff0), radial-gradient(1px 2px at 47% 6%, #ffffff, #fff0), radial-gradient(1px 1px at 50% 71%, #f5f5f5, #fff0), radial-gradient(2px 1px at 65% 50%, #e2e2e2, #fff0), radial-gradient(1px 1px at 54% 26%, #ffffff, #fff0), radial-gradient(2px 2px at 76% 34%, #efefef, #fff0), radial-gradient(1px 1px at 10% 32%, #ececec, #fff0), radial-gradient(1px 2px at 84% 60%, #ffffff, #fff0), radial-gradient(1px 1px at 87% 13%, #eaeaea, #fff0), radial-gradient(1px 1px at 69% 21%, #efefef, #fff0), radial-gradient(1px 2px at 62% 83%, #efefef, #fff0), radial-gradient(2px 1px at 81% 74%, #efefef, #fff0), radial-gradient(1px 1px at 36% 62%, #efefef, #fff0), radial-gradient(1px 1px at 94% 68%, #efefef, #fff0), radial-gradient(2px 1px at 98% 50%, #efefef, #fff0), radial-gradient(1px 1px at 95% 21%, #efefef, #fff0), linear-gradient(45deg, #000 5%, #000313 65%, #111 100%);
        background-repeat: repeat;
        background-size: 25% 25%, 33.33% 33.33%, 50% 50%, 20% 20%, 33.33% 33.33%, 25% 18%, 33.33% 19%, 33.33% 21%, 23% 27%, 27.33% 35.33%, 18.33% 32.33%, 28.33% 34.33%, 33.33% 30.33%, 25.33% 29.33%, 29.33% 31.33%, 20.33% 29.33%, 30.33% 27.33%, 22.33% 33.33%, 15.33% 32.33%, 33.33% 22.33%, 100% 100%;
    }
    
    *:before,
    *:after {
        content: "";
        position: absolute;
    }
    
    body::before {
        width: 15vmax;
        height: 15vmax;
        background: radial-gradient(circle at 50% 100%, #000 0 50%, #fff0), radial-gradient(circle at 121% 39%, green 0 18%, #fff0 20%), radial-gradient(ellipse at 111% 26%, green 0 18%, #fff0 20%), radial-gradient(ellipse at 100% 15%, green 0 18%, #fff0 20%), radial-gradient(circle at 38% -15%, #ffffffb3 0 16%, #fff0 20%), radial-gradient(circle at 50% 100%, #000 0 50%, #008eff);
        border-radius: 100%;
        left: 10vmax;
        top: 10vmax;
        box-shadow: 0 -0.5vmax 1vmax -0.25vmax #9999ff45;
    }
    
    .moon {
        position: absolute;
        width: 250vmax;
        height: 100vmax;
        z-index: 1;
        border-radius: 100%;
        background: radial-gradient( circle at 50% 50%, #fdfdfd 0% 5vmax, #ffffff00 10vmax 100%), #fff;
        box-shadow: 0 0 10vmax 1vmax #6493a9, 0 0 5vmax 5vmax #adadad80 inset, 0 0 2vmax 1vmax #fdfdfd;
        left: calc(50% - 125vmax);
        top: 45vmax;
    }
    
    .moon:before {
        content: "";
        background: radial-gradient( circle at 100% 60%, #ffffff00 0% 60%, #dddddd 75% 100%);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        border-radius: 100%;
    }
    
    .crater {
        content: "";
        position: absolute;
        width: 25vmax;
        height: 20vmax;
        border-radius: 100%;
        transform: rotateX(50deg) rotateY(-10deg) rotateZ(15deg);
        border: 1px dotted #404040;
        background: linear-gradient(225deg, #000000, #eaeaea99);
        box-shadow: 0 0 3vmax 1vmax #585858, 0 0 0.5vmax 0.5vmax #5d5d5d, 2vmax 5vmax 5.5vmax 3.5vmax #484848, 0 0 5vmax 0.5vmax #444444, 1vmax 3.5vmax 1.5vmax 0.5vmax #ababab;
        left: calc(50% - 25vmax);
        opacity: 0.35;
        bottom: calc(50% + 25vmax);
    }
    
    /*** ASTRONAUT ***/
    
    .astronaut {
        width: 20vmax;
        height: 30vmax;
        right: -20vmax;
        position: absolute;
        top: 30vmax;
        z-index: 2;
        background: transparent;
        animation: walk-left 20s cubic-bezier(0.05, -0.01, 0.61, 0.99) 0s infinite, walk-up 5s cubic-bezier(0.35, 0.14, 1, 1) 1.5s infinite;
        margin-top: -10%;
    }
    
    @keyframes walk-left {
        0% {
            right: -20%;
        }
        20% {
            right: 10%;
        }
        45% {
            right: 40%;
        }
        70% {
            right: 70%;
        }
        100% {
            right: 100%;
        }
    }
    
    @keyframes walk-up {
        0%,
        100% {
            top: 30vmax;
        }
        10%,
        90% {
            top: 31vmax;
        }
        50% {
            top: 35vmax;
        }
    }
    
    .astronaut * {
        position: absolute;
    }
    
    .backpack {
        background: linear-gradient( 91deg, #343535 0% 55%, #4b4e50 58% 75%, #6e7071 77% 88%, #c6c6c6 92% 100%);
        width: 30%;
        height: 38%;
        left: 57%;
        top: 20%;
        border-radius: 10% 17% 60% 10%;
        border-top: 0.2vmax solid #4b4e50;
    }
    
    .head {
        background: #b8b8b8;
        width: 46%;
        height: 27%;
        border-radius: 50%;
        left: 31%;
        top: 4%;
        border-bottom: 1vmax solid #9b9b9b;
        transform: rotate(-4deg);
        z-index: 3;
    }
    
    .head:before {
        width: 75%;
        height: 69%;
        border-radius: 50% 50% 0 0;
        left: 9%;
        top: 3%;
        border-top: 0.65vmax solid #c6c6c6;
        border-right: 0.15vmax solid transparent;
        border-left: 0.15vmax solid transparent;
        transform: rotate(9deg);
    }
    
    .head:after {
        background: radial-gradient( circle at 45% 25%, #2b2b2b 0 57%, #252525 58% 100%);
        width: 80%;
        height: 83%;
        border-radius: 50%;
        left: 5%;
        top: 13%;
        border: 0.25vmax solid #000;
        box-sizing: border-box;
    }
    
    .helmet {
        background: radial-gradient(circle at 8% 33%, #343434 0 5%, #fff0 6% 100%), radial-gradient(circle at 94% 42%, #343434 0 5%, #fff0 6% 100%), radial-gradient(circle at 25% 75%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 35% 70%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 45% 67%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 55% 69%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 65% 77%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 75% 87%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 85% 96%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 96% 49%, #2b2b2b 0 5%, #fff0 6% 100%), radial-gradient(circle at 4% 40%, #2b2b2b 0 5%, #fff0 6% 100%);
        width: 50%;
        height: 50%;
        border-radius: 100%;
        z-index: 3;
        left: 15%;
        top: 22%;
        transform: rotate(-16deg);
        color: #343434;
        color: #5d5d5d;
        background-color: #343434;
    }
    
    .helmet:before {
        background: #343434;
        width: 98%;
        height: 36%;
        border-radius: 100%;
        left: 2%;
        top: 25%;
        transform: rotate(5deg);
    }
    
    .helmet:after {
        background: #5d5d5d;
        width: 18%;
        height: 16%;
        border-radius: 100%;
        left: 58%;
        top: 14%;
        transform: rotate(27deg);
        box-shadow: -1.15vmax 0.35vmax 0vmax -0.2vmax #7a7a7a, -1.05vmax 0.25vmax 0vmax -0.2vmax #7a7a7a;
    }
    
    .neck {
        background: radial-gradient( circle at 43.95% 15%, transparent 0 61%, #666b6e 62% 100%);
        width: 48%;
        height: 10%;
        top: 17%;
        left: 30%;
        border-radius: 50% 50% 100% 100%;
        transform: rotate(5deg);
        z-index: 3;
    }
    
    .neck:before,
    .neck:after {
        background: linear-gradient( 177deg, #fff0 0 32%, #9a9a9a 35% 40%, #fff0 50% 100%), #676c6f;
        width: 80%;
        height: 100%;
        left: -44%;
        border-radius: 75% 35% 75% 100%;
        transform: rotate(15deg);
        top: -27%;
        opacity: 0;
    }
    
    .neck:after {
        left: 60%;
        transform: rotateY(180deg) rotateZ(10deg);
        top: -15%;
        border-radius: 40% 35% 75% 100%;
        background: linear-gradient( 179deg, #fff0 0 30%, #9a9a9a 35% 45%, #fff0 47% 100%), #676c6f;
    }
    
    .body {
        background: radial-gradient( circle at 50% -75%, #c6c6c6 0 80%, #5f5f5f 81% 85%, #c6c6c6 86% 100%);
        width: 45%;
        height: 30%;
        left: 32%;
        top: 31%;
        border-radius: 19% 23% 34% 37%;
        transform: rotate(-1deg);
        z-index: 2;
        border-right: 2vmax solid #888d90;
        box-sizing: border-box;
        border-bottom: 1vmax solid #888d90;
    }
    
    .body:before {
        background: radial-gradient(ellipse at 38% 65%, #888d90 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 33% 65%, #888d90 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 28% 65%, #888d90 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 38% 30%, #666b6e 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 33% 30%, #666b6e 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 28% 30%, #666b6e 0 13%, #fff0 15% 100%), radial-gradient(circle at 74% 30%, #f50000 0 11%, #fff0 12% 100%), radial-gradient(circle at 75% 65%, #4562ff 0 10%, #fff0 12% 100%), radial-gradient(circle at 75% 31%, #790000 0 11%, #fff0 12% 100%), radial-gradient(circle at 76% 66%, #6f0000 0 10%, #fff0 12% 100%), #d7d7d7;
        width: 65%;
        height: 41%;
        border-radius: 20%;
        top: 15%;
        left: 19%;
        transform: rotate(3deg);
        border-right: 0.25vmax solid #b1b1b1;
        border-bottom: 0.25vmax solid #adadad;
        border-left: 0.1vmax solid #b8b8b8;
        border-top: 0.15vmax solid #b8b8b8;
        box-sizing: border-box;
    }
    
    /*** ARMS ***/
    
    .arm {
        width: 40%;
        height: 18%;
        top: 25%;
        transform-origin: right center;
    }
    
    .arm.right {
        z-index: 0;
        left: -5%;
        transform: rotate(20deg);
        top: 27%;
        animation: arm-right 20s ease-out 0s infinite;
    }
    
    @keyframes arm-right {
        0% {
            transform: rotate(5deg);
        }
        20% {
            transform: rotate(-95deg);
        }
        45% {
            transform: rotate(5deg);
        }
        70% {
            transform: rotate(-95deg);
        }
        100% {
            transform: rotate(5deg);
        }
    }
    
    .arm.left {
        left: 31%;
        transform: rotate(-145deg);
        top: 28%;
        z-index: 4;
        animation: arm-left 20s ease-out 0s infinite;
    }
    
    @keyframes arm-left {
        0% {
            transform: rotate(-145deg);
        }
        20% {
            transform: rotate(-45deg);
        }
        45% {
            transform: rotate(-145deg);
        }
        70% {
            transform: rotate(-45deg);
        }
        100% {
            transform: rotate(-145deg);
        }
    }
    
    .arm .top {
        background: #0000ff70;
        width: 55%;
        height: 45%;
        right: 0;
        top: 33%;
        transform-origin: right center;
        transform: rotate(-13deg);
        border-radius: 40%;
        background: linear-gradient(-3deg, #888d90 0 40%, #c6c6c6 43% 100%);
    }
    
    .arm .bot {
        width: 55%;
        height: 45%;
        top: 53%;
        left: 15%;
        transform-origin: right center;
        transform: rotate(25deg);
        border-radius: 40%;
        background: radial-gradient(circle at 100% 51%, #888d90 0 7%, #fff0 8% 100%), linear-gradient(-3deg, #888d90 0 40%, #c6c6c6 43% 100%);
    }
    
    .arm>div:before {
        background: #666b6e;
        height: 1.75vmax;
        width: 1vmax;
        right: 5%;
        border-radius: 80% 70% 35% 30%;
        transform: rotate(-15deg);
        top: -20%;
    }
    
    .arm>div:after {
        background: #666b6e;
        height: 1.5vmax;
        width: 1vmax;
        top: 40%;
        right: 1%;
        transform: rotate(0deg);
        border-radius: 30% 30% 80% 70%;
    }
    
    .arm.right .top:before {
        transform: rotate(10deg);
        right: -2%;
    }
    
    .arm.left .top:before {
        transform: rotate(-2deg);
        left: 78%;
        right: 1%;
        top: -10%;
    }
    
    .arm.left .top:after {
        top: 45%;
        right: -1%;
        width: 21%;
    }
    
    /*** HANDS ***/
    
    .hand {
        background: #888d90;
        width: 33%;
        height: 53%;
        border-radius: 55%;
        top: 19%;
        transform: rotate(22deg);
        left: 2%;
    }
    
    .hand:before {
        top: -5% !important;
        right: -0.25vmax !important;
        transform: rotate(-5deg) !important;
    }
    
    .hand:after {
        top: 45% !important;
        right: -0.3vmax !important;
        transform: rotate(-5deg) !important;
    }
    
    /*** LEGS ***/
    
    .leg {
        width: 25%;
        height: 36%;
        top: 54%;
        left: 28%;
        transform-origin: center top;
    }
    
    .leg.right {
        animation: leg-right 20s ease-out 0s infinite;
    }
    
    @keyframes leg-right {
        0% {
            transform: rotate(-45deg);
        }
        20% {
            transform: rotate(10deg);
        }
        45% {
            transform: rotate(-45deg);
        }
        70% {
            transform: rotate(10deg);
        }
        100% {
            transform: rotate(-45deg);
        }
    }
    
    .leg.left {
        transform: rotate(-30deg);
        animation: leg-left 20s ease-out 0s infinite;
        transform-origin: 70% top;
        left: 45%;
        transform: rotate(-25deg);
        top: 56%;
        z-index: 2;
    }
    
    @keyframes leg-left {
        0% {
            transform: rotate(15deg);
        }
        20% {
            transform: rotate(-30deg);
        }
        45% {
            transform: rotate(15deg);
        }
        70% {
            transform: rotate(-30deg);
        }
        100% {
            transform: rotate(15deg);
        }
    }
    
    .leg .top,
    .leg .bot {
        width: 75%;
        height: 32%;
        left: -16%;
        top: -5%;
        transform-origin: right center;
        transform: rotate(-79deg);
        border-radius: 25% 10% 10% 25%;
        background: linear-gradient(-3deg, #888d90 0 65%, #c6c6c6 67% 100%);
    }
    
    .leg .bot {
        top: 25%;
        transform: rotate(-97deg);
        left: -28%;
        height: 31%;
    }
    
    .leg>div:before {
        background: #666b6e;
        height: 65%;
        width: 1vmax;
        right: -5%;
        border-radius: 80% 70% 35% 30%;
        transform: rotate(25deg);
        top: -6%;
    }
    
    .leg>div:after {
        background: #666b6e;
        height: 65%;
        width: 1vmax;
        top: 40%;
        right: 1%;
        transform: rotate(-10deg);
        border-radius: 30% 30% 80% 70%;
    }
    
    /*** FEET ***/
    
    .foot {
        background: linear-gradient(45deg, #888d90 0 55%, #c6c6c6 60% 100%);
        width: 55%;
        height: 45%;
        bottom: -10%;
        transform: rotate(-99deg);
        border-radius: 25% 55% 30% 30%;
        left: 20%;
        border-left: 0.65vmax solid #505050;
        box-sizing: border-box;
    }
    
    .foot:before {
        height: 50% !important;
        left: 78%;
        top: 22% !important;
        transform: rotate(13deg) !important;
    }
    
    }
    

    作品来自于网络收集、侵权立删 

    获取完整源码:

    大家点赞、收藏、关注、评论啦 、查看👇🏻👇🏻👇🏻微信公众号获取联系👇🏻👇🏻👇🏻

    打卡 文章 更新 69/  100天

     精彩专栏推荐:

    Java毕设项目精品实战案例《100套》

    HTML5大作业实战案例《100套》

    web前端网页实战《100套》

    展开全文
  • 网页制作-HTML试卷

    2012-05-12 11:51:29
    一、制作表格页面。 二、利用所学知识制作三个简单的页面,要求: (1)主题自定,控制页面文字的显示方式,使用背景图或背景色,页面布局合理、美观。 (2)用超链接把三个页面链接起来,实现页面的跳转。
  • HTML5期末大作业:学校教育网站设计——卡通风格在线职业教育(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校...

    HTML5期末大作业:学校教育网站设计——卡通风格在线职业教育(14页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品

    常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

    >>>🍅 点击进入🍅 >>>300例HTML期末大作业源码

    1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多?
    2.没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
    3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

    作品介绍

    1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。包含:主页、关于我们、登录、注册,总共4个页面。

    2.网页作品编辑:此作品为学生期末大作业网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

    3.网页作品布局:网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

    4.网页作品技术:使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言,并使用JavaScript制作了表单判断(提交时表单不能为空)。

    一、作品展示

    1.首页

    在这里插入图片描述

    2.讲师

    在这里插入图片描述

    3.登录注册

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

    4.关于我们

    在这里插入图片描述

    5. 视频播放

    在这里插入图片描述

    二、文件目录

    在这里插入图片描述

    三、代码实现

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com/" />
    <title>XXX职业教育在线测评与学习平台</title>
    
    <script src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/rev-setting-1.js"></script>
    <script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/tab.css" media="screen">
    <link rel="stylesheet" type="text/css" href="css/main.css" id="main-css">
    <!--课程选项卡-->
    <script type="text/javascript">
    
    
    </head>
    
    <body>
    
    <div class="head" id="fixed">
    	<div class="nav">
        	<span class="navimg"><a href="index.html"><img border="0" src="picture/logo.png"></a></span>
            <ul class="nag">
            	<li><a href="courselist.html" class="link1">课程</a></li>
                <li><a href="articlelist.html" class="link1">资讯</a></li>
                <li><a href="teacher.html" class="link1">讲师</a></li>
                <li><a href="exam_index.html" class="link1" target="_blank">题库</a></li>
                <li><a href="askarea.html" class="link1" target="_blank">问答</a></li>
            </ul>
            
            <span class="massage">
               
                
                <a href="mycourse.html"  onMouseOver="logmine()" style="width:70px" class="link2 he ico" target="_blank">sherley</a>
                <span id="lne" style="display:none" onMouseOut="logclose()" onMouseOver="logmine()">
                    <span style="background:#fff;">
                    	<a href="mycourse.html" style="width:70px; display:block;" class="link2 he ico" target="_blank">sherley</a>
                    </span>
                    <div class="clearh"></div>
                    <ul class="logmine" >
                        <li><a class="link1" href="#">我的课程</a></li>
                        <li><a class="link1" href="#">我的题库</a></li>
                        <li><a class="link1" href="#">我的问答</a></li>
                        <li><a class="link1" href="#">退出</a></li>
                    </ul>
                </span>
            </span>
        </div>
    </div>
       
    <div class="content">
    <div class="fullwidthbanner-container">
    		<div id="revolution-slider" style="max-height:500px !important; background:#46B0AC">
    			<ul>
                	 <li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
    					<!--  BACKGROUND IMAGE -->
    					<img src="picture/wide2.jpg" alt="" />
    
    					<!-- THE CAPTIONS IN THIS SLIDE -->
    					<div class="tp-caption sfl"
    						data-x="-130"
    						data-y="100"
    						data-speed="300"
    						data-start="300"
    						data-easing="easeOutBack">
    						<img src="picture/rb.png" alt="">
    					</div>
    
    					<div class="caption sfb"
    						data-x="0"
    						data-y="130"
    						data-speed="300"
    						data-start="800"
    						data-easing="easeOutExpo">
    						<h2>XXX网全新上线</h2>
    					</div>
    
    					<div class="tp-caption med-white sfl"
    						data-x="0"
    						data-y="220"
    						data-speed="300"
    						data-start="1000"
    						data-easing="easeOutExpo" style="font-size:20px;">
    						请自备小板凳,强势围观。
    					</div>
    
    					<div class="tp-caption small-white sfr"
    						data-x="0"
    						data-y="260"
    						data-speed="300"
    						data-start="1200"
    						data-easing="easeOutExpo">
    						<a href="#" class="btn btn-large btn-primary">在线测评</a>
    					</div>
    
    					<div class="tp-caption small-white lfb"
    						data-x="300"
    						data-y="90"
    						data-speed="1000"
    						data-start="1400"
    						data-easing="easeOutExpo">
    						<img src="picture/slider-10.png" alt="" />
    					</div>
    				</li>
    				 <li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
    					<!--  BACKGROUND IMAGE -->
    					<img src="picture/wide3.jpg" alt="" />
    
    					<!-- THE CAPTIONS IN THIS SLIDE -->
    					<div class="tp-caption sfl"
    						data-x="-130"
    						data-y="150"
    						data-speed="300"
    						data-start="300"
    						data-easing="easeOutBack">
    						<img src="picture/rb.png" alt="">
    					</div>
    
    					<div class="tp-caption med-white lfl"
    						data-x="0"
    						data-y="200"
    						data-speed="300"
    						data-start="800"
    						data-easing="easeOutExpo" style="font-size:18px; line-height:25px;">
    						<p>我们一直致力于优秀的职业教育,<br/>为你搭建成就梦想的舞台。</p>
    					</div>
    
    					<div class="caption sfb very-big-white"
    						data-x="700"
    						data-y="230"
    						data-speed="300"
    						data-start="1200"
    						data-easing="easeOutExpo">
    						<i>winner</i>
    					</div>
    					<div class="tp-caption med-white lfl"
    						data-x="0"
    						data-y="150"
    						data-speed="300"
    						data-start="800"
    						data-easing="easeOutExpo" style="font-size:22px; line-height:30px;">
    						<h2 style="font-size:30px">职业教育在线测评与学习平台</h2>
    					</div>
    
    					<div class="tp-caption small-white lfr"
    						data-x="0"
    						data-y="280"
    						data-speed="300"
    						data-start="1600"
    						data-easing="easeOutExpo">
    						<a href="#" class="btn btn-large btn-primary">在线学习</a>
    					</div>
    
    
    					<div class="tp-caption lfb"
    						data-x="390"
    						data-y="90"
    						data-speed="1000"
    						data-start="2000"
    						data-easing="easeOutExpo"
    						data-endeasing="fade" style="left:700px"
    						>
    						<img src="picture/guy-shadow.png" alt="">
    					</div>
    
    					<div class="tp-caption small-white lft"
    						data-x="240"
    						data-y="0"
    						data-speed="2000"
    						data-start="2600"
    						data-easing="easeOutExpo">
    						<img src="picture/spotlight.png" alt="">
    					</div>
    
    					<div class="tp-caption fade"
    						data-x="390"
    						data-y="90"
    						data-speed="2000"
    						data-start="2600"
    						data-easing="easeOutExpo">
    						<img src="picture/guy.png" alt="">
    					</div>
    				</li>
    				
    				<!-- THE FIRST SLIDE -->
    				<li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
    					<!--  BACKGROUND IMAGE -->
    					<img src="picture/wide1.jpg" alt="" />
    
    					<!-- THE CAPTIONS IN THIS SLIDE -->
    					<div class="caption large_text sfb"
    						data-x="300"
    						data-y="207"
    						data-speed="300"
    						data-start="800"
    						data-easing="easeOutExpo">
    						<img src="picture/our-features.png" alt="">
    					</div>
    
    					<div class="tp-caption sfr"
    						data-x="220"
    						data-y="115"
    						data-speed="300"
    						data-start="1000"
    						data-easing="easeOutBack">
    						<img src="picture/lu.png" alt="">
    					</div>
    
    					<div class="tp-caption sfr"
    						data-x="-50"
    						data-y="110"
    						data-speed="300"
    						data-start="1200"
    						data-easing="easeOutBack">
    						<img src="picture/clean.png" alt="">
    					</div>
    
    					<div class="tp-caption sfr"
    						data-x="180"
    						data-y="217"
    						data-speed="300"
    						data-start="1400"
    						data-easing="easeOutBack">
    						<img src="picture/lm.png" alt="">
    					</div>
    
    					<div class="tp-caption sfr"
    						data-x="-20"
    						data-y="230"
    						data-speed="300"
    						data-start="1600"
    						data-easing="easeOutBack">
    						<img src="picture/responsive.png" alt="">
    					</div>
    
    					<div class="tp-caption sfr"
    						data-x="220"
    						data-y="285"
    						data-speed="300"
    						data-start="1800"
    						data-easing="easeOutBack">
    						<img src="picture/lb.png" alt="">
    					</div>
    
    					<div class="tp-caption sfr"
    						data-x="40"
    						data-y="360"
    						data-speed="300"
    						data-start="2000"
    						data-easing="easeOutBack">
    						<img src="picture/bootstrap.png" alt="">
    					</div>
    
    					<div class="tp-caption sfl"
    						data-x="625"
    						data-y="115"
    						data-speed="300"
    						data-start="2200"
    						data-easing="easeOutBack">
    						<img src="picture/ru.png" alt="">
    					</div>
    
    					<div class="tp-caption sfl"
    						data-x="730"
    						data-y="85"
    						data-speed="300"
    						data-start="2400"
    						data-easing="easeOutBack">
    						<img src="picture/solid.png" alt="">
    					</div>
    
    					<div class="tp-caption sfl"
    						data-x="650"
    						data-y="217"
    						data-speed="300"
    						data-start="2600"
    						data-easing="easeOutBack">
    						<img src="picture/rm.png" alt="">
    					</div>
    
    					<div class="tp-caption sfl"
    						data-x="770"
    						data-y="217"
    						data-speed="300"
    						data-start="2800"
    						data-easing="easeOutBack">
    						<img src="picture/lightweight.png" alt="">
    					</div>
    
    					<div class="tp-caption sfl"
    						data-x="625"
    						data-y="285"
    						data-speed="300"
    						data-start="3000"
    						data-easing="easeOutBack">
    						<img src="picture/rb.png" alt="">
    					</div>
    
    					<div class="tp-caption sfl"
    						data-x="730"
    						data-y="345"
    						data-speed="300"
    						data-start="3200"
    						data-easing="easeOutBack">
    						<img src="picture/fresh.png" alt="">
    					</div>
    				</li>
    
    				
    			   
    			</ul>
    		</div>
    </div>
    
    <div class="td1">
    	<div class="tdcont">
        	<span class="tdimg"><img src="picture/ico4.jpg" width="450"></span>
            <span class="tdtext">
            	<h3>完全免费课程</h3>
                <p>精心录制视频课程与讲解,全部课程完全免费。</p><br/>
                <p><a href="courselist.html" class="btninto">开始学习</a></p>
            </span>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="td2">
    	<div class="tdcont">
        	<span class="tdimg1"><img src="picture/ico5.jpg" width="500"></span>
            <span class="tdtext1">
            	<h3 class="co1">智能评估题库</h3>
                <p>智能能力评估,学员可以通过具体题目,匹配相
    关知识点,文字解析与视频解析相结合。</p><br/>
    			<p><a href="training.html" class="btninto">点击测评</a></p>
            </span>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="td1">
    	<div class="tdcont np">
        	<span class="tdimg" style="margin-top:80px"><img src="picture/ico6.jpg" width="550"></span>
            <span class="tdtext" style="margin-top:120px">
            	<h3 class="co2">智能匹配练习</h3>
                <p class="tex1">跟随视频课程同步练习,紧扣重点难
    点,点点精通。</p><br/>
    			<p><a href="training.html" class="btninto">开始练习</a></p>
            </span>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="td2 np">
    	<div class="tdcont np">
        	<span class="tdimg1 ni"><img src="picture/ico7.png" width="300"></span>
            <span class="tdtext1" style="margin-top:100px;">
            	<h3 class="co3">全天答疑解惑</h3>
                <p class="tex1">XXX答疑社区,老师学员共同交流,我们的讲师更是倾囊相授,有问必答。</p><br/>
                <p><a href="#" class="btninto">提问问题</a></p>
            </span>
            <div style="clear:both"></div>
        </div>
    </div>
    
    <div class="crdiv">
    
    <div class="course">
        <h2 style="text-align:center; font-weight:normal; font-size:34px">精品课程</h2>
        <div class="clearh" style="height:20px;"></div>
        
        <div>
            <ul id="myTab3">
                <li class="current" onClick="nTabs(this,0);">IT技能</li>
                <li class="norma3" onClick="nTabs(this,1);">IT技能</li>
                <li class="norma3" onClick="nTabs(this,2);">IT技能</li>
                <li class="norma3" onClick="nTabs(this,3);">IT技能</li>
            </ul>
            <div class="clearh"></div>
            <div>
               <ul class="courseul" id="myTab3_Content0" style="display: block;">
                <li>
                	<div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
               </li>
               <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>.
               <div class="clearh"></div>
              </ul>               
            </div>
            <div>
               <ul class="courseul" id="myTab3_Content1" style="display: none;">
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>	
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <div class="clearh"></div>		
               </ul>               
            </div>
            <div>
               <ul class="courseul" id="myTab3_Content2" style="display: none;">
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>	
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <div class="clearh"></div>			
               </ul>               
            </div>
            <div>
               <ul class="courseul" id="myTab3_Content3" style="display: none;">
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>	
                <li>
                    <div class="courselist">
                    <img width="263" style="border-radius:3px 3px 0 0;" src="picture/c1.jpg" >
                    <p class="courTit">HTTP下载课程</p>
                    <div class="gray">
                    <span>1小时前更新</span>
                    <span class="sp1">1255555人学习</span>
                    <div style="clear:both"></div>
                    </div>
                    </div>
                </li>
                <div class="clearh"></div>		
               </ul>               
            </div>
    	</div>
        
        
        <div class="line no"></div>
        
        
    </div>
    <span class="morecourse"><a href="courselist.html" class="btnlink">更多课程</a></span>
    
    </div>
    <div class="foot">
    <div class="fcontainer">
          <div class="fwxwb"> 
    	       <div class="fwxwb_1">
    		       <span>关注微信</span><img width="95" alt="" src="picture/num.png">
    		   </div>
               <div>
                   <span>关注微博</span><img width="95" alt="" src="picture/wb.png">
    		   </div>	              
          </div>
    
    </script>
    
    
    
    

    四、web前端(学习资料)

    web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
    适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
    在这里插入图片描述


    五、源码获取

    ❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的 「点赞,好评,收藏」是我创作的动力。

    ❉ 2.关注我 ~ 每天带你学习 :各种前端插件、七夕表白网页制作、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、web期末大作业模板 、等! 「 前后开发者,一起探讨 前端,JAVA ,Node 知识,互相学习」!

    ❉3.以上内容技术相关问题可以相互学习,可在 薇幸 公Z号 >>> web前端小日记 👇🏻👇🏻👇🏻获取更多源码 👇🏻👇🏻👇🏻 !

    在这里插入图片描述

    六、更多源码

    🍅作者博客主页

    🍅 320套HTML期末大作业演示地址

    🍅 150套echarts大数据演示地址

    🍅100款告白源码地址

    展开全文
  • 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题。你想要解决的问题,在专栏???????????????????????????????? ...

    🍅 作者主页:Java李杨勇 

    🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我,都给你】

    🍅 文末获取源码联系 🍅

     临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题。你想要解决的问题,在专栏👇🏻👇🏻👇🏻👇🏻

    java项目精品实战分享案例《100套》》》

    web期末大作业网页实战《100套》》》

     Html+Css+JS期末大作业《100套》》》 

    常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的电竞博客网页制作,画面精明,非常适合初学者学习使用。

      B站视频演示: Web前端期末大作业课程--响应式汽车租赁网页设计.mp4

    网页实现截图:文末获取源码联系

    网站首页 

     

    关于我们

    汽车租赁业被称为交通运输服务行,它因为无须办理保险、无须年检维修、车型可随意更换等优点,以租车代替买车来控制企业成本,这种在外企中十分流行的管理方式,正慢慢受到国内企事业单位和个人用户的青睐。汽车租赁是指将汽车的资产使用权从拥有权中分开,出租人具有资产所有权,承租人拥有资产使用权,出租人与承租人签订租赁合同,以交换使用权利的一种交易形式。
    汽车租赁是指在约定时间内,租赁经营人将租赁汽车(包括载货汽车和载客汽车)交付承租人使用,不提供驾驶劳务的经营方式。汽车租赁的实质是在将汽车的产权与使用权分开的基础上,通过出租汽车的使用权而获取收益的一种经营行为,其出租标的除了实物汽车以外,还包含保证该车辆正常、合法上路行驶的所有手续与相关价值。不同于一般汽车出租业务的是,在租赁期间,承租人自行承担驾驶职责。汽车租赁业的核心思想是资源共享,服务社会。
     

     车量展示: 

     

    新闻资讯:

     

    客户案例:

      专业司机:

     

     在线预约:

     联系我们:

    项目组织结构:

    主要源码展示:

    index.html

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>(自适应手机版)黄色响应式车行汽车租赁网站模板 二手车销售出租公司网站</title>
        <meta name="keywords" content="汽车租赁模板,二手车网站模板" />
      
    </head>
    
    <body>
        <header class="index-header">
            <div class="index-head">
                <div class="wd1200"> <a href="/518/" class="logo"> <img src="/518/style/images/logo.png" alt="(自适应手机版)黄色响应式车行汽车租赁网站模板 二手车销售出租公司网站模板下载 - AB模板网"> </a>
                    <ul class="nav">
                        <li><a href="/518/index.html" target="_self">首 页</a> </li>
    
                        <li><a href="/518/about/">关于我们</a></li>
    
                        <li><a href="/518/car/">车辆展示</a></li>
    
                        <li><a href="/518/news/">新闻资讯</a></li>
    
                        <li><a href="/518/case/">客户案例</a></li>
    
                        <li><a href="/518/siji/">专业司机</a></li>
    
                        <li><a href="/518/yuyue/">在线预约</a></li>
    
                        <li><a href="/518/contact/">联系我们</a></li>
    
                    </ul>
    
                    <!-- 手机端导航 -->
    
                    <div class="m-header"> <span class="box"> <span class="line line1"></span> <span class="line line2"></span> <span class="line line3"></span> </span>
                    </div>
                    <div class="m-header-menu">
                        <div class="m-menu-top f-cb"> <a href="/518/" class="fl title"><img src="/518/style/images/logo2.png" alt="(自适应手机版)黄色响应式车行汽车租赁网站模板 二手车销售出租公司网站模板下载 - AB模板网" /></a> <span class="fr close"></span> </div>
                        <div class="m-header-list">
                            <ul>
                                <li> <a class="col-box" href="/S437/" target="_self"> <span class="tit">首 页</span> </a> </li>
    
                                <li> <a class="col-box" href="/518/about/" target="_self"> <span class="tit">关于我们</span> </a> </li>
    
                                <li> <a class="col-box" href="/518/car/" target="_self"> <span class="tit">车辆展示</span> </a> </li>
    
                                <li> <a class="col-box" href="/518/news/" target="_self"> <span class="tit">新闻资讯</span> </a> </li>
    
                                <li> <a class="col-box" href="/518/case/" target="_self"> <span class="tit">客户案例</span> </a> </li>
    
                                <li> <a class="col-box" href="/518/siji/" target="_self"> <span class="tit">专业司机</span> </a> </li>
    
                                <li> <a class="col-box" href="/518/yuyue/" target="_self"> <span class="tit">在线预约</span> </a> </li>
    
                                <li> <a class="col-box" href="/518/contact/" target="_self"> <span class="tit">联系我们</span> </a> </li>
    
                            </ul>
                        </div>
                        <div class="m-header-menu-sub">
                            <div class="boxs"></div>
                            <div class="boxs"></div>
                            <div class="boxs"></div>
                            <div class="boxs"></div>
                            <div class="boxs"></div>
                            <div class="boxs"></div>
                            <div class="boxs"></div>
                        </div>
                    </div>
                    <div class="m-shadow"></div>
    
                    <!-- 手机端导航 -->
    
                </div>
            </div>
            <div class="swiper-container index-banner-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"> <img src="/518/uploads/allimg/210729/1-210H92019370-L.jpg" alt="幻灯片3"> </div>
                    <div class="swiper-slide"> <img src="/518/uploads/allimg/210729/1-210H92019230-L.jpg" alt="幻灯片2"> </div>
                    <div class="swiper-slide"> <img src="/518/uploads/allimg/210729/1-210H9201Z70-L.jpg" alt="幻灯片1"> </div>
    
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </header>
        <div class="index-search wow bounceInUp">
            <div class="wd1200">
                <div class="key"> <img src="/518/style/images/icon_hot.png" alt="" class="icon">
                    <div class="word"> <span class="title">搜索关键词:</span>
                        <div>
    
                            <a href='/518/car/c1/'>豪华型</a>
    
                            <a href='/518/car/c2/'>舒适型</a>
    
                            <a href='/518/car/c3/'>经济型</a>
    
                            <a href='/518/car/c4/'>越野SUV</a>
    
                            <a href='/518/car/c5/'>客车型</a>
    
                        </div>
                    </div>
                </div>
                <form name="formsearch" action="/518/plus/search.php">
                    <div class="search-box">
                        <div class="input">
                            <input type="text" name="q" id="kw" placeholder="请输入关键词" />
                        </div>
                        <div class="button">
                            <button type="submit"> <img src="/518/style/images/icon_search.png" alt=""> </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="index-show">
            <div class="wd1200">
                <div class="index-Title">
                    <div class="title wow slideInUp">车辆展示</div>
                    <div class="intro wow slideInUp">给予客户清晰完美的用车解决方案!</div>
                    <div class="line wow slideInUp"></div>
                </div>
                <div class="show-nav wow slideInUp">
                    <ul>
                        <li class="li-active"> <a href="/518/car/">全部车型</a> </li>
    
                        <li><a href="/518/car/c1/">豪华型</a></li>
    
                        <li><a href="/518/car/c2/">舒适型</a></li>
    
                        <li><a href="/518/car/c3/">经济型</a></li>
    
                        <li><a href="/518/car/c4/">越野SUV</a></li>
    
                        <li><a href="/518/car/c5/">客车型</a></li>
    
                    </ul>
                </div>
                <div class="show-contain">
                    <div class="show-box wow slideInUp">
                        <div class="picture"> <img src="/518/uploads/allimg/210730/1-162L31146-F30.jpg" alt="迈巴赫"> </div>
                        <div class="info">
                            <div class="name">迈巴赫</div>
                            <div class="intro">迈巴赫(德文:Maybach)与迈巴赫引擎制造厂(德文:Maybach-Motorenbau GmbH)是曾经在1921年到1940年间活跃于欧洲地区的德国超豪华汽车品牌与制造厂。 车厂创始人卡尔迈巴赫(Karl Maybach)...</div>
                            <div class="photo"><img src='/518/uploads/allimg/210730/1-162L31146-6317.jpg'><img src='/518/uploads/allimg/210730/1-162L31146-2637.jpg'><img src='/518/uploads/allimg/210730/1-162L31146-F30.jpg'></div>
                            <div class="bot"> <a href="/518/car/c1/23.html" class="detail">查看详细+</a>
                                <div>¥<strong>1200</strong>/天</div>
                            </div>
                        </div>
                    </div>
    
                    <div class="show-car wow slideInUp">
                        <a href="/518/car/c3/22.html" class="car-item">
                            <div class="tu"> <img src="/518/uploads/allimg/210730/1-162L30923-9619.jpg" alt="宝马7系"> </div>
                            <div class="info"> <span>宝马7系</span>
                                <div>¥<strong>800</strong>/天</div>
                            </div>
                        </a>
                        <a href="/518/car/c1/2.html" class="car-item">
                            <div class="tu"> <img src="/518/uploads/allimg/210728/1-162JP4U-5634.jpg" alt="奔驰S级"> </div>
                            <div class="info"> <span>奔驰S级</span>
                                <div>¥<strong>800</strong>/天</div>
                            </div>
                        </a>
                        <a href="/518/car/c1/1.html" class="car-item">
                            <div class="tu"> <img src="/518/uploads/allimg/210728/1-162JP205-5921.jpg" alt="奥迪"> </div>
                            <div class="info"> <span>奥迪</span>
                                <div>¥<strong>600</strong>/天</div>
                            </div>
                        </a>
    
                    </div>
                </div>
            </div>
        </div>
        <div class="index-reason">
            <div class="index-Title">
                <div class="title wow slideInUp">选择我们的 <strong style="color: #3186E0 ;">四大理由</strong></div>
                <div class="intro wow slideInUp">给予客户清晰完美的解决方案!</div>
                <div class="line wow slideInUp"></div>
            </div>
            <div class="reason-nav wd1200 wow slideInUp">
                <ul>
                    <li class='li-active'>
                        <div class="sanjiao"></div>
                        <img src="/518/style/images/ly1.png" alt="" class="icon icon1"> <img src="/518/style/images/ly1_h.png" alt="" class="icon icon2">
                        <div class="word">
                            <div class="title">实力雄厚</div>
                            <div class="intro">16年租车经验</div>
                        </div>
                    </li>
                    <li>
                        <div class="sanjiao"></div>
                        <img src="/518/style/images/ly2.png" alt="" class="icon icon1"> <img src="/518/style/images/ly2_h.png" alt="" class="icon icon2">
                        <div class="word">
                            <div class="title">质高价优</div>
                            <div class="intro">合理的价格</div>
                        </div>
                    </li>
                    <li>
                        <div class="sanjiao"></div>
                        <img src="/518/style/images/ly3.png" alt="" class="icon icon1"> <img src="/518/style/images/ly3_h.png" alt="" class="icon icon2">
                        <div class="word">
                            <div class="title">完善服务</div>
                            <div class="intro">优质服务体系</div>
                        </div>
                    </li>
                    <li>
                        <div class="sanjiao"></div>
                        <img src="/518/style/images/ly4.png" alt="" class="icon icon1"> <img src="/518/style/images/ly4_h.png" alt="" class="icon icon2">
                        <div class="word">
                            <div class="title">专业售后</div>
                            <div class="intro">专业团队保障</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="reason-contain" style='background-image: url(/518/style/images/ly.jpg);'>
                <div class="wd1200">
                    <div class="promise">
                        <h3 class="wow slideInUp">四大服务承诺</h3>
                        <div class="intro wow slideInUp">免除您的后顾之忧</div>
                        <div class="line wow slideInUp"></div>
                        <div class="seave wow slideInUp">
                            <div class="strip">
                                <div></div>
                                <span>24小时客服问题响应服务</span> </div>
                            <div class="strip">
                                <div></div>
                                <span>7*24售后热线服务</span> </div>
                            <div class="strip">
                                <div></div>
                                <span>优质车源保证安全</span> </div>
                            <div class="strip">
                                <div></div>
                                <span>专家指导服务</span> </div>
                        </div>
                       
                <div class="wd1200">Copyright &copy; 2021 通用企业汽车租赁有限公司<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP12345678</a> <a href="/sitemap.xml" target="_blank">XML地图</a></div>
            </div>
        </footer>
        <img src="/518/style/images/go-top.png" alt="" id="go-top">
        <script src="/518/style/js/swiper.min.js"></script>
        <script src="/518/style/js/common.js"></script>
        <script src="/518/style/js/wow.js"></script>
        <script>
            $(function() {
                $('#tj2').click(function() {
                    //alert(1)
                    if ($('#name2').val() == '') {
                        alert('请输入您的姓名!');
                        $("#name2").focus();
                        return false;
                    }
                    if ($("#tel2").val() == "") {
                        alert("请输入你的手机!");
                        $("#tel2").focus();
                        return false;
                    }
                    if (!$("#tel2").val().match(/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/)) {
                        alert("手机号码格式不正确!");
                        $("#tel2").focus();
                        return false;
                    }
                })
            })
        </script>
        <script src="/518/style/js/index.js"></script>
        <script src="/518/style/js/jquery.kxbdmarquee.js"></script>
        <script type="text/javascript">
            (function() {
    
                $("#marquee4").kxbdMarquee({
                    direction: "up",
                    isEqual: false
                });
    
            })();
        </script>
    </body>
    
    </html>

    style.css

    header .index-head .wd1200 {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    header .index-head .wd1200 .logo img {
        height: 65px;
    }
    
    header .index-head .wd1200 .nav {
        display: flex;
        align-items: center;
    }
    
    header .index-head .wd1200 .nav li {
        height: 90px;
        padding: 0 20px;
        border-bottom: 3px solid transparent;
        transition: 0.3s;
    }
    
    header .index-head .wd1200 .nav li a {
        font-size: 16px;
        transition: 0.3s;
        color: #fff
    }
    
    header .index-head .wd1200 .nav .li-active {
        border-bottom: 3px solid #3186E0;
    }

    作品来自于网络收集、侵权立删 

    展开全文
  • 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题。你想要解决的问题,在这里都有 Web前端期末大作业-响应式艺术培训...
  • 第1章网页开发基础 习题 一、填空题 1.在CSS中,用于设置行间距的属性是【 】。 2.在CSS中,用于定义字体风格,如设置斜体、倾斜或正常字体的属性是【 】。 3.内嵌式是将CSS代码集中写在HTML文档的【 】标记中,并且...
  • 临近期末, 你还在为Java毕业设计、HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这里都能解决
  • Java Web程序设计题库 一选择题 1以下文件名后缀中只有 C 不是静态网页的后缀 A.html B.htm C .JSP D.shtml 2以下文件名后缀中只有 B 不是动态网页的后缀 A.jsp B.html C.aspx Dphp 3在page指令中 C 属性是可以在...
  • Web前端期末大作业-响应式唯美婚庆公司网站网页设计HTML+CSS+JavaScript)
  • 酷炫漂亮响应式风景旅游网页...’临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这里都能解决
  • ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。 如何使用ajax? 第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。 var ...
  • HTML+CSS题库

    千次阅读 2020-11-24 15:46:21
    网页设计中,(A )是所有页面中的重中之重,是一个网站的灵魂所在。 A.引导页 B.脚本页面 C.导航栏 D.主页面 22.为了标识一个HTML文件应该使用的HTML标记是(C )。 A.  B.</body> C.</html> D. …...
  • Java Web程序设计题库含答案 一选择题 1以下文件名后缀中只有 C 不是静态网页的后缀 A.html B.htm C .JSP D.shtml 2以下文件名后缀中只有 B 不是动态网页的后缀 A.jsp B.html C.aspx Dphp 3在page指令中 C 属性是...
  • ASP.NET程序设计复习题 ** 一.填空题  (1)ASPX网页的代码储存模式有两种,它们是代码分离模式和单一模式。 (2)当一个Web 控件上发生的事件需要立即得到响时,应该将他的 AutoPostBack 属性设置为...
  • 欢迎添加微信互相交流学习哦!...本文针对教育工作的具体需求,用struts + spring + hibernate搭建的框架为设计平台,以B/S(Browser/Server)模式开发与设计题库及试卷管理模块。本设计为Smart系统.
  • Javascript交互式网页设计试题(一)

    千次阅读 2021-04-19 10:12:45
    1、在JQuery中,下列( )方法能够获取或设置元素的文本内容,不含HTML标签。 A attr() B text() C value() D replace() 2、以下关于XHTML规范说法不正确的是( ) A XHTML元素必须被关闭 B 用 Id 属性代替 name 属性 C ...
  • 适合刚接触前端基础知识的同学,初步了解了HTML+CSS后,可以尝试练习类似项目;该项目主要为HTML+CSS实现,不涉及交互、逻辑功能,旨在提高样式布局能力

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,838
精华内容 735
关键字:

html网页设计题库