周末总结5

CSS代码书写

写CSS时应当都先写在特殊样式中，如有需要改为通用样式，后期再改动，不要想当然。

形成一个系统的书写代码方式，逐渐找到每种类型的页面部分的书写方式。

利用边框做三角形

对于利用边框做三角形，记得分别设置宽度、种类、透明度。缺一不可！！！

处理二级菜单的重复边框隐藏：

设置一个绝对定位元素遮挡住边框

注意：元素子元素在设置overflow为auto的方向上通过定位移动超出边框的部分会被隐藏。

 

在网页中嵌入新的网页：

有时网页中某个区域在主页面上可使用，同时它也有自己的页面，这时就需要新制作一个网页，并用iframe元素将新网页嵌入到原网页中。

常见样式效果：

浮动盒子导致的高度坍塌解决方法：
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
/*注意将其设置在通用样式里*/
 给行盒设置宽高：
行盒不可改变宽高，要想让行盒的宽高生效，必须将其转化为块盒。

隐藏文字：

1. 用span元素把文字包裹起来，设置span为display：none即可 

.header .logo a span{
    display: none;
}

2. 在这里，还有另一种巧妙的方法：不用设置span元素，设置a元素高度为0，接着设置其padding-top为适宜像素，此时文字会被挤下去，这时只要设置overflow为hidden即可。 

外边距合并问题：

1.创建BFC盒子

2. 设置header内边距
.header{
 
height: 90px;
 
padding-top: 30px;
 
box-sizing: border-box;
 

搜索框一般效果：输入文字后按回车页面会加载到另一个页面

做法有两种

1.通过JS代码实现
2.在input元素外面套一个form（表单元素），form里再加一个子元素button，button里又有i元素（图标）
这里的input元素记得按照要求定宽高

/* text为input的类名 */
.header .search .text{
    width: 240px;
    height: 20px;
    padding: 5px;
    font-size: 13px;
}
<form
    <input type="text">
    <button>
          <i class="iconfont icon-sousuoxiao"></i>
     </button>
 </form>

按回车键时，就相当于触发了按钮，提交数据

设置placeholder文字颜色：

/* 伪元素选择器,选中该属性里的内容 */
.header .search .text::placeholder{
    color: #ccc;
}
重置input，button样式：
input,button{
    border:none;
    outline:none;
    outline-offset:0;
}
button{
    background:initial;
}
 给背景图设置宽高的方法：
background: url(../imgs/搜索小.png) no-repeat left（或离左边的距离） top（或离上面的距离）/25px（宽） 25px（高）;

将元素横向排列的方法：

1.浮动（记得清楚浮动）

2. 将元素变为行块盒

 首行缩进与padding区别：

在这里要注意，如果给文本框设置首行缩进的话，当输入文字过长时，就会出现以下效果：

故为+86腾出空间时，应使用padding-left 

背景颜色覆盖圆角边框问题 ：
 

注意观察圆角边框附近背景颜色 ，背景颜色将圆角边框覆盖了，要解决这个问题，可以设置overflow：hidden，也可以为title设置圆角边框，在这里我们就设置溢出隐藏吧

解决边框重复问题：

只设置border-top，单独设置最后一个li元素的border-bottom，这里就要用到伪元素选择器

.container .login .form .form-item .country-code .choose-area .center ul li{
    height: 38px;
    line-height: 38px;
    border-top: 1px solid #e5e5e5;
    /* border-bottom: 1px solid #e5e5e5; */
   }
.container .login .form .form-item .country-code .choose-area .center ul li:last-child{
    border-bottom:1px solid #e5e5e5 ;
}
img为行盒，行盒的水平居中，设置其父元素text-align为center

制作两栏或三栏布局:
网页中可能会有多个部分分左栏，右栏或主区域，设置其样式时将其设置为通用样式

<div class="aside-left">
    左边栏
 </div>
 <div class="aside-right">
     右边栏
 </div>
 <div class="main">
     主区域
  </div>
.aside-left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.aside-right{
    float: right;
    width: 265px;
    margin-left: 30px;
}

.main{
    /* 创建BFC，自适应，避开浮动盒子 */
    overflow: hidden;
}

 设置子元素除第一个之外的其他元素的样式：
除第一个之外的其他span元素，n从0开始 
.hot-list li .desc span:nth-child(n+2){
 
}

全英文换行效果：

如果全英文（无空格），则最终效果不会换行，故要给ul设置word-break：break-all（可在单词内部截断）

把图片按一定数量横向排列方法：
设置ul通用样式：给ul加上item-list类名，再统一设置

.item-list li{
    display: inline-block;
    vertical-align: top;
    line-height: 1.5;
}
.item-list li .img img{
    width: 100%;
    display: block;
}
根据页面主区域设置宽度，注意一定要将ul设置为行块盒

 图片横向排列时，去除每行末尾图片的margin-right ：
/* 一行有三张图片，将每行最后一张图片右外边距设为0 */
.video-main li:nth-child(3n){
    margin: 0;
}
视频区域中图片上的播放图标设置：
设置图片区域的before，可以给伪元素选择器里添加字体图标，也可给内容区加上图片，设置插入播放图片的宽度和高度都撑满，为了让插入的图片居中，则设置text-align和line-height即可；

.video-main .img::before{
    content: url(../imgs/24gl-playCircle.png);
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    line-height: 500px;
    font-size: 30px;
}
菜单区域用a元素的常见问题
将a元素设置成块盒（为了使元素独占一行），但之前写过a元素的统一样式，鼠标悬浮在a元素上时会有背景颜色，此时会显现出这样的效果（a元素变为块盒引起的）

       
通过设置li元素样式制造出有序效果

.order-movie-list li{
    /* 使li元素又副盒子，盒子里装有序数字 */
    list-style-type: decimal;
    /* 副盒子位于li元素里面 */
    list-style-position: inside;
}

 名字过长处理方式 ：

电影名字一般的处理方式是不换行+溢出隐藏+溢出用原点代替

movie-area .item-list li .words a{
    display: inline-block;
    max-width: 100%;
    /* 空白的处理方式是不换行 */
    white-space: nowrap;
    overflow: hidden;
    /* 溢出用原点代替 */
    text-overflow: ellipsis;
}

 设置分散对齐

text-align：justify，给item-list添加伪元素，让伪元素独占一行，解决了justify不让最后一行分散对齐的问题

.group-area .main .item-list::after{
    content: "";
    display: inline-block;
    width: 100%;
}

.music-area .music-player-list li .player .img img{
    /* 防止出现白边 */
    display: block;
    width: 100%;
    height: 100%;
}
 

————————————————
版权声明：本文为CSDN博主「guai_guai_guai」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/guai_guai_guai/article/details/134745559