【2022-08-24】python前端开发(三)

标签：24 blog width python 08 padding color margin left

python前端开发(三)

CSS盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离。
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

margin外边距

    #t2 {
        height: 500px;
        width: 500px;
        background-color: green;
        margin-top: 20px;
        margin-left: 200px;
        margin-bottom: 10px;
        margin-right: 200px;
    }


    body标签自带8px的外边距
    margin:0;   				    简写形式，作用于上下左右
    margin: 10px 20px;    		     第一个参数控制上下，第二个参数控制左右
    margin: 10px 20px 30px;  		 第一个参数控制上，第二个参数控制左右，第三个参数控制下
    margin: 10px 20px 30px 40px;      第一个参数控制上，第二个参数控制右，第三个参数控制下，第四个参数控制左

    margin还可以让内部标签居中展示
    margin:100px auto  仅限于水平方向

padding内填充

<p style="border: 5px solid black;padding: 30px;text-align: center">
    寒江孤影，江湖故人，相逢何必曾相识
</p>


顺序：上右下左

补充padding的常用简写方式：

提供一个参数，用于四边；
提供两个参数，第一个用于上－下，第二个用于左－右；
提供三个参数，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数，将按上－右－下－左的顺序作用于四边；

浮动布局

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值

值	描述
left	向左浮动
right	向右浮动
none	默认值，不浮动

浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义
解决浮动造成的父标签塌陷

.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可

"""浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)"""

overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

div {
            height: 50px;
            width: 50px;
            border: 5px solid gold;
            border-radius: 50%;
            overflow: hidden;
        }
div img {
    max-width: 100%;
}

圆形头像实例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    .header-img>img {
      width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div>

</body>
</html>

定位(position)

static(静态)
	所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative(相对定位)
	相对于标签原来的位置做定位
absolute(绝对定位)
	基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
	相对于浏览器窗口做定位

relative(相对定位)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1 {
      height: 100px;
      width: 100px;
      background-color: blue;
      position: relative;
      left: 100px;
    }
  </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>

absolute(绝对定位)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1 {

      height: 100px;
      width: 200px;
      background-color: darkcyan;
      position: relative;
    }

    #d2 {
      height: 200px;
      width: 600px;
      background-color: green;
      position: absolute;
      top: 100px;
      left: 200px;
    }
  </style>
</head>
<body>
      <div id="d1">
        <div id="d2"></div>
      </div>
</body>
</html>

fixed(固定定位)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      #d3 {

        height: 50px;
        width: 50px;
        border: 5px solid black;
        position: fixed;
        right: 100px;
        bottom: 100px;
      }
  </style>
</head>
<body>
      <div id="d3"></div>
</body>
</html>

z-index

浏览器界面其实是一个三维坐标系 z轴指向用户


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

    .cover {

      background-color: rgba(127,127,127,0.7);
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 999;
    }

    .modal {

      background-color: white;
      position: fixed;
      height: 400px;
      width: 600px;
      left: 50%;
      top: 50%;
      z-index: 1000;
      margin: -200px 0 0 -300px;
    }
  </style>
</head>
<body>
      <div class="cover"></div>
      <div class="modal">
        <form action="">
          <p>username:<input type="text"></p>
          <p>password:<input type="text"></p>
        </form>
      </div>
</body>
</html>

CSS博客页面

1.先分析页面结构 
	然后使用div和span构建出基本骨架
2.给标签起id和class便于后续查找并修改样式
	id与class的命名也要做到见名知意
3.正儿八经的写不同的语言应该存储不同的文件
	html文件、css文件、js文件
	
HTML部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_cnblogs</title>
    <link rel="stylesheet" href="myblogs.css">
