devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端-css_pycharm bootsrtap 插件

作者：凡人多烦事01 | 2024-03-01 11:36:30

赞

踩

pycharm bootsrtap 插件

css: 用来美化标签

一. css的三种应用方法

  1. <style></style>用来写css的代码的标签
  2.  
  3. 1. 在标签上使用
  4.     <img src="" style="height:100px">
  5.  
  6. 2. 在head标签中使用
  7.     <style>
  8.        .c1{
  9.             color:red;
  10.            }
  11.     <style>
  12.  
  13. 3. 外链式:其他文件中写入 2 ,在引用
  14.     <link rel="stylesheet" href="common.css"/>
  15.  
  16.

二. css选择器

  1. ID选择器 : #id值{}
  2. 类选择器 :  .class值{}   多
  3. 标签选择器: 标签名{}   多
  4. 属性选择器:input[type="text"]{}
  5. 后代选择器:  .yy li{}  多
  6.            .yy > a{}  # 只会找子类不会找孙类
  7.  
  8. 多个样式覆盖问题
  9.     不重名则联合使用.重名则以下面的为准
  10. 怎么才能不让他覆盖呢?
  11.     .c1{color:red !important;}  样式后面加 !我特别重要

三. css样式

  1. 块级标签:
  2.     1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
  3.     2.宽度支持百分比,右侧区域空白,也不给你占用　　
  4. 　　3.元素的宽度如果不设置的话，默认为父元素的宽度。
  5.  
  6. 行级元素:
  7.     1.可以和其他元素处于一行，不用必须另起一行。
  8. 　　2.元素的高度、宽度不可以设置
  9. 　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
  10.  
  11. 宽高:  
  12.     {
  13.       
  14.       height:300px;  
  15.       width:500px;
  16.      }
  17.  
  18.  
  19. 去掉a标签下划线:
  20.     text-decoration: none;
  21.  
  22. 滚动条: 内容超出设置的宽高:
  23.         overflow: auto;
  24.  
  25.  
  26. 背景图片
  27.  
  28. body {
  29.     background-image: url("../images/logon.jpg");
  30.     background-size: 100% 100%;
  31.     background-size: cover;
  32.     background-repeat: no-repeat;
  33.     background-attachment: fixed; /*关键*/
  34.     background-position: center;
  35.     top: 0;
  36.     left: 0;
  37.     width: 100%;
  38.     height: 100%;
  39.     min-width: 1600px;
  40.     z-index: -10;
  41.     zoom: 1;
  42. }
  43.  
  44. 块级和行内标签:  
  45.         {
  46.              display:inline-block; # 块级和行内结合
  47.              display:inline        # 块级转行内
  48.              display:block         # 行内转块级
  49.              background: url(../img/1659101824680.jpg);  # 背景图片
  50.         }
  51.  
  52.  
  53. 字体设置:
  54.     font{        
  55.         color: red;          # 颜色   
  56.         font-size: 50px;     #字体大小
  57.         font-weight: 900px;  # 设置粗细
  58.         font-height: 200px;  # 设置文字行高
  59.         font-family: 宋体;   # 字体样式
  60.         background-color: aqua # 背景色
  61.         font-family: 宋体;         # 字体样式
  62.         ext-decoration: underline; # 设置文字下划线
  63.         text-decoration: none;      # 去掉下划线
  64.         text-indent: 100px;          # 设置首行缩进
  65.         text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;	//设置发光效果
  66.         
  67.         
  68.  
  69.         字体过长使用...
  70.          overflow: hidden;
  71.          white-space: nowrap;
  72.          text-overflow: ellipsis;
  73.              
  74.     }
  75.  
  76.  
  77. 文字的对齐方式:
  78.     div{ 
  79.         line-height:500px;         # 行高,500px垂直居中
  80.         text-align: center         # 水平居中,可以左可以右(right),可以居中
  81.  
  82.         border: 1px solid red;          # 边框线
  83.         border-top: 5px solid #000000;  # 边框线:上下左右
  84.         border-bottom: 10px solid green;
  85.         border-left: 5px solid gold;
  86.         border-right: 10px solid pink;         
  87.         }
  88.  
  89.  
  90.  
  91. 浮动:
  92.     {  
  93.         float: left;  # 左浮动:浮动可以让块元素排列一行
  94.         float: right; # 右浮动
  95.         clear:both;   # div浮动起来后就就会脱离文档流; 需要加一个both拽回来      
  96.     }
  97.  
  98. 边距:
  99.     {
  100.         padding: 10px # 内边距: 就是设置自己内部的边距
  101.             padding-top: 20px;   上
  102.             padding-left:20px;   左
  103.             padding-right:20px;  右
  104.             padding-bottom:20px; 下
  105.  
  106.         margin: 10px; # 外边距:  我距离别人的距离
  107.             margin-top:20px; 上
  108.     }
  109.  
  110.  
  111. 内容居中:
  112.     {
  113.         margin:0 auto; #  内容居中
  114.  
  115.  
  116.         区域居中: 自己要有宽度+ margin-left:auto;margin-right:auto;
  117.         width: 988px;
  118.         margin:0 auto;
  119.  
  120.         文本居中: 文本会在这个区域中居中
  121.         width:200px;
  122.         text-align:center;
  123.     }
  124.     
  125.     body标签:默认有一个边距,造成页面四边都有白色的边距,如何去除呢?
  126.       body{
  127.            margin:0; 去掉两边间距
  128.          }
  129.  
  130. 阴影:
  131.      box-shadow: 10px 20px 30px red;
  132.  
  133.     第一个值  水平偏移量  设置阴影的水平位置  正数向右移动 负数向左移动
  134.  
  135.     第二个值  垂直偏移量  设置阴影的水平位置  正数向下移动  负数向上移动
  136.  
  137.     第三个值  阴影的模糊程度
  138.  
  139.     第四个值  阴影的颜色
  140.  
  141. 圆角:
  142.     border-radius: 50px;
  143.  
  144.  
  145. 总结:
  146.     1. 父类没有高度或宽度会被子类支撑起来
  147.     2. 如果有浮动(float),一定要加 clear:both
  148.     3. a标签是行内标签,行内标签的高度.内外边距,默认无效,默认有下划线
  149.     4. 设置透明度: opacity: 0.5;   透明度在0-1之间;

