你是Web开发和CSS的新手吗？你是否想过如何在互联网上看到那些漂亮的形状？别再奇怪了。你来对地方了。

下面，我将解释使用CSS创建形状的基本知识。还有很多要告诉你关于这个话题！因此，我不会涵盖所有（绝大部分）工具和形状，但这应该使你基本了解如何使用CSS创建形状，并且创建文字环绕图形的方式方法。

有些形状比其他形状需要更多的“技巧和窍门”。使用CSS创建形状通常是使用宽度，高度，顶部，右侧，左侧，边框，底部，变换和伪元素（例如：before和：after）的组合。我们还具有更现代的CSS属性，可使用诸如shape-outside和clip-path之类的形状来创建形状，这些内容我将在后面写出来。

WPS怎么添加字体

How to Add Fonts in WPS

在现代办公软件中，字体的选择和使用对文档的美观性和可读性有着重要的影响。WPS Office作为一款广泛使用的办公软件，其字体的添加和管理功能也备受用户关注。本文将详细介绍在WPS中如何添加字体，包括字体的下载、安装和使用等方面。

一、字体的选择与下载

CSS文档流

• CSS 有三种基本的定位机制：普通流、浮动流、定位流。

POSTION

• position定位属性，检索或设置对象的定位方式

软件项目实训及课程设计指导——如何应用CSS+Div分离Web表示层数据处理和展现逻辑

1、常规的Web页面实现方法

早期的Web应用系统开发中的Web页面内的信息定位和Web页面布局一般是采用HTML表格<table>标签实现的，但由于HTML标签本身是将数据和显示风格混合在一起的——请见下面的表格标签示例：

<table><tr><td>表格中的某个单元格需要显示的数据</td></tr></table>

本章节主要内容：

1. selenium6个简单元素定位方式

绝对定位：/开头 
  绝对路径：从根目录开始，一直到当前的目录
  绝对定位：从根节点开始，一直到当前的节点   结点顺序和位置
相对定位：//开头
  相对路径：相对参照物  //相对于前面节点  如果//在开头，则就相对整个html
  定位原则：
      1、不依靠节点顺序和节点位置
      2、只要能够找到匹配特征的元素就可取
  相对定位表达式：
      1、//标签名[@属性名=值]
        eg：//a[@href="https://www.hao123.com"]
        
      2、//标签名[text()=值]      ---精准匹配
        eg://a[text()="新闻"]
        
      3、//标签名[contains(@属性名，属性值)]       //标签名[contains(text()，值)]   ---模糊匹配
        eg：//a[contains(@href,"hao123")]       //a[contains(text(),'新闻')]    
        
      4、*标签名或属性名都可以用*号，表示匹配所有 //*[contains(@*,值)]
      
      组合条件   
          逻辑：and or  
              eg：//标签名[text()=值 and @属性名=值]       
                  //a[text()="新闻" or @href="https://www.hao123.com"]  
          
          层级定位：//祖先节点//要找的节点
              eg://div[@id="u1"]//a[@name="tj_login"]
          
      轴定位：元素的兄弟姐妹、子孙、父母
              eg://span[text()="考勤"]/parent::a 

1. 相对定位特性:

1.属于标准文档流 ,显示方式与原来没区别

UI自动化测试

Selenium是非常优秀的WEB(UI)自动化测试框架

from selenium import webdriver
import os,time
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
driver_path = os.path.join(os.path.abspath(__file__),'../../driver/chromedriver.exe')
driver = webdriver.Chrome(executable_path=driver_path)
driver.get('https://www.baidu.com')
driver.maximize_window()
#1.通过id定位
driver.find_element(By.ID,"kw").send_keys("selenium id 定位")

#2.通过name定位
driver.find_element(By.NAME,"wd").send_keys("selenium name 定位")

#3.通过class_name 定位
driver.find_element(By.CLASS_NAME,"s_ipt").send_keys("selenium class_name 定位")

#4.通过 tag_name 定位，是最不准的定位，因为一个网上上同一个tag那么重复的可能性很大
driver.find_element(By.TAG_NAME,"input").send_keys("selenium tag_name 定位")

#5.通过link_text 定位
driver.find_element(By.LINK_TEXT,"新闻").click()

#6.通过partial_link_text 定位
driver.find_element(By.PARTIAL_LINK_TEXT,"新").click()

#7.通过css定位
# 7.1 绝对路径是从网页的根节点html开始，逐层去查找需要定位的元素。
# 此方法缺点显而易见，当页面元素位置发生变化时，都需要修改，因此不推荐
driver.find_element(By.CSS_SELECTOR,'html body div#wrapper div#head div.head_wrapper div.s_form div.s_form_wrapper.soutu-env-mac.soutu-env-index form#form span.bg.s_ipt_wr.quickdelete-wrap input#kw').send_keys('selenium css 绝对路径定位')
# 备注：当同一层次有多个相同的元素时，使用id或class区分，遇到id用#号，遇到class用.

