Slog27_支配vue框架初阶项目之博客网站-样式居中

news/2024/4/27 13:25:07/文章来源:https://blog.csdn.net/weixin_33979203/article/details/88755688
  • ArthurSlog
  • SLog-27
  • Year·1
  • Guangzhou·China
  • July 30th 2018

关注微信公众号“ArthurSlog”

  • GitHub
  • 掘金主页
  • 简书主页
  • segmentfault

没有写够足够的代码量，想成为高手是不可能的，只能纸上谈兵，但写够了代码量，纸上谈兵的也是大有人在

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

  • Slog1_如何使用nodejs与mysql进行数据交互
  • Slog4_使用后端框架KOA实现静态web服务器
  • Slog6_使用vue前端框架实现单页应用(SPA)
  • Slog24
  • Slog25
  • Slog26
前端部分：
  • 统计页面-计算属性和侦听器、https://cn.vuejs.org/v2/guide... 主页：index.html
  • 注册界面-条件渲染、https://cn.vuejs.org/v2/guide... :signup.html
  • 登陆界面 :signin.html
  • 登陆后的界面-列表渲染、https://cn.vuejs.org/v2/guide... 用户界面: account.hmtl
  • 调查问卷-文本、多行文本、复选框、单选按钮、选择框、https://cn.vuejs.org/v2/guide... : form.html
  • 离开页面提醒-事件处理、https://cn.vuejs.org/v2/guide...
  • 移动端样式兼容-Class与Style绑定、https://cn.vuejs.org/v2/guide...
后端部分：
  • 数据库数据交互模块-部署、配置
  • 静态web服务器
  • 用户注册模块
  • 用户登陆模块
  • 统计分析模块
  • 用户状态模块-超时、无效、非法
  • ctx.redirect()，参考 webapi官方手册，获取到原始webpai中的api，koa框架中的ctx和原始webapi中的api一一对应，或者说是和原始webapi的request和response中的api一一对应

开始编码

  • 目前基本的注册登陆注册功能已经做出来了，但是页面比码农的脸还难看，接下来简单妆点一下，我们来写一下层叠样式表css（到目前为止，都是用比较原始的方法，菜鸟嘛，总得来一遍的）
  • 先看一下之前的主页的 html 文件：

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>index_ArthurSlog</title>
</head><body><div>This is index's page by ArthurSlog</div><a href="./signin.html">Signin</a><br><a href="./signup.html">Signup</a>
</body></html>
  • 我们在这里外链一下样式表 style.css

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="./style.css" ><title>index_ArthurSlog</title>
</head><body><div>This is index's page by ArthurSlog</div><a href="./signin.html">Signin</a><br><a href="./signup.html">Signup</a>
</body></html>
  • 为了显得专业一点，我们在当前路径下建个新的文件夹“css”来放置样式表文件吧
mkdir css
  • 重新修改一下主页 html 文件

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="./css/style.css" ><title>index_ArthurSlog</title>
</head><body><div class="container"><div>This is index's page by ArthurSlog</div><br><a href="./signin.html">Signin</a><br><a href="./signup.html">Signup</a></div></body></html>
  • 嗯，这样显得专业点了，分类管理，呵呵
  • 接下来切换到 css 文件夹路径下
cd css
  • 新建一个样式表文件 style.css，上面主页 index.html 引用的，就是这个文件，我们上面增加的，就是样式表文件相对于主页文件的路径，“./” 表示当前路径，所以正确路径的写法就是 “./css/style.css”
  • 好了，解释完，开始编码样式文件 style.css 了

styel.css

.container {display: flex;justify-content: center;align-items: center;flex-direction: column;height: 300px;}
  • 启动静态web服务器
node index.js
  • 打开浏览器，输入 127.0.0.1:3000，看一下，主页是否发生了变化，正常的话，内容已经居中了，这里给出 层叠样式表css官方手册，以后如果需要什么样式，就去这里找
  • 同样的，我们来为 signin.html 和 signup.html 添加一下样式，打开样式文件 style.css

style.css

