Python-HTML CSS 练习

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>html基础复习</title>
  6 </head>
  7 <body>
  8     <!-- 前端: 用户可见的所有界面均是前端(PC端/移动端) -->
  9     <!-- html: 页面架构搭建 | css: 页面布局样式 | js: 页面交互渲染 -->
 10     <!-- 编辑器: webstrom | sublime | atom | pycharm  -->
 11
 12     <!-- 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾)  <abc> | <num1> | <nav-title> -->
 13     <!-- 指令: <!doctype html> 注释 -->
 14     <!-- 转移字符: &gl; &nbsp; -->
 15
 16     <!-- 基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style -->
 17
 18     <!-- 分类: 单双 | dispaly -->
 19     <!-- inline: span | b | i | a -->
 20     <!-- inline-block: img | input -->
 21     <!-- block: div | hn | p | ul | hr | br -->
 22 </body>
 23 </html>
 24
 25
 26 <!DOCTYPE html>
 27 <html>
 28 <head>
 29     <meta charset="UTF-8">
 30     <title>css复习</title>
 31 </head>
 32 <body>
 33     <!-- 1.css三种引入: 行间式 | 内联式 | 外联式 -->
 34     <!-- 选择器 作用域 样式块 -->
 35
 36
 37     <!-- 2.长度单位: px | em | rem | cm | mm | vw | vh | in -->
 38
 39     <!-- 3.颜色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF -->
 40
 41     <!-- 4.文本样式 -->
 42     <style>
 43         span {
 44             font: 900 normal 30px/100px ‘首选字体‘, ‘备用字体1‘, ‘备用字体2‘;
 45             text-align: center;
 46             color: red;
 47             text-decoration: underline;
 48             letter-spacing: 3px;
 49             word-spacing: 10px;
 50             text-indent: 2em;
 51         }
 52     </style>
 53
 54     <!-- 5.选择器 -->
 55     <style type="text/css">
 56         /*选择器: css连接html标签的桥梁,建立连接后就可以控制标签样式*/
 57         /*标签 类 id*/
 58         /*组合选择器*/
 59         /*伪类选择器*/
 60
 61         /*优先级:*/
 62         /*基础选择器: !important > id > 类[属性] > 标签 > 通配*/
 63         /*组合选择器: 权重(同类型个数比较)*/
 64         .b > .s {}
 65         .b .s {}
 66         .b + .s {}
 67         .b.s {}
 68         .b[class] {}
 69
 70         #ss { font-size: 50px; }
 71         span.s2 { font-size: 40px; }
 72         [class] { font-size: 35px; }
 73         .s1 { font-size: 30px; }
 74         span { font-size: 20px!important; }
 75
 76         /* 标签名 | . | # */
 77         /*后代"空格"(子代) | 兄弟"~"(相邻) | 群组"," | 交集"紧挨着"*/
 78         /* [属性名="属性值"] */
 79
 80     </style>
 81
 82     <span class="s1 s2" id="ss" style="font-size: 60px;">12345</span>
 83
 84     <style type="text/css">
 85         /* 伪类选择器 */
 86         /* :link :hover(鼠标悬浮) :active(鼠标点击中) :visited */
 87         /* :nth-child() 先位置后类型 :nth-of-type() 先类型后位置 */
 88         /* :not() */
 89         /* :before(盒子渲染前) :after(盒子渲染后) :focus(表单标签获取焦点) */
 90         p:nth-child(3) { font-size: 100px }
 91         p:nth-of-type(2n) { font-size: 50px }
 92     </style>
 93     <div class="box">
 94         <span>span</span>
 95         <p>pp1</p>
 96         <p>pp2</p>
 97     </div>
 98
 99     <!-- 6.精灵图 -->
