web开发第一周

作业一:用户注册页面

<!doctype html>
<html>
<head>
<title>sign in</title>
<style>
div{
    background:#009FCC;
    font-size:24px;
    padding:5px;
    color:white;
}
form{
    background: #F8F8FF ;
    border:#357FC4 solid 1px;
    color:#575454;  
    width:400px;
    margin:20px auto;
    font-size:15px;
}
table{
    margin:10px auto;
}
a{
    text-decoration:none;
}
input[type="button"]{
    background:#228B22;
    color:white;
    font-size:15px;
    font-weight:bold;
    width:120px;
    height:40px;
}
td:first-child{
    text-align:right;
    padding:0 5px;
}
td:only-child{
    text-align:center;
    font-size:12px;
}
span:before{
    content:"* ";
    color:red;
}
input[type="text"]:read-only{
    border:#888484 solid 2px;
    background:#888484;
    font-weight:bold;   
}
input[type="text"]:hover{
    background:#EFD9AC;
}
</style>
</head>
<body>
<form>
<div>注册账号</div>
<table>
    <tr><td><span>用户名</span></td><td><input type="text" name="user_name" /></td></tr>
    <tr><td><span>email</span></td><td><input type="text" name="user_email" /></td></tr>
    <tr><td><span>密码</span></td><td><input type="password" name="user_password" /></td></tr>
    <tr><td><span>确认密码</span></td><td><input type="password" name="user_confirm_password" /></td></tr>   
    <tr><td>性别</td><td><input type="radio" id="male" name="user_sex" checked />男<input type="radio" id="female" name="user_sex" />女</td></tr>
    <tr><td>手机号码</td><td><input type="text" name="user_phone1" /></td></tr>
    <tr><td colspan="2"><input type="checkbox" checked/>我已看过并接受<a href="#">《用户协议》</a></td></tr>
    <tr><td colspan="2"><input type="button" name="submit" value="立即注册" /></td></tr>
</table>
</form>
</body>
</html>

作业二:电子汇款单页面

<!DOCTYPE html>
<html>
   <head>
	  <title>中国银行电子汇款单</title>
	  <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
	  <h1>中国银行电子汇款单</h1>
      <table border="1" cellpadding="0" cellspacing="0" style="width: 1100px">
             <tr>
             	<td colspan="2"><b>回单类型</b></td>
             	<td >网上转账汇款</td>
             	<td colspan="2"><b>指令序号</b></td>
             	<td >HQH0000000000000013878172</td>
             </tr>
             <tr>
             	<th rowspan="4" style="width: 20px">收款人</th>
             	<td style="width: 80px">户名</td>
             	<td>大硕</td>
             	<th rowspan="4" style="width: 20px">付款人</th>
             	<td style="width: 80px">户名</td>
             	<td>大旭</td>
             </tr>
             <tr>
                 <td><b>卡号</b></td>
                 <td>000000000001</td>
                 <td><b>卡号</b></td>
                 <td>000000000002</td>
             </tr>
             <tr>
                 <td>地区</td>
                 <td>广东</td>
                 <td>地区</td>
                 <td>山东</td>
             </tr>
             <tr>
                 <td><b>网点</b></td>  
                 <td>中国银行广东业务处理中心</td>
                 <td><b>网点</b></td>
                 <td>中国银行山东业务处理中心</td>
             </tr>
             <tr>
                 <td colspan="2"><b>币种</b></td>
                 <td>人民币</td>
                 <td colspan="2"><b>钞汇标志</b></td>
                 <td><u>钞票</u></td>
             </tr>
             <tr>
                 <td colspan="2"><b>金额</b></td>
                 <td>3亿元</td>
                 <td colspan="2"><b>手续费</b></td>
                 <td>60万元</td>
             </tr>
             <tr>
                 <td colspan="2"><b>合计</b></td>
                 <td colspan="4">人民币(大写)壹元整</td>
             </tr>
             <tr>
                 <td colspan="2"><b>交易时间</b></td>
                 <td><i>2024年3月14日</i></td>
                 <td colspan="2"><b>时间戳</b></td>
                 <td><i>2024-03-14-14.00.0000000</i></td>
             </tr>
      </table>
             <div>票据打印时间:2024-03-14 15:00:12</div> 
             <div><del>票据打印单位:中国银行广东业务中心</del> </div>
             <div>操作员:老王</div>
    </body>
</html>

