• PYTHON自动化Day13-HTML,CSS


    HTML

    <!DOCTYPE html>   <!--规定标准的html-->
    <html lang="en"> <!--一个页面只允许出现一对html标签, 标签的属性-指定英文 lang= -->
    
    <head>
        <!--自闭和标签,只有一部分-->
        <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="1"> &lt;!&ndash;页面每秒刷新一次&ndash;&gt;--> <!--<meta http-equiv="refresh" content="2;url=https://www.baidu.com"> &lt;!&ndash;页面每秒刷新一次&ndash;&gt;--> <!--主动闭合标签,有两个部分--> <title>lily</title> <!--修改浏览器页签名字--> <!--tps: chrome 页面右键 -检查,然后刷新按钮右键可以选择清空缓存并硬性加载--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> <!--修改浏览器页签图标--> </head> <body> <h1>标题标签</h1> <h2>标题标签</h2> <h3>标题标签</h3> <h4>标题标签</h4> <h5>标题标签</h5> <h6>标题标签</h6> <!--块级标签,无论文字多少,占满整行整块,可以页面上 find element分别查看一下效果--> <p>今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。</p> <!-- 这一行内容上下有间距 --> <!--行内标签,文字多少,占多少,span也是最基础的标签,白板标签--> <span>今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。</span> <!-- 这一行内容上下没有间距,这个用的多 --> <!--伪白板标签, 因为他的styles里 有 display:block ,她也变成了块级标签--> <div>今天</div> <!--如果想要在内容中加多个空格,直接敲入是不能用的,只会显示一个空格,要用到&nbsp--> <!--如果想输入一个<, 用&lt--> <span>&lt&nbsp&nbsp&nbsp&nbsp轻&gt</span> <!--输入框 name就是传递给后端的key, value就是值,placeholder 框内的默认提示--> <input type="text" placeholder="请输入用户名" name="lily" value="happy"> <!--如果是password类型,自动变成***--> <input type="password" placeholder="请输入密码" name="lily" value="happy"> <!--勾选框,checked="checked" 默认勾选--> <span>请选择:</span><input type="checkbox" name="xxx" checked="checked"> <!--单选框,默认勾选的添加checked="checked"--> <div>性别</div> <span></span><input type="radio" name="xxx" checked="checked"> <span></span><input type="radio" name="xxx"> <!--上传文件file--> <input type="file" name="file"> <!--一个button,显示名字为提交--> <!--button是需要和js连用的,通过该js进行提交操作--> <input type="button" value="提交"> <!--action,点击登陆时跳转到哪里--> <form action="http://www.baidu.com" method="get"> <input type="text" value="admin" name="username"> <input type="reset"> <!--如果和form连用,直接提交form表单,现在很少直接用submit提交了,会用ajax绑定button操作,因为submit提交了,用户输入的东西会被清掉, ajax提交后台静态提交,页面用户输入还是保留的--> <input type="submit" value="登陆"> <input type="button" value="button登陆"> </form> 使用label,配合for 和input中的id,可以扩展输入框的范围,点击“用户名”,即可选中输入框,而是用span就不会 <label for="i1">用户名</label><input id="i1" type="text" value="admin"> <span>密码</span><input type="password"> 多行文本 <textarea name="name">sssss</textarea> 选框, 通过name value传给后台,size为显示几个,multip多选,需要按住ctrl <select name="city" size="5" multiple="multiple"> <option value="1">北京</option> <option value="2" selected="selected">河北</option> <option value="3">江苏</option> </select> <!--层级列出选项--> <select> <optgroup label="河北"> <option>保定</option> <option>石家庄</option> <option>唐山</option> </optgroup> </select> 不同标签切换 <a href="http://baidu.com">百度一下</a> <a href="#i2">nana</a> <a href="#i1">lily</a> <div id="#i1">lily</div> <div id="#i2">nana</div> <!----> <ul> <li>大连</li> <li>企鹅</li> </ul> <!--数字--> <ol> <li>大连</li> <li>企鹅</li> </ol> <!--层级显示--> <dl> <dt>黑龙江</dt> <dd>哈尔滨</dd> <dd>吉林</dd> </dl> <!--表格--> <table border="1"> <thead> <tr> <th>id</th> <th>name</th> <th>age</th> <th>sex</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>lily</td> <td rowspan="3">12</td> <td></td> <td>确认</td> <td>取消</td> </tr> <tr> <td>2</td> <td>lily</td> <!--<td>12</td>--> <td></td> <td>确认</td> <td>取消</td> </tr> <tr> <td>3</td> <td>lily</td> <!--<td>12</td>--> <td></td> <td><a href='update.html'>确认</a></td> <td>取消</td> </tr> </tbody> </table> 显示图片 <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失败时展示" title="鼠标悬浮式显示"> </body> </html>

     CSS样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--方式三:通过link标签引入css-->
        <!--<link rel="stylesheet" href="xx.css">-->
        <!--方式一:在head中添加style标签-->
        <style>
            /*id选择器*/
            #i1{
                height: 100px;
                width: 100px;
                background-color: red;
            }
            /*id层级选择器*/
            #i1 span{
                background-color: yellow;
            }
            /*同时设定多个id选择器的样式, class和 标签选择器也可以这样设定*/
            #i3,#i4,#i5{
                height: 100px;
                width: 100px;
                background-color: red;
            }
            /*class选择器*/
            .c1{
                height: 100px;
                width: 100px;
                background-color: black;
            }
            /*class层级选择器*/
            .cl span{
                background-color: green;
            }
            /*标签选择器*/
            div {
                height:100px;
                width:100px;
                background-color: pink;
            }
            /*标签层级选择器,div中 的span标签应用这个样式*/
            div span{
                background-color: blue;
            }
            div[name='lily']{
                /*下面这两行不写,会继承div样式中的 height:100px;100px;*/
                /*height:50px;*/
                /*50px;*/
                background-color: blue;
        }
    
        </style>
    </head>
    <body>
        <!--第二种方式,在某个需要样式的标签中指定style-->
        <!--<div id="i1" style=""></div>-->
        <!--id选择器,一个html页面中,不可以存在相同的id,通过#来定位,id是不可以重复的!!-->
        <!--<div id="i1"></div>-->
        <!--class选择器,通过.来定位,class是可以重复的!!-->
        <div class="c1"></div>
        <!--标签选择器,所有没有样式的div都会自动带入这个样式-->
        <div></div>
        <!--标签层级选择器-->
        <div>
            <span>lily</span>
        </div>
        <!--class层级选择器-->
        <div class="c1"><span>haha</span></div>
        <!--id层级选择器,当行内标签没有输入内容时,样式不会显示出来-->
        <div id="i1"><span>id层级</span></div>
        <!--多个id选择器使用相同样式,但是可以使用相同的class,因为class是可以重复使用的-->
        <div id="i3"></div><br>
        <div id="i4"></div><br>
        <div id="i5"></div><br>
    
        <div class="c1"></div><br>
        <div class="c1"></div><br>
        <div class="c1"></div><br>
        <!--属性选择器,通过name等属性来定位元素赋予样式, 会先选择div样式,然后根据name定位到指定样式覆盖-->
        <div name="lily">haha</div>
    
    </body>
    </html>

    三种配置样式的方法的优先级:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--当同时使用三种方式设定样式 ,标签内的优先显示,然后是style,最后是 link,也就是从标签开始从下到上依次查找-->
        <link rel="stylesheet" href="s3.css">
        <style>
            .c1{
                background-color: pink;
                height:100px;
                width:100px;
            }
        </style>
    </head>
    <body>
        <div class="c1" style="background-color: blue;height: 100px; 100px;"></div>
    </body>
    </html>

    CSS样式2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*:hover 鼠标放上去显示*/
            .c2:hover{
                background-color: red;
                color:black;
            }
            /*background-position: 0 0  调整背景图的上下左右的位置*/
            #id{
                width:1000px;
                height:1000px;
                border:1px red solid;
                background-image:url('http://ui.imdsx.cn/static/image/dsx.jpg');
                background-repeat: repeat;
                background-position: 0 0;
            }
        </style>
    </head>
    <body>
        <!--添加红色边框, 1px red solid 一像素的红色实线边框,font-size 字体大小,font-weight 字体加粗-->
        <div style="font-size: larger; border: 1px red solid; font-weight: bolder;">1</div>
        <!--居中.text-align:center 水平居中,line-height:100px 垂直居中,实际上是帮我们做了一个/2的操作显示出来-->
        <div style="font-size: larger; border: 1px red solid; font-weight: bolder; text-align:center;line-height:100px">1</div>
        <!--float 调整位置-->
        <div style="height: 50px;50px;background-color: red;float: right;">1</div>
        <div style="height: 50px;50px;background-color: green;float: left;">1</div>
        display:inline 把块级标签变成行内标签,因为行内标签不能使用宽高边距等,所以可以使用display:inline-block 把他变成行内块级标签
        <div style=" 100px;height:100px;background-color:red ;display:inline-block">1</div>
        行内变行内块级标签
        <span style="height:100px;100px;background-color: green;display: inline-block">1</span>
        <!--内边距外边距-->
        <!--外边距 margin-top:-->
        <div style="100%;height:100px;border: 1px red solid">
            <div style="100%;height:20px;background-color:yellow;margin-top: 10px"></div>
        </div>
        <!--内边距padding-top: 10px,扩充自身-->
        <div style="100%;height:100px;border: 1px red solid">
            <div style="100%;height:20px;background-color:blue;padding-top: 10px"></div>
        </div>
        <!--style="cursor:pointer 鼠标放上去显示小手图标,还有很多,自己百度一下-->
        <input type="button" value="提交" style="cursor:pointer">
        用css样式添加悬浮效果
        <div class="c2" style="height: 100px;100px;border:1px red solid;color:white">a</div>
    </body>
    <!--&lt;!&ndash;margin:0 auto 去掉边距,不然上线会有白色的边距&ndash;&gt;-->
    <body style="margin:0 auto">
        <!--不添加position: fixed" 这一行会随着鼠标滑动页面而滑动,加上后固定在顶部,导航栏 都是这么固定的-->
        <div style="background-color: aquamarine;position: fixed;top:0;left:0;right: 0;height:48px"></div>
        <!--margin-top:48px 家这一行,不然红色边框被遮挡-->
        <!--<div style="height: 10000px; 100%;border: 1px red solid;margin-top:48px">111</div>-->
        <!--一个大方块每个角放一个小方块, z-index 设置显示优先级,后面跟数字-->
        <!--Left 靠左距离多少-->
        <!--Right 靠右边距离多少-->
        <!--Top 距离顶部距离多少-->
        <!--Bottom距离下边距离多少-->
        <div style="200px;height:200px;border: 1px red solid;position: relative;">
            <div style="20px;height:20px;background-color: yellow;position: absolute;left:0"></div>
            <div style="20px;height:20px;background-color: blue;position: absolute;right:0"></div>
            <div style="20px;height:20px;background-color: darkslategray;position: absolute;top:180px"></div>
            <div style="20px;height:20px;background-color: greenyellow;position: absolute;top:180px;left:180px"></div>
        </div>
        <!--overflow:auto 如果实际图片大于指定的宽高,出现滚动条;-->
        <div style="800px;height:800px;border:1px red solid;overflow:auto">
            <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
        </div>
        background-repeat: no-repeat 背景图不重复填充, repeat-x 和横向填充,repeat-y纵向填充,repeat横向加纵向填充
        <div style="1000px;height:1000px;border:1px red solid;background-image:url('http://ui.imdsx.cn/static/image/dsx.jpg');background-repeat: repeat"></div>
        调整背景图的位置
        <div id="id"></div>
    </body>
    </html>
  • 相关阅读:
    c# 扩展方法奇思妙用基础篇五:Dictionary<TKey, TValue> 扩展
    c# 扩展方法奇思妙用基础篇九:Expression 扩展
    c# 扩展方法奇思妙用高级篇一:改进 Scottgu 的 "In" 扩展
    c# 扩展方法奇思妙用高级篇三:Enumerable.Cast<T> 应用
    c# 扩展方法奇思妙用高级篇二:Aggregate 扩展及其改进
    c# 扩展方法奇思妙用基础篇四:Random 扩展
    c# 扩展方法奇思妙用基础篇七:IsBetween 通用扩展
    c# 扩展方法奇思妙用基础篇三:byte 常用扩展
    c# 扩展方法奇思妙用基础篇八:Distinct 扩展
    c# 扩展方法奇思妙用基础篇 六:WhereIf 扩展
  • 原文地址:https://www.cnblogs.com/lilyzhang-2018/p/10007730.html
Copyright © 2020-2023  润新知