100     <style type="text/css">
101         .pg {
102             width: 200px;
103             height: 200px;
104             border: 1px solid black;
105             position: absolute;
106             top: 10px;
107             left: calc(50vw - 100px);
108         }
109         .pg {
110             background: url(‘img/bg.png‘) no-repeat;
111             /*将背景图片的具体位置移至显示区域*/
112             background-position: -300px -350px;
113         }
114     </style>
115     <div class="pg"></div>
116 </body>
117 </html>
118
119
120 <!DOCTYPE html>
121 <html>
122 <head>
123     <meta charset="UTF-8">
124     <title>盒模型复习</title>
125     <style type="text/css">
126         abc {
127             display: inline-block;
128         }
129
130         .box {
131             background: orange;
132
133             /*文本类型的样式具有继承关系*/
134             font-size: 30px;
135             font-weight: 900;
136             /*inline-block不会继承*/
137             text-decoration: underline;
138             text-indent: 2em;
139             line-height: 60px;
140         }
141     </style>
142 </head>
143 <body>
144     <!-- 文本属性通过拥有继承关系: 子标签没有设置文本属性时,值会从父级中获取(父级如果没有设置,会找到html) -->
145
146     <div class="box">
147         <span>inline</span>
148         <div>block</div>
149         <abc>inline-block</abc>
150     </div>
151
152     <!-- 1.盒子的四个组成部分 -->
153     <!-- content | padding | border | margin -->
154     <!-- display: inline | inline-block | block -->
155
156     <!-- content: 提高给内容(文本,图片,子标签整个盒子)的显示区域 -->
157
158     <!-- padding: 介于border与content之间的距离, 可以撑开border与content之间的距离, 没有自身颜色(透出背景颜色),只有区域 -->
159     <!-- 注: padding-top可以将自身与自身第一个子级分离 -->
160     <style type="text/css">
161         .p {
162             width: 20px;
163             height: 20px;
164             background: red;
165         }
166         .b {
167             width: 100px;
168             padding-bottom: 100px;
169             border-bottom: 1px solid black;
170         }
171         .c {
172             background: pink;
173             /*border: 1px solid black;*/
174             border-style: solid;
175             padding-left: 32px;
176             padding-bottom: 32px;
177             margin-left: 32px;
178             /*text-indent: 2em;*/
179         }
180     </style>
181     <div class="b">
182         <div class="p"></div>
183     </div>
184     <div class="c">123</div>
185
186     <!-- border: 边框, 有宽度颜色样式, 如果给颜色设置透明也可以透出背景颜色 -->
187
188     <!-- margin: 控制盒子位置 => 盒模型布局 -->
189
190     <!-- 2.边界圆角 -->
191     <style type="text/css">
192         .bj {
193             width: 100px;
194             height: 100px;
195             background: pink;
196         }
197         .bj {
198             /*border-radius: 20px;*/
199             /*border-radius: 40%;*/
200             /*border-radius: 10px 30px 50px;*/
201             border-radius: 10px / 50px;
202         }
203     </style>
204     <div class="bj"></div>
205
206     <!-- 3.display -->
207
208     <!-- 4.margin布局 -->
209     <!-- i) margin-top | margin-left 完成自身布局, 右下两个方向影响兄弟 -->
210     <style type="text/css">
211         .hh {
212             width: 30px;
213             height: 30px;
214             background: black;
215             /*display: inline-block;*/
216             float: left;
217             /*自身动,控制自身布局*/
218             /*margin-top: 30px;*/
219             /*margin-left: 30px;*/
220
221             /*右兄弟动,辅助兄弟布局*/
222             margin-right: 100px;
223             /*下兄弟动,辅助兄弟布局*/
224             /*margin-bottom: 30px;*/
225         }
226         .xx {
227             width: 30px;
228             height: 30px;
229             background: red;
230             /*display: inline-block;*/
231             float: left;
232         }
233     </style>
234     <div class="hh"></div>
235     <div class="xx"></div>
236
237     <!-- ii) 上下间距会重叠取大值, 左右间距会叠加 -->
238     <!-- 坑1: 父子联动 坑2: 上兄弟下margin和下兄弟上margin重叠取大值 -->
239     <style type="text/css">
240         .x, .z {
241             width: 50px;
242             height: 50px;
243             background: blue;
244         }
245         .x {
246             /*margin-bottom: 40px;*/
247         }
248         .z {
249             margin-top: 10px;
250             background: yellow;
251         }
252         .y {
253             width: 10px;
254             height: 10px;
255             background: red;
256             /*margin-top: 10px;*/
257         }
258         /*坑1解决方案*/
259         .y {
260             /*方案1*/
261             /*float: left;
262             margin-top: 10px;*/
263
264             /*方案2*/
265             /*position: relative;*/
266             position: absolute;
267             /*top: auto;*/
268             /*top: 20px;*/
269             margin-top: 20px;
270         }
271         .z {
272             /*position: relative;*/
273         }
274     </style>
275     <div class="x"></div>
276     <div class="z">
277         <div class="y"></div>
278     </div>
279 </body>
280 </html>

