Web

2023-07-02

初识Flask

通过flask搭建简单的网站

from flask import Flask, render_template
app = Flask(__name__)#这是实例化Flask
#将函数index和“/show/info”这个网站关联
@app.route("/show/info")
def index():
    # return "中国联通"
    return render_template("index.html")#这是在templates目录下的index.html
if __name__ == '__main__':
    app.run()

<h1>内容</h1>这个标签是一级标题，属于块级标签，占一整行
<div></div>块级标签
<span>内容</span>属于行内标签，所占行有限
<a href="网站">内容</a>超链接

列表
<ul>
    <li>中国移动</li>
    <li>中国电信</li>
    <li>中国联通</li>
</ul>

 

 表单

<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody></tbody>
    <tr>
        <td>10</td>
        <td>小米</td>
        <td>15</td>
    </tr>
</table>

图片超链接

<a href="https://baike.baidu.com/item/%E6%9D%8E%E7%99%BD/1043?fromModule=lemma_search-box">
    <img style="width: 20%" src="/static/libai.webp"/>
</a>

input系列
<input type="text">#文本框
<input type="password">#密码框
<input type="file">
<input type="radio">
<input type="checkbox">#多选
<input type="button">#按钮
<input type="submit" value='提交'>#提交按钮

下拉框 
<select>
　　<option>北京</option>
　　<option>上海</option>
　　<option>深圳</option>
</selection>

2023-07-03
CSS样式
css:专门用来”美化“标签
1.标签上
2.在head标签中写Style标签
3.写在文件中


1. ID选择器
#c1 {
	color: red;
}


2. 类选择器
.c1 {
	color: red;
}


3. 标签选择器
div{
	color: red;
}


4.属性选择器


<style>


 　　input[type="text"]{


 　　border: 1px solid red;


 　　}


 </style>


5.后代选择器


<style>


　　.zz h2{


　　　　 color:chartreuse;


　　 }


 </style> 



<div class="zz" >
　　 <div>
　　　　 <h2>我是div里面的h2</h2>
　　 </div>
　　 <h2>我是div外面的h2</h2>




 


 如果只想让第一层的h1生效，可以添加>号


<style>


　　 .zz > h2{


　　　　 color:chartreuse;　　 


　　}


 </style>




 


- a标签是行内标签，行内标签的高度、内外边距，默认无效。


- 垂直方向居中


 - 本文 + line-height
  - 图片 + 边距


- a标签默认有下划线。


- 鼠标放上去之后hover


  .c1:hover{
      ...
  }
  a:hover{
      
  }


- 设置透明度


  opacity:0.5;    /* 0 ~ 1 */


### 2.1 hover（伪类）


<!DOCTYPE html>
<html lang="en">
<head>
    　　<meta charset="UTF-8">
    　　<title>Title</title>
    　　<style>
        　　　　.c1 {
            　　　　　　color: red;
            　　　　　　font-size: 18px;
        　　　　}


        　　　　.c1:hover {
            　　　　　　　　color: green;
            　　　　　　　　font-size: 50px;
        　　　　}


        　　　　.c2 {
            　　　　　　height: 300px;
            　　　　　　width: 500px;
            　　　　　　border: 3px solid red;
        　　　　　}


        　　　　.c2:hover {
            　　　　　　border: 3px solid green;
        　　　　}


        　　　　.download {
            　　　　　　　　display: none;
        　　　　　}


        　　　　.app:hover .download {
            　　　　　　　　display: block;
        　　　　}
        　　　　.app:hover .title{
            　　　　　　color: red;
        　　　　}
    　　</style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>


<div class="app">
    　　<div class="title">下载APP</div>
    　　<div class="download">
        　　　　<img src="images/qcode.png" alt="">
    　　</div>
</div>


</body>
</html>


### 2.2 after（伪类）


```html
<!DOCTYPE html>
<html lang="en">
<head>
    　　<meta charset="UTF-8">
    　　<title>Title</title>
    　　<style>
        　　　　.c1:after{
            　　　　　　content: "大帅哥";
        　　　　}
    　　</style>
</head>
<body>
    　　<div class="c1">吴阳军</div>
    　　<div class="c1">梁吉宁</div>
</body>
</html>


 


### 2.3 position


 


- fixed 固定在窗口的某个位置
- relative 
- absolute


 


当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题
如果不想让上面的被覆盖掉怎么办呢?
可以在对应的属性后面添加!important

高度和宽度
.c4 { height: 300px; width: 500px; }
注意：


    

  • 支持百分比
    • 

  • 行内标签: 默认无效
    • 

  • 块级标签: 默认有效(右边的剩余空白区域也会被占用)
    • 



display:inline-block 使行内标签对 height 和 width 生效




块级与行内标签的转换


 <div style="display: inline;">移动</div>
    <span style="display: block;">联通</span>


 





 


 






            

            
posted @ 
2023-07-04 16:03 
王福来 
阅读(28) 
评论(3) 
 
收藏 
举报