首页 > 代码库 > 美化页面，从我做起

美化页面，从我做起

2024-09-13 10:44:27   213人阅读

决定页面显示效果好坏的主要因素是细节的美化。这篇文章主要总计一些美化页面细节的技巧。

 

很多页面都有横向分布的栏目，那么各个栏目之间的纵向分隔符是怎样实现的呢？

       技术分享

.item p {
  
  width: 50%;
  height: 55px;
  font-size: 1rem;
  text-align: center;
  color: #aba6a5;
  border-right: 2px solid #aba6a5;
  padding: 0 25%;
}

将标签 p 的右边框设置成我们需要的分隔符样式就可以得到我们想要的效果了。

 

横向分隔符怎样实现？

        技术分享

 

.colum-3 p:after {
  display: block;
  content: ‘‘;
  margin: 25px auto;
  width: 31px;
  height: 2px;
  background-color: #fff;
}

我们可以利用 content与 after 搭配实现需要的效果，background-color的值可以改变分隔符的颜色。

 

那斜着的分隔符怎样实现？

       技术分享

.slide-desc span:before {
  display: block;
  content: ‘‘;
  width: 1px;
  height: 28px;
  position: absolute;
  background-color: #323333;
  top: 0;
  left: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

我们只需要为上面的代码添加一行：transform：rotate(45deg)即可，rotate实现元素一定角度的旋转。

 

页面指示的实现

        技术分享

#page-tab li {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 7px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #929292;
  cursor: pointer;
}

将背景颜色设置为需要的颜色，然后将边框圆角属性设置为 50% 。

 

输入框的美化：

        技术分享

.form-list input {
  outline:0;
  border: 0;
  float: left;
  height: 40px;
  width: 100%;
  background-color: #EDEDEF;
  padding-left: 15px;
}

大多数页面的border都设置为 0 ；利用padding-left：15px 将提示语右移实现美化。

 

较好的清楚浮动是怎样的？

.clear:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

 

对链接的美化：去除链接的下划线

a,
a:link,
a:visited,
a:hover,
a:active {
  color: #333; 
  text-decoration: none
}

 

对列表的美化，去除浏览器列表的默认的排序修饰

ul,
li {
  list-style: none;
}

美化页面，从我做起


联系
我们