ps基本操作
视图菜单中有标尺 CTRL+r
ctrl+加号放大,那么减号就是缩小
产品模块实战
<style>/*笔记本设置里面默认文本缩放是%125,截出的图片都偏大*/
a{
color:#333;
text-decoration:none;
}
*{
margin:0;
padding:0;
}
.box{
width:298px;
height:415px;
background-color:pink;
margin:100px auto;
}
.box.img{
width=100px;
}
.review{
margin-top:30px;
padding:0 28px;/*p盒子没有width,padding是无妨的*/
font-size:14px;
}
.info{
font-size:14px;
margin-top:15px;
padding:0 28px;
}
.info h4{
display:inline-block;
font-weight:400;
}
.info span{
color:#ff6700;
}
.info em{
font-style:normal;
margin:0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/img.jpg" alt="">
<p class="review">离转正还差一点点继续答题</p>
<div class="appraise">1080p高清选集字幕1.5x</div>
<div class="info">
<h4><a herf="#">redmi</h4>
<em>|</em>
<span>99.9yuan</span></div>
</div>
</body>
标签都是有语义的,标题用h。
我本来学这里的时候也是一脸懵逼,学完JavaScript,然后学JavaScript高级,本来打算学vue的,回来复习下css之前不懂得现在豁然开朗,还是要多敲,多练习,练得多了自然就明白了
圆角边框
border-radius:30px;
border-radius:30px 10px 20px;左上右上右下左下
图片阴影
box-shadow:水平 垂直 模糊距离 阴影尺寸 阴影颜色 外改内inset
文字阴影
text-shadow:水平 垂直 模糊距离
上面是废话
CSS浮动
纵向排列标准流
如何使用左右两个盒子对齐,用
浮动
float用于创建浮动框,直到边缘触及边缘,无边框
选择器{float 属性值}right
浮动特性
- 脱离标准普通流的移动到指定位置
- 浮动盒子不在保留原先位置
如果多个盒子设置浮动,会在一行显示顶端对齐
浮动元素具有行内块特性,经常在居中的盒子里放置浮动的盒子
........
<style>
.box{
width:1200px;
height:460px;
margin:0 auto;
background-color:red;
}
.left{
width:230px;
float:left;
height:460px;
}
.right{
width:970px;
background-color:skyblue;
height:460px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">LEFTLEFT</div>
<div class="right">RIGHTRIGHT</div>
</div>
</body>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.box{
width:1226px;
height:285px;
}
.box.last{
margin-right:0;
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</body>/*半成品*/
<style>
.box{
background-color:pink;
width:;
height:;
margin:0 auto;
}
.left{
}
.right>div{
float:left;
width:234px;
weight:300px;
margin-left:14px;
margin-bottom:14px;
}
/*这里小盒子的margin已经被挤出去了留在大盒子里的恰好是内容部分*/
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class"right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
浮动布局注意点:有父元素再浮动子元素,对于标准 浮动 标准会形成
标准
浮动*标准
对于浮动标准浮动会形成
浮动*标准
浮动
/*因为浮动是水平铺的,第一个浮动了,第三个再左浮动就只能贴着第一个边缘,又因为第二个盒子标准流上移了,第三个盒子在垂直方向上只能在第二个盒子的下方*/
浮动的盒子只会影响浮动后面的标准流,不会影响前面的标准流
对于不定高度的父盒子,也就是jd商品栏无穷无尽,让子盒子撑开,父元素的高度为0,对下一个父元素排版产生影响;
那么就要清除浮动,父盒子根据子盒子自动调整高度
选择器{clear:属性值;}both是左右闭合浮动
清除浮动
1.额外标签
在最后一个浮动的盒子后面加一个块级<div class="clear"></div>
<style>里面.clear{clear both;}
2.父级overflow
设置为overflow:hidden;auto scroll也可以,但是这样无法显示溢出的部分
3.:after伪元素
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
同样清除浮动很好的,因为你可以省去计算父容器高度的时间
最后设置可见性visibility为隐藏hidden就可以了,这个元素的内容为空,是个块级元素,高度为零,加了clear属性限制浮动元素了,从字面上理解就是标准流元素层面在父元素后面(after)加了一个元素
4.双伪元素清除浮动
.clearfix:before, .clearfix:after {
content: "";
display:table;
}
.clearfix:after{
clear :both;
}
.clearfix{
*zoom: 1;
}
就是在大盒子前后各加一个盒子