吉林省软环境建设网站,如果管理多个wordpress,网页制作专业名词,设计网站页面教案一、鼠标划过效果
1. 类似电子书的图书效果2. 绝对定位实用案例
二、锚点的应用
三、css精灵#xff08;图片整合#xff09;
用一张图片写出一串电话号码用一张图片写出导航栏的滑动效果
四、后台管理布局
单飞布局双飞布局后台页面管理布局
五、css3部分
在一个div…一、鼠标划过效果
1. 类似电子书的图书效果2. 绝对定位实用案例
二、锚点的应用
三、css精灵图片整合
用一张图片写出一串电话号码用一张图片写出导航栏的滑动效果
四、后台管理布局
单飞布局双飞布局后台页面管理布局
五、css3部分
在一个div中使用多张背景图用一张 背景图 写成多种效果用伪类元素给一段话的第一个行文字、第一个字添加样式 css重置代码
stylecharset utf-8;
/* CSS Document */body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,td,figure{margin:0;padding:0;}body{font:12px 宋体; word-wrap:break-word;}a,u,s,del{color:#666;text-decoration:none;} fieldset ,a img,.bor0 {border:0;}i,em,b{font-style:normal;font-weight:100;}li{list-style:none;}img{vertical-align:middle;}table{border-collapse:collapse;}.ind2{text-indent:2em;}/*去掉输入框聚焦时的蓝色边框*/input,textarea{outline:none;}textarea{resize:none;}/*禁止拖动*//*文本溢出隐藏出现省略号*/.over{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/* 图片水平垂直居中 */.valign{}.valign img{vertical-align:middle;}.valign:after{content:;vertical-align:middle;display:inline-block;height:100%;}/*万能清除法*/.clear{zoom:1;/*一条解决ie疑难杂症(浮动)的神奇属性*/}.clear:after{content:;clear:both;display:block;}.clear:before{content:;display:table;}/*解决第一个块元素margin-top向上传递问题*/
/style一、鼠标划过效果
1. 类似电子书的图书效果 style typetext/css*{margin:0; padding:0;}li{list-style:none;}ul{margin:100px auto;width:560px;height: 300px;}ul li{float:left; width: 140px;height: 300px;overflow: hidden;}ul li.li1{background: #f9f;}ul li.li2{background: #ff0;}ul li.li3{background: #99f;}ul li.li4{background: #9f9;}ul li p{padding:20px;}ul:hover li{width:20px;}ul li:hover{width:500px;}
/style
bodyulli classli1p按开关及饿哦我把还不发VN打了卡考拉海购二伯iiooshnoe 的煎熬一个很就 jdoahg djfa dkjiea kdia 倒垃圾/p/lili classli2p按开关及饿哦我把还不发VN打了卡考拉海购二伯iiooshnoe 的煎熬一个很就 jdoahg djfa dkjiea kdia 倒垃圾/p/lili classli3p按开关及饿哦我把还不发VN打了卡考拉海购二伯iiooshnoe 的煎熬一个很就 jdoahg djfa dkjiea kdia 倒垃圾/p/lili classli4p按开关及饿哦我把还不发VN打了卡考拉海购二伯iiooshnoe 的煎熬一个很就 jdoahg djfa dkjiea kdia 倒垃圾/p/li/ul
/body2. 绝对定位实用案例 style typetext/css*{margin:0;padding:0;}div{width: 300px;height: 300px;border: 1px solid #000;text-align: center;margin:30px 80px;position: relative; /*给父级设置 position: relative;*/}div img{display: block;width: 300px;height: 300px;}div p{background-color: grey;color: #fff;width: 100%;height: 30px;line-height: 30px;position: absolute;left: 0;bottom: 0; /*p标签设置了positionp标签脱离文档流*/display: none;}div:hover p{display: block;}
/style
body!-- 常作为兄弟元素外面套一个父级标签。在父标签上写position: relative; --divimg src../imgs/蔡蔡3.jpg altp蔡姬请你吃糖^_^/p/div
/body二、锚点的应用 style*{margin:0; padding:0;}div{height: 500px;}#box1{background: #99f;}#box2{background: #9f9;}#box3{background: #f99;}#box4{background: #f9f;}#box5{background: #ff9;}#box6{background: #9ff;}#box7{background: #f80;}#box8{background: #90f;}p{ position: fixed; height: 150px; left:10px; top:0; bottom:0; right: 0;margin: auto;}a{display: block; height: 16px; width: 16px; color:#fff;padding: 10px;margin-top: 2px;background:#000;}
/style
bodypa href#box1F1/aa href#box2F2/aa href#box3F3/aa href#box4F4/aa href#box5F5/aa href#box6F6/aa href#box7F7/aa href#box8F8/a/pdiv idbox1奢侈品/divdiv idbox2精品店/divdiv idbox3卖女鞋/divdiv idbox4卖女装/divdiv idbox5卖童装/divdiv idbox6卖男装/divdiv idbox7美食城/divdiv idbox8电影院/div
/body三、css精灵图片整合 background-position 第二个值若不写会默认为 center (图的center部分)。 1. 用下面一张图片写出一串电话号码
图片 代码
styleul{overflow: hidden;}ul li{list-style: none;float:left;width: 100px;height: 100px;border:1px solid #000;margin-right:10px;background:url(../images/position.png) no-repeat;}ul li.num2{background-position:-100px -100px;}ul li.num3{background-position:-100px 0px;}ul li.num4{background-position:0px -100px;}ul li.num5{background-position:-200px -200px;}ul li.num6{background-position:-200px -100px;}ul li.num7{background-position:-200px -200px;}ul li.num9{background-position:0px -200px;}ul li.num10{background-position:-200px -200px;}ul li.num11{background-position:0px -200px;}/*若不写就会默认数字1的位置*//stylebodyulli classnum1/lili classnum2/lili classnum3/lili classnum4/lili classnum5/lili classnum6/lili classnum7/lili classnum8/lili classnum9/lili classnum10/lili classnum11/li/ul
/body效果
2. 用下面一张图片写出导航的滑动效果
图片 代码
styleul{overflow: hidden;}ul li{list-style: none;float:left;width: 62px;height: 22px;background:url(../images/bg.gif) no-repeat;text-align: center;}ul li.hover2{background-position:-62px 0px;}ul li.hover3{background-position:-124px 0px;}ul li.hover4{background-position:-186px 0px;}ul li:hover{color:#fff;}ul li.hover1:hover{background-position:0px -22px;}ul li.hover2:hover{background-position:-62px -22px;}ul li.hover3:hover{background-position:-124px -22px;}ul li.hover4:hover{background-position:-186px -22px;}/stylebodyulli classhover1首页/lili classhover2新闻/lili classhover3娱乐/lili classhover4体育/li/ul
/body效果 四、后台布局
1. 单飞布局 思路 让左边的元素不占文档流可以使用float:leftposition:absolute。 stylehtml,body{height:100%;}.left{width:200px;height:100%;background-color: #d3dce6;position:absolute;}.right{height:100%;background: #f9fafc;margin-left:200px;}
/style
bodydiv classleft左边宽度200/br高度自适应/divdiv classright右边完全自适应/div
/body2. 双飞布局-圣杯布局
1方案一使用浮动 思路 左边和右边不占文档流中间占文档流注意 center 的位置因为先让左边和右边的元素不占文档流此时文档流的位置仍然在左上角若先写center 再写 right那么 right将会被挤下去 stylehtml,body{height:100%;}.left{width:200px;height:100%;background-color: #d3dce6;position:absolute;}.center{height:100%;background:#99a9bf;margin:0 200px;}.right{width:200px;height:100%;background: #f9fafc;float:right;}
/style
bodydiv classleft左边宽度固定200/br高度自适应/divdiv classright右边宽度固定200/br高度自适应/divdiv classcenter中间宽高度自适应/div
/body2方案二使用弹性盒 对于头部、主体、底部 弹性盒默认流向是横向的利用弹性盒的分配剩余空间分配的是宽度。 因为这里高度未知所以我们要可以改变弹性盒的流向为纵向然后再分配剩余空间此时分配的就是高度。对于主体部分 弹性盒默认特性若子元素不设置高度则其高度与父元素一样高 style*{margin:0; padding:0;}html,body{height: 100%;}body{display: flex; flex-direction: column;} /*将弹性盒流向改为纵向*/header, footer{height: 100px;background:#99a9bf;}section{flex:1; margin:20px 0;}section{display: flex;} /*display: flex; 效果只作用于亲儿子*/section article{width: 200px; background: #f80;}section aside{width: 200px; background: #0f0;}section main{flex:1; margin:0 10px; background: #9f9;}
/style
bodyheader头部高度100px宽度100%/headersectionarticle左br/已知左边宽度是200px高度父级section的高度/articlemain中br/宽度未知高度父级section的高度分配剩余空间/mainaside右br/已知右边宽度是200px高度父级section的高度/aside/sectionfooter底部高度100px宽度100%/footer
/body3. 后台页面管理布局 思路 利用 定位属性 的 left、top、bottom、right 属性达到宽高自适应的效果。 代码
stylehtml,body{height:100%;margin:0;}.top{height: 100px;background:#99a9bf;}.left{width:200px;background:#d3dce6;position:absolute;top:100px;bottom:0;}.right{background:#e5e9f2;position:absolute;top:100px;bottom:0;left:200px;right:0;}
/style
bodydiv classtoptop高度固定宽度自适应/divdiv classleftleft宽度固定高度自适应/divdiv classrightright宽高自适应/div
/body五、css3部分
1. 在一个div里面使用多张背景图 当 background-image 里面有 n 张背景图时其他 background 的 css 属性如 background-repeatbackground-position 等若它们的值的个数没有 n 个就会按照它现有值的个数按顺序依次循环执行。 stylediv{width:700px;height: 700px;border: 2px solid #000;background-repeat: no-repeat;background-size:40%;background-image: url(../imgs/蔡蔡1.jpg), url(../imgs/蔡蔡2.jpg), url(../imgs/蔡蔡3.jpg);background-position: 0 0, 200px 200px, 400px 400px;}
/style
bodydiv/div
/body2. 用一张 背景图 写成多种效果 border-image: border-image:图片边框谷歌浏览器不兼容。 url()图片路径上 右 下 左4个方向截取背景图片的宽/高度注意这里是数值不需要写px/宽度pxborder的宽度平铺方式stretch除了不相交部分其他拉升round除不相交部分其他平铺 代码 border-image: url(背景图) 上边框粗细 右边框粗细 下边框粗细 左边框粗细/边框粗细 round平铺/stretch拉伸
stylediv#box{width: 800px;display: flex;}div#boxdiv{width: 300px;height:100px;margin:0 20px;}div#boxdiv:nth-of-type(1){border-image: url(../images/border.png) 25 25 25 25/15px round;}div#boxdiv:nth-of-type(2){border-image: url(../images/border.png) 25 25 25 25/15px stretch;}
/style
div idboximg src../images/border.png alt原图 /div/divdiv/div/div3. 用伪类元素给第一行文字第一个字添加样式 stylediv{border:1px solid #000;width: 300px;height: 200px;}div:first-line{color:#9f9;}/*给第一行文字添加样式*/div::first-letter{color:#f9f;}/*给第一个字添加样式*/
/style
bodydiv哈哈啦啦嘻嘻呵呵嘿嘿嗯嗯哦哦啊啊咳咳嗡嗡哈哈啦啦嘻嘻呵呵嘿嘿嗯嗯哦哦啊啊咳咳嗡嗡哈哈啦啦嘻嘻呵呵嘿嘿嗯嗯哦哦啊啊咳咳嗡嗡哈哈啦啦嘻嘻呵呵嘿嘿嗯嗯哦哦啊啊咳咳嗡嗡哈哈啦啦嘻嘻呵呵嘿嘿嗯嗯哦哦啊啊咳咳嗡嗡哈哈啦啦嘻嘻呵呵嘿嘿嗯嗯哦哦啊啊咳咳嗡嗡哈哈啦啦嘻嘻呵呵嘿嘿嗯嗯哦哦啊啊咳咳嗡嗡哈哈啦啦嘻嘻呵呵嘿嘿嗯嗯哦哦啊啊咳咳嗡嗡/div
/body
