【HTML】笔记

本文详细介绍了HTML的各种样式和布局技巧,包括链接伪类、背景图像与颜色、定位方式、表格与表单的处理,以及过渡、动画和媒体查询等。通过实例展示了如何创建滚动字条、设置背景图片、解决IE兼容性问题,以及利用CSS实现响应式设计。
摘要由CSDN通过智能技术生成
a:hover{
		color:red;
		font-size:20px;
	}
链接字体颜色大小
<marquee></marquee>滚动字条
<hr> 分割线
&nbsp; 空格
<img src=""> 插入图片
<embed src=""> 插入视频
float:left;
padding-right:0.5px;
图片悬浮 与文字间距
title:显示图片名称alt
设置背景颜色,transparent表示透明:{background-color:transparent|color}
插入背景图片:background-image: url(84039d9d4c68de1dab34f6f5c4_560.jpg)
背景图片重复:background-repeat:repeat水平和竖直方向都平铺
                       repeat-x水平平铺    repeat-y竖直平铺  no-repeat不重复平铺
背景图片显示:background-attachment:fixed固定在页面的可见区域里
                       scroll随页面一起滚动
背景图片位置:background-position legth设置图片与边距水平和垂直方向的距离
                       percentage以页面元素框的宽度或者长度的百分比放置图片
                      top,center,bottom,left,right
背景图片大小:background-size:length percentage,cover,contain
边框样式:    border-style:dashed破折线 dotted点线 solid直线 double双线 groove              槽线式 Ridge脊线式 inset内嵌 outset突起效果
                    border-width线宽


超级链接伪类:a:link未被访问时的样式
                         a:hover鼠标悬停时的样式
                         a:active激活时的样式
                         a:visited被访问过的样式
鼠标样式:auto自动   crosshair精确定位十字   default默认鼠标指针
                   hand手形   move移动       help帮助     wait 等待   text文本
                 n-resize箭头朝上双向        s-resize箭头朝下双向
                 w-resize箭头朝左双向        e-resize箭头朝右双向
                 ne-resize右上    se-resize右下     nw-resize左上   sw-resize左下
                 pointer指示  url自定义

*父元素只设置了宽,没有设置高,子元素浮动,使父元素包住子元素的方法
1.父级元素设为inline-block,缺点是margin:0 auto;失效,用text-align:center居中
2.父级元素也浮动,缺点是margin:0 auto失效
3.父级元素设置高
4.设置br标签 <br clear="all"/> 不推荐使用
5.clear:both;父元素后面加<p style="clear:both"></p> 不符合标准
6:父元素:after{content:"";display:block;clear:both;}
*定位的三种特性
相对定位 relative
1.不影响本身特性
2.不使元素脱离文档流
3.提升层级
4.无法触发bfc
5.针对自己本身进行定位
绝对定位 absolute
1.会是元素完全脱离文档流
2.内容撑开宽度和高度
3.使元素支持所有CSS样式
4.提升层级
z-index:数值 定位层级设置 数字越大层级越高
5.绝对定位要和相对定位配合使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值