济南网站建设,网站运营维护,网站优化
基础知识您当前的位置:智达维网络科技 > 建站知识 > 基础知识 >

济南网站建设中CSS3使用技巧

更新时间:2018-04-19 09:31:52 作者:千寻建站 访问量:24

济南网站建设中CSS3使用技巧
济南网站建设中CSS3使用技巧
1 属性选择器的使用
比如给搜索框input 设置样式, 在CSS3 中可以使用属性选择器[att*=val]。
案例一, 给text 类型的input 设置样式:
input[type="text"]{
background-color: #f3f3f3;
border: 1px solid #ccc;
}
案例二, 给submit 类型的input 设置样式:
input[type="submit"] {
background-color: #3598db;
color: #fff;
}
2 如何单独修改父类元素下面的某个子元素的样式
这个使用伪元素选择器, 包括first-line、first-letter、before、after、first-child、last-child、nth-child (n)、nth-child (5n+5) 等。
案例一: 修改ul 的最后一个li 元素的外边距为0:
Class 名li:last-child{
margin-right: 0;
}
案例二: 给ul 的li 元素设置前置序号:
Class 名li:before{ //设置序号的样式
content: counter(listxh);
background-color: #444;
padding: 2px 5px;
color: #fff;
margin-right: 5px;
}
Class 名li{
counter-increment: listxh; //使用序号
display: inline-block;
width: 100%;
overflow: hidden; //溢出部分隐藏
white-space: nowrap; //不换行
text-overflow:ellipsis; //超出部门显示省略号
margin-top: 16px;
}
3 在CSS 选择器中“>” 和“.” 的区别:
符号“>” 是指选择儿子元素。符号“.” 是指选中包括儿子元素在内的所有子孙元素。

    文章说明:本站发布的所有文章,版权均属于智达维网络科技。如需转载、摘编或利用其它方式使用上述作品,请注明“转载自:智达维网络科技”或“转载自:智达维网络科技/网站建设相关文章”,谢谢您的浏览!

相关推荐
热线:0531-87583458 电话:0531-66812586 QQ:2676834962
Copyright 智达维网络科技 版权所有
ICP备案编号:鲁ICP备11034527号-1 鲁公网安备 37010402000703号

扫二维码加微信咨询

拨打客服热线

0531-87583458

在线客服