前端实际应用案例
简答
1.html 中 title 属性和 alt 属性的区别?
答：alt属性是在图片无法加载的时候才会显示的内容；
title是在图片正常加载鼠标划上去显示的内容。
2.请说出几个常用的块级元素和行内元素。
答：块级元素占一行，不论内容多少，常用的块级元素有：
- div -最常用的块级元素
- dl - 和dt dd搭配使用的块级元素
- form - 交互表单
- h1 - 大标题
- hr - 水平分隔线
- ol排序表单
- p - 段落
- ul - 非排序列表
行内元素内容少时不会换行，常见的行内元素有：
- span - 常用内联容器，定义文本内区块
- a - 超链接
- br - 换行
- em - 强调
- img - 图片
- input - 输入框
- tabel - 表格标签
3.介绍一下 CSS 的盒子模型?
答：在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸， 属性 — 像它的颜色，背景，边框方面 — 和位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。
4.JavaScript 里有哪些数据类型
答： JavaScript数据类型有字符串值，数值，布尔值，数组，对象。
5.JS 怎么实现一个类。怎么实例化这个类。
答：JavaScript使用函数来定义类，创建对象的过程也是类实例化的过程。在JavaScript中，创建对象（即类的实例化）使用 new 关键字。
6.请列举五个常用的 Javascript DOM 方法
答：
- getElementsByName()
- getElementById()
- createTextNode()
- createElement()
- appendChild()
项目实例
1.导航栏的实现：
网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域，寻找资源。
代码如下：
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><style type="text/css">* {margin: 0;padding: 0;}.header {width: 100%;height: 40px;background-color: #55a8ea;/*内容会被修剪，并且其余内容是不可见的。*/overflow: hidden;}.header li {/*设置li为行内块级元素*/display: inline-block;width: 100px;height: 40px;padding-top: 12px;text-align: center;}.header li:hover{background-color: #00619f;;}.header li a{text-decoration: none;color: #fff;font-size: 14px;font-weight: bold;}.active{background-color: #00619f;}style>
head>
<body>
<div class="header"><ul><li class="active"><a href="#">首页a>li><li><a href="#">网站建设a>li><li><a href="#">程序开发a>li><li><a href="#">网络营销a>li><li><a href="#">案例展示a>li><li><a href="#">联系我们a>li>ul>div>body>
html>
最终实现效果如下：
当鼠标光标移动到标签上时，会变化颜色。
2.特征布局:图片列表
代码如下：
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><style type="text/css">*{margin: 0;padding: 0;}.box{width: 960px;height: 310px;border: 1px solid gray;}.title{width: 960px;height: 50px;font-size: 18px;margin-top: 20px;color: #000;}img{float: left;width: 160px;height: 68px;margin: 20px 10px 10px 15px;}.clear{clear: both;}style>
head>
<body>
<div class="box"><h2 class="title">图片展示h2><hr><img src="img/img1.jpg"><img src="img/img1.jpg"><img src="img/img1.jpg"><img src="img/img1.jpg"><img src="img/img1.jpg"><img class="clear" src="img/img1.jpg"><img src="img/img1.jpg"><img src="img/img1.jpg"><img src="img/img1.jpg"><img src="img/img1.jpg">
div>
body>
html>
最终实现效果如下：
3.特征布局:淘宝主页
设计一个淘宝的页面，使页面更加美观，代码如下：
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><style type="text/css">*{margin: 0;padding: 0;}.box{margin: 30px auto;width: 500px;height: 360px;border: 2px solid red;}.header{width: 440px;height: 20px;border-left: 4px solid red;margin: 30px;padding-left: 15px;font-weight: bold;}.img1{width: 212px;height: 239px;margin-left: 30px;float: left;}.img2{width: 90px;height: 100px;margin: 10px;margin-left: 20px;float: left;}.img3{width: 90px;height: 100px;margin: 10px;float: left;}.content div{width: 100px;height: 20px;float: left;margin: 5px;text-align: center;}table{width: 211px;height: 97px;text-align: center;border-right: 2px dashed gray;border-bottom: 2px dashed gray;float: left;margin: 5px 20px;}table td{border-left: 2px dashed gray;border-top: 2px dashed gray;}style>
head>
<body>
<div class="box"><div class="contents"><div class="header">淘宝女装div><div class="content"><img class="img1" src="img/taobao_img.jpg"><img class="img2" src="img/bag.jpg"><img class="img3" src="img/shooes.jpg"><div>时尚包包div><div>潮流美鞋div><table><tr><td>新品上市td><td>女装td>tr><tr><td style="width: 100px;height: 42px">欧美风td><td style="width: 100px;">美搭td>tr>table>div>div>div>
body>
html>
最终实现效果如下：
4.电影排行榜
设计一个电影排行榜的页面，当鼠标放到电影名称上时，会下拉对应的电影介绍，鼠标移开时，电影介绍又会隐藏起来。
具体代码如下：
<html lang="en">
<head><meta charset="UTF-8"><title>电影排行榜title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 450px;border: 1px solid gray;margin: 0 auto;margin-top: 50px;}.box h1{color: green;font-size: 20px;line-height: 35px;font-weight: bold;border: 1px dashed gray;padding-left: 10px;}.box li{list-style: none;padding: 10px 15px;border: 1px dashed gray;}.box li span{background-color: gray;display: inline-block;width: 20px;height: 20px;color: white;text-align: center;}.box li:nth-child(-n+3) span{background-color: red;color: black;}.content{overflow: hidden;margin-top: 5px;display: none;}.content img{width: 80px;height: 120px;float: left;}.content p{width: 180px;height: 120px;float: right;font-size: 12px;}.current .content{display: block;}style><script type="text/javascript" src="js/jquery-3.4.1.min.js">script><script>$(function () {$('li').mouseenter(function () {$(this).addClass('current');});$('li').mouseleave(function () {$(this).removeClass('current');});})script>
head>
<body>
<div class="box"><h1>电影排行榜h1><ul><li><span>1span> 哪吒之魔童降世<div class="content"><img src="img/nezha.jpg"><p>天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。p>div>li><li><span>2span> 烈火英雄<div class="content"><img src="img/2liehuo.jpg"><p>滨港市海港码头发生管道爆炸，整个罐区的原油都顺着A01油罐往外流，化成火海和阵阵爆炸，威胁全市、全省，甚至邻国的安全。慌乱的市民们四处奔逃，一辆辆消防车却逆向冲进火海……p>div>li><li><span>3span> 绝杀慕尼黑<div class="content"><img src="img/3juesha.jpg"><p>电影根据体育历史中著名的传奇真实事件改编，讲述了1972年慕尼黑奥运会篮球决赛中，前苏联篮球队打败了保持了36年全胜纪录的美国队的传奇故事。在决赛结束前三秒钟，美国队以一分优势领先。美国队已经开始提前庆祝比赛的胜利了，因为他们相信比赛结果已成定局。然而，一位来自苏联的不知名篮球教练，率领着艰难、困苦、贫穷中的苏联国家队，比赛结果发生逆转，整个篮球历史也发生了改变。p>div>li><li><span>4span> 银河补习班<div class="content"><img src="img/4yinhe.jpg"><p>浩瀚太空，航天员意外失联，生命最大的绝境中，他回忆起自己那个最了不起的爸爸。一对父子跨越漫长的时光，守护爱和亲情，故事充满了欢乐、温暖、泪水与奇观。p>div>li><li><span>5span> 游戏人生 零<div class="content"><img src="img/5youxi.jpg"><p>距今超过六千年的远古世界，天地割裂的凄惨战争持续不断，毫无还手之力的人类被拥有强大力量的各个种族逼入绝境，濒临灭亡。此时率领人类的年轻领袖里克（松冈祯丞 配音），与机凯种少女休比（茅野爱衣 配音）偶然相遇。被同伴抛弃的休比，为了修复故障，拜托里克把“人类的心”告诉自己。机凯种少女的单纯与真诚，使得里克对休比逐渐放下戒备、敞开心扉，二人感情亦日渐升温。p>div>li>ul>
div>
body>
html>
实现效果如下：
当鼠标移动到相应的电影名称上时，会下拉电影介绍：
5.模拟QQ邮箱登录界面
仿照QQ邮箱登录页面设计一个类似的页面，QQ邮箱登录页面如下图：
代码如下：
<html lang="en">
<head><meta charset="UTF-8"><title>模拟QQ邮箱登录界面title><style type="text/css">* {margin: 0;padding: 0;}.login_card {border: 1px solid gray;height: 389px;width: 336px;margin: 50px auto;}.login_card_tab {width: 336px;border: 1px solid gray;height: 51px;background-color: lavender;display: inline-block;}.left_tab {font-size: 16px;color: gray;float: left;margin: 10px 48px;padding: 5px;}.right_tab {font-size: 16px;color: black;float: left;margin: 10px 48px;padding: 5px;}.contents {margin: 40px;}#username{margin-bottom: 8px;}#passwd{margin-bottom: 15px;}#checkbox{margin-bottom: 15px;}#submit{font-size: large;margin-bottom: 15px;}#forgot{text-decoration: none;float: right;}style>
head>
<body>
<div class="login_card"><div class="login_card_tab"><div class="left_tab">微信登录div><div class="right_tab">QQ登录div>div><div class="contents"><form action="#" method="post"><input id="username" type="text" name="user" style="height: 40px; width: 250px;" placeholder="支持QQ号/邮箱/手机号登录"><br><input id="passwd" type="password" name="passwd" style="height: 40px; width: 250px;" placeholder="QQ密码"><br><input id="checkbox" type="checkbox" name="auto_login">下次自动登录<br><input id="submit" type="submit" value="登录" style="background-color: #55a8ea; height: 40px; width: 250px;"><br><div style="text-align: center; margin: 15px;"><a href="#" style="text-decoration: none; font-size: small">扫码快捷登录a>div><a id="forgot" href="#" style="text-align: right; font-size: small">忘了密码？a><br>form>div>
div>
body>
html>
最终实现效果如下：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！