CSS画太极图小案例 前端开发 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: lightblue;
        }
        div {
            width: 200px;
            height: 200px;
            /* 线性渐变，白黑各一半 */
            background: linear-gradient(white 50%, black 50%);
            margin: 10px auto;
            /* 弹性盒子，水平显示 */
            display: flex;
            /* 侧轴居中 */
            align-items: center;
            border-radius: 50%;
        }

        div::before {
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            background: radial-gradient(black 25%, white 25%);
            border-radius: 50%;
        }

        div::after {
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            background: radial-gradient(white 25%, black 25%);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

标签: css
吾峰 发布于  2023-6-21 15:14 
评论(0)  浏览(216)

标题栏三角形按钮小案例 前端开发 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 50px;
            line-height: 50px;
            background: lightskyblue;
            text-indent: 20px;
        }

        /* 默认上三角形 */
        span {
            display: inline-block;
            width: 0;
            height: 0;
            /* 上边框5px白色，其他边框隐形 */
            border: 5px solid transparent;
            border-top: 5px solid white;
            position: relative;
            /* 上三角形下移居中 */
            top: 2.5px;
        }

        /* 鼠标滑过显示下三角形 */
        .box:hover span {
            border: 5px solid transparent;
            /* 下边框显示 */
            border-bottom: 5px solid white;
            position: relative;
            /* 下三角形上移居中 */
            top: -2.5px;
        }
    </style>
</head>
<body>
    <div class="box">
        导航
        <span></span>
    </div>
</body>
</html>

默认上三角，鼠标滑过显示下三角

标签: html css
吾峰 发布于  2023-5-6 16:51 
评论(0)  浏览(332)

CSS-溢出属性 前端开发

1、溢出属性（容器的）

说明：

overflow:visible/hideeen/scroll/auto/inherit

  • visible:默认的，溢出内容会显示在元素之外
  • hidden：溢出内容隐藏
  • scroll：滚动，溢出内容以滚动方式显示
  • auto：如果有溢出会添加滚动条，没有溢出正常显示
  • inherit：规定应该遵从父元素继承overflow属性的值
    overflow-x：X轴溢出
    overflow-y：Y轴溢出

2、空余空间

说明：

white-space：normal/nowrap/pre/pre-wrap/pre-line/inherit该属性用来设置如何处理元素内的空白；
normal:默认值，空白会被浏览器忽略，
nowrap：文本不会换行，文本会在同一行上继续，直到遇到 < br/ >标签

3、省略号显示

说明：

text-overflow:clip/ellipsis;
clip:默认值，不显示省略号（...）；
ellipsis：显示省略标记；

当单行文本溢出显示省略号需要同时设置以下声明：
1、容器宽度：width：200px；
2、强制文本在一行内显示：white-space：nowrap；
3、溢出内容为隐藏：overflow：hidden；
4：溢出文本显示省略号：text-overflow：ellipsis；

标签: css
吾峰 发布于  2023-4-21 18:57 
评论(0)  浏览(267)

CSS-浮动属性 前端开发

属性：float
描述：float：left；，float：right；，float：none；

标签: css
吾峰 发布于  2023-4-19 18:26 
评论(2)  浏览(336)

CSS-列表属性 前端开发

序号 属性 描述 说明
1 list-style-type 定义列表属性样式 list-sytle-type：disc/circle/square/none
2 list-style-image 将图片设置为列表符合样式 list-style-image：url（）；
3 list-style-position 设置列表标记的放置位置。 list-style-position：outside/inside
4 list-stylet 简写 list-style：none
标签: css
吾峰 发布于  2023-4-19 15:55 
评论(0)  浏览(250)

CSS-文本属性 前端开发

序号 属性 描述 说明
1 font-size 字体大小 单位时px，默认时16px，设计图常用自豪时12px
2 font-family 字体 当字体时中文字体、英文字体中有空格时，需加双引号；多个字体中间用逗号链接，先解析第1个字体，如果没有解析第二个字体，以此类推
3 color 颜色 color:red;
4 font-weight 加粗 font-weight：100-900；100-500不加粗 600-900加粗
5 font-style 倾斜 font-style:italic
6 text-align 文本水平对齐 text-align：center
标签: css
吾峰 发布于  2023-4-18 17:59 
评论(0)  浏览(265)

CSS伪类选择器 前端开发

语法：

a:link{属性：属性值}超链接的初始状态；
a:visited{属性：属性值}超链接被访问后的状态；
a:hover{属性：属性值}鼠标悬停，即鼠标划过超链接时的状态；
a:active{属性：属性值}超链接被激活时的状态，即鼠标按下时超链接的状态；

Link--visited--hover--active.

说明：

a）当这4个超链接伪类选择器联合使用时，应注意他们的顺序，正常顺序为：
a:link, a:visited, a:hover, a:active, 错误的顺序有时候会使超链接的样式失效；
b）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

例如：

a{color:red;} a:hover{color:green;}

表示超链接的初始和访问过后的状态一样，鼠标滑过的状态和点击时的状态一样。

标签: css
吾峰 发布于  2023-4-17 19:39 
评论(0)  浏览(246)

HTML-表单标签 前端开发 

<form method=“get或者post” action=“向何处发送表单数据”>
        <input />
            A. 属性   type 定义输入框的类型
                a)文本框  type="text“    密码框  type=“password“
                b)提交框  type=“ submit“  和 <button>提交按钮</button>  一样
                c)按钮框  type=“button“  单纯的按钮
                d)重置框  type=“reset”清空的效果
            B.属性 placeholder  描述输入字段预期值的简短的提示信息。兼容到IE8以上
            C.属性 name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
            D.属性 value
</form>

Form当中method的post和get的区别？

  1. get是从服务器上获取数据，post是向服务器传送数据。
  2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
  3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
  4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB
  5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
标签: html
吾峰 发布于  2023-4-16 19:44 
评论(0)  浏览(241)

table表格的相关属性 前端开发

表格属性

  1. 宽度 width
  2. 高度 height
  3. 边框 border
  4. 边框颜色 bordercolor
  5. 背景颜色 bgcolor
  6. 水平对齐 align=“left或right或center”
  7. cellspacing=“单元格与单元格之间的间距”
  8. cellpadding=“单元格与内容之间的空隙”
标签: html
吾峰 发布于  2023-4-16 16:10 
评论(1)  浏览(310)

Python字典的定义 后端开发

定义一个新字典：
1、使用花括号定义：

{'one':1, 'two':2}

2、使用类型构造器：

dict(one=1, two=2)

3、使用字典推导式：

{x:x**2 for x in range(10)}
标签: python
吾峰 发布于  2023-3-23 21:25 
评论(0)  浏览(293)

个人资料

blogger
吾峰
业务技术群：132768713

搜索

标签

ai Stable diffusion blender pygame python css html

微语

  • Python会忽略[ ] { } ( )内部的换行。因此，列表、列表推导式、元祖、字典等结构完全可以分成几行来写，无须使用续行转义符\。

    吾峰 2024-04-29 13:11

最新文章

热门文章

最新评论

链接

日历

存档