作者归档:mindg

前端基础-CSS-2

上篇我们介绍了css的的由来和编写语法,并展示了一个基本的例子,这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示,css包含非常多的样式设置,在这里我会把最基础和常用的样式设置展示给大家,上篇我们了解了div这个块元素的使用,因为div内部可以写其它标签,但如果我们像上篇一样设置,整个块里的元素都会生效,那如果我只想设置div中某个标签呢,或者我们想通过div的id或class来设置样式,另外我们常见的就是表单,那如何给表单设置样式,以及如何给一个超链接设置样式,这就是今天我们要讲的内容, 首先还是跟之前一样,我们先给出我们基本的html代码和截图:

以上就是基本的Html代码,大家看到我注释掉了这行 内容<link rel=”stylesheet” href=”part2.css”>,这个文件就是我们一会要写的样式文件,为了展示不带样式的页面,我先把这行注释掉了,那这段代码用chrome打开截图如下:

css2-1

那接下来我们完成样式文件的编写,首先我们完成的任务如下:

1、设置背景颜色浅蓝色

2、给h1字体加一个边框,设置h2字体颜色

3、设置div中p段落背景颜色

4、设置表单边框,指定宽度和长度

5、设置超链接颜色和一些文字装饰

基本就这些吧,我们直接上代码:

以上就是整个样式表文件内容,我们看到如果要设置div中p标签的样式,格式可以是 div p(中间一个空格) 的方式来选择设置,另外所有的div都可以设置class或id, 这样我们就可以通过id或class设置样式了,它们的选择方式id以#id名词,例如例子中的#itemone, 如果是classs,就以.开头,例如例子中的.exit, 有了这种方式,我们在设置我们页面样式时会非常的灵活,基本的就讲到这了,保存退出,并取消掉样式文件注释, 刷新浏览器会看到生效后的样式,截图如下:

css2-2

那么通过这个小例子,我相信大家对css的一些基本使用已经解了,那下篇我们要说css中的盒子模型,这是css学习的一个重点,我们下篇见。

前端基础-CSS-1

前两篇我们简单说了下html基本知识,从这篇开始我们谈一下css内容,这篇主要还是从最基本的内容说起,让大家对css有个初步认识,掌握了css,在后续理解bootstrap的样式就比较容易了,对于了解css的小伙伴来说可能知道怎么用,但为什么要有css?它的出现解决了什么问题?这个我想可能大多数人没有思考过,接下来我们就谈一下这个问题, 因为在最早期的网站中,网页的样式都写在Html页面里,这样的问题就是会让html页面特别复杂,在越来越堆积后,如果再改某个地方会非常困难,说白了就是自己写的代码都没法维护了,那这时候呢为解决这个问题,w3c就发明了css,让html只负责页面结构内容,所有的表现分离出来单独写到一个文件里,这个文件就是样式文件css,css全称是层叠样式表 (Cascading Style Sheets),它定义了如何显示html中的元素,比如居中、字体、背景颜色等,有了它我们就实现了内容和表现的分离,使我们的代码就简单清晰了。

以上就是css的来历,下面我们实际以代码为例看如何使用,首先我们需要让我们的html文件关联一个css文件,怎么实现呢,其实很简单,我们只需要在<head>元素中加入以下代码即可:

其中href就是你关联的css文件,这里只需要注意如果你的css文件跟html文件不在一个目录,就需要写你的引用路径即可。

添加了这行,我们就可以安心的在mycss.css文件中编写我们的样式了,首先我先来一个基本的Html代码:

这是一个基本的没有样式的html代码, 前面我们说过div和span的用途,在今天这个例子里我们就会看到这两个标签的用途,它们是为样式而生,这个用chome打开的后是这样的:

css1

接下来,我们开始编写css样式文件,开始前我先说一下css样式文件的基本编写语法,css语法规则是选择器选tag,然后一个大括号,里面是一个属性:值,格式如下:

以上就是表示html中h1元素的内容颜色是红色,那接下来我们来完成几个设置:

1、h1标题字体改变为红色

2、无序列表中<li>的内容变成绿色

3、<div>标签添加一个橙色背景色,加上边框,宽度是4px,边框是双线显示。

4、<span>文字背景色绿色

5、整个文件背景编程黑色

现在我们打开一个文件,命名问mycss.css,写入如下内容:

设置完成后,保存刷新刚才打开的页面,显示如下:

css2

可以看到我们的样式已经生效了,这样就完成了最基本的css样式的设置,因为背景调整成了黑色,所以黑色字体的显示不出来了,大家实际练习的时候可以给它一个样式把它显示出来,当然这个只是最基本的调整,后面我们会以实际的一个个比较完整的例子给大家深入介绍,喜欢的小伙伴别忘转发哟~

前端基础-HTML5-2

这篇继续我们html的学习之旅,这篇主要说一下表单,因为表单在web中很常见,比如我们常见的要登陆或注册某个站点,填写个人一些信息,这都需要表单来完成,表单主要就是用于搜集不同类型的用户输入,在后续的开发过程中不免我们要让用户通过输入某些数据来决定程序的执行或者基本的登陆等,假设我们现在有一个任务要完成一个网站用户的注册表单,需要用户提供用户名称,密码,性别,邮箱,如果是一个电商类网站可能还要有一个提供支付方式,那这段基本的HTML的代码看起来是这样的:

表单的元素是<form>,表单包含的元素有<input type=“text“> 如果是type是text表示文本的输入,如果type是password表示是密码,如果type是submit,表示一个提交的按钮,<form>有两个重要的属性action和method, action表示提交表单是执行的动作,method表示提交表单是用的http方法(get,post), 看我们代码我在action里写了thankyou.html, 这个页面里写一句“感谢您注册!”,那再我们提交表单后就会跳转到这个页面。

在性别这里,我们type等于raido,这表示是一个单选按钮。

支付方式这里select是表单控件,它在浏览器的表现是会产生一个下拉的列表框,用户可以进行选择。

把上面代码保存一个html文件,然后用浏览器打开(我用的chrome),截图如下:

form

姓名和邮箱这里我们看到有提示信息,是我们在表单里用到了placeholder属性,这个属性可以提示输入预期的值,另外邮箱我们的type是email, 表单会做一个简单的判断,如果用户输入的没有@字符,会告知邮箱格式不正确,如下:

form2

如果我们给出正确的邮件格式,点击注册会跳到我们的thankyou.thml页面,展示如下:

感谢您注册!

以上就是表单的基本用法,接下来我们简单说一下DIV和SPAN元素,因为这二个元素没有特定的含义,但这二个元素在后面用处非常的多,先说div元素,这个元素是块级元素,它里面可以包含其它html元素,它没有特定的含义,主要是为了后续跟css一起进行网页布局,而span是行内元素,主要是文字,比如一行文字中几个文字颜色是红色的,这个就可用span来做,下篇我们谈到CSS时来实际操练一下。

前端基础-HTML5-1

准备了一周,这周开工了,我们从基本的HTML说起,这部分内容我不会像html教程一样一个一个标签的讲解, 那样的话就html就写到明年了,所以这部分只说最有用的,把这部分快速的过一遍,主要精力还是集中放到后面的内容,那既然要介绍HTML5,我们先从基本概念开始,什么是HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

说白点html5就是html4的升级版,增加了很多特性,在移动设备上支持多媒体,html5出来的时候都很多人对它抱有很大希望的,很多人希望用它来媲美原生app的功能,不够到现在好像发展的比较慢,移动端还是原生app的天下呀,OK,html5背景知识就介绍到这里,接下来进入正式的内容学习部分。