.container {display: flex;justify-content: center;align-items: center;flex-direction: column;height: 300px;}.signin-container {display: flex;justify-content: center;align-items: center;flex-direction: column;} .signup-container {display: flex;justify-content: center;align-items: center;flex-direction: column;}
  • 然后，调整一下 signin.html 和 signup.html 这两个文件

signin.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="./css/style.css" ><title>signin_ArthurSlog</title>
</head><body><div class="signin-container"><div>This is signin's page by ArthurSlog</div><p>Singin</p><form action="http://127.0.0.1:3000/signin" method="GET">Name: <br><input type="text" name="name"> <br>Password: <br><input type="text" name="password"><br><br><input type="submit" value="登陆"></form><a href="./account.html">Signin</a><br><a href="./index.html">Return index's page</a></div></body></html>

signup.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="./css/style.css" ><title>signup_ArthurSlog</title>
</head><body><div class="signup-container"><div>This is signup's page by ArthurSlog</div><p>Singup</p><form action="http://127.0.0.1:3000/signup" method="GET">Account: <br><input type="text" name="name"> <br>Password: <br><input type="text" name="password"><br>Again Password: <br><input type="text" name="repassword"><br>First Name: <br><input type="text" name="firstname"><br>Last Name: <br><input type="text" name="lastname"><br>Birthday: <br><input type="text" name="birthday"><br>Sex: <br><input type="text" name="sex"><br>Age: <br><input type="text" name="age"><br>Wechart: <br><input type="text" name="wechart"><br>QQ: <br><input type="text" name="qq"><br>Email: <br><input type="text" name="email"><br>Contury: <br><input type="text" name="contury"><br>Address: <br><input type="text" name="address"><br>Phone: <br><input type="text" name="phone"><br>Websize: <br><input type="text" name="websize"><br>Github: <br><input type="text" name="github"><br>Bio: <br><input type="text" name="bio"><br><br><input type="submit" value="完成注册"></form><a href="./form.html">Signup</a><br><a href="./index.html">Return index's page</a><br><br></div>  </body></html>
  • 打开浏览器，输入 127.0.0.1:3000，看一下，主页是否发生了变化，点击 signin 和 signup，正常的话，他们的内容已经居中了
  • 至此，我们完成了主页、登陆页面、注册页面的样式居中。

欢迎关注我的微信公众号 ArthurSlog

ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢

根据 mysql官方手册 修改数据库密码，先登陆mysql数据库，进入mysql命令行界面，输入

ALTER USER USER() IDENTIFIED BY '88888888';

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_793695.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

刷新你三观！这些堪比软件的神网站你知多少

刷新你三观！这些堪比软件的神网站你知多少

【PConline 应用】在很多人的固有印象当中&#xff0c;网站的作用无非就是让你看看文字看看图片看看视频&#xff0c;真正要干活&#xff0c;还是得依赖电脑上安装的软件。不过&#xff0c;很多朋友都不知道&#xff0c;实际上很多网站的功能之强大&#xff0c;完全不输本地安装…
阅读更多...
seo优化源码_网站关键词SEO优化要点 - 蜘蛛池

seo优化源码_网站关键词SEO优化要点 - 蜘蛛池

最蜘蛛池&#xff0c;快速提高网站收录&#xff0c;百度蜘蛛池、搜狗蜘蛛池、360蜘蛛池、神马蜘蛛池、繁殖池、权重池&#xff0c;欢迎使用。许多企业认为&#xff0c;只要网站建设公司为我们完成网站&#xff0c; 就可以在互联网上建立品牌&#xff0c;最蜘蛛池小编整理发布。…
阅读更多...
java 企业 网站源码 模版 屏幕自适应 有前后台 springmvc SSM 生成静态化

java 企业 网站源码 模版 屏幕自适应 有前后台 springmvc SSM 生成静态化

博文来源&#xff1a;http://www.fhadmin.org/webnewsdetail3.html前台&#xff1a; 支持五套模版&#xff0c; 可以在后台切换系统介绍&#xff1a;1.网站后台采用主流的 SSM 框架 jsp JSTL&#xff0c;网站后台采用freemaker静态化模版引擎生成html2.因为是生成的html&#x…
阅读更多...
google搜索引擎优化指南_什么是SEO？如何优化Google等搜索引擎?

