HTML静态页
html和css等
weixin_45552104
这个作者很懒,什么都没留下…
展开
-
Css实现省略号...及悬浮层显示全部内容的方法:
css转载 2022-08-01 14:15:37 · 1448 阅读 · 0 评论 -
HTML(十五)、2D,3D
一、CSS3 渐变的语法及应用线性渐变linear-gradient (方向[可选],颜色1,颜色2)就是,一个方向到另一个方向笔直进行渐变径向渐变radial-gradient (正圆椭圆[可选],颜色1,颜色2)从起点到终点颜色从内到外进行圆形渐变circle:渐变为最大的圆形; ellipse:(椭圆)根据元素形状渐变,元素为正方形是显示效果与circle无异。 重复渐变...原创 2019-10-14 21:07:11 · 164 阅读 · 0 评论 -
HTML(十四)、移动端布局
一、百分比弹性布局移动端页面基本上和web端区别不大 但要考虑到 移动端屏幕尺寸不大并且都是全屏布局 而且 屏幕尺寸都不一样 所有不能使用网页的固定尺寸来布局 需要使用百分比来布局二、移动端布局的优缺点优点:移动端基本都兼容h5 css3 所有可以放心的去使用css3的样式来布局移动端页面一般都不大 所以标签使用的并不多 相对一个一面开发时间没web端长缺点:移动端宽高尺寸不同 因此...原创 2019-10-14 20:58:19 · 188 阅读 · 0 评论 -
HTML(十三)、弹性盒
一、怪异盒模型标准盒模型怪异盒模型css3 盒模型box-sizing:content-box 标准盒模型 (默认)border-box 怪异盒模型二、弹性盒子display: 弹性盒子类型box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)inline-box:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最老版本)flexbox:将对象作为弹性伸缩盒显示。 ...原创 2019-10-14 20:52:31 · 438 阅读 · 1 评论 -
HTML(十二)、css3选择器
一、css3 选择器css3 概念CSS即层叠样式表(Cascading StyleSheets)CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3 完全向后兼容,因此您不必改变现有的设计。浏览器通常...原创 2019-10-14 17:50:57 · 116 阅读 · 0 评论 -
HTML(十一)、html5
一、HTML的发展史二、HTML5和HTML4的区别1、更简单2、标签的语义化3、语法更宽松4、多设备跨平台5、自适应网页设计三、文档类型声明(DTD)DTD ( Document Type Definition )H5<!DOCTYPE html>HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4....原创 2019-10-14 17:27:45 · 154 阅读 · 0 评论 -
HTML(十)、网页优化
一、网页优化网页优化 (seo) SEM(百度竞价排名)关键词<meta name="keywords" content="" />描述<meta name="description" content=""/>超链接优化 采用纯文本链接,少用,最好是别用Flash动画设置链接,因为搜索引擎无法识别Flash上的文字.最好别使用图片热点链接 理由...原创 2019-09-26 16:35:43 · 173 阅读 · 0 评论 -
HTML(九)、图片整合,部分兼容问题
一、图片整合的概念图片整合又名(CSS精灵)将小图标,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position 来实现背景图片的定位技术。优劣势:通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度。通过整合图片来减小图片的体积。但是也增加了开发人员的负担。二、图片整合的应用给一个元素定义背景图 通过 back...原创 2019-09-25 17:32:27 · 250 阅读 · 0 评论 -
HTML(八)、宽高自适应
一、宽度自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。块元素在不设置宽度的情况下 width:auto;(默认)子元素盒模型总大小=父元素的width子元素设置了padding border margin子元素的wi...原创 2019-09-24 13:46:00 · 1000 阅读 · 0 评论 -
HTML(七)、定位
一、定位属性及应用页面制作过程中经常会碰到元素层叠或特定位置显示的情况,按照正常文档流布局的方式不能完全满足我们的需求 所有需要定位属性position:(定位属性) static 默认值 所有元素默认的定位属性就是static 一般不用 absolute 绝对定位 (完全脱离文档流) 自动向上检索 以最近的定位元素作为父元素 若检索不到就以html为父元素 来定位 relativ...原创 2019-09-23 11:20:39 · 85 阅读 · 0 评论 -
HTML(六)、元素类型
一、元素分类html里的元素一般都带有自己的一些特性 有些天生能换行 能设置宽高 有些在一行里边显示但不能设置宽高。原因是元素本身都有一个隐形的类型存在;一般元素分为这么5个类型:块元素 (block)默认宽度和父框一样宽 强制换行 能设置宽高 div p h1-h6 form dl dt dd ul ol 等行元素 (inline)(内联元素)元素不能设置宽高 在一行显示 宽高由...原创 2019-09-22 11:35:59 · 130 阅读 · 0 评论 -
HTML(五)、溢出
一、文本溢出我们经常能在网页当中看到一段文字过长出现省略号的效果。图片上所显示的有2种类型的省略号一种是多行在最后一行出现省略号 一种是单行出现省略号 首先第一种 只能手动去添加省略号而第二种 我们则可以通过代码区实现这一的效果首先需要4个属性配合使用:width:200px; 文本超出多少才隐藏white-space:nowrap; 强制不换行overflow:hidden;...原创 2019-09-22 11:32:24 · 474 阅读 · 0 评论 -
HTML(四)、盒模型
一、盒模型的概念及组成盒模型的组成盒模型的组成分为外边距、边框、内边距、内容区,这就是盒模型。二、border padding margin 使用边框线型(solid实线/dashed虚线/dotted点线/double双线)单边框设置border-left: 单独设置左边框border-right: 单独设置右边框border-top: 单独设置上边框border...原创 2019-09-22 11:27:16 · 231 阅读 · 0 评论 -
HTML(三)、css
一、选择符优先级定义:选择符的优先级即选择符的权重 针对同一个元素或同一群元素 进行选择时起的冲突进行的优先选择的处理。内联样式的权重为 1000id选择符的权重为 0100class选择符的权重为 0010伪类选择符的权重为 0010元素选择符的权重为 0001继承样式的权重为 0000后代选择符的权重:为后代选择符的权中之和二、文本相关属性...原创 2019-09-20 14:16:14 · 81 阅读 · 0 评论 -
HTML(二) 、css
(有一些昨天忘了说的先补上,以后想到什么再补什么吧)一、表单元素<form></form>表单name=“定义表单名”method=“get/post” 传输方式action=“请求地址”<input type=“表单元素类型” />表单元素text 单行文本框password 密码输入框submit 提交按钮reset 重置按钮二...原创 2019-09-19 19:12:39 · 102 阅读 · 0 评论 -
解构赋值的用法
1. 交换变量通常交换两个变量的方法需要一个额外的临时变量,来看看例子let a = 1;let b = 2;let temp;temp = a;a = b;b = temp;a; // => 2b; // => 1temp是一个临时变量,它先保存a的值。然后把b的值赋值给a,接着将temp值赋给 b。如果使用解构的方式会更简单。let a = 1;le...转载 2019-08-27 08:12:18 · 740 阅读 · 0 评论 -
1个div,你能用CSS常规属性绘制:正3、4、5、6、7、8边形吗?
**一、正三角形**正三角形不需要用到伪元素,只需要设定div本身的边框宽度即可产生,先来看一下正三角形的边长与中线,若边长为100px,则中线四舍五入就是87px(100 x sin( 60)= 87)。因此我们要将div的长宽都设为0,接着把底部border的宽度设为为87px,左右的border width度设为50px(颜色设为透明),就可以做出一个漂亮的三角形。.a{ w...转载 2019-08-31 10:05:15 · 631 阅读 · 0 评论 -
三个经典布局:三栏式布局、双飞翼布局、圣杯布局
1、三栏式布局三栏式布局就是左栏定宽左浮动,右栏定宽右浮动。<div class="wrap"> <div class="left"></div> <div class="right"></div> <div class="center"></div></div>...转载 2019-09-17 11:35:00 · 776 阅读 · 0 评论