整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Web前端设计秘籍-30个工作中常用的CSS样式

SS样式被称为“层叠样式表”，是一种网页制作不可或缺的技术，是用于修饰网页样式，达到设计效果的一种样式语言。

而由于样式效果非常多，在工作中并非所有的样式都会用到，因此经常可能遇到某些特定样式会突然想不起来的情况，更何况对于初学者来说遇到这种情况。

接下来就跟着小凡一起整理一下这些常用而易忘的css样式。

css样式的效果

01、文字超出部分显示省略号

单行文本的超出部分显示省略号。（一定要给元素本身设置宽度）

.title {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

CSS样式效果图

多行文本的超出部分显示省略号

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

CSS样式效果图

PS：建议加上word-break:break-all 否则遇到长单词会出现很神奇的布局情况。

图一

图二

图一未添加，图二添加后的不同效果


02、中英文(长单词)自动换行

word-break:break-all; 只对英文起作用，以字母作为换行依据

word-wrap:break-word; 只对英文起作用，以单词作为换行依据

white-space:pre-wrap; 只对中文起作用，强制换行

white-space:nowrap;都起作用，强制不换行

PS:网页中英文单词通过“_”(下划线)和 “-”（中划线）连接的英文单词在编译处理是方式是截然不同的。

下划线是程序命名方法下划线命名法的规范,其他命名规范还有驼峰式命名。属于程序专用的命名规范。可以连接想连的部分为一个变量名，不是单词。

下划线连接单词效果

中划线是英语复合词有连接2个单词的意思，但前后是2个独立单词。

中划线连接单词效果

03、设置表单输入框placeholder的样式

input::-webkit-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-ms-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-moz-placeholder {
  color:skyblue;
  text-align: center;
}

CSS样式效果图

04、不固定高度的元素文字垂直居中

兼容IE8：伪元素和inline-block/vertical-align

.box::before {
  content:"";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
}

CSS样式效果图

不兼容IE8以下: flex布局

.box {
  background: skyblue;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS样式效果图

05、文字两端对齐

.wrap {
  margin: 0 auto;
  width: 800px;
  text-align: justify;
  text-justify: distribute-all-lines;
  /* 兼容IE6-8 */
  text-align-last: justify;
  -moz-text-align-last: justify;
}

CSS样式效果图

06、iOS页面中滑动卡顿

body,html {
  -webkit-overflow-scrolling:touch
}

07、设置滚动条样式

 .wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
}


.wrap::-webkit-scrollbar {
  /* 整体大小样式 */
  width: 10px;
  height: 10px;
  }


.wrap::-webkit-scrollbar-thumb {
  /* 滚动条里的滑块 */
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255,255,255,0.2) 55%,
  rgba(255,255,255,0.2) 75%,
  transparent 75%,
  transparent);
}


.test::-webkit-scrollbar-track {
/* 滚动条的轨道 */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 10px;
}

CSS样式效果图

08、隐藏滚动条但又可以滚动

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.wrap::-webkit-scrollbar {
/* 整体大小样式 */
  display: none;
}

CSS样式效果图

09、css绘制三角

无边框三角

div {
  width:0;
  height:0;
  border-width: 0 40px 40px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.3);
}

CSS样式效果图


带边框三角

div {
  position: relative;
  width:0;
  height:0;
  border-width: 40px 0 40px  40px ;
  border-style: solid;
  border-color:  transparent  black ;
}


div::after {
  content: "";
  position: absolute;
  top:-36px;
  left:-38px;
  border-width: 36px 0 36px  36px ;
  border-style: solid;
  border-color:  transparent red ;
}

CSS样式效果图

10、文字间的间距

text-indent 文章段落首行缩进

letter-spacing 字与字之间的间距

.wrap {
  margin: 0 auto;
  width: 600px;
  text-indent: 2em;
  letter-spacing: 10px;
}

CSS样式效果图

11、禁止用户选中元素

有些时候不想让用户选中内容，复制网站上文字内容。

