黑马程序员python基础班教程笔记:css简介
- 格式:docx
- 大小:201.25 KB
- 文档页数:3
爬?基本原理爬?是模拟?户在浏览器或者App应?上的操作,把操作的过程、实现?动化的程序当我们在浏览器中输??个url后回?,后台会发?什么?简单来说这段过程发?了以下四个步骤:查找域名对应的IP地址。
浏览器?先访问的是DNS(Domain Name System,域名系统),dns的主要?作就是把域名转换成相应的IP地址向IP对应的服务器发送请求。
服务器响应请求,发回??内容。
浏览器显示??内容。
浏览器是如何发送和接收这个数据呢?HTTP协议(HyperText Transfer Protocol,超?本传输协议)?的是为了提供?种发布和接收HTML(HyperText Markup Language)??的?法。
HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为?标的HTTP通道,简单讲是HTTP的安全版。
使?urllib爬取数据1.urlopen( ) 打开?个url的?法,返回?个?件对象,然后可以进?类似?件对象的操作2.urlretrieve( )urlretrieve?法将url定位到的html?件下载到你本地的硬盘中。
如果不指定filename,则会存为临时?件。
urlretrieve()返回?个?元组(filename,mine_hdrs)2.1 不指定路径说明:清除由于urllib.urlretrieve()所产?的缓存2.2 指定路径2.3 urlencode( )上?的程序演示了最基本的??抓取,不过,现在?多数?站都是动态? ?,需要你动态地传递参数给它,它做出对应的响应。
所以,在访问时,我们需要传递数据给它。
最常?的情况是什么?对了,就是登录注册的时候呀。
把数据?户名和密码传送到?个URL,然后你得到服务器处理之后的响应,这个该怎么办?下?让我来为?伙伴们揭晓吧!数据传送分为POST和 GET两种?式两种?式有什么区别呢?最重要的区别是GET?式是直接以链接形式访问,链接中包含了所有的参数,当然如果包含了密码的话是?种不安全的选择,不过你可以直观地看到 ??提交了什么内容。
《转载⿊马教程》HTMLCSS讲义,仅供参考今⽇内容:1. HTML标签:表单标签2. CSS:HTML标签:表单标签* 表单:* 概念:⽤于采集⽤户输⼊的数据的。
⽤于和服务器进⾏交互。
* form:⽤于定义表单的。
可以定义⼀个范围,范围代表采集⽤户数据的范围* 属性:* action:指定提交数据的URL* method:指定提交⽅式* 分类:⼀共7种,2种⽐较常⽤* get:1. 请求参数会在地址栏中显⽰。
会封装到请求⾏中(HTTP协议后讲解)。
2. 请求参数⼤⼩是有限制的。
3. 不太安全。
* post:2. 请求参数不会再地址栏中显⽰。
会封装在请求体中(HTTP协议后讲解)2. 请求参数的⼤⼩没有限制。
3. 较为安全。
* 表单项中的数据要想被提交:必须指定其name属性* 表单项标签:* input:可以通过type属性值,改变元素展⽰的样式* type属性:* text:⽂本输⼊框,默认值* placeholder:指定输⼊框的提⽰信息,当输⼊框的内容发⽣变化,会⾃动清空提⽰信息* password:密码输⼊框* radio:单选框* 注意:1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须⼀样。
2. ⼀般会给每⼀个单选框提供value属性,指定其被选中后提交的值3. checked属性,可以指定默认值* checkbox:复选框* 注意:1. ⼀般会给每⼀个单选框提供value属性,指定其被选中后提交的值2. checked属性,可以指定默认值* file:⽂件选择框* hidden:隐藏域,⽤于提交⼀些信息。
* 按钮:* submit:提交按钮。
可以提交表单* button:普通按钮* image:图⽚提交按钮* src属性指定图⽚的路径* label:指定输⼊项的⽂字描述信息* 注意:* label的for属性⼀般会和 input 的 id属性值对应。
如果对应了,则点击label区域,会让input输⼊框获取焦点。
⿊马程序员HTML、CSS学习笔记HTML://预格式化:保留⽂字在源代码中的格式,页⾯中显⽰的和源代码中的效果完全⼀致。
浏览器在显⽰其中的内容时,会完全按照其真正的⽂本格式来显⽰。
例如,原封不动地保留⽂档中的空⽩,如空格、制表符等。
//HTML中空格的显⽰:使⽤ 或者加空格的时候将输⼊法设为全⾓。
//超链接:指从⼀个⽹页指向⼀个⽬标的连接关系,这个⽬标可以是另⼀个⽹页,也可以是相同⽹页上的不同位置,还可以是⼀个图⽚、⼀个电⼦邮件地址、⼀个⽂件或者⼀个应⽤程序。
超⽂本链接是超链接的⼀种,是指⽤⽂字链接的形式来指向⼀个⽬标。
HTML⽂档类型:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">//只有确定了正确的DOCTYPE,XHTML⾥的标识和级联样式才能正常⽣效。
在HTML 1.0中有3种DTD声明可以选择,过度的Transitional、严格的Strict和框架的Frameset。
使⽤严格的DTD来制作页⾯当然是最理想的⽅式,但对于没有深⼊了解Web标准的⽹页设计者,⽐较合适的是使⽤过渡的DTD。
因为这种DTD还允许使⽤表现层的标识、元素和属性。
<!DOCTYPE html>:可以这样写⽽不⽤声明DTD。
基本结构:<!--注释内容-->//注释标签⽤来在源⽂档中插⼊注释,注释会被浏览器忽略。
<html>//html元素可告知浏览器这是⼀个html类型的⽂档。
<head>//定义在html语⾔头部的内容不会在⽹页上直接显⽰,它⽤于包含当前⽂档的相关信息,可以包含title元素、meta元素等。
<title></title>//页⾯标题元素。
以下是一份关于CSS的笔记,涵盖了基础概念、属性和布局技巧等方面:一、基础概念CSS是层叠式样式表的简称,也称为级联样式表或样式表。
它主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。
CSS文件的后缀是.css,通常在HTML文档中嵌入或链接到外部CSS文件。
CSS不区分大小写,建议小写。
CSS具有层叠性,一个元素可以设置多个样式。
当样式冲突时,优先级高的样式生效;优先级相同时,写在后面的样式生效。
二、CSS属性和布局技巧文本样式:可以使用CSS设置文本的颜色、字体、大小、对齐方式等。
例如,color属性用于设置文本颜色,font-family属性用于设置字体,font-size属性用于设置字体大小,text-align属性用于设置文本对齐方式。
图片样式:可以使用CSS设置图片的宽度、高度、边框、边距等。
例如,width和height属性用于设置图片宽度和高度,border属性用于设置图片边框,margin和padding属性用于设置图片边距。
布局技巧:CSS提供了多种布局技巧,如浮动布局、定位布局、弹性布局等。
其中,浮动布局是最常用的布局方式之一,通过float属性可以让元素左右浮动;定位布局通过position属性可以实现元素的定位;弹性布局则是一种更灵活的布局方式,通过flexbox或grid属性可以实现元素的灵活布局。
三、CSS选择器CSS选择器是用于选择HTML元素的一种语法。
常用的选择器有元素选择器、类选择器、ID选择器等。
例如,p选择器可以选择所有的段落元素,.myClass选择器可以选择所有类名为myClass的元素,#myID选择器可以选择ID为myID的元素。
四、CSS的引入方式内联样式:在HTML标签内使用style属性直接定义CSS代码。
这种方式的优点是方便快捷,但只对当前元素生效。
内部样式表:在HTML文档的<head>部分使用<style>标签定义CSS代码。
黑马程序员 python讲义
本《黑马程序员python讲义》是一本针对初学者的Python教程,全书共分为十章,从Python基础语法入门、函数、模块、文件操作、面向对象编程等各个方面详细讲解Python的知识点。
第一章主要介绍Python的基本概念和Python的安装。
第二章介绍Python的数据类型和运算符,包括数字、字符串、列表、元组、字典等。
第三章详细讲解了Python的流程控制语句,包括条件语句、循环语句等。
第四章讲解Python的函数,包括定义函数、调用函数、参数传递等。
第五章详细讲解Python的模块,包括导入模块、自定义模块、标准库等。
第六章介绍Python的文件操作,包括打开文件、读取文件、写入文件等。
第七章详细讲解Python的异常处理,包括try...except语句、finally语句等。
第八章讲解Python的面向对象编程,包括类、对象、继承、多态等。
第九章介绍Python的正则表达式,包括正则表达式的基本语法、常用元字符、正则表达式的应用等。
第十章详细讲解Python的常用模块,包括os模块、sys模
块、time模块、random模块等。
本讲义内容深入浅出,易于理解,适合初学者入门学习Python。
文章标题:解锁Python编程技能:成为黑马程序员的必备笔记第一部分:引言1.1 什么是Python编程Python编程语言是一种高级、通用、解释型编程语言。
它在机器学习、人工智能、数据分析等领域有着广泛的应用,被誉为是学习编程的最佳入门语言之一。
对于想要成为优秀程序员或者黑马程序员的人来说,掌握Python编程技能至关重要。
第二部分:入门篇2.1 Python基础语法在学习Python编程之前,了解Python的基础语法是必不可少的。
Python的变量、数据类型、条件语句、循环等。
只有掌握了这些基础知识,才能够更好地理解和应用Python编程。
2.2 Python函数和模块函数和模块是Python编程中非常重要的概念。
函数可以让代码更加模块化和可复用,而模块则可以让代码更加清晰和可维护。
通过学习函数和模块的知识,可以使我们的Python代码更加高效和灵活。
2.3 Python面向对象编程面向对象编程是一种重要的编程范式,而Python是一种面向对象的编程语言。
掌握面向对象编程的知识,可以让我们更好地组织和管理代码,提高代码复用性和可维护性。
第三部分:进阶篇3.1 Python文件操作在实际开发中,文件操作是无法回避的部分。
学习如何使用Python 进行文件读写操作,可以让我们更好地处理数据和文件,实现更丰富的应用场景。
3.2 Python异常处理异常是编程中一种常见的情况,学习如何处理异常可以让我们的代码更加健壮和可靠。
Python提供了丰富的异常处理机制,学习这些知识可以让我们更好地处理各种异常情况。
3.3 Python常用库和框架Python拥有丰富的第三方库和框架,如NumPy、Pandas、Django等。
学习这些常用库和框架,可以让我们更好地开发各种应用,提高开发效率和质量。
第四部分:个人观点和总结4.1 个人观点作为一名编程人员,我深刻理解Python编程技能在今天的重要性。
Python的简洁易读的语法、丰富强大的库和框架、广泛的应用场景,使其成为成为黑马程序员不可或缺的技能之一。
【黑马程序员】PHP课程同步笔记day04:CSS介绍(一) CSS简介CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或者XML等文件样式的计算机语言。
其扩展名为.css。
CSS不仅可以静态的修饰网页,还可以配合各种脚本语言动态的对各网页元素进行格式化。
初学CSS,可先用内嵌式样式进行学习,位置为<head></head>之间,标记:<style type=”text/css”>样式写在这里</style>CSS语法格式CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器{属性1:值1;属性2:值2;属性n:值n;}选择器:通常是需要改变样式的HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是希望设置的样式属性(style attribute)。
每个属性有一个值。
属性和值被冒号分开。
CSS注释HTML注释:<!--注释的内容,在页面中是不显示的-->CSS注释:/*注释内容*/,不管是单行还是多行只有这一种办法。
CSS基本选择器基本选择器Style属性(行内样式):直接写在标签内如: <p style=”font-size:12px; color:red;”>文字内容</p> 标签选择器针对HTML的标签设置样式,这个需要写在<style>标签内。
(biaoqiancss.html)ID选择器ID 选择器可以为标有特定ID 的HTML 元素指定特定的样式。
根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次尽管你会发现即便你把几个元素都命名成相同的id名字,css选择器还是会把这些元素都选中应用样式,对于css选择器,id属性的唯一性似乎不存在。
然而,对于js而言,它只会选择具有相同id名字元素中的第一个。
【黑马程序员】Web前端学习教程之CSS基础知识Web前端入门教程_Web前端html+css+JavaScrip视频网盘:/course/267.html?1912sxkqq资料网盘:https:///s/1pMPNzFP 提取码:557zH5+CSS3视频视频网盘:/course/197.html?1912sxkqq资料网盘:https:///s/1bqgl6Ej 提取码:uf7c记忆力有限,很多知识都只能通过不断的复习笔记和实际操作来加深记忆,分享一些css 的基础知识。
1、CSS作用以及初识Css的作用:Cascading Style Sheets,简称层叠样式表,主要是用来进行页面的版面布局和外观样式的美化;使用css的原理:能够将结构html和样式css分离书写,简化代码,提高可阅读性;2、css引入方式行内样式、内嵌样式(内联样式)、外部链接样式(外联样式)行内式书写:直接在标签的开始标签身上添加一个style=“”属性,然后在引号里面书写css属性和属性值即可,没有实现结构和样式分离,尽量不用:内部样式(内嵌式):书写在head标签里面,title标签下面,以一对style标签包裹,实现了结构和样式的半分离;Css样式书写格式:选择器{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;……}选择器:指定CSS样式作用的HTML对象(要更改样式的标签),花括号内是对该对象设置的具体样式。
属性和属性值:以键值对的形式出现,属性和属性值之间用英文的冒号’ : ’链接;;外部链接的步骤:01 新建:.css格式的css文件,直接书写选择器以及css样式;02 引用:利用link标签引入新建的css文件,要配合link的三个属性 rel关系,type 文件类型(可以不写),href文件路径;使用外部链接的好处:实现了结构和样式的完全分离,代码简介,可读性强;Css外部链接样式共享一个css样式可以共享,如果两个页面的标签样式完全一致,就可以使用同一个css文件,然后分别连接过来即可;Css引入方式的优缺点行内样式表:书写方便,权重高。
黑马程序员JavaEE就业笔记串讲---CSS 【HTML的块标签】<div></div> :默认一个div独占一行.<span></span> :默认在同一行.【CSS的概述】什么是CSS:* HTML相当于网站的骨架!CSS对骨架进行美化!CSS在那些地方使用:任何网站都会使用CSS去美化页面!!!如何使用CSS知道CSS的语法.【CSS的基本语法】CSS的基本语法通常包含两个部分:一个是选择器,一个声明.* 选择器{属性:属性值;属性:属性值...}【CSS的引入的方式】行内样式:直接在HTML的元素上使用style属性设置CSS.<h1 style="color:red;font-size:200px ;">标题</h1>页面内样式:在HTML的<head>标签中使用<style>标签设置CSS.<style>h1{color:blue;font-size: 40px;}</style>外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />【CSS的选择器】元素选择器:div{border:1px solid blue;width:40px;height:45px;}ID选择器:#d1{border:2px solid red;}类选择器:.divClass{border:2px solid yellow;}【CSS的浮动】使用float属性可以完成DIV的浮动.float属性的取值:清除浮动效果:使用clear属性进行清除:案例:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.divClass{border:1px solid blue;width:200px;height:220px;}#d1{float:left;}#d2{float:left;}#d3{float:left;}.clear{clear:both;}</style></head><body><div id="d1" class="divClass">DIV1</div> <div id="d2" class="divClass">DIV2</div> <div id="d3" class="divClass">DIV3</div> <div class="clear"></div><div id="d4" class="divClass">DIV4</div></body></html>【CSS的其他选择器】属性选择器:<style>input[type="text"]{background-color: red;}</style>后代选择器:div span 查找的是所有div中的所有的span元素.h1 strong{color:red;}<h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is<strong>very</strong><em>really<strong>very</strong></em>important.</h1>子元素选择器:div > span找这个div中的第一层级的span元素.h1 > strong{color:red;}<h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is<strong>very</strong><em>really<strong>very</strong></em>important.</h1> 并列选择器:选择器,选择器{}【CSS的样式】背景文本字体列表【CSS中的盒子模型】内边距:padding.边框:border外边距:margin【CSS中的定位】position属性设置定位:* relative:相对定位* absolute:绝对定位使用另外两个属性:left,top 超链接的伪类。
按CSS的位置来分类
1、内嵌样式:在HTML页面中以<style>开头,</style>结束,这里边的样式只能供
本页面使用
2、外部样式:写一个css文件,在需要使用css的页面中引入外部css。
我们可以将
页面公用的css写到外部css中
3、行内样式:通过元素的style属性直接写的样式。
内嵌样式
在HTML页面的内部嵌入样式
行内样式
通过元素的style属性直接写的样式
<标记 style=’样式’ >
外部样式
首先新建一个css文件。
在HTML页面中链接或导入的方法来引用外部样式。
1、链接外部样式
语法:<link rel="stylesheet" type="text/css"
href="style/home.css"/>
rel:表示链接的类型,这个属性不能省略 rel="stylesheet"表示链接的类型是样式表
type="text/css":表示这个文件是css文本
2、导入外部样式
3、链接样式和导入样式的区别
链接样式只能在HTML页面中引入外部样式
导入样式既可以在HTML中导入外部样式也可以在样式文件中导入外部样式
注释
1、HTML注释<!—HTML注释 -->
2、CSS注释/* CSS注释 */
注释是给开发人员看的,不参加计算机的执行。
黑马程序员郑州中心编著黑马程序员:前端阶段笔记之CSS第二天三、文本text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。
参1:水平偏移量正值向右负值向左;参2:垂直偏移量正值向下负值向上;参3:模糊度(模糊半径)是不能为负值;参4:颜色四、边框边框圆角:border-radius:0 0 0 0 / 0 0 0 0; 前四个是x轴圆角半径,后面四个是Y轴圆角半径边框阴影:border-shadow参1、水平偏移量右正左负;参2、垂直偏移量下正上负;参3、模糊半径是不能为负值;参4、颜色参5、inset可以设置内阴影;边框图片:border-image参1:source:图片路径参2:slice:切割,包含4参数(a,b,c,d)按照上右下左顺序参3:repeat是否平铺包含三个值:stretch拉伸(默认值)、repeat重复、round 平铺参4:width宽度参5:偏移位置五、盒模型CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:1、box-sizing: border-box 计算方式为content = width –border - padding2、box-sizing: content-box 计算方式为content = widthbox-shadow属性取值:水平偏移量、垂直偏移量、模糊度、外延值、color、inset(内阴影)box-reflect盒子倒影属性:可以对盒子模型进行倒影设置。
值:direction(above、below、left、right)、offset(图片与倒影间隔)、mask-box-image(url)。
黑马程序员课程表一、课程简介黑马程序员是国内知名的IT培训机构,提供专业的计算机编程培训课程。
本课程表将介绍黑马程序员的主要课程,并为学员提供一个全面的学习计划。
二、课程目录黑马程序员的课程目录涵盖了多个计算机编程领域,包括但不限于以下内容:1.前端开发2.后端开发3.移动端开发4.数据库开发5.数据分析与挖掘6.人工智能与机器学习三、课程详情1. 前端开发前端开发课程主要涵盖了HTML、CSS、JavaScript等前端技术的基础知识和实际应用。
学员将学习如何构建网页、设计用户界面以及与后端进行交互。
•HTML基础•CSS样式与布局•JavaScript编程•前端框架(Vue.js、React等)•前端项目实战2. 后端开发后端开发课程主要涵盖了Java、Python、PHP等后端编程语言的基础知识和实际应用。
学员将学习如何设计和实现服务器端的逻辑。
•Java基础•Python基础•PHP基础•数据库设计与开发•后端框架(Spring、Django等)•后端项目实战3. 移动端开发移动端开发课程主要涵盖了Android、iOS等移动平台的应用开发。
学员将学习如何使用相关工具和技术开发出功能丰富的移动应用程序。
•Android开发基础•iOS开发基础•移动应用项目实战4. 数据库开发数据库开发课程主要涵盖了关系型数据库和非关系型数据库的设计和开发。
学员将学习如何使用SQL语言进行数据操作以及如何设计高效的数据库结构。
•SQL语言基础•MySQL数据库开发•Oracle数据库开发•MongoDB数据库开发5. 数据分析与挖掘数据分析与挖掘课程主要涵盖了数据分析的基本概念和技术。
学员将学习如何使用Python等工具进行数据分析、挖掘和可视化。
•数据分析基础•Python数据分析库(NumPy、Pandas等)•数据可视化•数据挖掘实践6. 人工智能与机器学习人工智能与机器学习课程主要涵盖了人工智能和机器学习的基础知识和应用。
黑马程序员课程表黑马程序员是一家专注于IT技术培训的机构,提供多种课程供学员选择。
下面是一份黑马程序员的课程表,希望对大家了解该机构的培训内容有所帮助。
1. 基础课程1.1 编程入门课程:介绍编程的基本概念和常用编程语言,适合零基础学员。
1.2 数据结构与算法:学习数据结构和常用算法,提高编程能力。
1.3 网络基础:了解网络基本原理和常见网络协议。
1.4 数据库基础:学习数据库的基本概念和SQL语言。
2. 前端开发课程2.1 HTML/CSS:学习网页的基本结构和样式设计。
2.2 JavaScript:掌握JavaScript语言的基本语法和常用技巧。
2.3 Vue.js:学习Vue.js框架,构建动态网页和单页面应用。
3. 后端开发课程3.1 Java开发:学习Java语言和Java EE框架,开发企业级应用。
3.2 Python开发:掌握Python语言和Django框架,进行Web 开发和数据分析。
3.3 PHP开发:学习PHP语言和Laravel框架,构建动态网站。
4. 移动开发课程4.1 Android开发:学习Android应用开发和UI设计。
4.2 iOS开发:掌握iOS应用开发和Swift语言。
5. 数据科学与人工智能课程5.1 数据分析:学习数据清洗、可视化和建模等技术。
5.2 机器学习:掌握常用机器学习算法和工具,进行模型训练和预测。
5.3 深度学习:学习深度神经网络的原理和应用。
6. 运维与测试课程6.1 Linux运维:学习Linux系统管理和Shell脚本编程。
6.2 自动化测试:掌握自动化测试工具和技术,提高软件质量。
以上是黑马程序员提供的部分课程,根据个人需求和兴趣可以选择相应的课程进行学习。
黑马程序员致力于培养高素质的IT人才,帮助学员提升技术能力,实现个人职业发展目标。
无论是想要入门编程还是深入学习某个领域的专业人士,都可以在黑马程序员找到适合自己的培训课程。
通过系统的学习和实践,相信每个学员都能在IT行业中获得成功。
标签的显示模式行显示标记标记是从左往右排称为行显示标记特性:1、从左往右排列2、不指定高度默认高度是03、不指定宽度默认宽度是04、行显示标记不能指定宽度和高度5、转换成块显示:display:block多学一招:如果<a>标记转成块显示以后,可以设定宽度和高度,但是排列变成了上下排列,如果要实现左右排列,同时设定宽度和高度,可以将显示模式设置为display:inline-block;块显示标记标记从上往下排称为块显示标记特性:1、从上往下排2、如果不指定宽度默认宽度是100%3、如果不指定高度,高度是0px4、可以设置宽度和高度拼版中所以用非常多的两个块标记<div>1、块显示标记2、跨段块标记,div中可以标题,段落,图片,文字<span>1、行显示标记2、跨字符块标记,span中只能放文字Div + Css 排版优点执行效率高。
学完div+css后思考为什么div+css执行效率高?盒子模型什么是盒子?只要是能存放内容的标签都是盒子。
最大的盒子是HTML标记边界(margin):盒子的外面叫边界,边界有四个,上下左右填充(padding):盒子的里面叫填充,填充有四个,上下左右边框(border):盒子的本身有边框,边框有四个,上下左右练习CSS例题一(边框和边界)<style type="text/css">body{background-color:#6CF; /*设置背景色*/ }#username{border-top:none; /*取消上边框*/border-left:none; /*取消左边框*/border-right:none; /*取消右边框*/border-bottom:#06F dashed 1px; /*下边框是实线 solid实线dashed:虚线*/background-color:transparent; /*transparent:透明*//*margin-right:30px;*/}#btn{margin-left:30px;border:none;cursor:pointer; /*当光标移动到当前标记的时候变成手的形状*/ }</style></head><body>请输入您的信息:<input type="text" name="name" id="username" /> <input type="button" value="确定>>" id="btn" />CSS例题二(细线表格)<style type="text/css">table,td,th{border:#09F solid 1px;border-collapse:collapse; /*collapse:塌陷,做细线表格*/ }table{width:500px;margin-left:auto;margin-right:auto; /*对块显示标记,边界的左自动,右自动就是居中*/}tr{height:40px;}td{text-align:center; /*td里面的内容居中*/}</style></head><body><table><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td>22</td></tr><tr><td>2</td><td>任盈盈</td><td>女</td><td>18</td></tr><tr><td>3</td><td>任我行</td><td>男</td><td>55</td></tr></table>例题:银杏的叶子<style type="text/css">body{background-image:url(images11/bg7.jpg); /*背景图片*/background-repeat:no-repeat; /*背景不平铺*/ }#content{background-image:url(images11/bg8.gif);background-repeat:repeat-y; /*沿着y轴平铺*/padding-left:110px; /*左填充是110px*/font-size:14px;}</style></head><body><div id="content"><h1>银杏的优点</h1>1. 叶色秀雅,花色清淡。
黑马程序员:前端阶段笔记之CSS第三天六、背景背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
1、background-size设置背景图片的尺寸cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
也可以使用长度单位或百分比2、background-origin设置背景定位的原点border-box 以边框做为原点;padding-box 以内边距做为原点;content-box 以内容区做为原点;3、background-clip设置背景图片的裁切区域border-box 裁切边框以内为背景区域;padding-box裁切内边距以内为背景区域;content-box 裁切内容区做为背景区域;background-break 设置背景图片进行平铺时的循环方式bounding-box 在整个元素中进行平铺each-box 在每一行中进行平铺continuous 下一行中的图像紧接着上一行中的图像继续平铺七、渐变线性渐变linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。
取值:方向、起止色、渐变范围2、径向渐变radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果取值:圆半径、圆中心、起止色、渐变范围八、过渡过渡可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。
帧动画:通过一帧一帧的画面按照固定顺序和速度播放。
如电影胶片补间动画:自动完成从起始状态到终止状态的的过渡。
特点:当前元素只要有“属性”发生变化时,可以平滑的进行过渡。
e过渡属性在A、B状态都可以,如果都要慢慢变化就设在A上,hover或者JS添加class 简写:第一个时间是执行时间,第二个是延迟时间,其他的没有顺序要求,但是最好按照下面的顺序书写transition-property设置过渡属性取值:none 没有元素all 所有元素index 指定的css属性transition-duration设置过渡时间,从旧属性转换到新属性花费的事件transition-delay设置过渡动画延迟时间transition-timing-function设置过渡速度(几个取值肉眼很难看出来区别)取值:ease 缓解效果,等同于cubic-bezier(0.25, 0.1, 0.25, 1.0)函数,即立方贝塞尔linear 线性效果,等同于cubic-bezier(0.0, 0.0, 0.1, 1.0)函数ease-in 渐显效果,等同于cubic-bezier(0.42, 0, 1.0, 1.0)函数ease-out 渐隐效果,等同于cubic-bezier(0, 0, 0.58, 1.0)函数ease-in-out 渐显渐隐效果,等同于cubic-bezier(0.42, 0, 0.58, 1.0)函数cubic-bezier 特殊的立方贝塞尔曲线。
黑马程序员:前端阶段笔记之CSS第四天九、转换1、2D转换transform:用来设置2D或3D转换转换可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式①移动translate(x, y) 改变元素的位置,相对原来的位置的变化,如果为百分比则是相对于盒子的大小;translate3d(x,y,z) 3d空间的位置移动②缩放scale(x, y) 水平和垂直方向的缩放,x、y的取值可为小数,如果只有一个参数即缩放的倍数;③旋转rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;旋转时元素的坐标也会跟着改变④倾斜skew(Ydeg, Xdeg) 可以使元素按一定的角度进行倾斜,会改变元素的形状⑤矩阵变换matrix(x, y) 改变元素的位置2、3D转换(1)3D坐标轴用X、Y、Z分别表示空间的3个维度,三条轴互相垂直。
如下图(2)3D呈现transform-style:preserve-3D; 内嵌元素,并且必须经过Z变形(transform)透视perspective :辅助性帮我们去理解元素在转换过程中的视觉效果(0-1000)设置给父盒子,值越大,效果越不明显,看起来近大远小3、backface-visibility设置元素背面是否可见十、动画1、定义动画序列:a、通过@keyframes指定动画序列名称,主要先定义再调用;b、通过百分比将动画序列分割成多个节点;(0%-100%、from-to)c、在各节点中分别定义各属性d、通过animation将动画应用于相应元素;2、调用:animationa、animation-name设置动画名称b、animation-duration动画持续时间c、animation-delay动画延时时间d、animation-timing-function动画执行速度,linear(匀速)、ease等e、animation-play-state动画播放状态,play、paused(暂停)、running等f、animation-direction动画播放方向,默认值normal,alternate动画逆播(动画先正向播放再反向播放)g、animation-fill-mode动画执行完毕后状态,forwards(结束时的状态)backwards (执行之前的状态)等h、animation-iteration-count动画执行次数,infinite(无限次)等i、steps(60) 表示动画分成60步完成。
python(⿊马教程学习总结笔记⼀)
⼀、python简介
1、python是完全⾯向对象的语⾔,⼀切函数、模块、数字、字符串都是对象;
2、python 拥有强⼤的标准库,它提供了系统管理、⽹络通信、⽂本处理、数据库接⼝等额外功能,使⽤⾮常便利;
3、有⼤量的第三⽅模块,设计⼈⼯智能、机器学习、web开发多个领域。
⼆、编译常见错误
错误名称错误类型
NameError名称错误
Syntax Error:invalid syntax语法错误:语法⽆效
Indentation Error缩进错误
三、常见的格式符和转义字符
符号意义
%s字符串
%d有符号的⼗进制数,%06d(表⽰输出整数显⽰位数,不⾜⽤0补齐)
%f浮点数,%.2f (表⽰⼩数点后只显⽰两位)
%%输出%
\n换⾏
\t在控制台输出⼀个制表符,协助⽂本在输出时垂直⽅向对齐
\r回车
例如在print中
print("%d%d%d"%(num1, num2,result))
其使⽤⽅法与C语⾔类似,每⼀个%d都表⽰对应括号内的⼀个值
四、python中合法的标志符
标志符⼀般就是字母、数字、下划线
标志符⼀般规则
1、不能以数字开头
2、不能包含⾮法字符
3、不能包含空格
4、不能包含运算符。
黑马程序员郑州中心编著
黑马程序员:前端阶段笔记之CSS第一天
一、选择器
1、属性选择器
①E[attr] 表示存在attr属性即可;
②E[attr=val] 表示属性值完全等于val;
③E[attr*=val] 表示在属性值的“任意”位置包含val字符;
④E[attr^=val] 表示在属性值的“开始”位置包含val字符;
⑤E[attr$=val] 表示在属性值的“结束”位置包含val字符;
2、伪类选择器
①以某元素相对于其父元素或兄弟元素的位置。
E:first-child第一个子元素
E:last-child最后一个子元素
E:nth-child(n) 第n个子元素
E:nth-last-child(n) 同E:nth-child(n) 相似,只是倒着计算
②目标伪类选择器
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
E:not () 选中除了当前锚点的其他元素
3、伪元素选择器
E::first-letter文本的第一个单词或字(如中文、日文、韩文等);
E::first-line 文本第一行;
E::selection 可改变选中文本的样式;
是一个行内元素,需要转换成块元素
":" 与"::" 区别在于区分伪类和伪元素,在开发中使用":";。
css概述
为了让⽹⻚元素的样式更加丰富,也为了让⽹⻚的内容和样式能拆分开, CSS 由此思想⽽诞⽣,CSS是 Cascading Style Sheets 的⾸字⺟缩写,意思是层叠样式表。
有了CSS,html中⼤部分表现样式的标签就废弃不⽤了, html只负责⽂档的结构和内容,表现形式完全交给CSS,html⽂档变得更加简洁。
css基本语法及⻚⾯引⽤
css基本语法
css的定义⽅法是:选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和⻚⾯元素关联起来的名称,属性是希望设置的样式属性每个属性有⼀个或多个值。
代码示例:
css⽂本设置
常⽤的应⽤⽂本的css样式:
color 设置⽂字的颜⾊,如: color:red;
font-size 设置⽂字的⼤⼩,如:font-size:12px;
font-family 设置⽂字的字体,如:font-family:'微软雅⿊';
font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,fontstyle:'italic';设置⽂字倾斜
font-weight 设置⽂字是否加粗,如:font-weight:bold; 设置加粗fontweight:normal 设置不加粗
font 同时设置⽂字的⼏个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗字号/⾏⾼字体;如: font:normal 12px/36px '微软雅⿊'; line-height 设置⽂字的⾏⾼,如:line-height:24px;
text-decoration 设置⽂字的下划线,如:text-decoration:none; 将⽂字下划线去掉
text-indent 设置⽂字⾸⾏缩进,如:text-indent:24px; 设置⽂字⾸⾏缩进24px
text-align 设置⽂字⽔平对⻚⽅式,如text-align:center 设置⽂字⽔平居中
css颜⾊表示法
css颜⾊值主要有三种表示⽅法:
1、颜⾊名表示,⽐如:red 红⾊,gold ⾦⾊
2、rgb表示,⽐如:rgb(255,0,0)表示红⾊
3、16进制数值表示,⽐如:#ff0000 表示红⾊,这种可以简写成 #f00
css选择器常⽤的选择器有如下⼏种:
1、标签选择器
标签选择器,此种选择器影响范围⼤,建议尽量应⽤在层级选择器中。
举例:
2、id选择器
通过id名来选择元素,元素的id名称不能重复,所以⼀个样式设置项只能对应于⻚⾯上⼀个元素,不能复⽤,id名⼀般给程序使⽤,所以不推荐使⽤id作为选择器。
举例:
3、类选择器
通过类名来选择元素,⼀个类可应⽤于多个元素,⼀个元素上也可以使⽤多个类,应⽤灵活,可复⽤,是css中应⽤最多的⼀种选择器。
举例:
4、层级选择器
主要应⽤在选择⽗元素下的⼦元素,或者⼦元素下⾯的⼦元素,可与标签元素结合使⽤,减少命名,同时也可以通过层级,防⽌命名冲突。
举例:
5、组选择器
多个选择器,如果有同样的样式设置,可以使⽤组选择器。
举例:。