这就是一个响应式布局。手机到平板为:320px-1024px;写法一般为:
@media screen and (min-width: 320px) and (max-width: 1024px) {
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
}
2016-08-19
最赞回答 / chage0527
个人认为代码中的几个问题:1、 .itemimg 中间少了空格 .item img2、 CSS代码中文注释没用/**/3、 .item .information 的 background并没有少a4、 第21行的h1,em,#information,不是.information,而是多余了“,em,#information”,删除即可5、HTML中没有a标签,删除即可6、任务一的背景图像链接失效,我换成了6-7节切换背景图的那一届的背景http://www.w3cplus.com/demo/css3/C...
2016-08-19
<style>
a[class^=column]{
background-color: red;
}
a[href$=doc]{
background-color: green;
}
a[title*=box]{
background-color: blue;
}
</style>
a[class^=column]{
background-color: red;
}
a[href$=doc]{
background-color: green;
}
a[title*=box]{
background-color: blue;
}
</style>
2016-08-18
/*使用伪元素制作导航列表项分隔线*/
.nav li:after{
content:" ";
height:13px;
border:1px solid #bd4a40;
position:absolute;
top:18px;right:0px;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child::after {
border:none;
}
.nav li:after{
content:" ";
height:13px;
border:1px solid #bd4a40;
position:absolute;
top:18px;right:0px;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child::after {
border:none;
}
2016-08-18
/*使用伪元素制作导航列表项分隔线*/
.nav li:after{
content:" ";
height:13px;
border:1px solid #bd4a40;
position:absolute;
top:18px;right:0px;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child::after {
border:none;
}
.nav li:after{
content:" ";
height:13px;
border:1px solid #bd4a40;
position:absolute;
top:18px;right:0px;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child::after {
border:none;
}
2016-08-18
border-right:1px solid #ccc;
border-image-source:linear-gradient(to bottom,#f65f57,#a82724,#f65f57);
border-image-slice:0 1 0 0;
border-image-width:none;
border-image-outset:0;
border-image-repeat:stretch;
border-image-source:linear-gradient(to bottom,#f65f57,#a82724,#f65f57);
border-image-slice:0 1 0 0;
border-image-width:none;
border-image-outset:0;
border-image-repeat:stretch;
2016-08-18
已采纳回答 / GYA
第一个是CSS3的基本样式,例如ul默认不要小圆点等常用基本样式,可以引入也可以自定义,第二个是一些服务端特殊字体,如果电脑本地有就不用引入,没有可以引用服务端的特殊字体
2016-08-17
absolute是相对于外面div进行绝对定位,因为absolute会脱离文档流,所有加z-index.自然就能看到top,bottom,left和right设置的值了。分别代表距离div上面一半的位置,下边紧挨着,左右各相距10个像素。
box-shadow添加阴影。
border-radius圆角,让阴影的颜色两边浅,中间深
box-shadow添加阴影。
border-radius圆角,让阴影的颜色两边浅,中间深
2016-08-17
background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top,
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom;
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom;
2016-08-17
background-clip: padding-box;
//裁剪背景图片。这个要个background-origin配合理解。如果:
background-origin:padding-box;
//表示,图片将从div左上角的padding部分开始显示;如果我此刻希望把落在padding部分的背景图片裁剪掉,只剩下content部分的背景图,就可以这样做:
background-clip:content-box;
注意这种情况和直接使用background-origin:content-box的区别!对于用户而言,显示出来的背景图片的内容是不一样的
//裁剪背景图片。这个要个background-origin配合理解。如果:
background-origin:padding-box;
//表示,图片将从div左上角的padding部分开始显示;如果我此刻希望把落在padding部分的背景图片裁剪掉,只剩下content部分的背景图,就可以这样做:
background-clip:content-box;
注意这种情况和直接使用background-origin:content-box的区别!对于用户而言,显示出来的背景图片的内容是不一样的
2016-08-17