google搜索引擎优化指南_什么是SEO？如何优化Google等搜索引擎?

SEO&#xff08;搜索引擎优化&#xff09;是通过搜索引擎的自然搜索结果优化要发现的内容的实践。好处是显而易见的&#xff1a;即网站能获得源源不断的免费自然流量。但是&#xff0c;如何优化SEO的内容&#xff0c;以及“排名因素”实际上重要的是什么&#xff1f;要回答这个…
阅读更多...
实时视频网站架构

实时视频网站架构

原文地址&#xff1a;http://www.csdn.net/article/2012-12-10/2812183-JustinTV_real-time_architecture摘要&#xff1a;实时的定义应该是延迟小于250ms&#xff0c;按照这个标准&#xff0c;实时的成功应用立马成了凤毛麟角。本文详细阐述Justin.TV实时系统的技术细节&#…
阅读更多...
说说大型高并发高负载网站的系统架构

说说大型高并发高负载网站的系统架构

【IT168 技术文档】 我在CERNET做过拨号接入平台的搭建&#xff0c;而后在Yahoo&3721从事过搜索引擎前端开发&#xff0c;又在MOP处理过大型社区猫扑大杂烩的架构升级等工作&#xff0c;同时自己接触和开发过不少大中型网站的模块&#xff0c;因此在大型网站应对高负载…
阅读更多...
已在页面完全加载前强制排版_完全免费、审美过得去、国内访问快的自助建站（个人网站）傻瓜平台推荐...

已在页面完全加载前强制排版_完全免费、审美过得去、国内访问快的自助建站（个人网站）傻瓜平台推荐...

起因&#xff1a;这周在准备简历的投递&#xff0c;后来觉得没有比有一个网站更容易让别人了解你了&#xff0c;苦于现在在老家&#xff0c;家里电脑较慢且没有一些设计软件&#xff0c;故我的想法就是快速傻瓜的搭建一个网站&#xff0c;且希望能真正完全免费。结果开始在知乎…
阅读更多...
奥巴马筹款网站的制作过程

奥巴马筹款网站的制作过程

原文地址&#xff1a;http://www.csdn.net/article/2012-12-17/2812909-BarackObama摘要&#xff1a;在美国大选期间&#xff0c;奥巴马网站BarackObama.com创造了2.5亿美元的捐款&#xff0c;对于一个网站来说&#xff0c;它是如何做到的&#xff1f;奥巴马官网 1.Kyle Rush是…
阅读更多...
域名解析到域名_网站域名解析图文教程详解

域名解析到域名_网站域名解析图文教程详解

任务&#xff1a;进入域名解析控制面板&#xff0c;对域名进行解析操作域名解析一般在站点(空间)绑定域名之后&#xff0c;进行设置的比如宝塔站点绑定了这2个域名&#xff1a;xxx.com和www.xxx.com所以解析的时候就要解析这2个域名登录官网账号&#xff0c;点击域名管理(第一个…
阅读更多...
【198期推荐】医院门户网站服务器选择问题应该三思而后行

【198期推荐】医院门户网站服务器选择问题应该三思而后行

本周头条&#xff1a; 请教高手&#xff1a;我院现要建设门户网站&#xff0c;想请教一下&#xff0c;是租用移动公司的服务器好&#xff08;本地移动公司承建网站建设&#xff09;&#xff0c;还是自己建设服务器好。&#xff08;我考虑的是自己建立服务器&#xff0c;为网站预…
阅读更多...
大型网站技术架构（一）大型网站架构演化

大型网站技术架构（一）大型网站架构演化

2019独角兽企业重金招聘Python工程师标准>>> 看完了有一本书&#xff0c;就应该有所收获&#xff0c;有所总结&#xff0c;最近把《大型网站技术架构》一书给看完了&#xff0c;给人的印象实在深刻&#xff0c;再加上之前也搞过书本上讲的反向代理和负载均衡以及ses…
阅读更多...
假如我来架构12306网站(一) - 概论

假如我来架构12306网站(一) - 概论

