随笔分类 -  Html+CSS

摘要:html: css: JS: 效果图: 学习 叶建华亲授-从零玩转响应式开发-bootstrap打通前端+移动端 后所作。感谢老师的公开视频 阅读全文
posted @ 2019-06-27 19:14 Tynam.Yang 阅读(2762) 评论(0) 推荐(0) 编辑
摘要:1、input 添加padding后宽度会变化 input中添加如下样式,固定 box 的尺寸 2、input 聚焦后取消边框样式 3、jquery在绑定事件后,需要解除绑定,否则第二次执行时会执行两次 阅读全文
posted @ 2019-05-28 11:44 Tynam.Yang 阅读(222) 评论(0) 推荐(0) 编辑
摘要:作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新 阅读全文
posted @ 2019-05-17 09:59 Tynam.Yang 阅读(477) 评论(0) 推荐(1) 编辑
摘要:css学习一周后,写了个基础博客样式。 样式是出来了,但是在写的过程中感觉css写的杂乱无章,可能是写的太少了吧,条例不是很清除,只是在写的过程 中一个点一个点的套,感觉样式出来即可,没有做到由全局出发考虑再到局部,再到细节的考虑。 总共耗时4个小时,写的时候 html 部分头脑很清晰,可以做到心中 阅读全文
posted @ 2019-05-13 18:26 Tynam.Yang 阅读(390) 评论(2) 推荐(0) 编辑
摘要:3D 在2d的基础上添加 z 轴的变化 3D 位移:在2d的基础上添加 translateZ(),或者使用translate3d() translateZ():以方框中心为原点,变大 3D 缩放:在2d的基础上添加 scaleZ(),或者使用scale3d() scaleZ()和 scale3d() 阅读全文
posted @ 2019-05-10 23:25 Tynam.Yang 阅读(372) 评论(0) 推荐(3) 编辑
摘要:概念: 2D 动画要是使用 transform 属性来实现文字或图像的的各种变形效果,如位移、缩放、旋转、倾斜等 transform属性变形方法: translate():位移 将元素沿着水平方向(X轴)和垂直方向(Y轴)移动 translateX(x):元素仅在水平方向移动(X轴移动) trans 阅读全文
posted @ 2019-05-09 22:00 Tynam.Yang 阅读(494) 评论(0) 推荐(0) 编辑
摘要:服务器端字体 在CSS3中可以使用@font-face属性来利用服务器端字体。 @font-face 属性的使用方法: font-family属性值中使用webfont来声明使用的是服务器端字体 src属性值中首先指定了字体文件所在的路径 format声明字体文件的格式,可以省略文件格式的声明,单独 阅读全文
posted @ 2019-05-09 20:59 Tynam.Yang 阅读(673) 评论(0) 推荐(1) 编辑
摘要:自适应 宽度自适应:网页元素根据窗口或子元素自动调整宽度 适用百分比进行设置,例如:100% 铺满;50% 占据一般宽度 块元素如果不设置宽度,默认为100% 自适应中可以设置最大或者最小宽度和高度 例如:min-height:300px;最小高度为300px; 但是在IE6浏览器中不识别 min- 阅读全文
posted @ 2019-05-08 21:33 Tynam.Yang 阅读(2185) 评论(0) 推荐(6) 编辑
摘要:注意点: 概念:图片整合技术( css sprite 或 精灵图)。通过将多个图片融合到一张图片,然后通过CSS background 背景定位技术技巧布局网页背景 优势:减少 http iis 请求数,减少对服务器的请求次数,提高页面加载虽度,从而隐形提升网站性能。同时也减少图片文件数目。 示例: 阅读全文
posted @ 2019-05-08 19:25 Tynam.Yang 阅读(308) 评论(0) 推荐(1) 编辑
摘要:注意点: position属性 定义建议元素布局所用的定位机制 {position:static/absolute/relative/fixed;} static:默认值,没有定位 absolute:绝对定位元素,相对于static定位以外的第一个父元素进行定位。可以通过left、top、right 阅读全文
posted @ 2019-05-07 21:58 Tynam.Yang 阅读(373) 评论(0) 推荐(2) 编辑
摘要:注意点: 元素类型分为 块级元素 和 行内元素 块级元素: 在网页中以块的形式显示,默认情况都会占据一行,两个相邻的块级元素不会出现并列显示的元素,按照顺序自上而下排列。 块级元素可以定义自己的宽度和长度。 div: dl:与dt、dd搭配使用 form:交互表单 h1-h6:标题 hr:水平线 o 阅读全文
posted @ 2019-05-07 20:19 Tynam.Yang 阅读(396) 评论(0) 推荐(2) 编辑
摘要:注意点: 文本居中: text-align:center;文本左右居中 line-heigh:30px; 等于容器高度时,单行文本上下居中 margin:0 auto; 浏览器居中 清除margin和padding值: 某些元素会自带margin和padding,例如 h1 标签,使用时不方便位置计 阅读全文
posted @ 2019-05-06 19:33 Tynam.Yang 阅读(267) 评论(0) 推荐(1) 编辑
摘要:H5-表单笔记 语法: 表单域 <form name="表单名称" method=“get/post” action=“”></form> 文本框 <input type="text" value="默认值"/> 密码框 <input type="password"/> 提交按钮 <input ty 阅读全文
posted @ 2019-05-05 21:29 Tynam.Yang 阅读(344) 评论(0) 推荐(1) 编辑
摘要:使用html+css+js实现简易计算器, 效果图如下: html代码如下: CSS代码如下: JS代码如下: 阅读全文
posted @ 2018-12-16 21:19 Tynam.Yang 阅读(1331) 评论(0) 推荐(1) 编辑
摘要:给网站头部添加视频海报 结果 阅读全文
posted @ 2018-10-24 22:44 Tynam.Yang 阅读(427) 评论(0) 推荐(0) 编辑
摘要:思路: 花瓣网 1、对页面进行分析 · 2、下载素材 3、对页面尺寸进行分析 4、实现 下载素材 将页面素材保存到本地,方法如下图 页面尺寸进行分析 只做了大概得尺寸,尺寸获取方法,使用截图得方法获取宽和高,注意获取过程中图片得大小不能有变化。将图片最大化后获取尺寸 实现 写一个元素,紧接着就css 阅读全文
posted @ 2018-10-22 21:53 Tynam.Yang 阅读(1328) 评论(1) 推荐(0) 编辑
摘要:三列布局指的是两边两列定宽,中间的宽度自适应。 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位置 结果 浮动方法 让左右两边部分浮动,脱离文档流后对中间部分使用margin来自适应 弹性盒布局 阅读全文
posted @ 2018-10-21 22:04 Tynam.Yang 阅读(2530) 评论(1) 推荐(4) 编辑
摘要:主体 body中常见属性 属性 表格 列表 表单 其他 input字段属性 form字段属性 阅读全文
posted @ 2018-10-18 23:03 Tynam.Yang 阅读(410) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示