html+css
文章平均质量分 51
erdouzhang
这个作者很懒,什么都没留下…
展开
-
鼠标放上显示边框
如下图所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2017-03-06 09:04:12 · 979 阅读 · 0 评论 -
form表单写法
<form> <fieldset style="border:none"> <legend style="display:none">登录表单</legend> <p><label for="name">账号: </label><input type="text" id="name" /></p> <p><label for="pw">密码:原创 2017-03-23 13:34:12 · 10773 阅读 · 0 评论 -
定位position
1.相对定位relative仍处于标准文档流中 相对于原来位置进行偏移2.绝对定位absolute1.完全脱离标准文档流 2.不会对它的兄弟造成影响 3.当一个元素设置绝对定位,没有宽度时,元素的宽度会根据内容进行自动调节 4.如果父级没有定位,就以定位 5.如果父级有定位,就找最近的父级进行定位原创 2017-03-28 16:08:06 · 312 阅读 · 0 评论 -
Table表格
普通表格 <table border="1" cellpadding="10" cellspacing="0"><caption>学生统计表</caption> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr> <td>张三</td> <td>18</td> <td>男</td原创 2017-04-18 11:23:05 · 329 阅读 · 0 评论 -
CSS基础3-文本属性、伪类、伪元素
文本属性 功能 属性名 描述 缩进文本 text-indent 设置行的缩进大小,值可以为正值或负值,单位可以用em、px或百分比(%) 水平对齐 text-align 取值left、right、center、justify(两端对齐,如下图2) 垂直对齐 vertical-align 设置文本的垂直对齐方式,取值bottom、top、middle、ba原创 2017-04-20 11:05:29 · 428 阅读 · 0 评论 -
javascript实现一段文字展开、收起(默认收起)
在线演示html:<div id="content"> 2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌原创 2017-05-02 23:35:23 · 42492 阅读 · 4 评论 -
javascript实现一段文字展开、收起(默认展开)
上一篇已经介绍文字默认收起,这篇介绍javascript实现一段文字展开、收起(默认展开)在线演示html:<div id="div1"> 2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端原创 2017-05-03 09:48:25 · 10137 阅读 · 2 评论 -
页面背景固定
在线演示html:<body> <h1>Woman</h1> <p>Every woman is ... You are worth it! </p></body>css:body { background: url(images/08.jpg) no-repeat 50% 0 #B94547;/*#B94547给背景添加颜色*/ margin: 10% 20%;原创 2017-05-10 20:06:45 · 286 阅读 · 0 评论 -
Table表格布局
建文件夹 index.html结构 css样式 效果图原创 2017-02-07 13:16:17 · 413 阅读 · 0 评论 -
css基础2-标准文档流、透明度、禁止拖动textarea、去掉input外边框、图片默认边框
padding区域有背景颜色。给一个盒子添加背景颜色时,padding区域也有背景颜色,也就是说background-color: red;将填充所有border以内的区域。border边框border: 1px solid #eee;/*综合写法*/border-width: 10px 20px 30px 40px;/*边框粗细 上 右 下 左*/border-style: sol原创 2017-04-01 20:36:12 · 773 阅读 · 0 评论 -
html基础
h1~h6标签是标题p标签是段落,里面只能放文本、图片、表单元素(这三个都是流元素:流元素就是一行放不下,会转到第二行放)img标签,alt=”替代文本,当图片不能显示的时候显示这里的文字”a标签,title=”悬停文本” target=”_blank”打新页面 页面内锚点: href=”要跳转的锚点的id值”直接跳转到id值为某某的位置。ul无序列表,去掉前面圆点,给ul添加 list原创 2017-03-31 11:16:20 · 357 阅读 · 0 评论 -
文本显示省略号(单行文本+多行文本)
1.单行文本下面这三个一定要一起使用才能实现效果。另外要给盒子加宽度才能有超出部分。white-space: nowrap; /*强制文本在一行内显示*/overflow: hidden; /*超出部分隐藏*/text-overflow: ellipsis; /*文本溢出时显示省略标记*/具体实现如下:CSS样式: <style> p { display: inline-b原创 2017-03-06 09:53:28 · 2902 阅读 · 0 评论 -
盒子垂直居中
在线展示 让一个盒子在页面中垂直居中显示。html:<body> <div class="box"></div></body>css:<style> * { padding: 0; margin: 0; } .box { width: 200px; height: 200px; backgr原创 2017-03-22 11:44:34 · 525 阅读 · 0 评论 -
美化复选框(给复选框添加样式)
在线演示 本地代码下载复选框的背景颜色都是可以更改,具体参考css样式来更改。html:<input type="checkbox" id="awesome" autofocus /><!--自动获得焦点 --><label for="awesome">Awesome!</label><br /><input type="checkbox" id="awesome2" checked />原创 2017-03-17 09:47:44 · 1700 阅读 · 0 评论 -
CSS代码初始化
淘宝官网样式初始化:body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, te原创 2017-03-06 11:37:12 · 293 阅读 · 0 评论 -
网格
CSS样式:<style> * { padding: 0; margin: 0; } .box { width: 190px; } .box ul { margin-left: -1px;/*右移1px*/ width: 192px;/*ul的宽要比外面盒子的宽190px还要宽2px即为192px(li宽47*4)原创 2017-03-06 13:21:27 · 298 阅读 · 0 评论 -
遮罩 + 登陆框垂直居中显示
在线演示点击注册、登录按钮时时显示灰色透明遮罩和登陆弹出框。弹出框居中显示在body下面写遮罩(和header、footer等并齐)。HTML代码:<!-- 遮罩 --><div id="mask"></div><div id="login"> <div class="login">登陆框</div> <span id="close">×</span></div>CSS样式:<styl原创 2017-03-06 16:45:16 · 1197 阅读 · 0 评论 -
鼠标放上显示图片
在线展示鼠标放上显示图片html:<body> <div class="box"> <a href="#"> <span>二维码</span> <img src="img/二维码.jpg" alt="扫一扫"> </a> </div></body>css:<style> .box a { text-decoration: no原创 2017-03-22 11:27:27 · 1846 阅读 · 0 评论 -
select显示form表单提示文字
在做form表单下拉框时的提示性文字。html:<select> <option value="1" style="color: #b6b6b6" disabled selected>请选择水果</option> <option value="2">苹果</option> <option value="3">香蕉</option> <option value="4">橘子</opti原创 2017-03-23 13:16:56 · 10484 阅读 · 0 评论 -
css基础1-下划线、文本阴影、选择器、继承性、层叠性(数权重)
html是超文本标记语言 从语义的角度描述页面结构css是层叠样式表 从审美角度负责页面样式js javascript 从交互的角度你描述页面的行为normal是正常的意思,不加粗,不倾斜font-weight: normal;font-style: normal;/*快捷键fsn*/下划线text-decoration: underline;/*添加下划线 快捷键t原创 2017-04-01 08:38:08 · 821 阅读 · 0 评论 -
css制作实心三角形
我们来一步一步实现三角形html:<div id="box"></div>css: #box { width: 100px; height: 100px; border: 30px solid pink; border-top-color: red; }css: #box { width: 30px; heigh原创 2017-04-01 09:20:42 · 1214 阅读 · 0 评论 -
关于浮动与清除浮动
父亲:粉色div盒子 儿子1:紫色box1 儿子2:橙色box21.不浮动html:<div class="box"> <div class="box1">BOX1</div> <div class="box2">BOX2</div></div>css:<style> .box { width: 600px; background-color:原创 2017-03-24 11:42:28 · 335 阅读 · 0 评论 -
布局、浮动、塌陷现象
1.关于布局分大块区域几大块内容,一行为一大块内容。比如topbar、nav、header、slider、ad、main、footer等大块区域。 margin-bottom大块区域的真实区域,版心部分。 width,版心宽 (可直接单独写一个类,每次用时直接引用类名) margin: 0 auto; (使用margin:0 auto;时必须有明确的宽度) overflow: hidde原创 2017-03-06 18:37:27 · 876 阅读 · 0 评论 -
带效果的移动导航条
本地在线演示,源码在线演示 本地源代码下载:http://download.csdn.net/detail/erdouzhang/9783696 移动导航源代码下载:http://download.csdn.net/detail/erdouzhang/97836941.引入文件: <link rel="stylesheet" href="css/component.css"> <link原创 2017-03-16 19:03:49 · 462 阅读 · 0 评论 -
纯css实现开关按钮(滑块)
在线展示开关按钮 本地下载代码 在线编辑html:<div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="m原创 2017-03-17 09:15:09 · 9532 阅读 · 0 评论