成品网站建设,百度网站优化推广,wordpress 作品集网站,网站栏目页描述怎么写文章目录一、常用样式讲解二1.1 元素隐藏1.2 二级菜单1.3 相对定位和绝对定位1.4 定位的特殊情况1.5 表格1.6 表格的css属性1.7 表格中新增的标签一、常用样式讲解二
1.1 元素隐藏
如何让一个元素隐藏 1、不定义颜色 占用空间 2、display: none 不占用空间 3、visibility: hi…
文章目录一、常用样式讲解二1.1 元素隐藏1.2 二级菜单1.3 相对定位和绝对定位1.4 定位的特殊情况1.5 表格1.6 表格的css属性1.7 表格中新增的标签一、常用样式讲解二
1.1 元素隐藏
如何让一个元素隐藏 1、不定义颜色 占用空间 2、display: none 不占用空间 3、visibility: hidden 占用空间 4、opacity: 0 透明度 占用空间 5、height: 0 不占用空间 6、transform: scal(0) 缩放 占用空间不管缩小还放大空间还是原来大小 css3
1.2 二级菜单
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlestyle typetext/css*{margin: 0;padding: 0;}ul li{list-style: none;}.nav{width: 900px;height: 80px;margin: 0 auto;background-color: #0d0e24;}.navli{float: left;color: white;font-size: 20px;line-height: 80px;text-align: center;width: 100px;cursor: pointer;}.navli:hoverul{display: block;}.nav.one:hover{color: orange;}.navliul{width: 100px;height: 280px;background-color:aquamarine;display: none;}.navliulli{color: white;font-size: 14px;text-align: center;line-height: 40px;cursor: pointer;}/style
/head
bodyul classnavli classone游戏资料ulli版本介绍/lili游戏介绍/lili英雄资料/lili爆料站/lili世界观体验站/lili游戏壁纸/li/ul/lili classone内容中心ulli版本介绍/lili游戏介绍/lili英雄资料/lili爆料站/lili世界观体验站/lili游戏壁纸/li/ul/lili classone赛事中心ulli版本介绍/lili游戏介绍/lili英雄资料/lili爆料站/lili世界观体验站/lili游戏壁纸/li/ul/lili classone百态王者ulli版本介绍/lili游戏介绍/lili英雄资料/lili爆料站/lili世界观体验站/lili游戏壁纸/li/ul/lili classone社区互动ulli版本介绍/lili游戏介绍/lili英雄资料/lili爆料站/lili世界观体验站/lili游戏壁纸/li/ul/lili classone玩家支持ulli版本介绍/lili游戏介绍/lili英雄资料/lili爆料站/lili世界观体验站/lili游戏壁纸/li/ul/lili classoneIP新游ulli版本介绍/lili游戏介绍/lili英雄资料/lili爆料站/lili世界观体验站/lili游戏壁纸/li/ul/li/ul/body
/html1.3 相对定位和绝对定位
定位(position)解决一个元素在页面当中或者容器当中实现任意一个位置摆放的问题。 属性: position 值 position: static 静态定位默认值 position: relative 相对定位 相对定位的特点 1、添加完相对定位的元素可以通过方位值来进行位移。 postion: relative; top: 100px; 2、相以定位不脱离文档流它位移的时候之前的位置还是被占用的状态。 3、位置的参照物是自己之前的位置。
position: absolute 绝对定位 1、绝对定位会脱离常规文档流。会出现类似浮动的效果。 2、绝对定位参照物是有定位属性的父容器如果父容器没有则向上找没找到就是浏览器。 3、一般我们给子元素设定绝对定位那么父元素设置相对定位。
position: fixed 固定定位浏览器定位 参照物是浏览器。
position: sticky 粘性定位 特点像相对定位一样会占用页面空间当进行滑动时会像固定定位一样按照某个值来进行定位。 导航吸顶效果
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlestyle typetext/css*{margin: 0;padding: 0;}ul li{list-style: none;}.nav{width: 100%;height: 40px;background-color: black;position: fixed;opacity: 0.5;}.nav li{float: left;width: 20%;font-size: 14px;color: white;line-height: 40px;text-align: center;}.nav li:hover{background-color: orange;}.imgbox img{display: block;width: 100%;}/style
/head
bodyul classnavli加粗/lili倾斜/lili标题/lili删除线/lili无序/li/uldiv classimgboximg src./images/1.jpeg altimg src./images/2.jpeg altimg src./images/3.jpg altimg src./images/4.jpeg alt/div
/body
/html1.4 定位的特殊情况
1、给多个元素添加定位相对、绝对、固定 a 给相对定位添加 都有相对定位的时候在层级显示的关系上后面的会盖住前面 z-index属性可以来进行元素之间层级显示的权重值越大越靠前可以取值为负默认为0 b 给所有元素添加绝对定位 添加完后会脱离文档流会重叠在一起 z-index属性可以来进行元素之间层级显示的权重值越大越靠前可以取值为负值。 c 固定定位所有元素添加后 像绝对定位一样会叠在一起然后通过zindex来进行切换 2、绝对定位和固定定位的区别 绝对定位如果超出页面可以通过滚动条滑动看到固定定位是基于浏览器无法观看 3、当添加完定位后margin 0 auto 不好使了。 4、当设定绝对定位后宽度自适应填充的效果不能实现需要定义具体的宽度。 5、定位效果的编写 a、让一个盒子宽300 高300位置为浏览器的中心
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlestyle typetext/css*{margin: 0;padding: 0;}.box{width: 300px;height: 300px;background-color: orange;position: fixed;top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}/style
/head
bodydiv classbox/div
/body
/htmlb、让一个在一个盒子的正中心是赤
1、给父容器添加相对定位
2、四个方位归0
top: 0;
left: 0;
right: 0;
bottom: 0;
margin auto;!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlestyle typetext/css*{margin: 0;padding: 0;}ul li{list-style: none;}.box{width: 1180px;height: 365px;margin: 0 auto;position: relative;}.box .nav{width: 100px;height: 365px;background-color: pink;float: left;}.box .nav li{font-size: 14px;color: white;height: 40px;line-height: 40px;text-align: center;cursor: pointer;}.box .nav li:hover{background-color: orange;}.box .nav li:hover .xmgw,.box .nav li:hover .xmsc,.box .nav li:hover .xmyx,.box .nav li:hover .xmui{display: block;}.box .banner{display: block;float: left;}.xmgw,.xmsc,.xmyx,.xmui{width: 800px;height: 365px;background-color: chartreuse;opacity: 0.5;position: absolute;top: 0;left: 100px;display: none;}/style
/head
bodydiv classboxul classnavli小米官网div classxmgw/div/lili小米商城div classxmsc/div/lili小米影像div classxmyx/div/liliMIUIdiv classxmui/div/liliLot/lili云服务/li/ulimg classbanner src./images/小米.png alt/div
/body
/html注意行级元素块级元素行块级元素定位子绝父相。 1.5 表格
表格的作用用来显示数据以前可以用来进行布局 基本语法 table 代表一个表格 tr 代表行 td 代表列
tabletrtd单元格1/tdtd单元格2/td/tr
/table表格的属性(table tr td) table的属性 border“1” 边框属性 width“300px” 表格的宽度 px可以不加默认就是px,也可以用百分比 height“200px 表格的高度 不能使用百分比
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/title
/head
bodytable border1 width600px height300px aligncentertrtd我是一个兵/tdtd来自老百姓/td/trtrtd打倒了日本狗强盗/tdtd消灭了蒋匪军/td/tr/table
/body
/html1.6 表格的css属性
border : 1px solid #008000; border-spacing: 10px ; 单元格之间的间距 border-collapse: collapse; 细线边框 table-layout: auto 单元格跟着内容扩展不会溢出每次加载要进行表格大小计算浏览器来重新渲染。 table-layout: fixed 固定宽度浏览器不需要重新计算数据多单元格装不下就会溢出。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleH5学习/titlestyle typetext/css*{margin: 0;padding: 0;}.tb1,.tb2,.tb3,.tb4,.tb5,.tb6, h2{margin: 0 auto;text-align: center;}.tb1,.tb2,.tb3,.tb4{width: 300px;height: 100px;border-collapse: collapse;}.tb1{border: 1px solid black;}.tb1 td, .tb2 td{border: 1px solid black;}.tb2{border: 2px solid black;}.tb3{/* 线要精一点才能体现出double */border: 5px double black;}.tb3 td{border: 3px double black;}.tb4{/* border-spacing一个值代表水平方向和垂直方向的间距是一样的 注意只有在 边框独立border-collapse: separate时才能用*/border-collapse: separate;border-spacing: 20px;}.tb4 td{border: 1px solid black;}.tb5{width: 300px;height: 100px;margin: 0 auto;border-top: 1px solid black;border-bottom: 1px solid black;}.tb6{width: 300px;height: 300px;border: 3px solid black;border-spacing: 15px;/* 内容为空的单元格隐藏 */empty-cells: hide;}.tb6 td{background-color: aqua;}/style
/head
bodyh2细线表格/h2table classtb1trtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/tr/tableh2粗线表格/h2table classtb2trtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/tr/tableh2双线表格/h2table classtb3trtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/tr/tableh2宫字格/h2table classtb4trtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/tr/tableh2单线表格/h2table classtb5 rulesrowstrtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/tr/tableh2日历表格/h2table classtb6trtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtdData/td/trtrtdData/tdtdData/tdtd/td/tr/table
/body
/html1.7 表格中新增的标签
分组标签 thead 表格的头部 tfoot 表格的底部 tbody 表格的主体 如果我们没有创建tbody浏览器会创建一个 一个表格只能有一个头部和一个尾部但可以有多个主体。
