沈阳哪家做网站好,长春有几个站可以坐火车,凡科网登录电脑端,网站建设方案书 阿里云用html做python教程01 前言开肝构思实操额外修饰更换字体自适应 最后 前言
今天打开csdn的时候#xff0c;看见csdn给我推荐了一个python技能书。 说实话#xff0c;做得真不错。再看看我自己#xff0c;有亿点差距#x1f61f;。
开肝
先创建一个文件#xff0c;后缀… 用html做python教程01 前言开肝构思实操额外修饰更换字体自适应 最后 前言
今天打开csdn的时候看见csdn给我推荐了一个python技能书。 说实话做得真不错。再看看我自己有亿点差距。
开肝
先创建一个文件后缀名为.html然后用vscode运行。 一个英文感叹号回车跳出 然后就可以开始我们的教程了。
构思
我们要用h系列的标签也就是h1、h2、h3、h4、h5、h6我们还要用到p、div、a、image或许还会用到正则表达式来判断我们先来构思第一节的内容博主的文采不咋地我以后打的标签里的内容都是可以修改的说实话这是一项大工程估计今天完成不了。
实操
研究一下左边是导航栏右边则是内容。like这样 来自https://www.runoob.com/w3cnote/htmlcss-make-a-website.html 那我们就开始吧先搭小框架这是我搭的 div classboxh1/h1h2/h2/divdiv classunderdiv classparth2/h2h3/h3p/p/divdiv classmainh2/h2h3/h3p/ph3/h3p/ph3/h3p/ph3/h3p/p/div/div差不多运行一下如果什么都没有就对了。 之后就开始调整div的大小长宽颜色位置内间距外间距占屏幕大小。 注意外间距是padding内间距是margin语句。然后我自己简单的调了一下这是代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.under{display: flex;justify-content: center;text-align: center;}.main{width: 80%;background: #fff;height: 900px;}.part{width: 20%;background: rgb(200,200,200);height: 900px;}.box{background: #c48f11;width: 100%;height: 300px;}/style
/head
bodydiv classboxh1/h1h2/h2/divdiv classunderdiv classparth2/h2h3/h3p/p/divdiv classmainh2/h2h3/h3p/ph3/h3p/ph3/h3p/ph3/h3p/p/div/div
/body
/html运行一下 nice接下来就先填充文本了那我们这次的python教程就打上print()和变量的概念听起来很不错这是我的结果我随便填充的大家可以随意改: nice这是我的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.under{display: flex;justify-content: center;text-align: center;text-align: left !important;}.main{margin: 20px;width: 80%;background: #fff;height: 750px;padding: 30px;}.part{width: 20%;background: rgb(200,200,200);height: 750px;}h1{font-size: 30;}h3{font-size: 22px;}p{font-size: 18px;}.part{padding: 20px;}.box{justify-content: center;text-align: center !important;background: #c48f11;width: 100%;height: 300px;overflow: hidden;}/style
/head
bodydiv classboxh1Python教程/h1h2第一课:print()语句和数据类型/h2/divdiv classunderdiv classparth2关于我/h2p姓名:MMO死神永生/pp爱好:敲代码/pp外号:电脑终结者/p/divdiv classmainh3print()语句/h3pprint()语句是python用来输出的一个自带的函数用法很简单只需要在print()语句当中放上你想要打印的东西它就会在运行之后在控制台输出print()语句中的东西,例如在代码区输入:print(Hello World)运行代码后控制台就会多出一行Hello World/ph3数据类型/h3p肯定有些小朋友会很疑惑为何什么上文中的Hello World加上了英文的上下引号其实就是因为python有一个叫数字类型的东西。我们常见的数据类型有很多列如字符串、整数、浮点数、布尔值。还有一些存储其他东西比如列表、元组、字典、json等 /pp我们这次主要要讲的是字符串、整数、浮点数。/pp字符串就是我们平时说话用的字英文字母英文单词可以查看Unicode或者是Ascll这两个是我们常用的编码方式存储着各种语言、表情包等。/pp整数就是数字也就是数学概念中的自然数/pp浮点数就是小数包括整数。/ph2最后/h2p好了今天就到这里了敬请期待/p/div/div
/body
/html额外修饰
我们可以为这些字添加字体还可以为这个网页添加自适应听起来很不错。 注自适应原名是响应式我喜欢叫它自适应
更换字体
1.打开浏览器搜索下载免费字体 2.进入网页下载自己喜欢的字体在将字体放到我们编程文件的文件夹中。 不要看文件夹直接把里面的.tff复制到编程的文件夹。 这是我的之后就开始运用像这样 在style标签打上font-face{}其中font-family填的是你将这种字体在本文件中的命名。src:url填的是我们刚刚复制到文件夹中的.ttf格式的文件路径。 最后在你想要更换字体的地方输入font-famil: ;其中填的是你在font-face{}中给此字体的命名。像我这样效果
自适应
用到的主要语句是media screen语句像这句
media screen and (max-width:768px){}它的意思就是当屏幕分辨率最大宽度是768个像素时因为一般的手机是768px运行大括号里的内容。 好了开始我们的代码我们想在为电脑分辨率时让它的主题变为全部宽度的80%并居中当它为平板分辨率时占满屏当是手机分辨率时收起自我介绍那一栏变成一个菜单按钮按下时展开菜单按钮变成一个×在按下×时再变回原来的菜单按钮并且自我介绍那一栏收起。 这是我的代码 这是我写的当在电脑分辨率时宽度80%其余两种大家可以自行研究
最后
时间不够下次再见敬请期待!
