-
html简单网页代码
2020-03-02 14:41:10可以现在电脑中新建一个记事本，然后把后缀名改为“.html”就可以了，在顶部输入代码：“这是网页标题这里是网页显示的部分”，点击保存，然后右键文件选择使用浏览器打开就可以看到一个文件了，在每个标签之间最好...展开全文可以现在电脑中新建一个记事本，然后把后缀名改为“.html”就可以了，在顶部输入代码：“
这是网页标题 这里是网页显示的部分”，点击保存，然后右键文件选择使用浏览器打开就可以看到一个文件了，在每个标签之间最好打一个回车，这样代码看着更方便。和标签里的内容是可以随便输入的。 html常用标签：创建一个HTML文档、设置文档标题和其它在网页中不显示的信息、
设置文档的标题、下划线、黑体字、斜体字。 html常用格式标签：
创建一个段落、<palign="">将段落按左、中、右对齐、
换行插入换行符、 从两边缩进文本、html常用连接标签：<ahref=“URL”>创建超文本链接、创建自动发送电子邮件的链接、<aname=“name”>创建位于文档内部的书签、<ahref="#name">创建指向位于文档内部书签的链接。
-
50个简单的网页制作案例
2018-06-12 11:43:4850个简单的网页制作案例，利用DIV+CSS完成，包括各种类型的网站 -
如何做一个简单好玩的音乐网页
2019-01-16 11:20:55如何做一个简单好玩的音乐网页 （作者：宁佐潮，撰写时间：2019年1月16日） 下面我们开始用所学的的知识，开始做一个简单而方便的音乐页面，未使用插件 一共分为两部分： 一：播放部分 二：钢琴部分 由上图...展开全文如何做一个简单好玩的音乐网页
作者：朝思
下面我们开始用所学的的知识，开始做一个简单而方便的音乐页面，未使用插件
一共分为两部分：
一：播放部分
二：钢琴部分
由上图可见，左上角的为播放部分，可以实现基本的操作功能，支持鼠标和键盘操作
其他就是钢琴部分，我把这分为两个html写入，把另一个小的用iframe标签嵌入进去
首先是布局，第一部分的布局十分简洁，一个时间+四个按钮，然后就是一些歌曲
然后就是css样式，可以说是十分简洁了
接下来就是重点，javascript的写法，主要就是简单的if 和for循环
这个是鼠标点击事件
这个是键盘的点击事件
再加一个自动播放，获取到音乐的时长，我把结尾减去了5秒
调用的方法在这里
//播放
function one(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
for(var i = 0;i<musiclist.length;i++){
musiclist[ind].play();
}
tranfor = false;
}
//暂停
function two(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
for(var i = 0;i<musiclist.length;i++){
musiclist[ind].pause();
}
tranfor = false;
}
//上一首
function three(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
var leftBtn = ind-1;
if(leftBtn < 0){
alert(“已经到顶了!”);
return;
}else{
for(var i = 0;i<musiclist.length;i++){
musiclist[leftBtn].play();
musiclist[ind].pause();
}
ind–;
}
tranfor = false;
}
//下一首
function four(){
tranfor = true;
var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);
var rightBtn = ind+1;
if(rightBtn === musiclist.length){
alert(“居然没有歌了，快去添加吧!”);
return;
}else{
for(var i = 0;i<musiclist.length;i++){
musiclist[rightBtn].play();
musiclist[ind].pause();
}
ind++;
}
tranfor = false;
}接下来就是钢琴的部分
钢琴我把它分为了二个部分，一个是上面的词谱，另一个便是下面的钢琴按键部分，然后在右上角我给了一个背景音乐的按钮首先html部分，一样的简洁
然后css部分，词谱部分是一个轮播的格式，钢琴按键部分排列整齐便可Javascript部分更加简洁，首先是词谱的左右换页
然后再是背景音乐按钮的点击事件
接下来就是核心，钢琴按钮的点击事件，先是鼠标的点击
然后再加上按键的点击事件
就这样，一个简洁好用的音乐网页便完成了
-
Django----做一个简单网页的教程(适合初学者)
2018-08-23 15:10:15这篇文字适合刚学习Django的同学，如果...以上的安装就不讲了，比较简单，网上也有很多教程。都去官网下载安装即可。 前言： 学习django框架其实就是学习它的文件目录，目录下有一些必须的模块和包，当然你也...展开全文这篇文字适合刚学习Django的同学，如果比较熟的就不用看了。
以下都是讲在windows上的部署情况；
准备：
1、python3.6
2、pycharm profession(专业版)
3、安装Django模块
以上的安装就不讲了，比较简单，网上也有很多教程。都去官网下载安装即可。
前言：
学习django框架其实就是学习它的文件目录，目录下有一些必须的模块和包，当然你也可以自己在这些目录下再新建目录或模块和包。
一、我们打开pycharm新建一个Django工程(也可以直接在terminal下用指令django-admin startproject xxx创建)
File---New Project
建好好会自动生成一个目录框架。那么来了解下这个框架里文件的作用。
二、编写业务逻辑
新建成功工程后views.py文件里是空的，需要自己编写业务逻辑。
from django.shortcuts import HttpResponse #导入HttpResponse模块 def index(request):#request是必须带的实例。类似class下方法必须带self一样 return HttpResponse("Hello World!!")#通过HttpResponse模块直接返回字符串到前端页面三、配置url路由
from laomomo import views#导入views模块 from django.conf.urls import url urlpatterns=[ url(r'^index/',views.index)#配置当访问index/时去调用views下的index方法 ]四、运行server并访问
terminal下执行 python manage.py runserver 这样执行默认的路径是127.0.0.1:8080
指定端口或地址就再后面写上，如：python manage.py runserver 127.0.0.1:8888
然后浏览器访问http://127.0.0.1:8888
这里的Hello World！！就是views.py文件下index方法通过HttpResponse返回到前端的。
问题来了，这样感觉有点简单，如果要显示一些数据呢？怎么办？那么我们就需要写html文件来承载。
五、修改views.py里的index方法如下
from django.shortcuts import render#导入render模块 #先定义一个数据列表，当然后面熟了可以从数据库里取出来 list = [{"name":'good','password':'python'},{'name':'learning','password':'django'}] def index(request): return render(request,'index.html',{'form':list})#通过render模块把index.html这个文件返回到前端，并且返回给了前端一个变量form，在写html时可以调用这个form来展示list里的内容六、编辑html文件
新建成功工程后templates文件目录下是空的，我们需要在该目录下新建一个html文件来把内容展示到前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <table border="1"> <thead> <tr> <td>用户名</td> <td>密码</td> </tr> </thead> {%for line in form%} <tr> <td>{{line.name}}</td> <td>{{line.password}}</td> </tr> {% endfor %} </table> </body> </html>html里要写if或for等语句时用{%%},调用变量时用{{ }}括号
我们重新运行下server，访问浏览器应该会展示list里的数据了。
好，到这里我们可以展示后台设定好的数据给前端。这好像也不太友好。我们来做一个前端可以输入用户名和密码，然后把输入的用户和密码展示出来。
七、重新编写html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <table border="1"> <form action="/index/" method="post"> {% csrf_token %} <P> <label >用户名:</label> <input type="text" name ='name'/> </P> <P> <label>密码：</label> <input type="text" name='password'/> </P> <p><input type="submit" value="提交"/></p> </form> <thead> <tr> <td>用户名</td> <td>密码</td> </tr> </thead> {%for line in form%} <tr> <td>{{line.name}}</td> <td>{{line.password}}</td> </tr> {% endfor %} </table> </body> </html>这里加入了用户名和密码的输入框和一个提交按钮，设置的方法试post，下面我们就需要编写views.py下的index方法来获取这个post过来的数据，然后返回给前端显示。
八、修改views.py下的index方法：
from django.shortcuts import render#导入render模块 #先定义一个数据列表，当然后面熟了可以从数据库里取出来 list = [{"name":'good','password':'python'},{'name':'learning','password':'django'}] def index(request): #获取前端post过来的用户名和密码 name = request.POST.get('name',None) password = request.POST.get('password',None) #把用户和密码组装成字典 data = {'name':name,'password':password} list.append(data) return render(request,'index.html',{'form':list})#通过render模块把index.html这个文件返回到前端，并且返回给了前端一个变量form，在写html时可以调用这个form来展示list里的内容再次运行server通过浏览器访问就会有提交的数据实时展示了的效果了
到这里就完成了一个简单的网页制作的过程，有问题可以向我提问。
-
【手把手】制作一个简单的HTML网页
2020-11-20 19:56:56我要给body添加一些样式，就在head元素上挂载一个style元素。 然后，写样式表： 效果： 这样的话，我们就可以看到body部分了。现在，我给body添加一点padding。 页面上看不出区别，让我们打开F12，看一下现在的...展开全文新建一个html文件：
我要给body添加一些样式，就在head元素上挂载一个style元素。
然后，写样式表：
效果：
这样的话，我们就可以看到body部分了。现在，我给body添加一点padding。
页面上看不出区别，让我们打开F12，看一下现在的body变成了什么样子。
示意图：
从图中可以看出，body元素分为三层，最里面的一层，就是520 x 500的那部分，这个叫做内部真实空间，也就是说，你可以在里面添加其他元素，比如div元素，p元素，a元素等等。然后中间的一层就是padding了，如果你没有加padding，那么这一层就相当于一层薄薄的保鲜膜，其实它没有厚度，就是0px。最外面的一层就是border，在我们这个例子中，body的border部分就只有2px，薄薄的一层。现在，我给body加一个背景色：
奇怪的是，怎么外面也变成orange了？外面一层是什么啊，是不是html元素啊，那么我们给html元素加一个白色的背景。
效果：
OK，我们接下来在body元素上挂载一个div元素。
注意哦，我现在给这个div元素绑定了一个class属性，属性值叫"wrap",这个class就叫做类，多个元素都可以绑定一个相同的class，通过这个class，我们可以设置一些通用的样式表。以后，但凡是绑定了这个class的元素，都能够拥有相同的样式效果。
现在，我给wrap添加一些样式：
注意哦，给class属性设置样式的时候，前面要加一个. ,在上一讲中，我们还说过，给id属性设置样式的时候，前面要加一个#,一样的意思，反正就是这么规定的。
效果：
我现在把高度改成100%，那么就会自动沾满父容器，也就是这里的body
效果：
那么，蓝色的部分，就是body最里面的那一层，我称之为内部真实空间。中间橘黄色的一层就是padding，最外面那一层薄薄的边界就是border，明白了吗？
好的，接下来开始今天的课程，我们来做一个简单的小页面。
我已经把图片都拿过来了。
index.html里面是这样子的：
接下来，我把必要的元素都放进去。
OK，我们一个一个来说，首先是h1元素，这个就和word一样的，属于标题元素，h1，就是最大的那种标题。接下来看img元素，这个元素的使用频率是非常高的，现在的网页几乎不可能说没有img元素的，这一点要明确。img元素有一个alt属性，它的意思就是说，当我鼠标画上这张的时候，会有一个小提示。width属性，这个不用多说了吧，设置图片的宽度。src属性，就是这张图片的地址，在我们这个项目中，图片被放在了上级目录的img文件夹下，所以，…/ 的意思就是去上级目录，这个属于相对路径，相对于当前文件的路径。在这段代码中，其他元素应该都很好理解了。p元素表示里面的文字是一个段落，h2元素就是二级标题，这些元素都是块级元素。还记得块级元素是什么意思吗？对了，它是不是会默认占满一整行啊。以这个例子来说，他们的父元素就是body，所以，他们会默认占满body的宽度。让我们来看一下效果吧。
把项目跑起来：
访问：http://localhost/Base/ch03/index.html
哎呀，图片没有显示，这是怎么回事呢，不要急，我们再来看一下目录结构：
看到了吗，同学们，我们的index.html页面和img文件夹是不是平级的呀？而我们的代码是这样写的：
…/ 表示退到上一个目录，也就是这里的ch03文件夹所在的目录：
这样吧，我把文件夹都闭合了。
ch03文件夹所在的目录是哪里呢，是不是WebContent目录呀？那么，在这个目录下，有没有一个叫做img的文件夹呢，是不是没有呀？所以，我们这里就不需要写…/了。直接把…/去掉：
刷新页面：
这样的话，图片是不是就显示出来呀？好的，其实，我们这种src连接的路径，叫做相对路径，在你们学习的过程中，或者从网上，或者从书本上，是不是还听说过一个名词叫做绝对路径啊？那到底什么是绝对路径呢，在本文中，我就给你解释清楚，到底什么是绝对路径？现在，我给img的前面加一个反斜杠：
大伙猜一猜，如果我再次刷新页面，图片能不能显示出来呢？好的，见证奇迹的时刻到了，我刷~
图片是不是又没有了呀？让我们打开F12，发现报错了。
他来了个404错误，404就是找不到资源，也就是说找不到图片。我们看一下，他去哪里找的：http://localhost/img/1.jpg 。看不出来？那我再写一点东西，你自己猜一下，前面这个反斜杠是什么意思。
刷新一下：
图片是不是又出来了呀，这个就叫做绝对路径，他和相对路径的区别就是，前面要加一个反斜杠。只要我加了反斜杠，浏览器就会认为我这个是绝对路径。Base是我们的项目发布名称，这个可以去server.xml里面改的。然后：
这一串，对于Web项目来说，他会去你的发布目录的根目录找，也就是WebContent。我们这个项目，是用eclipse生成的，我知道，你们很多人都喜欢用MyEclipse，那么发布目录是不是叫做WebRoot啊。其实啊，这只是一个文件夹的名字而已，我们也完全可以叫其他的名字。现在，我来手动改一下。
我现在把WebContent的名字改成了target，那么，会怎么样呢？我先卖个关子，接下来，我把tomcat关掉，重新启动一下，请问，同学们，你们觉得我还能不能访问到这个页面？
不好意思，启动报错：
java.lang.IllegalArgumentException: Document base E:\Java培训\software\eclipse-mars\workspace\Base\WebContent does not exist or is not a readable directory
它说E:\Java培训\software\eclipse-mars\workspace\Base\WebContent这个目录不存在或者不是一个可以读取的目录？我们刚才是不是把WebContent目录的名字改掉了呀，可是tomcat还是认为我们的发布目录名字叫做WebContent，所以就报错了。解决方法，就是手动改一下发布目录,打开server.xml,把那个目录给改掉：
然后，重启tomcat，访问http://localhost/Base/ch03/index.html
OK了吧，我只是给你们演示一下，各位就不要去改WebContent了，不然的话和服务器上的文件又不一样了。
这个页面有点美中不足的是，有一块溢出了：
可以看到，巧克力蛋糕的说明超出了body的范围，这是因为我们给body设置了一个固定的高度，解决办法就是把高度设置为auto（自适应）
稍微好看一点了，接下来，我要把body元素中所有的字体改成微软雅黑。
然后，给所有的元素来个居中显示：
现在，我又有一个需求，我希望把某些文字设置为不同的颜色，如何做呢？比如，我要把应季水果几个字变成粉红色。同学么，咋办？一个比较好的思路，就是专门用一个元素，把它包进去，比如：
在这里，我们是不是只能用行内元素呀，因为如果我们用div，p等块级元素，那么是不是就要换行啦。虽然，我们可以给它设置dispaly:inline-block，或者inline,强制它不换行，可是那样的话，是不是很麻烦呀。所以，为什么不直接使用行内元素呢，比如说font。然后，我们可以给font绑定一个class属性。
然后在style元素中添加一个类选择器
刷新一下页面：
好像这个配色不太好看，那么我打开F12，选择这个font元素，重新配一个色（看好了，我就做这么一遍）：
然后，我们把颜色复制过来：
刷新页面：
这个就叫做配色，我们也可以给body重新配色：
就是这么简单。
-
Python制作网页Day 1（一个简单的网页）
2019-07-02 12:00:06一、一个简单的网页 （一）一个简单的网页 from flask import Flask app = Flask(__name__) @app.route("/haha") def haha(): return "哈哈哈哈哈" if __name__ == '__main__': app.run() 易出错： 1、每个有... -
一个简单完整的网页
2018-07-24 17:49:45分析：头部有一张图片和一个input输入框还有一个按钮+下面的通栏 因为用到左浮，右浮的地方不同我们可以写一个通类 这里的logo图片如果不定义宽高会影响下面的通栏的设置，影响其中的第一个为首的顺序无法对齐 ... -
如何创建一个简单网页
2017-10-02 10:34:51我们已经基本熟悉了HTML的格式，现在我们来尝试一下创建一个简单的网页。1.创建一个.html格式的文件选择一个文本编辑软件，我这里用的是Notepad++.在工具栏选择“language”，勾选html，这个时候软件就知道你在编辑... -
一个简单的网页制作作业
2010-05-15 15:42:56一个简单的网页制作作业，学计算机的应该都会遇到要交这样的一个作业，本人做的是球员雷·阿伦的个人主页，分别介绍了基本资料、技术特点、精彩时刻、技术统计等，每页都有返回首页的链接。希望对初学网页制作的同学... -
用Django创建一个简单网页
2018-03-30 16:29:52---首先新建一个新项目：---在这里命名工程的名字---在右侧的齿轮处选择create创建虚拟环境，命名后勾选inherit ...-----开始做一个自己的简单网页在templates下创建一个html文件，名字随便取，在这里取为index。-... -
[Demo]用简单的html，css做一个漂亮的网页！
2019-09-14 16:40:11下面是实现效果： 代码如下： html <!DOCTYPE html> <html lang="zh_cn"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=...... -
网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）
2019-10-30 20:17:58于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: ... -
教你写一个简单的网页（html网页开发入门）
2017-10-16 15:02:49网页的样式（美化网页最重要的一块） JavaScript 网页的交互效果，比如对用户鼠标事件作出响应 HTML 什么是HTML HTML的全称是HyperTextMarkupLanguage，超文本标记语言 其实它就是文本，由浏览器... -
HTML实例—以一个简单网页为例
2020-07-13 16:41:15将这四个内容设置为链接，首页刷新当前页面；HTML实例链接到第（5）块内容；其它和联系我暂时未设置链接内容。 （3）轮播图注释 鼠标移入时，“图1”显示图1内容的解释。主要是通过left:-999em;设置解释内容为 -
Java Web创建并运行一个简单的网页
2020-06-25 16:09:55@创建并运行一个简单的网页TOC 在使用eclipse创建运行一个web项目前，需安装和配置好Tomcat和jre。 1.新建一个项目 2.选择过滤器文本Dynamic Web Project 3.输入项目名 4.输入项目名后点击下一步 （最好把创建xml... -
css+html+js做一个简单大气的购物车网页
2020-06-26 08:27:08整体运行效果是这样的： 下面展示html部分的代码： <!DOCTYPE html> <html lang="zh-cn"> <head>...meta name="viewport" content="width=device-width, initial-scale=1.0">... -
一个简单的网页 个人主页 用Dreamweaver做的
2009-07-07 10:27:23一个简单的网页 个人主页 用Dreamweaver做的 很漂亮 很个性 -
用php制作一个简单的网页留言板
2020-07-17 19:01:23使用php、html、SQL和mysql数据库做一个简单的留言板（效果如图） 大体的思路： 先用html写出界面。 然后用php获取用户输入的留言内容。 接着把获取的留言内容用php存放到数据库中。 然后使用php访问数据库获取... -
一个简单的个人介绍html网页制作
2020-12-05 19:57:45目录参考 参考 https://blog.csdn.net/xianyudewo/article/details/110647187 -
一个很简单很简单的静态网页(附源代码）HTML+CSS
2021-02-14 11:03:47首先声明：代码中使用的爱心特效和转动的音符这个两个效果是笔者从网上找到的…具体在哪里找的我也忘了… 其他部分是自己写的 -
设计一个自我介绍简单页面
2019-02-22 16:41:391.在网页标题栏中显示“自我介绍”文本信息。 2.以1级标题的形式显示“自我介绍”文本信息。 3.以定义列表的形式介绍个人基本情况，包括姓名、性别、住址、兴趣或爱好。 4.在信息列表下面以图像的形式插入个人的... -
写一个简单的HTML页面
2019-09-26 14:12:22写一个火狐的首页，我设置了皮肤，背景是本地图片。 思路 一个表单，两个按钮，三个单选框。 六个div。图片是png矢量图。或者自己截的截图。 效果图 代码 <!DOCTYPE html> <html> <head&... -
JS实现简易网页计算器
2018-08-10 12:37:23一、实现功能 完成计算器的加减乘除的基本计算功能 实现输入框中的字符串拼接 二、实现思路 完成基本布局 js实现运算功能 三、知识点 e.target||e.srcElement ：获取触发事件的元素 四、具体代码实现 &... -
设计一个简单的网页版的计算器
2015-09-13 10:00:07网页版的简单计算器 -
如何用Html+css3写一个简单的网页
2017-12-01 20:30:28*/我这次利用一门前端开发语言Html开发一个简单的网页/* 程序猿de代码生活 body{ /* 利用了我所学的皮毛运用css -
三十分钟做一个网页游戏
2013-08-22 19:20:59这篇文章的目的是短时间之内，通过做出一个简单的缘分对对碰游戏，了解网页开发的基本框架。 对于大部分网页，都要包括HTML、CSS、JavaScript三种技术。而相对应的三种文件格式为.html、.css、.js。下面首先给出这... -
Html+css 一个简单的网页模板
2018-01-17 17:03:00一个简单的网页模板，有导航、子菜单、banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head>... -
学习HTML（九）——做一个简单的网页
2017-11-12 19:56:26通过前面八章的介绍，现在你就可以通过添加图片、设置列表、添加字体、背景颜色等标签，做一个很简单的静态网页了。下面的例子就是我在CodeAcademy中的作业。 gc_2299 > hi,my name is gc_2299,my ... -
C#实现简单网页
2019-04-08 20:59:02新建MyWebSite网站，添加一个WebForm1网页，其中包含一个文本框TextBox1一个按钮Button1（计算）和一个标签Label1（""）。在文本框中输入一个数，当点击“计算”按钮时，在标签中显示此数的平方根。 WebForm1.aspx...