四.css伪类

  1. 1. hover: 鼠标放上触发事件
  2.     .c2:hover{
  3.             border: 3px solid green; # 鼠标放上显示边框
  4.         }
  5.  
  6.     .download{
  7.             display: none;  # 将标签默认隐藏起来,不显示
  8.         }
  9.  
  10.     .app:hover .download{      # .app是父类属性,需要有共同的父类
  11.             display: block;  # 设置鼠标放到区域显示隐藏标签
  12.         }
  13.  
  14.     .app:hover .title{  # 文字过长,鼠标放到区域显示
  15.             color:red;
  16.         }
  17.  
  18. 2. after: 在文本尾部添加东西
  19.     .clearfix:after{ /*可以将浮动起来的元素后面加上拽回*/
  20.             content:""; # 插入
  21.             display:block; # 修改成块级标签
  22.             clear:both;  # 浮动拽回
  23.         }
  24.  
  25.         .item{
  26.             float:left; /*浮动*/
  27.         }
  28.  
  29.  
  30. 3. position:定位
  31.     1. fixed: 固定在窗口的某个位置
  32.         .back{
  33.             position: fixed;  # 定位
  34.             height: 60px;
  35.             width:60px;
  36.             border:1px solid red; # 边框
  37.             right: 10px;  # 有部
  38.             bottom:50px; # 底部
  39.         }
  40.  
  41.     2. relative :相对于...放到..
  42.  
  43.     3. absolute:一般和relative联合使用
  44.         .app{
  45.             position:relative;  # 外框区域
  46.         }
  47.         .app .download{
  48.             position:absolute; # 相对于外框区域内活动
  49.             height:100px;
  50.             width:100px;
  51.             display:none; # 隐藏元素
  52.         }
  53.         .app:hover .download{
  54.             display: block; # 鼠标放到区域显示元素
  55.         }
  56.  
  57.  
  58. 4. border:边框
  59.      border:3px solid red; /*全部边框:边框粗度 类型 颜色*/
  60.      border-left: 3px solid #00ff7f; /*左边框*/
  61.      .c1{
  62.             height:50px;
  63.             width:500px;
  64.             margin: 100px; # 外边距
  65.             background-color: #5f5750; # 背景颜色
  66.  
  67.             border-left: 2px solid transparent; /*透明色*/ # 边框样式
  68.  
  69.         }
  70.         .c1:hover{
  71.          border-left: 2px solid red;
  72.  
  73.         }
  74.  
  75.  
  76.  
  77. 5. 背景色:
  78.         background-color: #5f5750;

 五. BootStrap第三方插件

  1. bootstrap是别人帮我们写好的css样式,我们如果想要使用这个BootStrap
  2.     1. 下载BootStrap
  3.             地址: https://v3.bootcss.com/
  4.             下载-->用于生产环境的下载-->解压-->pycharm创建一个新目录
  5.             新目录下创建: css/img/js/plugins 文件夹
  6.             将解压的文件放到 plugins(插件都放这里)文件夹下
  7.  
  8.     2. 使用
  9.         在页面上引入BootStrap
  10.         编写html时,按照BootStrap的规定来编写+自定制
  11.         <!--开发版本-->
  12.         <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
  13.  
  14.         <!-- 生产版本-->
  15.         <!--    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">-->
  16.      
  17.     3. 里面有很多样式可以使用
  18.  
  19.  
  20.     4. 图标组件: bootstrap提供不多
  21.         fontawesome组件,如果图标加颜色和大小:可以直接在里面加样式
  22.             https://fontawesome.dashgame.com/
  23.             点击直接下载-->解压-->放到plugins文件夹下
  24.             引用: 开发用.css ;线上用min.css
  25.                 <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
  26.  
  27.      
  28.     5. BootStrap依赖:下载jQuery
  29.             BootStrap依赖JavaScript的类库,jQuery
  30.                 1. 下载jQuery,在页面上应用上jQuery
  31.                         https://jquery.com/
  32.  
  33.                     jquery.com-->Download jQuery--> 选择Download the compressed, production jQuery 3.6.1打开
  34.                     在pycharm中的static/js创建一个.js文件-->内容拷贝进去
  35.  
  36.                 2. 在页面上应用BootStrap的JavaScript类库:动态解锁,写在body里的下面
  37.                     <script src="static/js/jquery-3.6.1.min.js"></script>
  38.                     <script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>