原文地址:https://www.cnblogs.com/du-jun/p/10206241.html

时间: 01-01

Python-HTML CSS 练习的相关文章

python:HTML + CSS 优先级 返回顶部

优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .a1 { background-color: aqua; height: 58px; } .a2 { font-size: 30px; background-color: indianred;

python : HTML+CSS (左侧菜单)

左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style> .hide{ display: none; } .menu .head{ height:38px

python : HTML+CSS (定时器轮寻)

定时器轮寻 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="a"> 北京欢迎您,为你开天辟地</div> <script> function func

Python 爬虫的工具列表

这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab - 网络库(基于pycurl). pycurl - 网络库(绑定libcurl). urllib3 - Python HTTP库,安全连接池.支持文件post.可用性高. httplib2 - 网络库. RoboBrowser - 一个简单的.极具Python风格的Python库,无需独立的浏览器即可浏览网页. MechanicalSoup -一个与网站

156个Python网络爬虫资源

本列表包含Python网页抓取和数据处理相关的库. 网络相关 通用 urllib - 网络库(标准库) requests - 网络库 grab - 网络库(基于pycurl) pycurl - 网络库 (与libcurl绑定) urllib3 - 具有线程安全连接池.文件psot支持.高可用的Python HTTP库 httplib2 - 网络库 RoboBrowser - 一个无需独立浏览器即可访问网页的简单.pythonic的库 MechanicalSoup - 能完成自动网站交互的Pyth

Python 库大全

作者:Lingfeng Ai链接:http://www.zhihu.com/question/24590883/answer/92420471来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Awesome Python中文版来啦! 本文由 伯乐在线 - 艾凌风 翻译,Namco 校稿.未经许可,禁止转载!英文出处:github.com.欢迎加入翻译组. 原文链接:Python 资源大全 1200+收藏,600+赞,别只顾着自己私藏呀朋友们 ------------

收集了一些python的文章

来自: 戴铭 2010-08-31 17:52:31 newthreading - safer concurrency for Python 安全并发(1回应) http://www.starming.com/index.php?action=plugin&v=wave&tpl=union&ac=viewgrouppost&gid=73&tid=7607 几个 Google App Engine 开源的Blog程序 http://www.starming.com/i

Python 爬虫库

0x00 网络 1)通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络库(绑定libcurl). urllib3 – Python HTTP库,安全连接池.支持文件post.可用性高. httplib2 – 网络库. RoboBrowser – 一个简单的.极具Python风格的Python库,无需独立的浏览器即可浏览网页. MechanicalSoup -一个与网站自动交互Python库. mecha

Android对话框AlertDialog-android学习之旅(四十二)

对话框简介 android提供了丰富的对话框支持,支持四种如下的对话框. AlertDialog简介 介绍上面六个方法的代码示例 setMessage() <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://s

c#之第一课入门

这几天看到微软的build大会,感觉微软不甘落后他人,曾经的巨头难道又要重新崛起,不管了,为了以后的饭碗,还是简单学习一些c#吧,有时这种紧张感不错的,现在由于这种紧张感,我已经掌握的java(主要弄的是Android),ios,python,html,css,javascript:之前从事的是Android的开发,现在主要是从事ios的开发,虽然上面提到那么多语言,不过python,html,css,js都是没有实战经验的,即使这样,有机会能够接触这类型工作,也能够比其他人更快上手吧,反正我是