Python-HTML CSS 练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html基础复习</title>
</head>
<body>
<!-- 前端: 用户可见的所有界面均是前端(PC端/移动端) -->
<!-- html: 页面架构搭建 | css: 页面布局样式 | js: 页面交互渲染 -->
<!-- 编辑器: webstrom | sublime | atom | pycharm --> <!-- 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾) <abc> | <num1> | <nav-title> -->
<!-- 指令: <!doctype html> 注释 -->
<!-- 转移字符: ≷ --> <!-- 基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style --> <!-- 分类: 单双 | dispaly -->
<!-- inline: span | b | i | a -->
<!-- inline-block: img | input -->
<!-- block: div | hn | p | ul | hr | br -->
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css复习</title>
</head>
<body>
<!-- 1.css三种引入: 行间式 | 内联式 | 外联式 -->
<!-- 选择器 作用域 样式块 --> <!-- 2.长度单位: px | em | rem | cm | mm | vw | vh | in --> <!-- 3.颜色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF --> <!-- 4.文本样式 -->
<style>
span {
font: 900 normal 30px/100px '首选字体', '备用字体1', '备用字体2';
text-align: center;
color: red;
text-decoration: underline;
letter-spacing: 3px;
word-spacing: 10px;
text-indent: 2em;
}
</style> <!-- 5.选择器 -->
<style type="text/css">
/*选择器： css连接html标签的桥梁，建立连接后就可以控制标签样式*/
/*标签 类 id*/
/*组合选择器*/
/*伪类选择器*/ /*优先级：*/
/*基础选择器： !important > id > 类[属性] > 标签 > 通配*/
/*组合选择器: 权重(同类型个数比较)*/
.b > .s {}
.b .s {}
.b + .s {}
.b.s {}
.b[class] {} #ss { font-size: 50px; }
span.s2 { font-size: 40px; }
[class] { font-size: 35px; }
.s1 { font-size: 30px; }
span { font-size: 20px!important; } /* 标签名 | . | # */
/*后代"空格"(子代) | 兄弟"~"(相邻) | 群组"," | 交集"紧挨着"*/
/* [属性名="属性值"] */ </style> <span class="s1 s2" id="ss" style="font-size: 60px;">12345</span> <style type="text/css">
/* 伪类选择器 */
/* :link :hover(鼠标悬浮) :active(鼠标点击中) :visited */
/* :nth-child() 先位置后类型 :nth-of-type() 先类型后位置 */
/* :not() */
/* :before(盒子渲染前) :after(盒子渲染后) :focus(表单标签获取焦点) */
p:nth-child(3) { font-size: 100px }
p:nth-of-type(2n) { font-size: 50px }
</style>
<div class="box">
<span>span</span>
<p>pp1</p>
<p>pp2</p>
</div> <!-- 6.精灵图 -->
<style type="text/css">
.pg {
width: 200px;
height: 200px;
border: 1px solid black;
position: absolute;
top: 10px;
left: calc(50vw - 100px);
}
.pg {
background: url('img/bg.png') no-repeat;
/*将背景图片的具体位置移至显示区域*/
background-position: -300px -350px;
}
</style>
<div class="pg"></div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型复习</title>
<style type="text/css">
abc {
display: inline-block;
} .box {
background: orange; /*文本类型的样式具有继承关系*/
font-size: 30px;
font-weight: 900;
/*inline-block不会继承*/
text-decoration: underline;
text-indent: 2em;
line-height: 60px;
}
</style>
</head>
<body>
<!-- 文本属性通过拥有继承关系: 子标签没有设置文本属性时,值会从父级中获取(父级如果没有设置,会找到html) --> <div class="box">
<span>inline</span>
<div>block</div>
<abc>inline-block</abc>
</div> <!-- 1.盒子的四个组成部分 -->
<!-- content | padding | border | margin -->
<!-- display: inline | inline-block | block --> <!-- content: 提高给内容(文本,图片,子标签整个盒子)的显示区域 --> <!-- padding: 介于border与content之间的距离, 可以撑开border与content之间的距离, 没有自身颜色(透出背景颜色),只有区域 -->
<!-- 注: padding-top可以将自身与自身第一个子级分离 -->
<style type="text/css">
.p {
width: 20px;
height: 20px;
background: red;
}
.b {
width: 100px;
padding-bottom: 100px;
border-bottom: 1px solid black;
}
.c {
background: pink;
/*border: 1px solid black;*/
border-style: solid;
padding-left: 32px;
padding-bottom: 32px;
margin-left: 32px;
/*text-indent: 2em;*/
}
</style>
<div class="b">
<div class="p"></div>
</div>
<div class="c">123</div> <!-- border: 边框, 有宽度颜色样式, 如果给颜色设置透明也可以透出背景颜色 --> <!-- margin: 控制盒子位置 => 盒模型布局 --> <!-- 2.边界圆角 -->
<style type="text/css">
.bj {
width: 100px;
height: 100px;
background: pink;
}
.bj {
/*border-radius: 20px;*/
/*border-radius: 40%;*/
/*border-radius: 10px 30px 50px;*/
border-radius: 10px / 50px;
}
</style>
<div class="bj"></div> <!-- 3.display --> <!-- 4.margin布局 -->
<!-- i) margin-top | margin-left 完成自身布局, 右下两个方向影响兄弟 -->
<style type="text/css">
.hh {
width: 30px;
height: 30px;
background: black;
/*display: inline-block;*/
float: left;
/*自身动,控制自身布局*/
/*margin-top: 30px;*/
/*margin-left: 30px;*/ /*右兄弟动,辅助兄弟布局*/
margin-right: 100px;
/*下兄弟动,辅助兄弟布局*/
/*margin-bottom: 30px;*/
}
.xx {
width: 30px;
height: 30px;
background: red;
/*display: inline-block;*/
float: left;
}
</style>
<div class="hh"></div>
<div class="xx"></div> <!-- ii) 上下间距会重叠取大值, 左右间距会叠加 -->
<!-- 坑1: 父子联动 坑2: 上兄弟下margin和下兄弟上margin重叠取大值 -->
<style type="text/css">
.x, .z {
width: 50px;
height: 50px;
background: blue;
}
.x {
/*margin-bottom: 40px;*/
}
.z {
margin-top: 10px;
background: yellow;
}
.y {
width: 10px;
height: 10px;
background: red;
/*margin-top: 10px;*/
}
/*坑1解决方案*/
.y {
/*方案1*/
/*float: left;
margin-top: 10px;*/ /*方案2*/
/*position: relative;*/
position: absolute;
/*top: auto;*/
/*top: 20px;*/
margin-top: 20px;
}
.z {
/*position: relative;*/
}
</style>
<div class="x"></div>
<div class="z">
<div class="y"></div>
</div>
</body>
</html>
Python-HTML CSS 练习的更多相关文章
- Python flask+css+js+ajax 综合复习
flask 基本语法结构 注:这里练习的时候把装饰器的@给忘记了,导致访问404 下面练习一下在前段向后端传递参数 get请求需要用 request.args.get('变量') 去接收, get ...
- 048.Python前端css
一 CSS介绍 1.1 CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; prop ...
- python html css 初识
##################总结############ 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文 ...
- python 前端 css
CSS(Cascading Style Sheet,层叠样式表) 是一种用来表现HTML或XML等文件样式的计算机语言. 作用:是用来美化HTML标签的,相当于给页面化妆. 每个css 都是有两部分组 ...
- Selenium2+python自动化-CSS定位语法
前言 一些人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css的 ...
- Python 前端 Css基础
CSS样式存在的位置 1.放置在标签内,局部生效 <div style="color: red;font-size: 18px;">hello world</di ...
- python 46 css组合选择器 及优先级 、属性选择器
一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器: d ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- python : HTML+CSS (左侧菜单)
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- python : HTML+CSS (定时器轮寻)
定时器轮寻 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- Java:在不同界面样式下JPopupMenu与鼠标事件mousePressed表现的结果不同！
今天遇到一个郁闷的事儿: 在一个JFrame上放了一个JList元件,这个JList元件添加了鼠标事件: mouseReleased.mousePressed ... 其中,在mouseRelease ...
- 2018.9青岛网络预选赛(C)
传送门:Problem C https://www.cnblogs.com/violet-acmer/p/9664805.html 题意: 定义五个指令,判断能否从输入的n条指令中成功跳出循环,如果不 ...
- bin内置函数
光棍们对1总是那么敏感,因此每年的11.11被戏称为光棍节.小Py光棍几十载,光棍自有光棍的快乐.让我们勇敢地面对光棍的身份吧,现在就证明自己:给你一个整数a,数出a在二进制表示下1的个数,并输出. ...
- nginx location详解
Location block 的基本语法形式是: location [=|~|~*|^~|@] pattern { ... } [=|~|~*|^~|@] 被称作 location modifier ...
- ARP协议原理学习
一.ARP的作用. 首先在window 的命令行中输入arp -a即可查看本机的arp缓存表.主机要发送数据包时,需要填充目的IP及其IP地址对应的MAC.当我们只有目的IP地址时,如何得到其对应的M ...
- 使用K-S检验一个数列是否服从正态分布、两个数列是否服从相同的分布
假设检验的基本思想: 若对总体的某个假设是真实的,那么不利于或者不能支持这一假设的事件A在一次试验中是几乎不可能发生的.如果事件A真的发生了,则有理由怀疑这一假设的真实性,从而拒绝该假设. 实质分析: ...
- 夏令时(DST)测试
夏令时测试是比较小众的测试,主要针对在有夏令时的国家使用的软件,如果你接触到了这方面的测试,说明你在挣国外的钱:). 话不多说,先来介绍下什么是夏令时: 夏时制,夏时令(Daylight Sa ...
- Dom4j工具类源码解析
话不多说,上源码: package com.changeyd.utils;import java.io.File;import java.io.FileNotFoundException;import ...
- Hibernate添加日志--log4j
需要导入 slf4j-log4j12-1.6.2.jar slf4j-api-1.6.2.jar log4j-1.2.16.jar 三个jar文件 编写properties文件,建议将日志输出级别设置 ...
- XML之Well-Formed文档规则
由于课程原因,近日粗略学习XML,载以博客是为担心忘记,以供日后复习之用. XML标准中明确规定了XML文件应当遵守的规则,大致上分成基本规则和DTD(Document Type Definition ...