# 7.2 通过相对路径,相对路径表示文件中所有符合模式的元素都会被选出来，即使是处于不同的层级也会被选出来。
driver.find_element(By.CSS_SELECTOR,'#kw').send_keys('selenium css 相对定位1')
driver.find_element(By.CSS_SELECTOR,'input#kw').send_keys('selenium css 相对定位2')

# 7.3 使用元素属性爹娘各位
# 元素属性定位要求属性能够定位唯一一个元素，如果存在多个相同标签
# 默认第一个，具体格式 //标签名[属性 = ‘属性值’],支持使用多个属性一起定位元素
driver.find_element(By.CSS_SELECTOR,'input[name="wd"]').send_keys('selenium css 属性值定位')
driver.find_element(By.CSS_SELECTOR,'input[name="wd"][class="s_ipt"]').send_keys('selenium css 多属性值定位')

# 7.4 使用部分属性值匹配（也称为模糊方法定位）
# 属性值如果太长或网页中的元素属性动态变化，可以使用此方法
# 元素属性值开头包含内同： ^=
driver.find_element(By.CSS_SELECTOR,'a[href^="http://news."]').click()
#元素属性值结尾包含内容： $=
driver.find_element(By.CSS_SELECTOR,'a[href$="news.baidu.com"]').click()
#圆度属性
driver.find_element(By.CSS_SELECTOR,'a[href*="news"]').click()

# 7.5查询子元素
# 1）子元素 A>B
driver.find_element(By.CSS_SELECTOR,'form>span>input').send_keys('css 子元素定位')
# 2）后代元素 A空格B (类似 >)
driver.find_element(By.CSS_SELECTOR,'form span input').send_keys('后代元素')
# 3）第一个后代元素： first-child
driver.find_element(By.CSS_SELECTOR,'a#s-top-username a:first-child').click()

# 4）最后一个后代元素
a = driver.find_element(By.CSS_SELECTOR,'div#u1 a:last-child')

# 5）第n个元素： nth-child
driver.find_element(By.CSS_SELECTOR,'div#u1 a:nth-child(3)').click()

# 7.6查询兄弟元素
# 1)同层级下一个元素  +
driver.find_element(By.CSS_SELECTOR,'div#u1 a+a')
# 2）选择同层级多个相同标签的元素
driver.find_element(By.CSS_SELECTOR,'div#u1 a ~ a')

#8.通过xpath 定位,xpath 常用有6中定位元素方法
# 8.1 绝对路径，角度路径的开头是一个斜线(/),从网页的根节点html开始，逐层去查找需要定位
#的元素。
driver.find_element(By.XPATH,'/html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input').send_keys('xpath 绝对路径定位')
#备注：当同一个层次有多个相同的元素时，使用下标区分，下标从1开始。

# 8.2 相对路径的开头是两个斜线（//）,表示文件中所有符合模式的元素都会被找到，即使是处于树
# 中不通的层级也会被选出来。
driver.find_element(By.XPATH,'//form/span[1]/input').send_keys('selenium xpath 相对路径定位1')
driver.find_element_(By.XPATH,'//span[1]/input').send_keys('selenium xpath 相对路径定位2')
# 备注：以上都可以定位到百度搜索框，相对路径的长度和开始位置并不受限制，可以采用从后往前逐级定位
#直到定位到即可的方式去定位。

# 8.3 元素索引，遇到同层级相同标签元素时，可以使用索引（下标）表示，缩影的初始值为1
driver.find_element(By.XPATH,'//div/div[3]/a[2]').click()

# 8.4 元素属性,要求属性能够定位到唯一一个元素，如果存在多个相同标签，默认定位第一个，
#具体隔离 //标签名[@属性="属性值"] 支持使用 and 和 or 关键字，多个属性一起定位
driver.find_element(By.XPATH,'//a[@href="http://news.baidu.com"]').click()
driver.find_element(By.XPATH,'//a[@href="http://news.baidu.com" or @class="mnav c-font-normal c-color-t"] ').click()
driver.find_element(By.XPATH,'//a[@href="http://news.baidu.com" and @target="_blank"]').click()

# 8.5 元素部分属性值（也称为模糊方法定位）
#属性值如果太长活网页中的元素属性动态变化，可以使用此方法
# (1)元素属性值开头包含内容： start-with()
driver.find_element(By.XPATH,"//a[start-with(@name,'')]").click()

#(2)元素属性值结尾包含内容substring()
driver.find_element(By.XPATH,"//a[substring(@href,9)='123']").click()

# (3)contains
driver.find_element(By.XPATH,"//a[contains(@href,'hao')]").click()

# 8.6 元素文本在xpath中可以通过text()函数获取，也可以用其来进行元素定位。
driver.find_element(By.XPATH,'//a[text()="新闻"]').click()
driver.find_element(By.XPATH,'//a[contains(text(),"新")]').click()
time.sleep(3)
driver.quit()

随着前台开发技术的不断升级，在使用Python+Selenium进行自动化测试时，也会遇到各种各样的问题，其中最常见的一种就是元素能定位到，但是无法点击或者点击失败，那么这篇文章就来讲述一下如果遇到元素定位成功但是点击失败的情况该如何解决。