.wrap { 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

12、元素占满整个屏幕

以往需要在做全屏遮罩功能的时候会设置height:100%。但是这种做法需要该遮罩层的所有父级元素都逐级设置高度才能使遮罩继承高度属性。所以可以使用100vh单位来实现。

.mask {
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
}

CSS样式效果图

以上就是为学员们整理的针对工作中对商品/新闻等标题的样式处理，弹窗做法的一些经常遇到的css样式实现方法。

如果觉得有用可以收藏关注，同时还可以留言说出你想知道或者是遇到的不会的样式处理，我们还将继续推出后续内容，继续为大家解读别的常用css实用技巧以及其他的前端开发新技能，让我们期待下一期吧。

文末领资料

Web前端设计秘籍——30个工作中常用的CSS样式

现代网页设计中，表格依然扮演着不可或缺的角色。无论是数据展示、报表制作还是复杂布局，合理运用HTML中的<table>标签可以极大地提升网页的信息结构和用户体验。本文将详细解析HTML表格的高级技巧和创新应用，帮助开发者和设计师精确掌握使用HTML表格的最佳实践。

1. HTML表格基础

1.1 表格结构简介

HTML表格由<table>标签创建，基本结构包括<thead>、<tbody>、<tfoot>和<tr>（表格行），以及<th>（表头单元格）和<td>（表格单元格）。

1.2 创建一个简单的表格

<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

这个例子展示了一个包含标题和两行数据的基本表格。

2. 样式化表格

2.1 使用CSS增强表格视觉

为表格添加CSS样式可以提升其视觉效果。例如，可以通过以下CSS代码增加边框、调整文字对齐方式，以及改善表格的颜色和间隔。

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
thead {
    background-color: #f2f2f2;
}

2.2 响应式表格

在移动设备上查看时，表格应能自动调整以适应不同的屏幕尺寸。可以使用CSS的媒体查询来实现响应式表格，或者利用JavaScript进行更复杂的操作。

3. 高级技巧和应用

3.1 合并单元格

使用rowspan和colspan属性可以合并行或列，创建跨多个行或列的单元格，这对于汇总信息特别有用。

<tr>
    <td rowspan="2">合并行</td>
    <td>数据1</td>
    <td>数据2</td>
</tr>
<tr>
    <td>数据3</td>
    <td>数据4</td>
</tr>

3.2 交互式表格

通过JavaScript和AJAX，可以实现表格的动态数据加载和更新，这对于需要实时数据显示的应用尤为重要。

4. 结语

掌握HTML表格的使用和优化不仅能提升网页的功能性和美观，还能改善用户的浏览体验。随着技术的不断进步，我们预见表格在网页设计中的应用将更加灵活和强大。

结尾部分：
希望本文能为你在使用HTML表格时提供新的视角和方法。记得实践是检验真理的唯一标准，不断尝试和优化，是每个网页设计师和开发者成长的必经之路。

多数PHP程序都使用HTML表单从用户那里获取数据并计算结果。

HTML表单的一些基本原则

  • 选择适合于收集的数据类型和提供交互方式的控件。
  • 清楚标记每一个控件，这样用户就可以理解其功能。
  • 尽可能将标签对齐。将控件的左边缘对齐。
  • 将相关的标签分组，并且通过设计中使用空白将每一个分组分开。
  • 表单上的控件顺序应该类似于用户操作他们的顺序。

创建基本HTML表单

首先创造一个基本的HTML大纲，包含表单控件；然后将控件进行合并（HTML表单必须包括一个提交按钮，用户单击它可以将表单数据发送到服务器。）一个单独的HTML页面可以包含多个表单。

  • 创建HTML结构

包含表单的HTML结构和和普通的HTML结构一样。

<HTML>
  <HEAD>
  <TITLE>标题放在这</TITLE>
  </HEAD>
<BODY>
  表单页面放在这
  </BODY>
  </HTML>

在包含表单的HTML页面中可以使用任何HTML标签。基本的表单使用FROM标签来说明。该标签中METHOD属性接收GET或POST两个值中的一个。ACTION属性子明PHP脚本的url，该脚本可以收集通过表单收集的数据，可以是绝对路径或者相对路径。

<FORM METHOD="method" ACTION="url"> 
  中间可以放置表单控件
  </FORM>
  • 合并控件

两个常用的基本控件：文本框和提交按钮。

文本框：允许用户键入信息以发送给PHP脚本。NAME属性为文本提供名称，PHP脚本可以通过名称准确访问其内容，因此它应该是唯一的且符合PHP变量命名规则（但不需要$符号），单标签。VALUE属性指明出现在提交按钮上面的标题。创建方式如下：

<INPUT TYPE = "TEXT" NAME="text">

提交按钮：允许用户将一个表单的内容发送到服务器，一个HTML表单对应应该有一个提交按钮。

示例：一个完整的HTML表单。

<HTML>
  <HEAD>
  <TITLE>标题</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>


  • 使用多个表单

可以在一个HTML页面中包含多个表单，注意下一个表单的FORM开始之前需要结束前一个FORM表单。

<HTML>
  <HEAD>
  <TITLE>标题</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>


创建表单控件

  • 创建自定义的文本框

文本框的属性中，TYPE和NAME是必须的，其余是可选属性。SIZE属性用于设置文本框的可视大小；MAXLENGTH指明用户键入字符的最大长度；VALUE给出了一个最初显示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">
  • 创建文本区域

文本区域可以输入多行文本。NAME和ROWS属性是必须的。ROWS属性表明了文本区域内可以看到的文本行数，充满时会滚动。COLS属性指明可见文本列数与行数类似。WRAP属性指明文本区域内单词换行的方式，可以指定如下值。该标签为双标签。

值

说明

off

禁止单词换行但用户可以输入换行符强制换行

virtual/soft

各行显示为换行，但是换行并没有被发送到服务器

physica/hard

启用了单词换行

<inputarea name="" rows="" cols="" wrap="">
  • 创建密码框

创建密码框的语法与文本框相同，但要将TYPE属性指定为PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">
  • 创建复选框

取两个值中的一个，即二选一。TYPE属性是必须的，checked属性出现，该复选框默认情况会被选定。value属性指定复选框被选定情况下被发送到服务器的值，默认发送on值。法如下：

<input type="checkbox" name="" checked value="">
  • 创建单选按钮

语法与复选框属性含义相同，但是TYPE属性的值必须是RADIO，NAME属性是必须的。

<input type="radio" name="" checked value="">
  • 创建列表框

用户可以选择一个或者多个选项，它是一个滚动菜单。

<select name="" multipile size="">options go here</select>

name属性是必须的，multipile属性指明用户可以通过按下crtl键并单击多个选项来选择它们

列表框的单选行为可作为单选按钮。

<option selected value="text"></options>
  • 创建隐藏域
<input type="hidden" name="text"value="">
  • 实现上传文件的HTML表单
<input type="FILE" name="name" accept="time" value="text">

其中type属性是必须的。格式通过使用MIME码指定。常用的格式如下：

超文本标记语言文本 .html,.html text/html

　　普通文本 ：txt text/plain

　　word文档：application/msword

　　RTF文本 ：rtf application/rtf

　　GIF图形 ：gif image/gif

　　JPEG图形 ：jpeg,

　　jpg： image/jpeg

　　au声音文件：au audio/basic

　　MIDI音乐文件 ：mid,.midi audio/midi,audio/x-midi

　　RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　压缩文件.rar application/octet-stream

　　压缩文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

更多提交表单的信息

  • 使用图像提交数据
<input type="image" src="url" name="text" align="align">
  • 创建重置按钮
<input type="reset" value="text">

在线咨询
上一篇：如何刷新当前的页面
下一篇：HTML5的前沿特性有哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 迎泽区 洛江区 伊金霍洛旗 东西湖区 路南区 邱县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服