</head>
<body>
      <div class="blog-left">
        <div class="blog-avatar">
          <img src="https://img1.baidu.com/it/u=1289214173,1776988715&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=718" alt="">
        </div>
        <div class="blog-title">
          <span>谪仙人李太白</span>
        </div>
        <div class="blog-about">
          <span>笔落惊风雨，诗成泣鬼神</span>
        </div>
        <div class="blog-info">
          <ul>
            <li><a href="">人物生平</a></li>
            <li><a href="">人物成就</a></li>
            <li><a href="">人物评价</a></li>
          </ul>
        </div>
        <div class="blog-link">
          <ul>
            <li><a href="">#《蜀道难》</a></li>
            <li><a href="">#《将进酒》</a></li>
            <li><a href="">#《早发白帝城》</a></li>
          </ul>
        </div>
      </div>
      <div class="blog-right">
        <div class="article-list">
          <div class="article-title">
            <span class="title">黄鹤楼送孟浩然之广陵</span>
            <span class="date">公元728年\开元十六年</span>
          </div>
          <div class="article-desc">
            <span>
              故人西辞黄鹤楼，烟花三月下扬州
              孤帆远影碧空尽，唯见长江天际流
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">蜀道难</span>
            <span class="date">公元732年\开元二十年</span>
          </div>
          <div class="article-desc">
            <span>
              噫吁嚱，危乎高哉！蜀道之难，难于上青天！
              蚕丛及鱼凫，开国何茫然！
              尔来四万八千岁，不与秦塞通人烟。
              西当太白有鸟道，可以横绝峨眉巅。
              地崩山摧壮士死，然后天梯石栈相钩连。
              上有六龙回日之高标，下有冲波逆折之回川。
              黄鹤之飞尚不得过，猿猱欲度愁攀援。
              青泥何盘盘，百步九折萦岩峦。
              扪参历井仰胁息，以手抚膺坐长叹。
              问君西游何时还？畏途巉岩不可攀。
              但见悲鸟号古木，雄飞雌从绕林间。
              又闻子规啼夜月，愁空山。
              蜀道之难，难于上青天，使人听此凋朱颜。
              连峰去天不盈尺，枯松倒挂倚绝壁。
              飞湍瀑流争喧豗，砯崖转石万壑雷。
              其险也如此，嗟尔远道之人胡为乎来哉！
              剑阁峥嵘而崔嵬，一夫当关，万夫莫开。
              所守或匪亲，化为狼与豺。
              朝避猛虎，夕避长蛇。
              磨牙吮血，杀人如麻。
              锦城虽云乐，不如早还家。
              蜀道之难，难于上青天，侧身西望长咨嗟
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">将进酒</span>
            <span class="date">公元736年\开元二十四年</span>
          </div>
          <div class="article-desc">
            <span>
              君不见黄河之水天上来，奔流到海不复回。
              君不见高堂明镜悲白发，朝如青丝暮成雪。
              人生得意须尽欢，莫使金樽空对月。
              天生我材必有用，千金散尽还复来。
              烹羊宰牛且为乐，会须一饮三百杯。
              岑夫子，丹丘生，将进酒，杯莫停。
              与君歌一曲，请君为我倾耳听。
              钟鼓馔玉不足贵，但愿长醉不复醒。
              古来圣贤皆寂寞，惟有饮者留其名。
              陈王昔时宴平乐，斗酒十千恣欢谑。
              主人何为言少钱，径须沽取对君酌。
              五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">清平调</span>
            <span class="date">公元743年\天宝二年</span>
          </div>
          <div class="article-desc">
            <span>
              云想衣裳花想容，春风拂槛露华浓。
              若非群玉山头见，会向瑶台月下逢。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">赠汪伦</span>
            <span class="date">公元754年\天宝十三载</span>
          </div>
          <div class="article-desc">
            <span>
              李白乘舟将欲行，忽闻岸上踏歌声。
              桃花潭水深千尺，不及汪伦送我情。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">早发白帝城</span>
            <span class="date">公元759年\乾元二年</span>
          </div>
          <div class="article-desc">
            <span>
              朝辞白帝彩云间，千里江陵一日还。
              两岸猿声啼不住，轻舟已过万重山。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">望天门山</span>
            <span class="date">公元725年\开元十三年</span>
          </div>
          <div class="article-desc">
            <span>
              天门中断楚江开，碧水东流至此回。
              两岸青山相对出，孤帆一片日边来。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">静夜思</span>
            <span class="date">公元726年\开元十四年</span>
          </div>
          <div class="article-desc">
            <span>
              床前明月光，疑是地上霜。
              举头望明月，低头思故乡。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">山中问答</span>
            <span class="date">公元730年\开元十八年</span>
          </div>
          <div class="article-desc">
            <span>
              问余何意栖碧山，笑而不答心自闲。
              桃花流水窅然去，别有天地非人间。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">乌夜啼</span>
            <span class="date">公元730年\开元十八年</span>
          </div>
          <div class="article-desc">
            <span>
              黄云城边乌欲栖，归飞哑哑枝上啼。
              机中织锦秦川女，碧纱如烟隔窗语。
              停梭怅然忆远人，独宿孤房泪如雨。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">行路难三首其一</span>
            <span class="date">公元732年\开元二十年</span>
          </div>
          <div class="article-desc">
            <span>
              金樽清酒斗十千，玉盘珍羞直万钱。
              停杯投箸不能食，拔剑四顾心茫然。
              欲渡黄河冰塞川，将登太行雪满山。
              闲来垂钓碧溪上，忽复乘舟梦日边。
              行路难！行路难！多歧路，今安在？
              长风破浪会有时，直挂云帆济沧海。
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">行路难三首其二</span>
            <span class="date">公元732年\开元二十年</span>
          </div>
          <div class="article-desc">
            <span>
              大道如青天，我独不得出。
              羞逐长安社中儿，赤鸡白狗赌梨栗。
              弹剑作歌奏苦声，曳裾王门不称情。
              淮阴市井笑韩信，汉朝公卿忌贾生。
              君不见昔时燕家重郭隗，拥篲折节无嫌猜。
              剧辛乐毅感恩分，输肝剖胆效英才。
              昭王白骨萦蔓草，谁人更扫黄金台？
              行路难，归去来！
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
        <div class="article-list">
          <div class="article-title">
            <span class="title">行路难三首其三</span>
            <span class="date">公元732年\开元二十年</span>
          </div>
          <div class="article-desc">
            <span>
            有耳莫洗颍川水，有口莫食首阳蕨。
            含光混世贵无名，何用孤高比云月？
            吾观自古贤达人，功成不退皆殒身。
            子胥既弃吴江上，屈原终投湘水滨。
            陆机雄才岂自保？李斯税驾苦不早。
            华亭鹤唳讵可闻？上蔡苍鹰何足道？
            君不见吴中张翰称达生，秋风忽忆江东行。
            且乐生前一杯酒，何须身后千载名！
            </span>
          </div>
          <hr>
          <div class="article-info">
            <span>#个人作品</span>
            <span>#史料索引</span>
          </div>
        </div>
      </div>