作业三:豆瓣电影页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>热门电影板块</h1>
		<hr>
		<table border="0" cellspacing="0" width="1200">
			<tr>
				<td><font size="5"><b>最近热门电影</b></font></td>
				<td align="center"><font size="5">热门</font></td>
				<td align="center"><font size="5">最新</font></td>
				<td align="center"><font size="5">豆瓣高分</font></td>
				<td align="center"><font size="5">冷门佳片</font></td>
				<td align="center"><font size="5">华语</font></td>
				<td align="center"><font size="5">欧美</font></td>
				<td align="center"><font size="5">韩国</font></td>
				<td align="center"><font size="5">日本</font></td>
				<td align="center"><font size="5">更多>></font></td>
			</tr>
		</table>
		<hr>
		<table border="0" cellspacing="0">
			<tr>
				<td><img src="D:\ChromeCore\图片\周处除三害.jpg"></td>
				<td><img src="D:\ChromeCore\图片\可怜的东西.jpg"></td>
				<td><img src="D:\ChromeCore\图片\女孩们都很好.jpg"></td>
				<td><img src="D:\ChromeCore\图片\少女斗恶龙.jpg"></td>
			</tr>
			<tr>
				<td>周处除三害</td>
				<td>可怜的东西</td>
				<td>女孩们都很好</td>
				<td>少女斗恶龙</td>
			</tr>
			<tr>
				<td><img src="D:\ChromeCore\图片\机器人之梦.jpg"></td>
				<td><img src="D:\ChromeCore\图片\首尔之春.jpg"></td>
				<td><img src="D:\ChromeCore\图片\美国小说.jpg"></td>
				<td><img src="D:\ChromeCore\图片\利益区域.jpg"></td>
			</tr>
			<tr>
				<td>机器人之梦</td>
				<td>首尔之春 </td>
				<td>美国小说 </td>
				<td>利益区域 </td>
			</tr>
		</table>
	</body>
</html>

作业四:古诗词鉴赏页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钱塘湖春行</title>
    <style>
        #textbox{
            border: 2px solid rgb(41, 40, 40);
            text-align: center;
            width: 850px;
            margin: 20px auto;
            margin-top: 0%;
            height: 500px ;
        }
        .title{
            color: rgb(116, 0, 0);
            font-size: 40px;
            font-weight: bold;
            font-family: 楷体;
        }
        #a{
            text-align: left;
            position: fixed;
            margin: 10px 5px;
        }
        .author{
            color: rgb(116, 0, 0);
            font-weight: bold; 
            font-family: 隶书;
            font-size: 20px;
        }
        #text{
            height: 45%;
            position: relative;
            width: 550px;
        }
        #left{
            width: 510px;
            height: 225px;
            margin-left: 25px;
            position: fixed;
        }
        #left p{
            margin-top: 35px;
            position: relative;
            letter-spacing: 4px;
            line-height: 40px;
            font-family: 方正姚体;
            color: rgb(116, 0, 0);
            font-size: x-large;
        }
        #right{
            margin-left: 505px;
            width: 330px;
            height: 225px;
            position: fixed;
        }
        #right img{
            text-align: left;
            margin-top: 10px;
            height: 210px;
            width: 160px;
        }
        #footer{
            text-align: left;
            margin-top: 40px;
        }
        #footer p{
            font-family: 楷体;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div id="textbox">
        <div id="a"><a href="">返回</a></div>
        <span class="title">钱塘湖春行</span>
        <p><span class="author">唐代:白居易</span></p>
        <hr color="green" size="5px">
        <div id="text">
                <div id="left">
                    <p>
                    孤山寺北贾亭西,水面初平云脚低。<br>
                    几处早莺争暖树,谁家新燕啄春泥。<br>
                    乱花渐欲迷人眼,浅草才能没马蹄。<br> 
                    最爱湖东行不足,绿杨阴里白沙堤。
                    </p>
                </div>
                <div id="right">
                    <img src="D:\ChromeCore\图片\白居易.jpg" alt="">
                </div>
        </div>
        <div id="footer">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;简介: 白居易(772年-846年),字乐天,号香山居士,又号醉吟先生,祖籍太原,到其曾祖父时迁居下邽,生于河南新郑。白居易是唐代伟大的现实主义诗人,唐代三大诗人之一。白居易与元稹共同倡导新乐府运动,世称“元白”,与刘禹锡并称“刘白”。白居易的诗歌题材广泛,形式多样,语言平易通俗,有“诗魔”和“诗王”之称。</p>
        </div>
    </div>
