文件创建、文件命名规范、图片命名规范、鼠标样式属性、实现箭头、精灵图技术、文本溢出处理08

最新推荐文章于 2021-07-29 22:46:33 发布

Ninety`

最新推荐文章于 2021-07-29 22:46:33 发布

阅读量268

点赞数

分类专栏：第一阶段html5 文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_52597660/article/details/110896999

版权

第一阶段html5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

day08

文件创建

在这里插入图片描述

文件命名规范

统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。

原则： 1）方便理解，见名之意

2）方面查找

例如：

首页—index
产品列表—prolist产品详细页面—pro_detail
新闻列表—newslist新闻详细页面—news_detail
发展历史—history
关于我们—aboutus
联系我们—linkus，contactus
信息反馈—feedback
留言—leavewords

图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等

banner：放置在页面顶部的广告，装饰图案等长方形的图片
logo：标志性的图片
button：在页面上位置不固定，并且带有链接的小图片
menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
pic：装饰用的图片

例子：

banner_sohu.gif, banner_sina.gif
menu_aboutus.gif,menu_job.gif
title_news.gif
logo_police.gif
pic_people.gif

代码规范

html

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；

不要忽略可选的关闭标签，例：和。

块元素可以嵌套行内元素和行内块,行内元素不可以套块元素(a除外) a>div

复合标签的直接子代按照规定写(ul>li,ol>li,dl<dt+dd)

一个界面上有且只有一个H1元素,一般用在logo上

自定义属性时,最好用data-属性名命名属性名字方便获取

CSS

尽量用class属性取挑选元素 .类名 {}

不要写超出三个-5个的类选择器

不要出现任何单独的标签选择器!!!

#id 100 权重最大父元素 id

css书写规范

div.a {
    布局相关的属性;  display,overflow,float,position,margin,padding
    本身的属性;width,height,border,bgc,
    文本的属性;text-,font-,...
    其他属性;z-index,border-radius,box-shadow,cursor,resize...
    
}

网站三剑客(head)

TDK

Title 网页标题 4-6词词语

<title>   </title>

Description 描述

<meta name="description"  content="U.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

Keywords

网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东

鼠标样式属性

cursor:auto; 默认

cursor:crosshair; 加号

cursor:text; 文本竖标

cursor:wait; 等待

cursor:help; 帮助

cursor:progress; 过程

cursor:inherit; 继承
cursor:move; 移动

cursor:ne-resize; 左下右上箭头

cursor:ns-resize; 向上向下箭头

cursor:nw-resize; 左上右下箭头

cursor:pointer; 手指

cursor:zoom-in; 放大镜

cursor:zoom-out; 缩小镜

cursor:grab; 手

cursor:grabbing; 抓拳

cursor:no-drop; 红圈禁止

cursor:not-allowed; 红圈禁止

实现箭头

原理：定位两个三角形（边框）

<style>
            .box {
                width: 50px;
                height: 50px;
                /* background-color: pink; */
                position: relative;
                margin-left: 100px;
                margin-top: 100px;
            }
            /* 定位 黑色  */
            .arrow::before {
                content: '';
                position: absolute;
                left: 0;
                top: 1px;
                border-width:20px 20px 0px 20px;
                border-style:solid;
                border-color:#000 transparent transparent transparent;

            }
            /* 白色 */
            .arrow::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0px;
                border-width:20px 20px 0px 20px;
                border-style:solid;
                border-color:#fff transparent transparent transparent;

            }
        </style>
    </head>
    <body>
        <div class="box arrow"></div>

精灵图技术（sprites雪碧）

前端图片优化技巧之一

精灵图：多张小图拼合成一张大图

精灵图技术原理：用背景属性插入精灵图，用background-position属性移动图片的位置，把想要显示的图片部分显示在大小固定的盒子里

优缺点：

优点：

减少http请求次数，提高代码加载的速度
易替换整体风格

缺点：需要测量

文本溢出处理

在这里插入图片描述

文本溢出处理

单行文本溢出

实现方法：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图：
dome1

多行文本溢出

实现方法1：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
 overflow: hidden;
 text-overflow:ellipsis;

效果如图：
dome2

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
兼容性差

实现方法2：

兼容性比较好伪元素…加在盒子末尾

.box2 {
            position: relative;
            width: 150px;
            /* 高度是行高的倍数 显示几行就是几倍数 */
            line-height: 30px;
            height: 90px;
            border: 1px solid red;
            overflow: hidden;
          
        }
        .box2:after {
            content: '...';
            position: absolute;
            right: 0px;
            bottom:0;
            padding-left: 20px;

        }
<h3>方法2</h3>
    <div class="box2">
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
    </div>

Ninety`

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文件创建、文件命名规范、图片命名规范、鼠标样式属性、实现箭头、精灵图技术、文本溢出处理08

day08文件创建文件命名规范统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。原则： 1）方便理解，见名之意2）方面查找例如：首页—index产品列表—prolist产品详细页面—pro_detail新闻列表—newslist新闻详细页面—news_detail发展历史—history关于我们—aboutus联系我们—linkus，contactus信息反馈—feedback留言—leavewords图片命名规范图片的名称分为头尾两部分，用下划线隔
复制链接

扫一扫

专栏目录