</body>
</html>


CSS部分代码

/*简易版本博客首页样式*/


/*页面通用样式*/
body {
    margin: 0;
    background-color: #eeeeee;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

/*左侧页面样式*/

.blog-left {
    background-color: #4e4e4e;
    float: left;
    position: fixed;
    height: 100%;
    width: 20%;
    left: 0;
    top: 0;
}
.blog-avatar {
    border: 5px solid white;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin: 50px auto;
    overflow: hidden;
}
.blog-avatar img {
    max-width: 100%;
}
.blog-title,.blog-about {

    color: darkgray;
    font-size: 24px;
    text-align: center;
    padding: 10px;
}
.blog-info a,.blog-link a{
    color: darkgray;
    font-size: 28px;
}
.blog-info a:hover,.blog-link a:hover{
    color: white;
}
.blog-link ul,.blog-info ul{
    text-align: center;
    margin: 200px;
}
/*右侧页面样式*/
.blog-right {
    float: right;
    width: 80%;
}

.article-list {
    background-color: white;
    margin: 20px 40px 20px 10px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.8);
}
.article-title {
    border-left: 5px solid red;
}
.article-title .title {
    font-size: 36px;
    padding-left: 16px;
}

.article-title .date {
    float: right;
    font-size: 18px;
    font-weight: bolder;
    margin: 10px 20px;
}
.article-desc{
    font-size: 28px;
    /*padding-left: 24px;*/
    /*padding-top: 20px;*/
    /*padding-bottom: 20px;*/
    padding: 20px 0px 10px 24px;
}

.article-info span{
    padding: 30px;
    font-size: 26px;
}

JavaScript简介

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript与ECMAScript区别

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

ECMAScript版本迭代

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式，添加try/catch
添加try/catch	ECMAScript 4	没有发布
2009	ECMAScript 5	添加"strict mode"严格模式，添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符（**），增加Array.prototype.includes

html页面两种引入js的方式

Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

引入额外的JS文件

<script src="myscript.js"></script>

两种注释语法

// 这是单行注释

/*
这是多行注释
*/

结束符

JavaScript中的语句要以分号（;）为结束符。

JS变量与常量

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明

注意：

变量名是区分大小写的。

推荐使用驼峰式命名规则。

保留字不能用做变量名。

"""
支持编写js代码的地方
	1.pycharm
	2.浏览器
"""
在JS中声明变量和常量都需要使用关键字
	var:全局有效
 	let:如果在局部名称空间中使用 那么仅在局部名称空间有效
 	const:定义常量

JS也是动态类型:变量名绑定的数据值类型不固定
   var name = 'jason'
	name = 123
   	name = [11, 22, 33, 44]

JS数据类型之数值类型

"""
在js中查看数据类型可以使用 typeof
"""
在js中整型浮点型统称为数值类型number
    parseInt()
    parseFloat()
NaN:Not A Number 不是一个数字

JS数据类型之字符串类型

字符串string
var name = 'jason'
var name = "jason"
var name = `jason`  模板字符串

内置方法
	1.js中涉及到字符串拼接 推荐使用+

常用方法

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

标签：24,blog,width,python,08,padding,color,margin,left
From： https://www.cnblogs.com/dy12138/p/16622607.html