</body>
</html>

  • 11
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
### 回答1: 很高兴回答你的问题。作为一个 AI 语言模型,我没有实际的经验来记录日记。但是,我可以告诉你,Vue 是一个流行的 JavaScript 框架,它可以帮助开发人员构建交互式的 Web 应用程序。Vue 具有简单易学、灵活性强、性能优异等优点,因此在开发中得到了广泛的应用。如果你有任何关于 Vue 开发的具体问题,我很乐意帮助你解答。 ### 回答2: 第一天: 今天开始了一周的vue开发。首先,我花了一些时间了解了一下vue的基本概念和语法规则。我了解到vue是一个渐进式的JavaScript框架,它可以用于构建用户界面。我通过阅读官方文档和参考一些教程来学习如何使用vue。初步了解了vue的组件化开发和数据绑定的概念。 第二天: 今天,我决定尝试一下使用vue来构建一个简单的ToDo列表应用程序。我创建了一个vue项目,并在主组件中定义了一些数据和方法。然后,我使用v-for指令来遍历数据,并使用v-bind指令实现了数据的双向绑定。我还添加了一些样式来美化界面。整个过程相对顺利,虽然在处理一些细节时遇到了一些问题,但最终成功完成了ToDo列表应用。 第三天: 今天我决定学习一下vue的路由功能。我在项目中引入了vue-router,并创建了一些路由组件。然后我定义了一些路由规则,并在主组件中使用<router-view>显示当前路由对应的组件。我还添加了一些导航链接,并用router-link指令实现了路由的切换。学习路由功能过程中遇到了一些语法和配置问题,但最终解决了。 第四天: 今天我开始学习vue的状态管理功能。我在项目中引入了vuex,并创建了一些状态和mutations。然后我在主组件中使用mapState和mapMutations辅助函数来访问和修改状态。学习状态管理的过程中,我发现了vuex的一些特性,比如模块化和插件化,并尝试使用这些特性来简化代码结构。 第五天: 今天我专注于学习vue的动画功能。我在项目中引入了vue的动画模块,并尝试了一些基本的动画效果,如淡入淡出和滑动效果。我还了解到了过渡和动态组件的概念,并尝试通过vue的transition和transition-group组件实现了这些效果。学习动画功能让我的应用程序变得更加生动和有趣。 第六天: 今天我决定学习vue的性能优化技巧。我通过懒加载和按需加载等技术来优化我的应用程序的加载速度。我还使用vue-devtools工具来分析和优化组件的性能。学习性能优化的过程中,我了解到了一些常见的优化策略,如减少不必要的重新渲染和合理使用计算属性等。 第七天: 今天是我这一周的vue开发的最后一天。我回顾了一下这一周的学习和实践,发现自己在vue的开发中有了很大的进步。我对vue的基本概念和语法有了更深入的了解,也掌握了一些高级功能和优化技巧。我觉得通过这一周的实践,我对vue的开发有了更加扎实的基础,以后可以更好地应用它来构建复杂的应用程序。 ### 回答3: 第一天: 今天开始进行vue开发,首先安装了vue-cli脚手架工具,并创建了一个新的vue项目。然后我使用vue-router插件来搭建了项目的路由系统,可以通过不同的URL来实现页面的跳转。接下来,我创建了几个组件,包括Header、Footer和Home等,并在页面中引入和使用了这些组件。通过组件化的开发方式,我可以更好地管理和复用代码。 第二天: 今天我继续进行vue开发,学习了vue的数据绑定和事件绑定。我在组件中创建了一些数据属性,然后在模板中使用双花括号语法将数据和页面进行绑定。并且,我还通过v-on指令绑定了一些事件处理函数,实现了一些交互功能,比如点击按钮触发弹窗等。vue的数据驱动模型让我对整个开发过程更加流畅和高效。 第三天: 今天我开始研究vue的组件通信问题。我学习了父子组件之间的通信方式,包括props和$emit方法,可以实现父组件向子组件传递数据和子组件向父组件发送事件。我还学习了兄弟组件之间的通信方式,可以使用事件总线或者vuex来实现不同组件之间的数据传递和状态管理。掌握了这些通信方式后,我能够更好地组织和管理组件之间的关系。 第四天: 今天我学习了vue的生命周期钩子函数。通过对生命周期的理解,我可以在不同阶段进行一些初始化或者清理工作。其中,created和mounted是最常用的两个钩子函数,分别在实例创建之后和实例挂载到页面之后被调用。我可以在这两个钩子函数中进行一些异步数据请求或者DOM操作,确保在渲染之前或之后进行必要的操作。 第五天: 今天我开始学习vue的状态管理模式vuex。在复杂的应用中,组件之间的状态管理变得非常重要,而vuex提供了一个集中式的存储管理方案。我创建了一个vuex的store,包括state、mutations、actions和getters等。通过mutations和actions,我可以对state进行修改,并且可以通过getters获取state中的数据。vuex的使用大大简化了整个应用的状态管理流程。 第六天: 今天我继续进行vue开发,学习了异步组件和动态路由的使用。在项目中,如果有一些组件比较大或者需要懒加载,可以使用异步组件的方式按需加载。我使用了import函数和webpack的代码分割功能来实现异步组件的加载。另外,动态路由可以使得路由的配置更加灵活,可以根据需要动态添加或删除路由配置。这样我可以更好地管理和控制路由。 第七天: 今天是我进行vue开发的最后一天,我进行了项目的打包和部署。通过vue-cli提供的命令,我将项目进行了打包,生成了静态资源文件。然后,我将这些静态资源文件上传到服务器,并配置了nginx代理,使得项目可以通过域名访问。最后,我进行了一些简单的测试和优化,确保项目在生产环境下正常运行。整个vue开发流程结束,我对vue的开发有了更深入的了解。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晚风替我看朝夕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值