原文地址&#xff1a;http://blog.csdn.net/jackxinxu2100/article/details/8140755序言&#xff1a; 此文的撰写始于国庆期间&#xff0c;当中由于工作过于繁忙而不断终止撰写&#xff0c;最近在设计另一个电商平台时再次萌发了完善此文并且发布此文的想法&#xff0c;期望自…
阅读更多...
phpchina网站首页改版了，貌似也不再属于康盛旗下啦

phpchina网站首页改版了，貌似也不再属于康盛旗下啦

2019独角兽企业重金招聘Python工程师标准>>> phpchina网站首页改版了&#xff0c;貌似也不再属于康盛旗下啦 具体的情况不清楚&#xff0c;貌似变成了一家做站和PHP培训公司啦 杯具 转载于:https://my.oschina.net/tenking/blog/41993
阅读更多...
图片瀑布流的威力？最新数据显示Pinterest有望成为第二大社交网站，仅次于Facebook

图片瀑布流的威力？最新数据显示Pinterest有望成为第二大社交网站，仅次于Facebook

原文地址&#xff1a;http://www.36kr.com/p/201371.html从用户量来看&#xff0c;Facebook 毫无疑问是目前最大的社交网站&#xff0c;且居于主导地位。但对于第二名的争夺&#xff0c;最新的数据显示&#xff0c;Pinterest 有望超过 Twitter&#xff0c;问鼎第二名。 据皮尤研…
阅读更多...
大型网站系统架构分析

大型网站系统架构分析

千万级的注册用户&#xff0c;千万级的帖子&#xff0c;nTB级的附件&#xff0c;还有巨大的日访问量&#xff0c;大型网站采用什么系统架构保证性能和稳定性&#xff1f; 首先讨论一下大型网站需要注意和考虑的问题。 数据库海量数据处理&#xff1a;负载量不大的情况下select、…
阅读更多...
php新手学习php的好网站(推荐!!)

php新手学习php的好网站(推荐!!)

为什么80%的码农都做不了架构师&#xff1f;>>> 在论坛中看到很多php新手朋友&#xff0c;苦于找不到好的文章或资料&#xff0c;对php无从下手。 为大家推荐几个不错的学习php的网站&#xff0c;有需要的朋友&#xff0c;可以参考下。 1、php100.com 这个搞php的朋…
阅读更多...
大型网站技术架构（四）网站的高性能架构

大型网站技术架构（四）网站的高性能架构

2019独角兽企业重金招聘Python工程师标准>>> 网站性能是客观的指标&#xff0c;可以具体体现到响应时间、吞吐量、并发数、性能计数器等技术指标。 1、性能测试指标 1.1 响应时间 指应用执行一个操作需要的时间&#xff0c;指从发出请求到最后收到响应数据所需要的时…
阅读更多...
MVC4做网站后台:用户管理 —用户

MVC4做网站后台:用户管理 —用户

这块进行用户管理&#xff0c;可以浏览、查询已注册的用户&#xff0c;修改用户资料&#xff0c;删除用户等。没有做添加用户&#xff0c;不知是否必要。列表页还是使用easyui的datagrid。这个思路跟用户组的方式差不多。 1、接口InterfaceUser 命名空间Ninesky.Repository 功能…
阅读更多...
关于大型网站技术演进的思考（一）

关于大型网站技术演进的思考（一）

原文地址&#xff1a;http://www.cnblogs.com/sharpxiajun/p/4237704.html这个系类的文章很好&#xff0c;真的需要花时间来读一读&#xff01;&#xff01; 前不久公司请来了位互联网界的技术大牛跟我们做了一次大型网站架构的培训&#xff0c;两天12个小时信息量非常大&#…
阅读更多...
关于大型网站技术演进的思考（四）--存储的瓶颈（4）

关于大型网站技术演进的思考（四）--存储的瓶颈（4）

如果数据库需要进行水平拆分&#xff0c;这其实是一件很开心的事情&#xff0c;因为它代表公司的业务正在迅猛的增长&#xff0c;对于开发人员而言那就是有不尽的项目可以做&#xff0c;虽然会感觉很忙&#xff0c;但是人过的充实&#xff0c;心里也踏实。 数据库水平拆分简单说…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业