html5比较有用的就是列表和表格了,用的也比较频繁,所以这篇我们主要介绍列表,表格,我们先看列表,列表分有序列表和无序列表,有序列表就是带数字标号的,例如,1,2,3等, 无序列表前面就是一个小黑点,不带数字,无序列表对应的标签是<ul></ul> , 有序列表的标签是<ol></ol>,列表项目用<li></li>来定义,我们来通过例子来看看,比如我们后续要学到Django, 那Django作为一个web框架有什么优势呢?我们要一一列出来,下面我们分别用无序列表和有序列表表示,代码如下:

浏览器打开如下:

list

除了展示内容,另一个最多的用途就是一般能看到的后台左侧菜单, 通过单击左侧的每个菜单进入不同的页面内容,简单代码如下:

这个就可以生成类似左侧菜单的效果,当然因为没有css和js,我们这个看起来非常普通:

caidan

以上就是列表的的介绍了,接下来说说表格,这个在日后用途非常的多,一般前端展示数据用表格用的最多,我们来看一个列子,就拿我们将要学习的内容制作一个表格,截图如下:

table

这就是一个表格典型应用,当然我为了简单,图标都统一用了一个,实现以上内容代码如下:

其中<thead>内容是表头,<tr>是行,<td>每一列,同时为了显示图片,我在<td>中用了<img>标签,这样一张图片就方到<td>中了,关于Html列表和表格的内容就到这里,下篇说下比较重要的表单。

关于Django学习的计划

各位小伙伴好,上周刚说到要开始我们的django学习之旅了,谁知上周公司业务调整,临时安排了很多工作,搞得天天加班到11点(夜里), 回到家累成狗,连按电脑开关的力气都没有了,  虽然上周身体比较累,但脑袋却没闲着,就构思了后续的学习计划, 因为吧写脚本跟写web平台差别还是非常大的,因为脚本都是单一性的任务或功能,但要做web运维平台它是一个综合性技术的体现,比如最基本的html你得懂,像html的基本的table, form、列表等在实际开发中用的非常的多,如果这个都不熟练,那越往后学难度会越大,在了解了html的基础上,css你要懂一点吧,不然列表菜单放左边还是放右边,站点导航栏怎么设置,页面背景用什么颜色,总不能一个站点就一个颜色吧,所以css可能不需要像专业前端一样,但最起码一些简单的设置你要必须懂,假设你这二项全部过关,你以为就OK了?NO,差的还很远, 因为我们不是专业设计,所以做出来的平台界面一定不美观,你懂的,现在做什么都讲究时尚炫酷(体现装逼的时刻),要想把自己的网站做的更专业一点,你怎能不去了解bootstrap?如果你已经能把bootstrap样式运用的炉火纯青,你这时候你就能完成一个看着比较专业的网站了,但是问题又来了,我需要在页面上加一些动态效果怎么办呢?那就得去学习javascript呀, 这玩意儿很厉害,js现在是搞前端的基本技能,不然都不好意思封自己为前端工程师,到这还没完,在实际开发中假设你数据库里已经存好了一些数据,你需要在前端页面实时把这些数据展现出来, 怎么办?那你得去学习AJAX呀,当然用JavaScript写一个完整的AJAX代码是可以的,但如果有更方便的做法,我们为没有理由不去选择,这时候就用到另一个东东了,它的名字就叫jquery了,写到这我们总结一下做一个web站点需要学习的内容: html,  css, bootstrap, javascript, jquery,   如果以上技术你都具备了,然后在加上我们的python + django,你基本就全能工程师了, 不,全能太俗了,他们的名字叫叫全栈工程师,英文名字是Full Stack developer,所以接下来我打算把这些内容逐步展开来写,但从哪个部分开始这个我可伤了脑筋,因为我不知道每个人的水平,苦想了半天,我还是觉得就从最基本的html说起吧,由浅入深逐步开始学习,这是正道儿,另外欢迎每个小伙伴给我留言探讨。