无锡网站优化推广方案,大学生商品网站建设,开发app找那个公司,携程: 2023年旅行搜索上涨超900%定位属性 position
可以将元素定位到你想要放到位置#xff0c;使用方位值来进行移动(top,left,right,bottom)。
1.相对定位
position: relative; top: 20px; left: 20px;
以自身为定点进行移动#xff0c;不会脱离文档流。
不会影响元素本身的性质#xff1b;块级…定位属性 position
可以将元素定位到你想要放到位置使用方位值来进行移动(top,left,right,bottom)。
1.相对定位
position: relative; top: 20px; left: 20px;
以自身为定点进行移动不会脱离文档流。
不会影响元素本身的性质块级元素支持auto自适应居中。
2.绝对定位
position: absolute; top: 0px; left: 0px;
会脱离文档流原本位置不会继续占有。
支持自定义高宽元素高宽默认为0暂不支持auto自适应居中。
找不到最近的定位父级默认参考浏览器 (body) 来移动。
子绝父相
子级是绝对定位父级是相对定位子级参考父级来进行移动。
方位属性
left和top优先级高于right和bottom
若一个元素只拥有left和right属性以left为准
3.固定定位
position: fixed;
以浏览器窗口为参考滚动屏幕时固定不动
元素高宽默认margin: auto;失效
若在相同位置看谁的优先级高谁覆盖。
z-index:1; 定位为1级改变级数来进行强制覆盖 子元素在父级里面居中 第一种 position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; 第二种 position: absolute; top: 50%; left: 50%; /* 负自身宽度的一半 */ margin-left: -50px; /* 负自身高度的一半 */ margin-top: -50px; width: 100px; height: 100px; background-cololr: pink; 表格浅谈
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable{border: 1px solid palevioletred;background-color: blanchedalmond;border-collapse: collapse;}td,th,tr{border: 1px solid palevioletred;text-align: center;}/style
/head
body!-- table: 定义表格标签 --table!-- caption: 表格标题 --caption调查表/caption!-- tr: 表格里面的一行 --tr!-- th: 表头自带加粗 居中 --th姓名/thth年龄/thth爱好/th/trtr!-- td: 一行里面的单元格 --td一花/tdtd20/tdtd演戏/td/trtrtd二乃/tdtd20/tdtd打游戏/td/trtrtd三玖/tdtd20/tdtd读历史/td/trtrtd四叶/tdtd20/tdtd运动/td/trtrtd五月/tdtd20/tdtd读书/td/tr/table!-- 规范tr里面的标签只能是td或th一行里面单元格的高度取决于一行中最大的那个一行里面单元格的宽度是按照内容长度来分配的 --
/body
/html 选一个将td20/td改成td rowspan320/td 同时要将更改的这一行的下两段中的td20/td删掉可以向下合并三行年龄。
也可以将某一段改为 trtd colspan3三玖/td/tr
可以合并那一行的三列 表单样式
表单标签form
action: 表单的提交地址
method提交格式
name表单的名称
target提交完这个表单后新页面在哪里打开
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#form{width: 400px;height: 400px;background-color: antiquewhite;margin: auto;}input{width: 99px;height: 20px;background-color: darkgrey;}/style
/head
body!-- form: 表单标签action: 表单的提交地址method: 提交格式 https请求格式post/get等get请求从指定的资源请求数据用于获取数据一般用于搜索排序和筛选之类的操作。post请求向指定的资源提交要被处理的数据用于将数据发送服务器一般用于修改和写入数据。name: 表单的名称target: 提交这个表单后新页面在哪里打开 --form action method namelogin target idform!-- 单行文本输入框 --账号input typetextbr!-- 密码输入框(输入的数据会隐藏为小黑点) --密码input typepassword/form
/body
/html
input输入控件
通过type属性展示不同的输入效果
text -- 单行文本输入框password - 密码输入框submit -- 提交按钮具有刷新功能radio -- 单选框checkbox -- 多选框reset -- 重置按钮button -- 空按钮可以通过value来给这个按钮取名字file -- 文件上传按钮number -- 数字输入框e约等于2.71828..也可以输入email -- 邮件输入框
placeholder属性 文本提示告诉用户输入什么
name属性 控件名称
账号input typetext placeholder请输入账号 nameusername
value属性 改变控件里面的值
radio form actioninput typetextinput typeradio namesex男input typeradio namesex!-- label一般用来放文字规定input控件标题描述 --label for女/label!-- 单选的话name属性只能是一个 --/form
checked属性 默认被选中
input typeradio namesex checked
多行文本输入框
textarea name id cols30 rows10/textarea
下拉列表标签 select name id!-- 下拉列表项 --option value星期一/optionoption value星期二/optionoption value星期三/optionoption value星期四/optionoption value星期五/option/select 高级选择器
属性选择器
选择标签来添加样式 选择a标签中带有target属性的a标签添加样式 a[target]{color: pink;} 给title为11的添加样式 a[title11]{color: red;} 给a标签的herf属性中以h开头的添加样式 a[herf ^h]{color: blue;} 给以k为结尾的添加样式 a[target $k]{color: yellow;} 给包含字符中含有.com的添加样式 a[href *.com]{color: skyblue;} 伪类选择器
可以改变元素状态
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 200px;height: 300px;background-color: antiquewhite;}/* 鼠标悬停之后 改变背景颜色和宽(通用) */.box:hover{width: 300px;background-color: indianred;}/* 点击时改变背景颜色(通用) */.box:active{background-color: cadetblue;}/* 没有被访问的a标签 */a:link{color: darkseagreen;}/* 被访问过的a标签 */a:visited{color:bisque;}/* 点击input获取焦点 */.btn:focus{border: 1px solid pink;}.text{/* 消失 */display:none;width: 150px;height: 50px;background-color: rgb(190, 227, 250);}/* input和p标签是同级关系 */.btn:focus~.text{/* 显示 */display: block;}/* 点击勾选状态(只能单选或多选使用) */.rad:checked{width: 20px;height: 20px;}.pic{display: none;}.rad:checked~.pic{display: block;}/style
/head
bodydiv classbox/diva hrefhttps://www.bilibili.com/这里是a标签/aa hrefhttps://www.bilibili.com/ target_blank relzxcvbnm这里是a标签2/abrinput typetext classbtnp classtext点击后就看到我啦/pinput typeradio classradinput typecheckbox name id classradimg src./11.jpg alt width100px classpic
/body
/html
结构选择器
子元素选择器 通过父级给子元素添加样式 .listli:nth-child(1){color: pink} 给类为list的列表父级的第一个子级的字体设置为粉色。 可以简写为.listli:nth-child(1){color: pink} 全选.listli:nth-child(n1){color: pink} 给第奇数个子级1,3,5..设置 odd/2n-1 .listli:nth-child(odd){color: pink} 给第偶数个子级2,4,6..设置even/2n .listli:nth-child(2n){color: pink} 选择最后一个子元素添加样式 .listli:last-child{color: blue} 注意要满足父子关系。比如ul的众多li标签之间有一个span标签这个子元素选择器就起不了作用了。
同类别选择器 选择类为box的div标签下方的p标签 .boxp:nth-child(3){color: pink;} 如果p标签中间夹了span标签这样写无视其他元素影响 .boxp:nth-of-type(3){color: red;} 选择最后一个p标签 p:last-of-type{color: blue;} 伪元素选择器
是一个行内元素不支持设定高宽 /* 伪元素创建在元素前进行插入 */ .box::before{ /* 伪元素必备 开启伪元素的一个钥匙 */ content: 你好; float: left; width: 50px; height: 50px; background-color: antiquewhite; } /* 在元素内容后插入 */ .box::after{ /* 伪元素内容 */ content: 耶; color: cadetblue; } /* 父元素可以利用伪元素来清除浮动塌陷 */ .wrap::after{ content: ; display: block; clear: both; } 阿里图标的使用
1.进入阿里图标官网 https://www.iconfont.cn/
2.注册登录
3.可以选择需要用到的图标加入购物车
4.找到购物车点击下载即可
5.解压文件可以找到demo_index页面三种方式添加图标 第一种方式 style标签中 font-face{font-family: iconfont; src: url(./阿里图标/iconfont.ttf) format(truetype);} .iconfont{ font-family: iconfont !important; font-size: 16px; font-style: normal;} body标签中 span classiconfont#xe60d;(图标号)/span 第二种方式 引入外部格式使用阿里css样式 link relstylesheet href./阿里图标/iconfont.css style中 .iconfont{font-size: 30px; color: red;} body中 span classiconfont/span 第三种方式支持有颜色的图标 引入js样式 script src./阿里图标/iconfont.js/script style中 .icon{width: 1em; height:1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;} body中 svg classicon aria-hiddentrue use xlink:href#icon-xxx/use /svg flex布局弹性盒模型
传统布局浮动 定位 行内块等
flex布局方法简单能自动分配父级里面子元素的对齐方式。可以适应不同屏幕的布局。 .wrap{/* 开启flex布局 */display: flex;/* 规定子元素在x轴居中对齐 */justify-content: center;/* 规定子元素在y轴居中对齐 */align-items: center;width: 200px;height: 200px;background-color: antiquewhite;}
父级盒子开启flexdisplay: flex;) 后
子元素默认横向排列假如总宽度大于父级盒子不会换行排列会等比例缩放。
行内元素在父级盒子里面支持写高宽没写会默认分配。 flex布局属性
1.display: flex 给父级开启flex布局
2.flex-direction 控制子元素排列方式 控制子元素排列方式默认从左至右。 flex-direction: row; 从右至左排列 flex-direction: row-reverse; 垂直方向 主轴向下排列 flex-direction: column; 主轴向上 flex-direction: column-reverse; 3.flex-wrap 控制子元素是否换行显示 默认不换行显示 flex-wrap: nowrap; 超出父级宽度就换行 flex-wrap: wrap; 主轴方向和换行显示 复合写法 flex-flow: row-reverse wrap; 4.justify-content 控制子元素在主轴的对齐方式x轴 默认子元素在起点左对齐 justify-content: flex-start; 右对齐主轴终点对齐 justify-content: flex-end; 在主轴居中对齐 justify-content: center; 两端对齐中间间隔均分 justify-content: space-between; 所有子元素间隔相同且相等 justify-content: space-around; 所有间隔平均分配 justify-content: space-evenly; 5.align-items 控制子元素在侧轴的对齐方式y轴 侧轴默认值若没写高度则高度与父级相同 align-items: stretch; y轴顶部对齐起点对齐 align-items: flex-start; y轴底部对齐终点对齐 align-items: flex-end y轴方向垂直居中对齐 align-items: center; 与文本基线对齐 align-items: baseline; 6. align-content 控制行与行之间的对齐 行与行之间在起点对齐上下没有间隔 align-content: flex-start; 行与行之间在底部对齐 align-content: flex-end; 行与行之间居中对齐 align-content: center; 行与行之间两端对齐 align-content: space-between; 行与行之间间隔平均分配 align-content: space-around; 所有行之间间隔相等 align-content: space-evenly; 子元素属性
order 子元素展示顺序值越小越先展示默认是0。
flex-grow: 在主轴还有剩余空间时子元素分配剩下的部分比例如12..默认是0。
flex-shrink: 在主轴空间不足时子元素缩小的比例默认是1均分缩小。
align-self: flex-start/end/ center (顶部对齐、底部对齐、居中对齐
