当前栏目: [前端实战项目]您现在的位置是:成都seo > 前端实战项目 > 正文

博学谷官网首页静态项目

2020-05-04 12:05前端实战项目 人已围观文章来源:成都SEO文章作者:admin

简介博学谷官网首页页面结构 个人常用的学习笔记 1-css动画过渡 2-三角形 3-盒子阴影 4-快捷导航栏:hover 5-文本自动换行...

博学谷官网首页页面结构
 
个人常用的学习笔记
 
1-css动画过渡
2-三角形
3-盒子阴影
4-快捷导航栏:hover
5-文本自动换行
6-优化logo
7-字体图标引用
 
1-css动画过渡
动画时间
transition: 变化的值 时间。
 
例子
 
.coursers>ul>li {
    float: left;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 5px 7px -2px #8a8a8a;
    overflow: hidden;
    transition: box-shadow 1s;
    transition: translateX() 5s;
}
 
.coursers>ul>li:hover {
    transform: translateX(2px);
     box-shadow: 0px 5px 7px 4px #8a8a8a;
}
 
2-三角形
 
盒子四个三角形
 
原理:
border-top:10px solid pink;
border-right:10px solid red;
border-bottom:10px solid blue;
border-left:10px solid green;
 
 
简写
border-color: green green transparent green;
border-style: solid;
border-width: 10px;
 
 
after属性书写
 
.shortcut_center ul>li:nth-child(3)>a {
    position: relative;
}
 
.shortcut_center ul>li:nth-child(3)>a::after {
    position: absolute;
    content: "";
    right: -13px;
    top: 9px;
    border-color: black transparent transparent transparent;
    border-style: solid;
    border-width: 4px;
}
 
3-盒子阴影
 
box-shadow: h-shadow v-shadow blur spread color inset;
 
h-shawdow:水平
 
v-shadow:垂直
 
blur:模糊距离
 
spread: 阴影尺寸
 
color:阴影颜色
 
inset: 外部阴影
 
outset:内部阴影
 
4-快捷导航栏:hover 
 
.shortcut_xueke_course ul li a {
    display: block;
    position: relative;
    color: #fff;
}
 
.shortcut_xueke_course ul li a::after {
    font-family: 'icomoon';
    position: absolute;
    content: "e902";
    width: 20px;
    height: 20px;
    color:#fff;
    top:0;
    left: 140px;
    font-size: 15px;
}
 
.shortcut_xueke_course ul li:hover a,.shortcut_xueke_course ul li:hover a::after{
    color: #003cff;
}
 
5-文本自动换行
 
文本单行文本换行
width: 210px;
 word-wrap: break-word;
 
文本多行文本换行
 
    /* 1.文字显示宽度 */
    width: 210px;
    /* 2.超出文字部分隐藏 */
    overflow: hidden;
    /* 3.超出文本字数用省略号代替 */
    text-overflow: ellipsis;
    /* 4.转换弹性伸缩盒子 */
    display: -webkit-box;
    /* 5.显示文字行数 */
    -webkit-line-clamp: 2;
    /* 6.兼容浏览器文字排列方式 */
    -webkit-box-orient: vertical;
 
6-优化logo
 
.logo {
    height: 76px;
    line-height: 76px;
    background: #ffffff;
}
 
.logo_left {
    float: left;
}
 
.logo_left h1 a {
    display: block;
    width: 255px;
    height: 76px;
    background: url(../images/logo.png) no-repeat 0px 20px;
    text-indent: -9999px;
    overflow: hidden;
}
 
 
7-字体图标引用
 
/* 字体图标 */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?6qtllz');
    src:  url('../fonts/icomoon.eot?6qtllz#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?6qtllz') format('truetype'),
      url('../fonts/icomoon.woff?6qtllz') format('woff'),
      url('../fonts/icomoon.svg?6qtllz#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
index.html ------------品优购首页
 
 
文件夹
fonts ------------字体图标
images ------------常用图片
style ------------品优购样式
 
样式
base.css ------------基础样式
common.css ------------网站通用样式
index.css ------------博学谷首页样式
 
下面就是博学谷静态页面效果如下
博学,谷官,网,首页,静态,项目,博学,谷官,网, . 博学谷官网首页静态项目

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:品优购商城项目展示_品优购页面效果

下一篇:没有了

相关文章

本栏推荐

标签云

站点信息

  • 文章统计100篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们