HTML
关注
分享
扫一扫
小佬呀
这个作者很懒，什么都没留下…
展开
-
HTML、CSS入门笔记
一、html基础1．HTML概念（1）超文本标记语言 hyper text markup language2．HTML语法（1）<标记 属性=“属性值”></标记>3．HTML标签（1）块级元素 Div,p,table,h1,h2,h3,h5,h4,h6,ul>li,ol>li,dl>dt+dd,form,option,body,ht...原创 2019-07-19 19:56:38 · 223 阅读 · 0 评论 -
纯CSS实现手风琴效果
先看一下效果图吧初始状态：当鼠标滑过时，滑过的一栏会展开：**大体思路：**首先设置初始的样式，让后当鼠标滑过任一栏目时，先将所有的栏目的宽度设置为30px，且字体大小为0（让文字不显示）；当滑过某一栏目时，将该栏的宽度设置为510px，字体显示出来，然后用overflow-y: scroll;显示滚动条。注意：这个样式的设置对每个栏目宽度计算有要求，如果宽度计算不当会出现闪屏；本...原创 2019-07-22 20:22:23 · 640 阅读 · 0 评论 -
CSS案例2：用定位是实现三级导航
效果图主要用到了css定位技术，根据“子绝父相”的原则position:relative;position:absolute;本代码中一级导航的相对定位：.one >li{position:relative;}二级导航相对于一级导航是绝对定位：.two{display: none;position: absolute;width: 100%;}三级导航的...原创 2019-07-22 20:37:01 · 410 阅读 · 0 评论 -
CSS小案例3：鼠标滑过时给每个图片添加背景图 / 图片的垂直居中
首先要让图片在每个div里垂直居中显示，有很多种方法，我这里用的是将div的属性值转为table-cell，这样使用text_align和vertical_align就可以实现图片的垂直居中。效果图代码：<!DOCTYPE html><html><head> <title></title> <style type="...原创 2019-07-22 20:48:47 · 255 阅读 · 0 评论 -
CSS实现电子相册小案例5
效果图利用 <a href="#p1"><img src="img1/c1.jpg"></a>锚点实现电子相册代码：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box{ w...原创 2019-07-22 21:38:31 · 963 阅读 · 0 评论 -
CSS小案例4：用定位实现图片在原位置的居中放大显示
当鼠标滑上去，给滑到的图片做相对定位，向左移动图片初始宽度一半的大小，向上移动初始图片宽度一半的大小demo：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding:0...原创 2019-07-22 21:46:10 · 1909 阅读 · 0 评论 -
CSS小案例5：实现导航栏在鼠标滑上去时导航栏的字由英文变为中文的特效
在每个导航栏里放置两个标签，分别存放中文和英文<li><a href="#"><span>首页</span><i>index</i></a></li>初始状态英文显示，将span的属性设为display：none，即中文不显示；鼠标滑过时，将span设置display：inline； 将中文...原创 2019-07-22 22:00:51 · 751 阅读 · 0 评论 -
CSS小案例6：实现导航栏鼠标滑过时的小特效
用盒子的负外边距实现导航高度增加的效果 .nav2 li:hover{ height: 40px; border-color: #666; background-color: #fff;/*40-4正好是li之前的高度35+1=36*/ margin-top: -4px; }demo：...原创 2019-07-22 22:09:04 · 1257 阅读 · 0 评论