六. 引入时间插件

  1. 对于时间的选择:不能输入,要选择(插件) - datetimepicker
  2. 官方文档: http://www.bootcss.com/p/bootstrap-datetimepicker/
  3. - 下载插件
  4.     https://codeload.github.com/smalot/bootstrap-datetimepicker/zip/refs/heads/master
  5.  
  6.  
  7.  
  8. 时间插件
  9. 引入css
  10. <link rel="stylesheet" href="bootstrap/bootstrap.css">
  11. <link rel="stylesheet" href="datetimepicker/bootstrap-datetimepicker.css">
  12.  
  13.  
  14. <input type="text" id="dt" class="form-control" placeholder="入职日期">
  15.  
  16.  
  17. 引入js
  18. <script src="jquery.js">
  19. <script src="bootstrap/bootstrap.js">
  20. <script src="datetimepicker/bootstrap-datetimepicker.js">
  21. <script src="datetimepicker/locales/bootstrap-datetimepicker.zh-CN.min.js">
  22.  
  23. <script>
  24.        $(function(){
  25.         $('#dt').datetimepicker({
  26.             language:'zh-CN',
  27.             format: 'yyyy-mm-dd', //设置日期格式
  28.             minView: "month",//设置只显示到月份
  29.             todayBtn:"true"
  30.             });
  31.     })
  32. </script>
  33. modelform会自动生成id

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/173628?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号