css选择器优先级和photoshop快捷键以及100度享乐网框架

最新推荐文章于 2018-05-07 16:13:51 发布

_likeli

最新推荐文章于 2018-05-07 16:13:51 发布

阅读量330

点赞数 1

本文链接：https://blog.csdn.net/qq_39817708/article/details/77386828

版权

css选择器优先级

CSS选择器的优先级：作用的元素一样，样式一样，就会有优先级问题，当优先级相同时，一旦发生重叠，以样式后面为主

CSS选择器：统配选择器，类选择器，标签选择器，id选择器，后代选择器，会有相加的过程，群组选择器，不会有相加的过程

相同类型的选择器，样式冲突下，后覆盖前；不同类型的选择器，样式冲突下，优先级高的覆盖低的

* < tags < class < id < style < important，优先级高的选择器绝对高于优先级低的选择器的优先级，无论有多少个低的选择器

background:blue!important;优先级最高，慎用（非得用的话，加注释，说明一下）

photoshop快捷键：

1. command+h：是否显示额外内容

2.V:移动工具

3.M:选取工具

4.Z:放大 Alt：缩小

5.I:取色

6.T文字编辑

7.command+K首选项

8.command+shift+c强复制

9.command+N新建

10.command+V粘贴

100度享乐网框架

index.html

<!doctype html>
<html>
   <head>
       <meta charset="utf-8"/>
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/base.css">
       <link rel="stylesheet" type="text/css" href="css/index.css"/>
   </head>
   <body>
       <div class="wrap">
           <div class="top auto"></div>
           <div class="nav auto"></div>
           <div class="search auto mb10"></div>
           <div class="content auto mb10">
               <div class="content_left inline_block mr10">
                   <div class="content_left_left1 mb10"></div>
                   <div class="content_left_left2 mb10"></div>
                   <div class="content_left_left3 mb10"></div>
                   <div class="content_left_left4 mb10"></div>
                   <div class="content_left_left5 mb10"></div>
                   <div class="content_left_left6 mb10"></div>
                   <div class="content_left_left7"></div>
               </div><div class="content_right inline_block">
                   <div class="content_right_login mb10"></div>
                   <div class="content_right_zhuanpan mb10 "></div>
                   <div class="content_right_ad mb10"></div>

                   <div class="content_right_coupons mb10"></div>
                   <div class="content_right_shop mb10"></div>
                   <div class="content_right_quanjingshop mb10 "></div>
                   <div class="content_right_zhekoushop mb10"></div>
                   <div class="content_right_newcoupons"></div>
               </div>
           </div>
           <div class="bottom auto"></div>

       </div>
   </body>
</html>

base.css文件

body{
   margin:0;

}
.auto{
   margin-left:auto;
   margin-right:auto;
   margin-top:0;
   margin-bottom:0;
}
.ml10{
   margin-left:10px;
}
.mr10{
   margin-right:10px;
}
.mb10{
   margin-bottom:10px;
}
.mt10{
   margin-top:10px;
}
.fs12{
   font-size:12px;
}
.block{
   display:block;
}
.inline_block{
   display:inline-block;
}

index.css文档

.top,.nav,.content,.bottom,.search{
   width:960px;
}
/*头部区域*/
.top{
   height:30px;
   background:red;
}
/*头部区域结束*/
/*导航区域*/
.nav{
   height:90px;
   background:orange;
}
/*导航区域结束*/
/*搜索区域*/
.search{
   height:116px;
   background:yellow;
}
/*搜索区域结束*/
/*内容区域*/
.content_left{
   width:710px;
   font-size:0;
}
.content_left_left1{
   height:420px;
   background: red;
}
.content_left_left2{
   height:90px;
   background: orange;
}
.content_left_left3{
   height:500px;
   background: yellow;
}
.content_left_left4{
   height:330px;
   background: green;
}
.content_left_left5{
   height:90px;
   background: grey;
}
.content_left_left6{
   height:300px;
   background: blue;
}
.content_left_left7{
   height:250px;
   background: purple;
}
.content_right{
   width:240px;
   font-size:0;
}

.content_right_login{
   height:140px;
   background:purple;
}
.content_right_zhuanpan{
   height:90px;
   background:pink;
}
.content_right_ad{
   height:180px;
   background:greenyellow;
}
.content_right_coupons{
   height:240px;
   background:green;
}
.content_right_shop{
   height:420px;
   background:yellow;
}
.content_right_quanjingshop{
   height:180px;
   background:blue;
}
.content_right_zhekoushop{
   height:350px;
   background:gray;
}
.content_right_newcoupons{
   height:370px;
   background:red;
}
/*内容区域结束*/
/*尾部区域*/
.bottom{
   height:80px;
   background:red;
}
/*尾部区域结束*

效果图如下所示：

_likeli

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器优先级和photoshop快捷键以及100度享乐网框架

css选择器优先级 CSS选择器的优先级：作用的元素一样，样式一样，就会有优先级问题，当优先级相同时，一旦发生重叠，以样式后面为主 CSS选择器：统配选择器，类选择器，标签选择器，id选择器，后代选择器，会有相加的过程，群组选择器，不会有相加的过程相同类型
复制链接

扫一扫